My CSS Gem Find - 6 Week Article Challenge

Welcome to Week 2 in my 6 week Article challenge here at Codú.

In this article I want ot talk about a recent CSS gem I found on my Odin Project Journey.

That Gem is Josh Cameau's informational blog and more specifcally his Interactive Guide to Flexbox.

This site shocked me in the way of how it delivered its teachings, it contained methods and visualisations I had quite frankly never seen before.

For starters you are immediatley shown the visualisation in question.

It is an interactable and stylish method of showing off what you can create given the knowledge learned from this site.

As you decrease the container width slider you get a realtime update to the container and can visualise the way HTML elements are sized and moved under the control of flexbox.

Progessing down the page you also get a Gem within a Gem and I will put it as Josh has wrote.

"Adam Argyle’s incredible “4 layouts for the price of 1”(opens in new tab) codepen. It uses no media/container queries. Instead of setting arbitrary breakpoints, it uses fluid principles to create a layout that flows seamlessly." Here's the relevant CSS:*

form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px;}

.name { flex-grow: 1; flex-basis: 160px;}

.email { flex-grow: 3; flex-basis: 200px;}

button { flex-grow: 1; flex-basis: 80px;}

This is a setup I have jumped into testing also and found it incredibly useful in developing out quick responsive demos.

At the start of reading this blog post I thought I knew CSS, By the end I came to find that I did in fact not know CSS or not as much as I thought I did.

I found this blog to be beyond useful in the learning process. Piece by piece Josh breaksdown the individual components of flexblox and slowly increments you on a journey that makes sense. Yea I like that, "A journey that makes sense!!!!"

He of course increments the difficulty of CSS and challenges it imposes but it is phrased in such a way, (By meat on skewers, ahh I dont what to tell you there other than check it out) and displayed to you through various interactions that you cant help but feel you relate to the knowledge and come out the other end feeling like, ya I got that.

Thats all I got for you, There are heaps of aspects to his site I could blab on about for paragraphs but rather me bore you out of missing the best opportunity of your web dev life, Ok maybe a bit of an oversell but neverthless it is a brilliant site and a magnificent learning blog for flex box, it is easy reference back to sections through his fixed table of contents that follows you down the page and I can do nothing but recommend how easy and enjoyable it was to learn with. His passion for the craft really shines through and for a single blog the amount of effort put in has been really incredible.

Check it out here and let me know down below how it helped you in your CSS journey.