Building Layouts with CSS
•
10 likes•3,942 views
You have some basic knowledge of HTML and CSS? Go further by learning how to build advanced layouts of real-life apps like Airbnb, Medium or Slack using the most recent CSS techniques.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (12)
Similar to Building Layouts with CSS
Similar to Building Layouts with CSS (20)
Recently uploaded
Recently uploaded (20)
Building Layouts with CSS
- 2. 1. What’s a layout 🤔? 2. Real-life examples 📖 3. Row layout, the easy one 4. Column layout with flexbox 5. Grid layout with CSS grids
- 3. 0. Let’s setup ⚙ github.com/lewagon/layouts-101 Download starting boilerplate
- 4. 1.What’s a layout 🤔?
- 5. Components = Elementary blocks of UI
- 6. Layout = Global structure of your page 📐
- 7. The layout is the page’s skeleton
- 8. tabs cards navbar The layout is the page’s skeleton in which you inject components
- 10. What examples of layouts do you know 🤔?
- 11. Row layouts
- 16. Column layouts
- 17. Example - Map with results
- 18. Example - Map with results
- 19. Example - Inbox
- 20. Example - Inbox
- 21. Example - Social feed
- 22. Example - Social feed
- 23. Example - SaaS app
- 24. Example - SaaS app
- 25. Grid layouts both merged rows & columns
- 28. Example - Analytics Dashboard
- 29. Example - Analytics Dashboard
- 30. 3. Row layouts
- 31. Let’s code a blogpost
- 32. using containers Let’s code a blogpost
- 33. <body> <div class=“banner”> <div class=“container”> <!-- title & subtitle --> </div> </div> <div class=“container”> <!-- content --> </div> </body> Very simple layout 😊
- 34. Dumb container .container { width: 900px; margin: 0 auto; }
- 35. @media(max-width: 992px) { .container { width: 700px; } } @media(max-width: 768px) { .container { width: 500px; } } @media(max-width: 480px) { .container { width: 350px; } } Responsive container
- 36. Let’s code it 💻
- 38. Column layouts = 99% of layouts
- 39. Easy with flexbox 🔥 we need to rehearse flexbox
- 40. Flexbox - Vocabulary flexbox flex items
- 41. In a flexbox, items are naturally placed by column .flexbox { display: flex; }
- 42. Then, you can distribute space around or between items using justify-content .flexbox { justify-content: space-around; }
- 43. Then, you can distribute space around or between items using justify-content .flexbox { justify-content: space-between; }
- 44. You can center items vertically using align-items .flexbox { align-items: center; }
- 45. You can set the with of an item killing flex-grow and flex-shrink .fixed-item { flex: 0 0 25%; }
- 46. You can allow items to grow with a flex-grow .growing-item { flex-grow: 1; }
- 47. You can allow items to go to the next line with flex-wrap .flexbox { flex-wrap: wrap; }
- 48. Let’s code a map with results
- 49. Identify the main flexbox flex item flexbox flex item
- 50. Identify fixed and growing items fixedgrowing
- 51. Set the height of the map to 100vh
- 52. Apply position sticky magic ✨ Map full height Sticking to the top
- 53. Use flex-wrap for the grid of cards The cards container is also a flexbox containing cards
- 54. Let’s code it 💻
- 55. Let’s code Slack
- 56. Identify main flexbox flexbox flex item flex item flex item
- 57. fixed fixedgrowing Identify fixed and growing items
- 58. Let’s code it 💻
- 59. 5. Grid layouts
- 60. Easy with CSS grid 🔥 we need to rehearse CSS grid
- 61. First, define your grid
- 62. Then, define each element behavior “ I start row 1 and take 1 row I start column 1 and take 2 columns “
- 63. Then, define each element behavior “ I start row 1 and take 3 rows I start column 3 and take 1 column “
- 64. Let’s code a dashboard
- 65. Recap 🔥 Row layouts: center content with container Column layouts: flexbox is your friend Grid layouts: define your CSS grid, that’s it!
- 66. Want to go further? 🚀 lewagon.com/apply