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">
<!--- font awesome cdn font icon 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>
<!---typed js js for typing text effect-->
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.10/typed.js"></script>
</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;
align-items: 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;
align-items: center;
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
<!---typed js js for typing text effect-->
<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>
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.
