How to create/add a navigation bar to a "real website" : ITW Easy Build Pt1



In this video we will learn how to add a navigation bar to a “real website”. We will create the HTML and CSS of the navigation bar so that its design fits in with the style of the website.

This is the first video of a new Into The Wild website easy build series. The navigation bars that we are building will become the header and the footer of the base page for the Into The Wild website that we will create over several videos. The design of the site was done in the Figma series.

Chapters:

0:00 Video Intro
0:21 Video Aims
4:26 Writing the Main Navigation HTML
6:30 Adding the links data
7:30 Viewing the links Pre CSS
8:15 Defining the Fonts and CSS variables
11:56 Adding the navigation bar background
12:39 Major formatting of the links
14:40 Aligning the text vertically to each other
15:25 Dealing with the logo
17:47 Dealing with the float ‘out of flow’ issue
19:00 Vertically align the links to the centre
20:28 Rounding the corners
21:04 Adding some simple responsiveness
22:30 The challenge: Footer navigation HTML
23:38 The solution
24:45 The Footer CSS updates
30:07 Video Wrap up

Links:

Starter files: http://tiny.cc/itwnav
Getting started playlist: https://youtube.com/playlist?list=PLAchoaeVaQJj37FWV_vypQmjGmOGlDu90
Figma Into the wild: https://youtube.com/playlist?list=PLAchoaeVaQJgnJldEaXN-dR4Tb8_sHujC
Emmet basics: https://youtube.com/playlist?list=PLAchoaeVaQJjRw9MSm6iu5GpQ2eW5JTl9
Google font video: https://youtu.be/DFjaCuYGkMc
CSS Variables: https://youtu.be/kyAuHD0Wn8k
Xampp: https://www.apachefriends.org/download.html

Duration: 00:30:49

source