In this workshop, "CSS Grid & Flexbox, v3 - Jen Kramer", we'll delve deep into CSS layouts, focusing on two powerful tools: Flexbox, or the flexible box layout, and Grid, which are both layout models that are used in web design. This is particularly true because Flexbox offers flexible solutions for designing items in one dimension, that is, rows or columns, with the possibility of alignment and distribution. CSS Grid is a two-dimensional layout mechanism, which means it is possible to specify the position on both the vertical and horizontal axes. In the whole course of CSS Grid & Flexbox, v3 - Jen Kramer, the primary and secondary components and attributes of both Flexbox and Grid will be discussed and analyzed in detail to clarify the possibilities of using each concept and when to use them.
Also, we will add responsive images, which will be useful in cases when images should change their size depending on the device and its resolution. Media queries will also be examined in detail to gather information on how styles can be based on the size of the viewport and other circumstances. Moreover, we will explore the topic of container queries, a seemingly recent feature in CSS that allows the page’s styles to be adjusted depending on the size of the container. Indeed, after going through the workshop ‘CSS Grid & Flexbox, v3 - Jen Kramer’, not only these new concepts in CSS will be comprehensively clear to you, but you will also learn to exercise practical knowledge about improving the layout and the responsive design of your website.
CSS Grid & Flexbox, v3 - Jen Kramer Table of Contents:
- Introduction
- Grid properties, structuring HTML to support Grid, different Grid syntaxes
- Grid and media queries
- Overlapping Grid cells, Grid as art, margin and Grid, minmax()
- Subgrid practice
- Flexbox syntax
- Navbars and Flexbox practice
- Responsive images
- Container query intro, container size queries
- Container styles queries
Who is this course for?
- Frontend Masters Bootcamp, HTML and CSS: elements and fundamentals, basic knowledge, HTML and CSS newbies, Junior developers
- Senior developers who do not use CSS very often
Click on the links below to Download CSS Grid & Flexbox, v3 - Jen Kramer!
در حال پاسخ به :