How to Make a Responsive Landing Page with HTML and CSS | Part 1: Navigation Bar

This is part 1 of a 5 part project on creating a responsive Landing Page with HTML and CSS. Part 1 covers adding an image, adding Google fonts, creating a nav bar using an unordered list and making it all responsive.

00:00 Introduction
00:55 New Folder
01:24 Head
02:00 Header
02:15 Comment Out
03:00 Add logo in HTML in Image Tag
03:30 Navbar in HTML
03:50 Unordered List with Links
07:00 Get Logo Image from Pixabay
09:15 Add logo Image in HTML
11:15 Add CSS Link in Head
11:40 Create Style Sheet File
12:30 Style Universal Selector CSS
13:15 Add Google Fonts in CSS
15:50 Add Class to header in HTML
16:25 Comment Out in CSS
16:40 Style Header in CSS
21:08 Add Class to Image
21:25 Style Logo in CSS
21:45 Add Class to Navbar
22:10 Style Navbar in CSS
23:40 Keyboard Shortcut - Multiple Cursors
24:40 Style List Items in CSS
26:25 Hover Effect
27:05 Make Header Responsive using Media Query

The link below will take you to the great article about using Universal Selector vs Body vs HTML
Web design
Be the first to comment