My pullups experiment has been progressing quite well. So its time to try a new experiment.
I’ve been planning to learn CSS properly for a long time now. It’s finally time to give it a real shot. I bought the css-for-js course a long time ago but did ~20% of it before I got distracted and moved on to something else.
I’m resetting the progress and starting over.
1 hour a day. No more, no less.
67% through module 0. This course is the nicest web app I’ve ever used. Quick refresher on media queries and selectors.
Finished module 0. Covered colors, units, typography and some debugging tricks. Learning about hsl and rem was cool. Very cool to also learn about p3 and lch! I still need to read the blog post on accessibility though.
38% into module 1. Covered inheritance, cascading, block directions, inline directions, an introduction to the box model, padding and borders. Understanding box-sizing: border-box was very very useful for me. I never understood why stuff like width: 100% would behave in weird ways before understanding box sizing.
50% into module 1. Learnt about margins. Good to undestand how negative margins work and how the old centering trick using width and margin works. Understood the basics of block, inline and inline-block. I also went through the width algorithms lesson and it was really hard! I will definitely need to revisit this in the future. Went 15 minutes above my 1hr daily limit.
Finished module 1. Learnt about height algorithms and margin collapse. Margin collapses are really unintuitive. Also did the workshop lesson. My solution was decent-ish. Went way over the 1hr limit today and spent 2hr instead. So far CSS makes sense but with a ton of gotchas.
32% into module 2. Learnt about relative positioning, absolute positioning and containing blocks. Damn there are a loooot of gotchas. But I understand the usecase of relative and absolute now. These exercises in the course are really good practice!
47% into module 2. Learnt about z-index and stacking contexts. This was a really useful lesson for me given I’ve been massively confused by z-index before! The lesson on portals was especially useful for clearing stuff up. Also learnt about fixed positioning.
89% into module 2. Learnt about overflow and sticky positioning. Sticky was very fun to learn. But again a lot of gotchas. I also went through the hidden content lesson which taught properties like display: none and visibility: hidden and how it differs from each other. It was really cool to learn about how these properties interact with accessibility and how to properly build for users using screen readers!
Finished module 2. Worked on the “Character Creator” workshop. It was pretty challenging and I had to refer previously completed lessons a lot. Managed to do it though! Took an extra 30 minutes to watch the solution videos. Realised that I didn’t do the scrollbar positioning perfectly. I didn’t do the stretch goal either. Overall super fun!
11% into module 3. Learnt about common issues faced in css like specificity. There was a quick intro to many solutions including styled components. Unfortunate that development on styled components has stopped. But was interesting to learn about all the other solutions like tailwind and css-modules.
28% into module 3. Skipping the styled-components lesson for now given its deprecated. Quick intro to component libraries. Then worked through two components: Breadcrumbs and Button. Surprisingly complex. Was really fun to see a great programmers approach to solving these problems.
56% into module 3. Mostly learnt more tricks about styled components. And how to handle more complex scenarios regarding when to apply certain styles. Started with the workshop and it was fun. Wasted too much time on the ProgressBar component trying to reuse and style the native <progress> html tag. Turned out you can’t style it that much. Watched the solution video and redid it. Went 1hr over the 1hr daily limit.
61% into module 3. Worked on the Select element. I kinda got it working by just styling the native select tag and using absolute positioning to move the chevron inside the element. This solution was noted towards the end of the actual solution. But the real solution was a hell of a lot better. Just move the select element to the top, set opacity to 0 and have a presentational div below it which has the design we want. Ahaha I would never have thought of this! But I’m starting to use stuff like absolute and top like its a normal thing! But so much of everything just feels hacky af compared to writing backend systems.
Finished module 3. Worked on the IconInput element. I got it surprisingly correct! Honestly it wasn’t really tricky like the previous elements and was mostly just adjusting values to make sure it looked good. But I’m happy that I figured out a way to do it! So I guess the modules did teach me something :D
21% into module 4: flexbox! So far I find the properties quite intuitive.