Scribd
Upload
27 views

Front End Development

Uploaded by

upendravardhi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
27 views

Front End Development

Uploaded by

upendravardhi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 13

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.

You might also like