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



Published
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.

Chapters
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

https://blog.timonwa.com/all-vs-root-vs-html-vs-body-selectors
Category
Web design
Be the first to comment