CSS, Flexbox - learning resources

I realise I’ve sometimes talked bollocks about CSS, being very much a newbie myself… so here’s to redeem myself:

For those struggling with or learning or refreshing their knowledge of CSS, or wanting to see what it’s like without Bootstrap, here’s a series of videos that are so quick to watch !!! and really get you on tracks.

This all comes from the Net Ninja playlists (thanks @P1xt again!), which also means that every video has a repo on Github.

Learning CSS

* CSS for Beginners ( so also about selectors !)

* FLEXBOX

and when you’re ready…
* SASS tutorials

and as usual (read):

[UPDATE] Be sure to check the posts below, you’ll find amazing links !!!

4 Likes

Quincy tweeted a medium article about flexbox, it’s indeed the best guide I’ve seen.

Do you have the link? I could add it in the first post? I’ve only just started to watch those videos and am really happy with them! I figured I should spend more time on that before continuing…:persevere:

2 Likes

I’m not too familiar with your previous bollacks. Can you that :wink: (I’m only half joking as [1] it sounds like good context and [2] just wanted to check my own opinions and knowledge for known bollocks.

I’m not sure I understand what you mean - but basically I assumed IDs and classes were to be used very very cautiously but maybe not.

From what I’ve learned so far: use it as long as it helps structuring your css, as long as it makes things easier for later maintenance. But if you have one element with an ID and you can target the next few element with appropriate selectors ( for ex as child of that ID, or nth-of-type or whatever) do it.

It’s more about a healthy and functional balance (I think?)

Also I really assumed Bootstrap was a go-to every time. In the end I think I used it mostly as a shortcut so as not to bother with the rest…and in the end I didn’t even bother trying to understand why I couldn’t style it as much as I wanted.

So you can find lots of my posts saying “oh, why don’t you use the Boostrap grid?” l:grin:

Hence the idea of going without Bootstrap so you understand what’s going on, and when you use Bootstrap it’s really as a tool and not as something imposed on you.

And for example I really thought the Bootstrap grid was the answer to everything. Turns out it’s not.

But maybe it’s another load of bollocks!!

Long story short: Sometimes I should just shut up but can’t help myself !

CSS-Tricks is my go-to for all things CSS. Regarding grids, instead of reaching for Boostrap you can roll your own pretty quickly:

CSS Tricks - Don’t Overthink It (Flexbox) Grids

The guide linked at the end of the above is also great:

Solved by Flexbox - Better, Simpler Grid Systems

2 Likes

Really nice links, thanks - I’ll even stop linking to my first Flexbox link because I don’t find it as clear !

Actually, all of Solved by Flexbox is really nice

https://philipwalton.github.io/solved-by-flexbox/

(off topic … Ctrl-enter is a shortcut for submit? - sweet)

1 Like

roooo…:heart_eyes: I like you ! (and off-topic, I’ve installed your gedit-plugins!)

Let me add some flexbox games :slight_smile:


1 Like

That’s awesome - I’ll try it :grin:

Another good resource you can add to the list:

What the Flexbox? (flexbox.io) by Wes Bos
Free 20 video course: YouTube playlist with GitHub project files here

1 Like

Great, thanks ! I’ve finished watching the Net Ninja’s Flexbox playlist and am really happy with it - but I’ll probably look at a couple more with Wes Bos.