Lessons:27Length:4.7 hours
4.3 Styling the Off-Canvas Navigation
In the previous lesson we styled the main navigation up to a point where it looks just as it should on large screens. Now we have to apply styling for smaller screen sizes, and we’ll start with a tablet size.
1.Introduction
1.1Welcome to the Course00:44
1.1
Welcome to the Course
00:44
1.2Planning the Template13:42
1.2
Planning the Template
13:42
2.Designing the Template
2.1Setting the Color Scheme and Base Typography10:25
2.1
Setting the Color Scheme and Base Typography
10:25
2.2Designing the Navbar11:14
2.2
Designing the Navbar
11:14
2.3Designing the Homepage Content13:26
2.3
Designing the Homepage Content
13:26
2.4Designing the Footer10:10
2.4
Designing the Footer
10:10
2.5Designing the Homepage for Medium Screens12:50
2.5
Designing the Homepage for Medium Screens
12:50
2.6Designing the Homepage for Small Screens12:24
2.6
Designing the Homepage for Small Screens
12:24
2.7Designing the Article Page Template Sidebars11:26
2.7
Designing the Article Page Template Sidebars
11:26
2.8Designing the Article Page Template Content10:20
2.8
Designing the Article Page Template Content
10:20
2.9Designing a Standalone Page03:53
2.9
Designing a Standalone Page
03:53
3.Writing the Markup
3.1Installing Foundation07:43
3.1
Installing Foundation
07:43
3.2Coding the Off-Canvas and Main Navigation15:18
3.2
Coding the Off-Canvas and Main Navigation
15:18
3.3Coding the Rest of the Homepage16:13
3.3
Coding the Rest of the Homepage
16:13
3.4Coding the Article Template Left Sidebar11:44
3.4
Coding the Article Template Left Sidebar
11:44
3.5Coding the Article Template Content and Right Sidebar10:04
3.5
Coding the Article Template Content and Right Sidebar
10:04
3.6Coding a Page Template04:59
3.6
Coding a Page Template
04:59
4.Writing the CSS
4.1Colors and Typography09:15
4.1
Colors and Typography
09:15
4.2Styling the Main Navigation10:08
4.2
Styling the Main Navigation
10:08
4.3Styling the Off-Canvas Navigation17:17
4.3
Styling the Off-Canvas Navigation
17:17
4.4Styling the Homepage Content11:04
4.4
Styling the Homepage Content
11:04
4.5Styling the Footer12:21
4.5
Styling the Footer
12:21
4.6Styling the Article Page Sidebars11:07
4.6
Styling the Article Page Sidebars
11:07
4.7Styling the Article Page Typography and Layout13:31
4.7
Styling the Article Page Typography and Layout
13:31
4.8Styling the Remaining Article Page Content06:25
4.8
Styling the Remaining Article Page Content
06:25
4.9Styling a Standalone Page11:26
4.9
Styling a Standalone Page
11:26
5.Conclusion
5.1Final Words02:03
5.1
Final Words
02:03
