Build and Deploy a Responsive Portfolio Website Using HTML and CSS with Light Dark Mode

Learn to build and deploy a complete responsive portfolio website from scratch using HTML, CSS, and JavaScript with an integrated light-dark mode toggle feature. Master essential web development concepts including CSS variables, Grid system, transitions, keyframes, and animations while creating a fully functional website without relying on external libraries. Develop skills in creating floating navigation, implementing fade-in and fade-up animations, designing responsive layouts with media queries, and adding interactive JavaScript functionality for navigation states. Build key portfolio sections including header, about, approach/process, recent projects, testimonials, contact, and footer components. Gain hands-on experience with modern CSS techniques, responsive design principles, and deployment processes while creating a professional portfolio website that adapts seamlessly across different devices and screen sizes.

Syllabus

00:00 Intro Project Demo
08:37 Hostinger
12:24 Project Folder Structure
17:40 Floating Navigation
23:40 General CSS Styles & CSS Variables
41:15 Floating Nav CSS
48:35 Main Header
1:08:10 Fade-in & Fade-up Keyframes and animations
1:14:40 Light-Dark Theme
1:26:50 About Section
1:35:35 Approach/Process Section
1:45:30 Recent Projects Section
1:58:30 Testimonials Section
2:14:40 Contact Section
2:28:45 Footer
2:35:40 Active Nav Item with JavaScript
2:39:10 Responsive Design with CSS Media Queries