Notes from CSS-for-JS Course

Heads up! This is a “digital garden” type of post that will be updated over time as I complete the course.

I purchased early access for Josh Comeau’s CSS-for-JS Developers course and will be keeping some adhoc notes here about my progress completing the course.

I am coming into this course with what I feel are pretty solid intermediate CSS skills. I’m comfortable laying out a full website from scratch but still have some gaps in my understanding I need to improve on like animations. I’m also guessing I have at least a few blind spots, where I think I understand a topic but it turns out I actually don’t.

My goal with this course is to upskill my general css and design knowledge. I do freelance development work so these “front of the frontend” skills are important to me and my customers.

Module 0: Fundamental Recap

Complete

After completing Module 0 so far I am loving the course, but in particular I enjoy the text heavy approach that Josh used so far which suits my learning style.

I have written a lot of css-in-js over the past two years. Writing plain CSS feels so clunky for me. I am used to writing things like textDecoration instead of the proper text-decoration. Oh and those semi-colons! I keep forgetting to put those in because Prettier just handles that for me.

Right - so remember those blind spots. Color — such a basic concept but I have just always used hex codes for color. But now I understand HSL and am going to start using that instead going forward. Hue (actual color) - 360deg, Saturation (color intensity) - 100%, Lightness (color brightness) - 100%.

Line height is a unitless value - I am pretty sure I have always been passing it in as rem or px in the past. TIL.

A few pro-tips for in browser debugging. Add multiple commented out CSS styles you want to play with in your code and then tick and untick the styles in dev tools to quickly check different appearances! Shift + Click on the color box in dev tools to cycle through the color units. Firefox gives super helpful hints in its dev tools if CSS properties depend on each other.

Module 1: Rendering Logic I

Complete

TLDR; margins and specifically margin collapse are trickier than I realized.

I thought I would breeze through this section - boy was I wrong, and boy was I glad!

Because I am self-taught and started learning CSS back when tables were de rigeur for making websites I picked up skills in bits and pieces. It was really nice to see it all laid out in a methodical and coordinated way. By far the trickiest thing has got to be margin collapse, which I knew about, but didn’t really understand as well as I do now.

My other big takeaway from this module is that I need to do a better job at style encapsulation in my components. I usually try to create components that are as autonomous as possible but I know there have definitely been times where I have tossed margins or other layout properties into the components that I shouldn’t have.

Here is my take on the final project.

https://codesandbox.io/s/huckleberry-forked-8h9s7

Module 2: Rendering Logic II

In progress…

Module 3: Modern Component Architecture

In progress…

Module 4: Flexbox

Not yet started.