Lessons:15Length:1.4 hours
- Overview
- Transcript
8.1 Building the Flexbox Modal
In this, the first of a few new bonus lessons, I will walk you through the creation of an HTML page with a modal at the bottom. This modal will eventually be laid out and styled using the Flexbox model. Begin by forking the pen, and then let’s get stuck in!
Useful Links
1.Introduction1 lesson, 00:39
1 lesson, 00:39
Free Lesson 1.1Introduction00:39
Free Lesson
1.1
Introduction
00:39
2.Project 1: Flexbox Menu2 lessons, 11:59
2 lessons, 11:59
Free Lesson 2.1Basic Menu Styles03:56
Free Lesson
2.1
Basic Menu Styles
03:56
2.2Styling the Flexbox Menu08:03
2.2
Styling the Flexbox Menu
08:03
3.Project 2: Complex Layouts2 lessons, 12:16
2 lessons, 12:16
3.1Flexbox for Page Layout06:44
3.1
Flexbox for Page Layout
06:44
3.2Nested Flexible Boxes05:32
3.2
Nested Flexible Boxes
05:32
4.Project 3: Banner With Centered Content1 lesson, 07:25
1 lesson, 07:25
4.1Vertically and Horizontally Centered07:25
4.1
Vertically and Horizontally Centered
07:25
5.Project 4: Ordered Content1 lesson, 05:23
1 lesson, 05:23
5.1Changing the Order05:23
5.1
Changing the Order
05:23
6.Project 5: Image Grid2 lessons, 10:03
2 lessons, 10:03
6.1Basic Styles05:00
6.1
Basic Styles
05:00
6.2Using Flexbox to Finish the Layout05:03
6.2
Using Flexbox to Finish the Layout
05:03
7.Project 6: Uneven Image Grids2 lessons, 12:39
2 lessons, 12:39
7.1Basic Image Styles05:05
7.1
Basic Image Styles
05:05
7.2Styling the Grid07:34
7.2
Styling the Grid
07:34
8.Bonus Project 1: Flexbox Modal2 lessons, 11:58
2 lessons, 11:58
8.1Building the Flexbox Modal04:46
8.1
Building the Flexbox Modal
04:46
8.2Flexbox Modal Functionality07:12
8.2
Flexbox Modal Functionality
07:12
9.Bonus Project 2: Flexbox Content Slider1 lesson, 12:49
1 lesson, 12:49
9.1Building the Slider12:49
9.1
Building the Slider
12:49
10.Conclusion1 lesson, 00:38
1 lesson, 00:38
10.1Final Thoughts00:38
10.1
Final Thoughts
00:38