CSS Grid, and the best places to learn it

Css Grid in use with elements placed semi randomly
Yes.. Placement is crucial..

When making web pages, placement and positioning are key, with this in mind, being able to place specific elements where they are needed and being able to modify existing ones is crucial.

In the past, we have relied on floats and flex-box to create columns or to have elements run inline. However, there are limitations with tools like float. The height of different elements may interfere with the overall design of the web page.

CSS Grid has been available for sometime, although it has only recently been adopted by most browsers, making now the perfect time to learn it if you haven’t already! After all, you only need to learn the basics, and there are plenty of free online tutorials!

CSS Grid with Wes Bos

When Mozilla wanted to create a web tutorial on CSS grid, they contacted Wes Bos, and boom! a brilliant 25 video series on the fundamentals and more of Grid was created.

A preview of Wes Bos' 25 video tutorials
Quite a selection!

These tutorials were produced with great sound quality, as a result, they are extremely easy to listen to and code along with. They are clear and concise, as well as extremely informative. Each episode comes with a before and after template to guide you.

It is easy to continue episode after episode due to the balanced curriculum involving lecture, assignment, and projects like a photo gallery. This course has my recommendation because of all of these factors.

Alternatives

Free Code Camp's CSS Grid tutorial

FreeCodeCamp also offers a online coding tutorial where you can code along with each question. While this method lacks a video and audio portion, it is still very handy to be able to see the whole picture while you to stay focused on a smaller area and avoid monitor sprawl.

Mozilla Developer Network Landing page
https://developer.mozilla.org/en-US/

There is a plethora of information about CSS Grid on the Mozilla Developer Network website, as well as the w3schools.

the W3schools page for CSS Grid with examples
https://www.w3schools.com/css/css_grid.asp

Let me know what you think, or tell me if you found a different source to learn CSS grid!

Pythonroom, a time passed.<<

Leave a Reply

Your email address will not be published.