Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

Responsive Personal Portfolio Website Using HTML, CSS, and JavaScript - Full Tutorial

EGATOR via YouTube

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!
Learn to build a responsive personal portfolio website using HTML, CSS, and JavaScript in this comprehensive tutorial. Master modern web development techniques including BEM naming conventions, CSS variables, animations, grid and flexbox layouts, and responsive design with media queries. Create a fully functional contact form with spam protection, and implement interactive features like a responsive navigation menu and dynamic testimonial generation. Perfect for beginners and intermediate developers looking to enhance their front-end skills and create a professional online presence.

Syllabus

Intro Project Preview
Project Folder/Files Structure
VS Code Extensions
Navbar Markup HTML
Iconscout CDN importation
CSS Variables
Importing Google Fonts
General CSS Styles
Navbar Styles CSS
Header Markup HTML
Header Styles CSS
Companies Markup HTML
Companies Styles CSS
Services Section Markup HTML
Services Section Styles CSS
Portfolio Section Markup HTML
Portfolio Section Styles CSS
Testimonials Section Markup HTML
Testimonials Section Styles CSS
Contact Section Markup HTML
Contact Section Styles CSS
Form Submission with Spam protection using Formspree
Responsive Design CSS Media Queries for Tablets
Responsive Nav Menu open & close Functionality using JavaScript
Responsive Dropdown Menu Animation using CSS Keyframes
Header and other Section Media Queries for Tablets
Responsive Design CSS Media Queries for Mobile Phones using
Nav Dropdown Menu Close Functionality on Nav Item Click using JavaScript
Change Navbar Styles on scroll using JavaScript
Generating Testimonials using JavaScript

Taught by

EGATOR

Reviews

Start your review of Responsive Personal Portfolio Website Using HTML, CSS, and JavaScript - Full Tutorial

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.