Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

How to Make a Responsive Navbar Dropdown Menu and Website with HTML, CSS, and Vanilla Javascript

Dave Gray via YouTube

Start learning Write review
Corporate Finance Institute Ad

Finance Certifications Goldman Sachs and Amazon Teams Trust

Learn More → Coursera Ad

AI, Data Science & Cloud Certificates from Google, IBM & Meta

Learn More →

Overview

Google, IBM & Meta Certificates – 40% Off
One Coursera Plus subscription covers most Professional Certificates on Coursera.
Unlock All Certificates
This beginner tutorial builds a responsive small-business website from scratch with HTML, CSS, Flexbox, media queries, and vanilla JavaScript. It implements an animated hamburger navigation and dropdown menu that adapts across screen sizes.

Syllabus

Intro
Project Start | Resources | Set Up
HTML for the Header and Navbar Menu elements
CSS for the Nav Bar and Hamburger Menu Button
JavaScript for the Navbar Hamburger Menu Button
CSS for the Nav Bar Dropdown Menu
Javascript for the Navbar Dropdown Menu
HTML for the Main element and menu items
CSS Flexbox layout and menu styles
HTML for the Footer elements
CSS for the Footer elements
Javascript for the Footer
Media Queries for larger viewports / screens

Taught by

Dave Gray

Reviews

Start your review of How to Make a Responsive Navbar Dropdown Menu and Website with HTML, CSS, and Vanilla Javascript

Start learning

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.