Join Morten Rand-Hendriksen for an in-depth discussion in this video The importance of semantic markup, part of CSS Grid: First Look.
- [Voiceover] The CSS Grid layout module…opens up a world of possibilities…for advanced responsive layouts on the web.…And one of its most exciting features,…at least in my opinion…is how it allows us to change the display order of content…without changing the order and the markup.…Before I let you explore this new module on your own,…I want to stress the importance of proper semantic markup…when working with CSS Grid.…As you've seen, CSS Grid only applies…to the first level children of the container…where the grid is defined.…For this reason, it will become tempting…to make all elements in your page…first level children of the grid container…so you can take full advantage of the grid.…
This could easily result in poor markup structure…which goes against the very premise of the web.…To avoid this, here are some tips.…Write your content in HTML markup first…before creating a grid.…When you do so, make sure you follow proper semantics…and structure the document for accessibility…and display without CSS.…Your content should still be accessible…
Join Morten Rand-Hendriksen in this course for a first look at this emerging CSS module. He covers setting up CSS grids, positioning content, and working with named lines and template areas. The final videos in the course introduce practical uses for CSS grids, including online magazines and three-column layouts.
- What is CSS Grid?
- Using the CSS Grid playground
- Setting up a CSS grid
- Positioning content in a CSS grid
- Using template areas in a CSS grid
- Creating a responsive grid layout