Skip to content
Notes from CSS-for-JS Course
  • CSS

Notes from CSS-for-JS Course

March 16, 2021 2 Min

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

… In progress

  • Margin collapse is harder than I knew
  • Don’t put styles on images, always create a wrapper for the image and locate the placement styles there.

Module 2: Rendering Logic II

Not yet started.

Module 3: Modern Component Architecture

Not yet started.

Module 4: Flexbox

Not yet started.


← Previous Post

Illustrations by Diana Valeanu
© 2021 Eric Howey - eric@erichowey.dev

In the spirit of reconciliation, I acknowledge that I live, work and play on the traditional territories of the Blackfoot Confederacy (Siksika, Kainai, Piikani), the Tsuut’ina, the Îyâxe Nakoda Nations, the Métis Nation (Region 3), and all people who make their homes in the Treaty 7 region of Southern Alberta.