Build A Responsive Multipage Education/School Website using HTML CSS & JavaScript Complete Tutorial
EGATOR
View ChannelAbout
Hi, my name is Ernest Achiever, and I'm a front-end web developer based in Ghana. Here on this channel, I create modern web development project tutorials with HTML, CSS, Sass, JavaScript, React, Node, Express, and more. Learn how to Create Responsive Websites and web apps using modern languages, frameworks, and libraries! WEBSITE: https://egator.pro
Latest Posts
Video Description
Hostinger Discount: https://www.hostg.xyz/SH8cs Learn how to create a completely 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. Responsive React Portfolio Website with Theme Customization (FULL COURSE): https://www.udemy.com/course/react-js-portfolio-website-with-theme-customization/?referralCode=91FE72E9328ADD7A3214 Source Code, Assets & 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 Assets: https://drive.google.com/file/d/1nmJTIApyrPzE9-D_W79GrWbDJVj7mELq/view?usp=sharing 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
Web Dev's Essential Toolkit
AI-recommended products based on this video




