How to Create a Portfolio Website using HTML CSS and JavaScript ?
In this article, we are going to design and build a portfolio website from scratch using HTML, CSS, and JavaScript. A portfolio website is a website that represents you online on the web pages. It contains different sections like Introduction to Yourself, About You, Your Services, Your Contact Details, and Your Portfolio. We are going to build all of the sections with an interactive and attractive web design that attracts more visitors using HTML, CSS, and JavaScript.
Preview Image:
Approach:
The below defined steps can be utilised to build and design a portfolio website:
- In the first step, we will create a folder with the project name and create the HTML, CSS, JavaScript files, Images folder and a separate file for the responsive CSS if required.
- Now, use the different HTML tags like section, header, nav, meta, title, head, div, input, img etc to structure the web page.
- Style the different components and the elements of HTML responsively to make the page attractive for every device using CSS.
- Make use of the media queries to define the responsive styles and to adjust the width of the containers.
- Use JavaScript to toggle the on click to the hamburger menu for small width devices to navigate through the page.
Example: The below example will explain you how to design and build a portfolio website using HTML, CSS, and JavaScript responsively for every device:
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >My Portfolio</ title > < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity = "sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin = "anonymous" referrerpolicy = "no-referrer" /> < link rel = "stylesheet" href = "style.css" > < link rel = "stylesheet" href = "responsive.css" > </ head > < body > <!-- Navbar header section --> < header class = "header" > < nav class = "navbar" > < div class = "logo" > < h2 class = "logo-heading" >Emrit Diyal</ h2 > </ div > < div class = "hamburger" id = "hamburger" > < i class = "fas fa-bars hamburger-icon" ></ i > < i class = "fas fa-times cross-icon" ></ i > </ div > < div class = "menu" > < ul class = "menu-list" > < li class = "menu-list-items" > < a class = "links" href = "#home" > Home </ a > </ li > < li class = "menu-list-items" > < a class = "links" href = "#portfolio" > Portfolio </ a > </ li > < li class = "menu-list-items" > < a class = "links" href = "#about" > About </ a > </ li > < li class = "menu-list-items" > < a class = "links" href = "#services" > Services </ a > </ li > < li class = "menu-list-items" > < a class = "links" href = "#contact" > Contact Me </ a > </ li > </ ul > </ div > </ nav > </ header > <!-- Main hero banner --> < section id = "home" class = "hero" > < div class = "intro" > < div class = "headings" > < h3 class = "greet-heading" >Hello, I'm</ h3 > < h1 class = "my-heading" >Emrit Diyal</ h1 > < h4 class = "sub-heading" > A Software Engineer with 3 years of Experience. </ h4 > </ div > < div class = "intro-buttons" > < button class = "btn common-btn" >Hire Me</ button > < button class = "btn ghost-btn" >Get Resume</ button > </ div > </ div > </ section > <!-- Portfolio Section --> < section class = "portfolio" id = "portfolio" > < div class = "portfolio-heading" > < h1 class = "my-heading text-center" >Featured Portfolio</ h1 > </ div > < div class = "portfolio-content" > < div class = "my-row" > < div class = "my-col" > < div class = "my-card port-card" > < div class = "image" > < img src = "./Images/designImage2.avif" alt = "Web Design Image" > </ div > < h3 class = "greet-heading blue-text" >Web Design</ h3 > < p class = "small-para blue-text" >Designing</ p > </ div > </ div > < div class = "my-col" > < div class = "my-card port-card" > < div class = "image" > < img src = "./Images/webDevelopment2.avif" alt = "Web Development Image" > </ div > < h3 class = "greet-heading blue-text" > Web Development </ h3 > < p class = "small-para blue-text" >Development</ p > </ div > </ div > < div class = "my-col" > < div class = "my-card port-card" > < div class = "image" > < img src = "./Images/SEOImage2.avif" alt = "SEO Image" > </ div > < h3 class = "greet-heading blue-text" >SEO</ h3 > < p class = "small-para blue-text" >Optimization</ p > </ div > </ div > </ div > < div class = "my-row" > < div class = "my-col" > < div class = "my-card port-card" > < div class = "image" > < img src = "./Images/contentImage2.avif" alt = "Content Writting Image" > </ div > < h3 class = "greet-heading blue-text" > Content Writing </ h3 > < p class = "small-para blue-text" >Writing</ p > </ div > </ div > < div class = "my-col" > < div class = "my-card port-card" > < div class = "image" > < img src = "./Images/wordpressImage2.avif" alt = "Wordpress Image" > </ div > < h3 class = "greet-heading blue-text" > WordPress Dev </ h3 > < p class = "small-para blue-text" > Content Management System </ p > </ div > </ div > < div class = "my-col" > < div class = "my-card port-card" > < div class = "image" > < img src = "./Images/videoEditing2.avif" alt = "Video Editing Image" > </ div > < h3 class = "greet-heading blue-text" > Video Editing </ h3 > < p class = "small-para blue-text" >Editing</ p > </ div > </ div > </ div > </ div > </ section > <!-- About Section --> < section id = "about" class = "about" > < div class = "about-text" > < h1 class = "my-heading" >About Me</ h1 > < p class = "lead-para" > w3wiki is a leading platform that provides computer science resources and coding challenges for programmers and technology enthusiasts, along with interview and exam preparations for upcoming aspirants. With a strong emphasis on enhancing coding skills and knowledge, it has become a trusted destination for over 12 million plus registered users worldwide. The platform offers a vast collection of tutorials, practice problems, interview tutorials, articles, and courses, covering various domains of computer science. </ p > < p > Our exceptional mentors hailing from top colleges & organizations have the ability to guide you on a journey from the humble beginnings of coding to the pinnacle of expertise. Under their guidance watch your skills flourish as we lay the foundation and help you conquer the world of coding. </ p > </ div > < div class = "about-image" > < img src = "./Images/heroImg2.avif" alt = "About Image" > </ div > </ section > <!-- Services Section --> < section class = "services" id = "services" > < div class = "services-heading" > < h1 class = "my-heading text-center" >My Services</ h1 > </ div > < div class = "services-content" > < div class = "my-row" > < div class = "my-col" > < div class = "my-card" > < div class = "icon" > < i class = "fas fa-paint-brush" ></ i > </ div > < h3 class = "greet-heading blue-text" >Web Design</ h3 > < p class = "small-para" > Web development refers to the creating, building, and maintaining of websites. It includes aspects such as web design, web publishing, web programming, and database management. It is the creation of an application that works over the internet i.e. websites. </ p > < p class = "small-para" > Web development refers to the creating, building, and maintaining of websites. It includes aspects such as web design, web publishing, web programming, and database management. It is the creation of an application that works over the internet i.e. websites. </ p > </ div > </ div > < div class = "my-col" > < div class = "my-card" > < div class = "icon" > < i class = "fa-solid fa-code" ></ i > </ div > < h3 class = "greet-heading blue-text" > Web Development </ h3 > < p class = "small-para" > Web development refers to the creating, building, and maintaining of websites. It includes aspects such as web design, web publishing, web programming, and database management. It is the creation of an application that works over the internet i.e. websites. </ p > < p class = "small-para" > Web development refers to the creating, building, and maintaining of websites. It includes aspects such as web design, web publishing, web programming, and database management. It is the creation of an application that works over the internet i.e. websites. </ p > </ div > </ div > < div class = "my-col" > < div class = "my-card" > < div class = "icon" > < i class = "fas fa-chart-line" ></ i > </ div > < h3 class = "greet-heading blue-text" >SEO</ h3 > < p class = "small-para" > Web development refers to the creating, building, and maintaining of websites. It includes aspects such as web design, web publishing, web programming, and database management. It is the creation of an application that works over the internet i.e. websites. </ p > < p class = "small-para" > Web development refers to the creating, building, and maintaining of websites. It includes aspects such as web design, web publishing, web programming, and database management. It is the creation of an application that works over the internet i.e. websites. </ p > </ div > </ div > </ div > < div class = "my-row" > < div class = "my-col" > < div class = "my-card" > < div class = "icon" > < i class = "fas fa-quote-left" ></ i > </ div > < h3 class = "greet-heading blue-text" > Content Writting </ h3 > < p class = "small-para" > Web development refers to the creating, building, and maintaining of websites. It includes aspects such as web design, web publishing, web programming, and database management. It is the creation of an application that works over the internet i.e. websites. </ p > < p class = "small-para" > Web development refers to the creating, building, and maintaining of websites. It includes aspects such as web design, web publishing, web programming, and database management. It is the creation of an application that works over the internet i.e. websites. </ p > </ div > </ div > < div class = "my-col" > < div class = "my-card" > < div class = "icon" > < i class = "fab fa-wordpress-simple" ></ i > </ div > < h3 class = "greet-heading blue-text" > WordPress Dev </ h3 > < p class = "small-para" > Web development refers to the creating, building, and maintaining of websites. It includes aspects such as web design, web publishing, web programming, and database management. It is the creation of an application that works over the internet i.e. websites. </ p > < p class = "small-para" > Web development refers to the creating, building, and maintaining of websites. It includes aspects such as web design, web publishing, web programming, and database management. It is the creation of an application that works over the internet i.e. websites. </ p > </ div > </ div > < div class = "my-col" > < div class = "my-card" > < div class = "icon" > < i class = "fas fa-video" ></ i > </ div > < h3 class = "greet-heading blue-text" > Video Editing </ h3 > < p class = "small-para" > Web development refers to the creating, building, and maintaining of websites. It includes aspects such as web design, web publishing, web programming, and database management. It is the creation of an application that works over the internet i.e. websites. </ p > < p class = "small-para" > Web development refers to the creating, building, and maintaining of websites. It includes aspects such as web design, web publishing, web programming, and database management. It is the creation of an application that works over the internet i.e. websites. </ p > </ div > </ div > </ div > </ div > </ section > <!-- Contact me section --> < section class = "contact" id = "contact" > < div class = "contact-heading" > < h1 class = "my-heading text-center" >Contact Me</ h1 > </ div > < div class = "contact-content" > < div class = "contact-form-container" > < h1 class = "greet-heading" >Get In Touch</ h1 > < form class = "contact-form" > < input class = "form-controls" type = "text" placeholder = "Your Name" > < input class = "form-controls" type = "text" placeholder = "Your Email" > < input class = "form-controls" type = "text" placeholder = "Your Phone" > < textarea class = "form-controls" placeholder = "Write your message" name = "message" id = "" cols = "30" rows = "10" > </ textarea > < input class = "form-btn btn common-btn" type = "submit" value = "Send Message" > </ form > </ div > < div class = "contact-details" > < h1 class = "greet-heading" >My Contact Details</ h1 > < div class = "details" > < h5 class = "contact-heading" >EMAIL</ h5 > < p class = "contact-text" >example@gmail.com</ p > </ div > < div class = "details" > < h5 class = "contact-heading" >PHONE</ h5 > < p class = "contact-text" >+91 0123456789</ p > </ div > < div class = "details" > < h5 class = "contact-heading" >FAX</ h5 > < p class = "contact-text" >+91 0123456789</ p > </ div > < div class = "details" > < h5 class = "contact-heading" >ADDRESS</ h5 > < p class = "contact-text" >San Francisco, CA</ p > < p >4th Floor8 Lower</ p > < p >San Francisco street, M1 50F</ p > </ div > </ div > </ div > </ section > <!-- Footer section --> < footer class = "footer" > < div class = "footer-content text-center" > < h4 > Copyright © 2023 All rights reserved | This portfolio website template is created by w3wiki. </ h4 > < div class = "social-links" > < div class = "footer-menu" > < ul class = "footer-menu-list" > < li class = "footer-list-items" > < a class = "footer-links" href = "#" > < i class = "fab fa-facebook-f" ></ i > </ a > </ li > < li class = "footer-list-items" > < a class = "footer-links" href = "#" > < i class = "fab fa-twitter" ></ i > </ a > </ li > < li class = "footer-list-items" > < a class = "footer-links" href = "#" > < i class = "fab fa-instagram" ></ i > </ a > </ li > < li class = "footer-list-items" > < a class = "footer-links" href = "#" > < i class = "fab fa-linkedin-in" ></ i > </ a > </ li > </ ul > </ div > </ div > </ div > </ footer > < script src = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js" integrity = "sha512-uKQ39gEGiyUJl4AI6L+ekBdGKpGw4xJ55+xyJG7YFlJokPNYegn9KwQ3P8A7aFQAUtUsAQHep+d/lrGqrbPIDQ==" crossorigin = "anonymous" referrerpolicy = "no-referrer" > </ script > < script src = "script.js" ></ script > </ body > </ html > |
CSS
/* Styles defined for the desktop or the bigger screen devices*/ @import url ( 'https://fonts.googleapis.com/css2?family=Poppins&display=swap' ); body { margin : 0 ; padding : 0 ; box-sizing: border-box; font-family : 'Poppins' , sans-serif ; } /* Header Navbar Styles */ .navbar { display : flex; align-items: center ; justify- content : space-between; position : fixed ; top : 0 ; width : 100% ; background-image : linear-gradient( 90 deg, #74D7BB , #53C8B6 , #35A99C ); background-color : transparent ; } .logo { padding : 0 5 rem; } .logo .logo-heading { color : #fff ; } .menu { padding : 0 5 rem; } .hamburger { display : none ; color : #fff ; font-size : 25px ; } .cross- icon { display : none ; } .menu .menu-list { display : flex; list-style : none ; } .menu-list .menu-list-items { padding : 0.5 rem 1 rem; } @media screen and ( min-width : 856px ) and ( max-width : 1024px ) { .menu-list .menu-list-items { padding : 0.5 rem 0.3 rem; } } /* Main Hero Section Styles */ .hero { background-image : url ( './Images/heroImg3.avif' ); background-repeat : no-repeat ; background- size : 100% 100% ; width : 100% ; height : 100 vh; display : flex; align-items: center ; justify- content : start; margin : 4.8 rem 0 ; } .hero .intro { text-align : center ; margin : 0 5 rem; } .hero .intro-buttons { margin : 2 rem 0 ; display : flex; align-items: center ; justify- content : space-evenly; } /* About section styles */ .about { display : flex; align-items: center ; background-image : linear-gradient( 45 deg, #363D73 , #2794B3 ); justify- content : space-between; width : 100% ; } .about .about-text { width : 450px ; color : #fff ; padding : 5 rem 1 rem 5 rem 5 rem; } .about .about-image img { height : 400px ; width : 450px ; padding : 5 rem 5 rem 5 rem 1 rem; } /* Portfolio section styles */ .portfolio { margin : 4.8 rem 0 ; padding : 0 5 rem; } .port-card { padding : 0 !important ; background : none !important ; border : 2px solid #000 ; } .port-card .image { width : 100% ; } .port-card .image img { height : 200px ; width : 100% ; border-top-right-radius: 20px ; border-top-left-radius: 20px ; } /* Services section styles */ .services { display : flex; align-items: center ; justify- content : center ; flex- direction : column; margin : 4.8 rem 0 ; padding : 0 5 rem; } .my-row { display : flex; align-items: center ; justify- content : space-between; margin : 2 rem 0 ; } .my-row .my-col { text-align : center ; width : 30% ; } .my-card { text-align : center ; display : flex; flex- direction : column; align-items: center ; justify- content : center ; border-radius: 20px ; background-image : linear-gradient( #74D7BB , #53C8B6 , #35A99C ); padding : 1 rem; } . icon { height : 100px ; width : 100px ; border-radius: 50% ; background-color : #363D73 ; display : flex; align-items: center ; justify- content : center ; } . icon svg { font-size : 30px ; color : #fff ; } /* Contact section styles */ .contact { padding : 0 5 rem; } .contact-content { display : flex; margin : 3 rem 0 ; justify- content : space-between; } .contact-form-container { width : 50% ; } .contact-form { display : flex; flex- direction : column; } .contact-form .form-controls { width : 80% ; padding : 10px 0 ; margin : 1.67 rem 0 ; } .contact-form .form-btn { width : 83% ; } .contact-details { width : 50% ; } /* Footer Styles */ .footer { background-color : #000 ; color : #fff ; padding : 2 rem; } .footer-list-items { display : flex; align-items: center ; justify- content : center ; height : 50px ; width : 50px ; margin : 1 rem 1 rem 0 1 rem; border-radius: 50% ; background-color : #53C8B6 ; } .footer-links { font-size : 24px ; color : #fff ; text-decoration : none ; } .social-links { display : flex; align-items: center ; justify- content : center ; } .footer-menu { padding : 0 5 rem; } .footer-menu .footer-menu-list { display : flex; list-style : none ; } /* utility classes */ .greet-heading { font-size : 1.3 rem; font-weight : lighter ; margin : 0 ; letter-spacing : 1px ; } .my-heading { font-size : 2.5 rem; margin : 0 ; } .sub-heading { margin : 0 ; font-size : 0.8 rem; color : #ccc ; font-weight : lighter ; } .links:hover { border-bottom : 2px solid #fff ; } .links { border-bottom : 2px solid transparent ; transition: all 0.25 s; padding : 5px ; text-decoration : none ; color : #fff ; } .btn { padding : 10px 20px ; border-radius: 5px ; cursor : pointer ; letter-spacing : 1px ; border : none ; } .common-btn { background-color : #35A99C ; color : #fff ; border : 2px solid #35A99C ; transition: all 0.25 s; } .common-btn:hover { background-color : #fff ; color : #35A99C ; border : 2px solid #35A99C ; outline : none ; } .ghost-btn { background-color : #fff ; color : #35A99C ; border : 2px solid #35A99C ; outline : none ; } .ghost-btn:hover { background-color : #35A99C ; color : #fff ; transition: all 0.25 s; border : 2px solid #35A99C ; } .heading-span { font-weight : bolder ; } .text- center { text-align : center ; } .small-para { font-size : 14px ; color : #fff ; } .white-text { color : #fff ; } .blue-text { color : #363D73 ; } |
CSS
/* Responsive CSS file styles defined for smaller width devices */ /* CSS for tablet devices */ @media screen and ( min-width : 576px ) and ( max-width : 820px ) { .logo { padding : 0 3 rem; } .hamburger { display : block ; padding : 0 3 rem; } .menu { position : absolute ; right : 0 ; padding : 0 3 rem; top : 75px ; background-image : linear-gradient( 180 deg, #74D7BB , #53C8B6 , #35A99C ); display : none ; transition: all 0.25 s; } .menu .menu-list { flex- direction : column; } .portfolio { padding : 0 ; } .about { flex- direction : column; } .about .about-text { padding : 2 rem; } .about .about-image img { padding : 2 rem; } .services { padding : 0 ; } .my-row { gap: 10px ; } .my-row .my-col { text-align : center ; width : 35% ; } } /* CSS for mobile devices */ @media screen and ( min-width : 280px ) and ( max-width : 576px ) { .hero { justify- content : center ; color : #fff ; background-image : radial-gradient( circle , rgb ( 15 14 14 / 30% ), rgb ( 102 96 96 / 40% ), rgb ( 163 160 160 / 16% )), url ( './Images/heroImg3.avif' ) } .sub-heading { color : #fff9f9 cc; } .hero .intro-buttons { gap: 20px ; } .btn { padding : 10px 30px ; } .logo { padding : 0 2 rem; } .menu { position : absolute ; right : 0 ; padding : 0 2 rem; top : 75px ; background-image : linear-gradient( 180 deg, #35A99C , #53C8B6 , #74D7BB ); display : none ; transition: all 0.25 s; } .menu .menu-list { flex- direction : column; } .hamburger { display : block ; padding : 0 2 rem; } .portfolio { padding : 0 ; } .about { flex- direction : column; } .about .about-text { width : 90% ; padding : 1 rem; } .about .about-image img { width : 90% ; padding : 1 rem; } .services { padding : 0 ; } .my-row { display : flex; align-items: center ; justify- content : space-between; flex- direction : column; margin : 2 rem 0 ; gap: 1 rem; } .my-row .my-col { text-align : center ; width : 100% ; } .contact { padding : 0 ; } .contact-content { flex- direction : column; align-items: center ; gap: 2 rem; } .contact-form-container { width : 80% ; } .contact-form .form-controls { width : 100% ; } .contact-form .form-btn { width : 100% ; } .contact-details { width : 80% ; } .footer-menu { padding : 0 2 rem; } .footer-list-items { margin : 0 ; } } |
Javascript
const hamburger = document.getElementById( 'hamburger' ); const menu = document.querySelector( '.menu' ); hamburger.addEventListener( 'click' , function () { const hamIcon = this .querySelector( '.hamburger-icon' ); const crossIcon = this .querySelector( '.cross-icon' ); if (hamIcon.style.display === "none" ) { hamIcon.style.display = "inline-block" menu.style.display = "none" crossIcon.style.display = "none" } else { crossIcon.style.display = "inline-block" hamIcon.style.display = "none" menu.style.display = "block" } }); |
Output:
Contact Us