CSS Grid, and the best places to learn it
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.
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.
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.
There is a plethora of information about CSS Grid on the Mozilla Developer Network website, as well as the w3schools.
Let me know what you think, or tell me if you found a different source to learn CSS grid!