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.Introduction
1.1Introduction00:39
1.1
Introduction
00:39
2.Project 1: Flexbox Menu
2.1Basic Menu Styles03:56
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 Layouts
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 Content
4.1Vertically and Horizontally Centered07:25
4.1
Vertically and Horizontally Centered
07:25
5.Project 4: Ordered Content
5.1Changing the Order05:23
5.1
Changing the Order
05:23
6.Project 5: Image Grid
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 Grids
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 Modal
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 Slider
9.1Building the Slider12:49
9.1
Building the Slider
12:49
10.Conclusion
10.1Final Thoughts00:38
10.1
Final Thoughts
00:38
