Front End Development

1.
Initial Frontend Code:
o Use HTML, CSS, JavaScript, or other relevant technologies.
o Submit code files in a zipped folder or through a shared link to a code repository
(e.g., GitHub, GitLab).
2. File Naming Convention:
o Name files appropriately, such

as FirstName_LastName_Frontend.zip or FirstName_LastName_ProjectTitle.
3. Key Points to Remember:
o Code Quality: Ensure the code is well-organized, properly commented, and follows
best practices.
o Functionality: The frontend should display the basic layout and user interface
components.
o Documentation: Include a README file explaining the structure of the frontend

code, any libraries used, and instructions for running it.
o Innovation and Creativity: Encourage innovative and creative design.
o Testing: Perform basic testing to avoid major bugs or issues.
1. Planning and Design
 Define Your Goals: Determine what you want to showcase (e.g., projects, skills, contact
information).
 Wireframe: Sketch a basic layout of your website. Tools like Figma or Adobe XD can be
helpful.
 Design: Choose a color scheme, typography, and overall style that reflects your personal
brand.
2. Setting Up Your Project
 Create a Project Folder: Organize your files with folders for HTML, CSS, JavaScript, and assets
(images, fonts, etc.).
 Initialize a Git Repository: Use Git for version control and create a repository on GitHub or
GitLab.
3. Building the Structure with HTML
 Basic HTML Template:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/

all.min.css">
</head>
<body>
<div class="hero-header">
<div class="wrapper">
<header>
<div class="logo">
<i class="fa-solid fa-a"></i>
<div class="logo-text">UPENDRA</div>
</div>
<nav>
<div class="togglebtn">
<span></span>
<span></span>
<span></span>
</div>
<ul class="navlinks">
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Experince</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</header>
<div class="container">
<div class="hero-pic">
<img src="https://res.cloudinary.com/dv0pi9fda/image/upload/v1720243127/
upendra_cebj6d.jpg" alt="profile pic">
</div>
<div class="hero-text">
<h5>hi I'm<span class="input">frontend developer</span></h5>

<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.10/typed.js"></script>
<script>
/* creating button click show hide navbar */
var togglebtn=document.querySelector(".togglebtn");
var nav=document.querySelector(" .navlinks");
var links=document.querySelector(" .navlinks");
togglebtn.addEventListener("click", function(){
this.classlist.toggle("click");
nav.classlist.toggle("open");
})
var typed=new typed(".input",{
strings:["frontend Developer","photoeditior","web Developer"],
typedpeed:70,
backspeed:55,
loop:true
})
</script>
<h1>UPENDRA</h1>
<p>With skills in HTML, CSS, and JavaScript, you can create structured, styled, and
interactive web
pages.<br> HTML provides the content and structure, CSS handles the visual
presentation, and JavaScript
adds interactivity and dynamic elements.<br>Together, these skills enable you to build
responsive and
engaging websites, validate form inputs, and enhance user experiences.<br>As you
advance, you can
explore web performance, accessibility, and API integration.</p>
<div class="btn-group">
<a href="#" class="btn">Download cv</a>
<a href="#" class="btn">Contact</a>
</div>
<div class="icons">
<a href="https://www.facebook.com/profile.php?id=100052410645250">
<ion-icon name="logo-facebook"></ion-icon>
</a>
<a href="https://www.instagram.com/upendraroyal111/?hl=en">
<ion-icon name="logo-instagram"></ion-icon>
</a>
<a href="https://www.linkedin.com/in/upendra-varadhi-731398284/">
<ion-icon name="logo-linkedin"></ion-icon>
</a>
<script type="module"
src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></

script>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
4. Styling with CSS
 Basic CSS:
CSS
*{
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: poppins,sans-serif;
text-decoration: none;
body{
overflow-x:hidden;
.hero-header{
width: 100%;
height: 100%;
min-height: 100vh;
background: #222;
.wrapper{
width: 1280px;
max-width: 95%;
margin: 0 auto;
padding: 0 20px;
header{
padding: 40px 0 30px;

display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
.logo{
display:inline-flex;
justify-content: center;
.logo i{
height: 45px;
width: 45px;
background-color: #ed0020;
border-radius: 50%;
color: #fff;
font-weight: 700;
font-size: 1.5rem;
padding: 10px;
margin-right: 5px;
cursor: pointer;
text-align: center;
.logo .logo-text{
font-size: 24px;
font-weight: 500;
color: #fff;
nav .togglebtn{
width: 35px;
height: 35px;
position:absolute;
top:45px;
right: 3%;
z-index: 5;
cursor: pointer;
display: none;
nav .toggelbtn{
display: block;
background-color: #ed0004;
margin:5px 0px;
width: 100%;
height: 3px;
transition: 0.3s;
transition-property: transform, opacity;
nav .navklinks{
list-style-type: none;
nav .navlinks li{
display:inline-block;
nav .navlinks li a{
color:#e5e5e5;
margin-right: 2.5rem;
.container {
display: flex;
justify-content: space-around;
padding: 4rem;
.container .hero-pic{
width:300px;
height: 300px;
border-radius: 50%;
overflow: hidden;
border:15px solid #444;
box-shadow: 5px 7px 25px rgba(0,0,0.5);
.hero-pic img{
height: 100%;
width: 100%;
transition: 0.5s;
.hero-pic img:hover{
transform: scale(1.2);
.hero-text{
max-width: 500px;
display:flex;
flex-direction: column;
.hero-text h5{
color:#e5e5e5;
font-size:16px;
.hero-text h5 span{
color:#007ced;
font-size: 16px;
}
.hero-text h1{
color: #007ced;
font-size: 3rem;
.hero-text p{
color:#e5e5e5;
.btn-group{
margin:45px 0;
.btn-group .btn{
border-color: #d5d5d5;
color: #fff;
background-color: #333;
padding: 12px 25px;
margin: 5px 0;
margin-right: 7px;
border-radius: 30px;
border: 2px solid #e5e5e5;
box-shadow: 0 10px 10px -8px rgb(0 0 0 / 78%);
.btn.active{
border-color: #007ced;
.hero-text .social i{
color:#e5e5e5;
font-size: 18px;
margin-right: 10px;
transition: 0.5s;
}
.hero-text .social i:hover{
color: #007ced;
transform: rotate(360deg);
/* Responsiv design & dispalying navbar for small screen */
@media(max-width:930px)
nav .togglebtn{
display:initial;
/* for toggle button**/
.click {
top:45px;
.click span{
position: absolute;
margin-top: 12px;
.click span:first-child{
transform: rotate(-40deg);
.click span:ntch-child(2)
opacity: 0;
margin:0;
.click span:last-child{
transform: rotate(45deg);
top:0;
}
nav .navlinks{
position: absolute;
top:110px;
right:100%;
bottom: 0;
width: 60%;
height: 100vh;
background-color: #222;
z-index: 3;
box-shadow: 5px 13px 30px rgba(0,0,0,0);
transition: 0.5s;
padding: 25px 0px;
nav .navlinks li{
display:block;
nav .navlinks li a{
display: block;
margin-bottom: 15px;
text-align:center;
nav .navlinks.open{
right: 0;
@media(max-width:768px)
.container{
flex-direction: column;
padding: 2rem;
}
.hero-text{
padding:40px 0px
5. Adding Interactivity with JavaScript
 Basic JavaScript:
JavaScript

<script>
/* creating button click show hide navbar */
var togglebtn=document.querySelector(".togglebtn");
var nav=document.querySelector(" .navlinks");
var links=document.querySelector(" .navlinks");
togglebtn.addEventListener("click", function(){
this.classlist.toggle("click");
nav.classlist.toggle("open");
})
var typed=new typed(".input",{
strings:["frontend Developer","photoeditior","web Developer"],
typedpeed:70,
backspeed:55,
loop:true
})
</script>
6. Testing and Deployment

 Test Your Website: Ensure it works well on different devices and browsers.
 Deploy Your Website: Use platforms like GitHub Pages, Netlify, or Vercel to host your
portfolio.
7. Documentation
 README File: Include a README file in your project explaining the structure, libraries used,
and instructions for running the code.
8. Innovation and Creativity
 Unique Design Elements: Add animations, transitions, or other creative elements to make
your portfolio stand out.

Front End Development

Uploaded by

Copyright:

Available Formats

Front End Development

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Front End Development

Uploaded by

Copyright:

Available Formats

1.

Initial Frontend Code:

o Use HTML, CSS, JavaScript, or other relevant technologies.

2. File Naming Convention:

o Name files appropriately, such

3. Key Points to Remember:

o Documentation: Include a README file explaining the structure of the frontend

o Innovation and Creativity: Encourage innovative and creative design.

o Testing: Perform basic testing to avoid major bugs or issues.

1. Planning and Design

2. Setting Up Your Project

3. Building the Structure with HTML

 Basic HTML Template:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="style.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/

<i class="fa-solid fa-a"></i>

<h5>hi I'm<span class="input">frontend developer</span></h5>

/* creating button click show hide navbar */

var nav=document.querySelector(" .navlinks");

var links=document.querySelector(" .navlinks");

var typed=new typed(".input",{

strings:["frontend Developer","photoeditior","web Developer"],

explore web performance, accessibility, and API integration.</p>

<a href="#" class="btn">Download cv</a>

<a href="#" class="btn">Contact</a>

<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></

4. Styling with CSS

padding: 40px 0 30px;

transition-property: transform, opacity;

nav .navlinks li{

border:15px solid #444;

box-shadow: 5px 7px 25px rgba(0,0,0.5);

padding: 12px 25px;

border: 2px solid #e5e5e5;

box-shadow: 0 10px 10px -8px rgb(0 0 0 / 78%);

.hero-text .social i:hover{

/* Responsiv design & dispalying navbar for small screen */

/* for toggle button**/

box-shadow: 5px 13px 30px rgba(0,0,0,0);

padding: 25px 0px;

nav .navlinks li{

5. Adding Interactivity with JavaScript

/* creating button click show hide navbar */

var nav=document.querySelector(" .navlinks");

var links=document.querySelector(" .navlinks");

var typed=new typed(".input",{

strings:["frontend Developer","photoeditior","web Developer"],

6. Testing and Deployment

8. Innovation and Creativity

You might also like