Responsive Personal Portfolio Website Using HTML CSS And JavaScript | Full Tutorial

Responsive Personal Portfolio Website Using HTML CSS And JavaScript | Full Tutorial

Hostinger Discount: https://www.hostg.xyz/SH8cs

Source Files & Live Demo: https://www.buymeacoffee.com/egator/e/52569

In this step-by-step tutorial, we're going to Build a Fully Responsive Personal Portfolio Website using HTML, CSS, and JavaScript. Learn how to create responsive websites using modern HTML and CSS syntax and modules. Throughout this video, we will be using Block Element Modifier (BEM) to name our classes, CSS Variables for easy website customization, CSS Animations and Transitions, CSS Grid and Flexbox for easy alignment of elements, CSS units like rem, Viewport Height (vh), Viewport Width (vw), Percentages, and Fractions (fr), Fully Functioning Contact Form with spam protection, and CSS Media Queries to make our website Fully Responsive on Tablets and Mobile Phones.


Responsive Social Media Website: https://www.youtube.com/watch?v=AiFfDjmd0jU

HTML CSS & JavaScript Website Playlist: https://www.youtube.com/watch?v=wX1T5mR_yVc&list=PLfVxbRIcicRHYojr5u_ztTWJwhG78Kaay


Timestamps
00:00:00 Intro (Project Preview)
00:06:37 Project Folder/Files Structure
00:07:40 VS Code Extensions
00:09:10 Navbar Markup (HTML)
00:12:30 Iconscout CDN importation
00:16:36 CSS Variables
00:18:45 Importing Google Fonts
00:20:50 General CSS Styles
00:27:40 Navbar Styles (CSS)
00:32:36 Header Markup (HTML)
00:38:25 Header Styles (CSS)
00:46:00 Companies Markup (HTML)
00:47:50 Companies Styles (CSS)
00:49:20 Services Section Markup (HTML)
00:53:15 Services Section Styles (CSS)
00:59:00 Portfolio Section Markup (HTML)
01:04:50 Portfolio Section Styles (CSS)
01:13:23 Testimonials Section Markup (HTML)
01:17:00 Testimonials Section Styles (CSS)
01:22:25 Contact Section Markup (HTML)
01:26:42 Contact Section Styles (CSS)
01:34:03 Form Submission (with Spam protection) using Formspree
01:38:57 Responsive Design (CSS Media Queries) for Tablets
01:48:21 Responsive Nav Menu (open & close) Functionality using JavaScript
01:53:50 Responsive Dropdown Menu Animation using CSS Keyframes
01:59:53 Header and other Section Media Queries for Tablets
02:08:00 Responsive Design (CSS Media Queries) for Mobile Phones using
02:18:12 Nav Dropdown Menu Close Functionality on Nav Item Click using JavaScript
02:20:48 Change Navbar Styles on scroll using JavaScript
02:24:22 Generating Testimonials using JavaScript


#responsivewebsitedesign #personalportfoliowebsite #htmlcss