Build A Responsive Multipage Education/School Website using HTML CSS & JavaScript Complete Tutorial

Learn how to create a complete responsive multi-page education/school website using HTML, CSS, and javascript. This is a step-by-step beginner web development project tutorial on how to build a modern school or education website using html5, css3, and ES6 javascript.

Source Code, Images & Live Demo: https://www.buymeacoffee.com/egator/e/54058

Become a patron: https://patreon.com/egator

This complete website tutorial will teach you how to make a responsive multipage website from scratch. This website will have a Home page, About page, a Courses page, and a Contact page with a fully functioning Contact Form.

Features:
responsive navbar with an animated menu toggle.
responsive categories section.
responsive courses section.
responsive frequently asked questions section.
responsive testimonials section (testimonials slides).
responsive footer section.
responsive achievements section.
responsive team section.
responsive contact form.


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

Responsive Portfolio Website: https://www.youtube.com/watch?v=38gH1596RnY

Watch More Tutorials: https://www.youtube.com/channel/UCL8l_VxCAN0jOpaLaRAm8sQ/videos



Timestamps:
00:00:00 Intro (Project Preview)
00:08:26 Project Folder and Files Structure
00:10:37 VSCode Extensions (emmet & Preview on web server)
00:11:35 Navbar HTML
00:14:10 Using Iconscout (https://unicons.iconscout.com/release/v2.1.6/css/unicons.css)
00:15:03 Browser Default Styles reset
00:17:38 CSS Root Variables
00:19:13 Importing Google Fonts (montserrat)
00:21:00 General CSS Styles and Classes
00:27:10 Navbar CSS
00:29:56 Header HTML
00:35:25 Header CSS
00:38:12 Categories HTML
00:41:45 Categories CSS
00:49:15 Navbar Styles Change on Scroll using JavaScript
00:52:13 Popular Courses HTML
00:55:45 Popular Courses CSS
00:59:46 FAQs HTML
01:03:05 FAQs CSS
01:08:20 FAQs Toggle using JavaScript
01:12:00 Testimonials HTML
01:15:45 Testimonials CSS
01:20:59 Testimonials Slide using SwiperJS (https://swiperjs.com)
01:27:10 Footer HTML
01:29:05 Footer CSS
01:34:13 Responsive Design for Tablets (CSS Media Queries for tablets)
01:36:50 Navbar Dropdown Menu Style
01:41:50 Navbar Dropdown Menu Toggle using JavaScript
01:46:32 Navbar Dropdown Menu Animation using CSS Keyframes
01:57:40 Responsive Design for Mobile Phones (CSS Media Queries for mobile phones)
02:05:00 About Page Achievements HTML
02:11:00 About Page Achievements CSS
02:17:32 About Page Team HTML
02:23:15 About Page Team CSS
02:31:50 About Page Responsive Design (CSS Media Queries for About Page)
02:37:08 Courses Page
02:40:45 Contact Page HTML
02:46:20 Contact Page CSS
02:55:40 Contact Page Responsive Design
03:00:28 Form Submission using FormSpree (https://formspree.io)
03:05:50 Adding Background Image Texture