Saturday, February 20, 2021

Complete Responsive Personal Portfolio Website - Using HTML, CSS & Vanilla Javascript


Hello everyone! In this video, you are going to learn how to create A Complete Responsive Personal Portfolio Website Using HTML, CSS, and Vanilla Javascript with a sticky navigation bar, responsive navigation menu, back-to-top scroll button, and reveal website elements on scroll using only Vanilla Javascript. Let's see how to design this portfolio website.

First, create the index.html file, style.css file, and script.js file. After you created those files In the index.html file add the responsive meta tag, link the font awesome libraries and the style.css file in between to the <head></head> tags. Then start the HTML part and the CSS part of the home section (main) of the portfolio website. Then the HTML, CSS, and the javascript part of the header section effects on scroll. then complete the HTML and CSS parts of the about section, skills section, services section, work section, contact section, and footer. After complete all of those sections then start the responsive media queries of the website. Follow the video you will so you will understand how to change the styles using media queries for the responsiveness of the website (for the header and the side navigation menu and all the sections). After completing the responsive media queries then you need to create the back-to-top button for the website. First code the HTML part of the back-to-top button in the index.html file then style it on the style.css file. After HTML and CSS parts are complete then start the javascript parts of the scroll event and the click event of the back-to-top button in the script.js file. After completing it the next and last feature of the website is to reveal website elements on scroll. To complete it create a reveal function in the script.js file. then write styles for the reveal class selector and for the reveal active. Finally, add the reveal class to the elements on the index.html file you need to reveal on scroll. Hope this video will be helpful to design an awesome portfolio website.

All the source codes and source files and available to download from here. Use the download button or copy and paste the code from the text editors. My opinion is first try to do it by following the video line by line. It will help you to understand all of it. After that, if your code is wrong or not working use the given source codes to compare with your code. It will help you to understand all of your mistakes.

Source Codes




Download Source Files

We only allow you to publish relevant and respectful comments. Vulgar, hateful, or spam comments will be removed.

Whatsapp Button works on Mobile Device only