Free Preview: Effective Navigation Development

Coding the HTML (Simple Navigation Menu)

10:40

Coding the HTML (Simple Navigation Menu)

In this video get started with our first project by building the HTML markup for our simple navigation menu.

Further reading

1.Welcome
1 lesson, 03:24

Free Preview
1.1
Course Overview
03:24

2.Project 1: Simple Navigation Menu
9 lessons, 1:02:37

Free Preview
2.1
Coding the HTML (Simple Navigation Menu)
10:40

2.2
Normalizing Browser Styles
02:56

2.3
CSS For the Content Layout
06:51

2.4
Styling the Nav Text (Simple Navigation Menu)
09:38

2.5
Button Layout
08:04

2.6
Menu Background and Borders
08:39

2.7
Expanding Link Boundaries
07:59

2.8
Hover States (Simple Navigation Menu)
02:49

2.9
Marking Up the Drop Downs
05:01

3.Project 2: Image-based Navigation
12 lessons, 1:26:06

3.1
Styling the Drop Down Menus (Image-based Navigation)
07:58

3.2
Making the Drop Downs Work
08:17

3.3
Slicing Up the Images
12:36

3.4
Coding the HTML (Image-based Navigation)
07:19

3.5
Styling the Content Layout
03:09

3.6
Styling the Nav Text (Image-based Navigation)
04:34

3.7
Button Backgrounds
07:19

3.8
Social Media Buttons
08:16

3.9
Finishing the Header
06:43

3.10
Hover States (Image-based Navigation)
07:44

3.11
Designing the Drop Down Menus
07:54

3.12
Functional Drop Down Menus
04:17

4.Project 3: Vertical Navigation With Jquery
9 lessons, 1:03:18

4.1
Preparing the Images
10:43

4.2
Coding the Navigation
05:22

4.3
Laying Out the Page
04:00

4.4
Styling the Drop Down Text
03:44

4.5
Swapping Text for Images
10:56

4.6
Hover States (Vertical Navigation With Jquery)
06:32

4.7
Styling the Drop Down Menus (Vertical Navigation With Jquery)
06:57

4.8
Inserting jQuery
05:43

4.9
Animated Drop Downs with jQuery
09:21

5.Finishing Up
1 lesson, 01:34

5.1
Final Thoughts
01:34


About Craig Campbell
Craig has been doodling on computers since the first time he opened Paintbrush in Windows 3.0 in 1990. Since then, he has constantly sought new and exciting ways to make beautiful things on computers.
+ Expand Bio- Collapse Bio