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

Опубликовано: 19 Март 2021
на канале: Zen

1,668

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:    • Getting started
Figma Into the wild:    • Figma: Into the wild design
Emmet basics:    • Emmet Basics
Google font video:    • How to install and use Google/web fonts fo...
CSS Variables:    • How to use CSS variables and the 3 reasons...
Xampp: https://www.apachefriends.org/downloa...