Video: How To Recreate The Instagram Layout
Modern CSS Layouts
Released: null
Instructor
Scott Tolinski
-
1. About Modern CSS Layouts
3M
-
2. How To Get Started With Flexbox
19M39S
-
3. Flexbox Container Children
12M47S
-
4. CSS Grid Basic Terminology
7M25S
-
5. CSS Grid Basic Container Properties
13M37S
-
6. CSS Grid Container Advanced Properties
12M37S
-
7. Children Properties For CSS Grid
13M39S
-
8. Grid Area In CSS Grid
6M16S
-
9. A Quick Overview Of CSS Variables
5M40S
-
10. CSS ViewPort Units
5M20S
-
11. How To Recreate The Instagram Layout
18M25S
-
12. Responsive Instagram Layout With CSS Grid
17M22S
-
13. Fullscreen Background Video Layout
15M26S
-
14. Tweetdeck LayoutVertical, Infinite Scrolling Columns
18M29S
-
15. Tweetdeck Layout Part 2
14M43S
-
16. Named Grid Areas With Facebook Layout
17M32S
-
17. The Facebook Post Layout
12M35S
How To Recreate The Instagram Layout
In this video of the Modern CSS Layouts tutorials we’ll be dissecting the different areas of a layout before learning to build our own modern CSS layout. We’ll be using the Instagram profile page as an example, identifying the main areas (like the header, user information, images grid), looking closely at the details of each one of these main areas (like the logo area and navigation buttons), and you’ll learn how to recreate this layout using all the Modern CSS Layouts foundational skills you’ve learned so far.