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
Responsive React Portfolio Website with Theme Customization (FULL COURSE): https://www.udemy.com/course/react-js...
Source Files & Live Demo: https://www.buymeacoffee.com/egator/e...
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.
Become a patron: / egator
Responsive Social Media Website: • Responsive Social Media Website With ...
HTML CSS & JavaScript Website Playlist: • Complete Responsive Personal Portfoli...
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
