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.
Day 1, 12-04-2025
67% through module 0. This course is the nicest web app I’ve ever used. Quick refresher on media queries and selectors.
Day 2, 13-04-2025
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.
Day 4, 14-04-2025
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.
Day 5, 15-04-2025
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.
Day 6, 16-04-2025
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.
Day 7, 17-04-2025
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!
Day 8, 18-04-2025
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.
Day 9, 19-04-2025
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!
Day 10, 20-04-2025
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!
Day 11, 21-04-2025
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.
Day 12, 22-04-2025
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.
Day 13, 23-04-2025
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.
Day 14, 24-04-2025
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.
Day 15, 25-04-2025
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
Day 16, 26-04-2025
21% into module 4: flexbox! So far I find the properties quite intuitive.
Day 17, 27-04-2025
36% into module 4. Learnt about flex-basis, flex-grow, flex-shrink and flex. Getting harder but still intuitive.
Day 18, 28-04-2025
57% into module 4. Learnt about min-width, max-width constraints in flex. The exercise in this lesson was kinda hard. I think I need to revisit. Also learnt about flex-wrap and justify-content.
Day 19, 29-04-2025
71% into module 4. Learnt about gap in flex. The associated exercise was really nice though a bit hard because it involved a lot of nested flex elements.. I also learnt about row-reverse and col-reverse and how it can help with issues like tab ordering. I also learnt about the tab-index property. I still need to read this interactive guide to flexbox though.
Day 20, 30-04-2025
86% into module 4. Learnt how positioned flex children work, margin collapses and z-index behaviour in flex. This was followed by a few very interesting exercises. I really liked how position sticky and flex can be used together. Pretty challenging exercises though. All that’s left is the final workshop lesson.
Day 21, 01-05-2025
Finished module 4! I think I did really well in the final workshop lesson. It honestly does feel really good to look at a design and have a very good idea about how to do it 😄 Also I have to say I’m really loving styled components and its really sad that the library is now abandoned 😭 Tomorrow we start a new module. Yay!
Day 22, 02-05-2025
27% into module 5. Learnt about device pixel ratio and testing for mobile. Learnt about media queries and using min-width and max-width to target styles specifically for different screen sizes. The exercises were interesting especially the modal one. The video on building accessible modals was useful. It was also interesting to learn about other media query targets like hover, pointer, screen, print and prefers-color-scheme.
Day 23, 03-05-2025
41% into module 5. Learnt about how to figure out good breakpoint values and CSS variables.
Day 24, 04-05-2025
50% into module 5. Learnt about calc and viewport units. Kinda boring but the keyframe feature demonstrated in the calc lesson was super cool!
Day 25, 05-05-2025
59% into module 5. Learnt about clamp, min and max. Also learnt about how to debug scroll issues.
Day 26, 06-05-2025
73% into module 5. Learnt about fluid typography. This was kinda interesting. I’ve never seen vw being used in font sizes. But the same technique can be used to control properties like gap. The fluid calculator is really useful!
Day 27, 07-05-2025
91% into module 5. The fluid design lesson was interesting. It explained implementing the same functionality using media queries vs fluid design using flex-wrap. Was cool to think about the pros vs cons. Got introduced to container queries and damn it seems incredibly powerful! I think I need to read more about it though. Just the workshop left in module 5!
Day 28, 08-05-2025
Started working on the module 5 workshop. I don’t like my solution at all. Will start from scratch again tomorrow. Got distracted by some world affairs :/
Day 29, 09-05-2025
Finished module 5. The workshop was very challenging. I think I did quite well. I thought everything felt a bit brittle because of all the media queries everywhere. But I went through the solutions and turns out they were the right approach. A very useful module!
Day 30, 10-05-2025
16% through module 6. Learnt about kerrning, rasterization, antialiasing, etc. Also learnt about many different techniques of handling text overflow like break-word, hyphens, ellipsis, etc. Lots of useful properties.
Day 31, 11-05-2025
26% through module 6. Learnt about more obscure layout modes like column and float. This was a very fun lesson. I really liked the last “build a book” exercise. The masonary grid lesson was interesting too. Finished off with a text styling lesson which introduced the ch unit and text-align. I never understood the difference between text-align: center and using flex to center but I do now!
Day 32, 12-05-2025
53% through module 6. Learnt wayyyy more about fonts than I thought was even possible. Finally understand how font loading works. Learnt about font optimization. And got introduced to variable fonts. I didn’t even know they existed! Very cool stuff.
Day 33, 13-05-2025
74% through module 6. Learnt about object-fit and object-position for images. And a lesson on flexbox and images. For some reason the image stuff is very boring.
Day 34, 14-05-2025
Finished module 6. Learnt about the picture element which I had never heard of before! Also learnt about background-image and some properties associated with it. The workshop wasnt too hard. I couldnt solve the last tags problem even though I figured out the trick was to use inline. I just needed the white-space: nowrap property. Found out about the wave accessibility tool watching the solution videos. Wasnt a super interesting module but useful nevertheless. Now onto CSS Grid!
Day 35, 15-05-2025
18% through module 7. Just an introduction to CSS grid + some quizzes.
Day 36, 16-05-2025
29% through module 7. Went through grid construction and alignment. Introduced to properties like grid-template-columns, grid-template-rows, fr unit, repeat, justify-content, justify-items, align-content and align-items. Took some time to understand a basic model of how css grid works. Quite a hard lesson today but I did successfully complete the exercises so I’ve surely made progress.
Day 37, 17-05-2025
41% through module 7. Learnt about grid-template-areas and grid-area. Incredibly cool stuff! Was so fun to build the holy grail layout using this! Also learnt about tracks and lines and how to use grid-column and grid-row to build layouts using them.
Day 38, 18-05-2025
59% through module 7. I realised I’m starting to forget stuff I learnt before like clamp ;-; Anyway learnt about fluid grids today. Essentially I learnt how grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr)); works. They mentioned sub grids but its not covered in the course unfortunately. There was also a grid dividers lesson which talked about how to make the grid lines visible. I got it working with padding and borders but they mentioned a neat trick using background-color.
Day 39, 19-05-2025
88% through module 7. Learnt some grid recipes today. Learnt about place-content. Learnt about sticky grids which basically involves using position: sticky for grid children. I really struggled with this. I think I get it but there are still gaps in my understanding. I really need to revisit the position lessons. I also learnt about building full fleed layouts using grid which was super cool. There was a lesson on managing overflow for grid children. This was also a confusing lesson for me. Also learnt about some grid quirks. Only the workshop left!
Day 40, 20-05-2025
Working on the module 7 workshop. There are 5 exercises. I’ve only finished exercise 1 today. Pretty hard but quite fun. I did watch the solution to exercise 1 to check my code and I did quite ok. Missed some nuances in the design. Very helpful to see how an expert approaches and solves the same problem.
Day 41, 21-05-2025
Still working on the module 7 workshop. Finished exercises 2 and 3 today. This was loads of fun. CSS grid and particularly grid-template-areas is so awesome! Surprising how easy it was to build 3 completely different layouts using it. Yet again the solutions by Josh were a lot more elegant than mine. But I still did quite well.
Day 42, 22-05-2025
Finished the module 7 workshop by completing exercises 4 and 5. These were pretty easy. And I have to say I really like CSS Grid a lot. Feels a lot more flexible than flex. The overflow solution for this workshop still feels pretty unintuitive to me. I’ll try to understand it better later. But overall a very useful module. I can see myself using grid a lot!
Day 43, 23-05-2025
17% into module 8: animations! Fun stuff. Learnt about the transform property and various values like translate, scale, rotate, skew, etc. Also transform-origin. Learnt about transition and transition-timing-function and its various possible values. Learnt about transition-delay and example usecases. Learnt about the doom flicker problem and how to solve it. Did a bunch of exercises covering these properties. Quite a dense day.
Day 44, 24-05-2025
39% into module 8. Today was all about animating using keyframes! And associated properties like animation-fill-mode and animation-play-state. Learnt about fill modes and dynamically adding and pausing animations. Did a few exercises. Surprisingly easy. I expected animations to be a lot harder.
Day 45, 25-05-2025
61% into module 8. Learnt about animation performance: the pixel pipeline, hardware acceleration and the will-change property. Learnt about action-driven animation and stuff like different enter and exit animation durations. Also learnt about animation sequencing using transition-delay and events. Did a few exercises. I’m personally not a huge fan of lots of animations. eg. the apple website example shown feels like overkill to me. I like snappier experiences. But I do see how small thoughtful animations spruce up the experience.
Day 46, 26-05-2025
89% into module 8. Learnt about how to deal with animations and accessiblity: using prefers-reduced-motion in a media query. Learnt about isometric vs perspective projections. Learnt about how to do 3D transforms in CSS using the perspective property or function. Learnt about 3D rendering contexts using the transform-style: preserve-3d declaration. Learnt about some gotchas using these proeprties like the transform-style property not being inheritable. And the fact that some properties like overflow disable the 3D rendering context. And fixes for these issues. Finally went through a ecosystem world tour talking about the pros and cons of some JS animation methods and libraries like: the web animations api, framer motion, react spring, GreenSock GSAP, etc. The examples shown are pretty wild! Used thoughtfully these libraries can definitely take your app to the next level wrt polish and feel.
Day 47, 27-05-2025
Finished module 8. I was working on the final workshop today. It wasn’t too hard at all. But like always the solution videos showed even better code and I learnt a lot. Its actually really cool how a little CSS is capable of such fancy smooth animations. Onto the last module!
Day 48, 28-05-2025
18% into module 9. This is such a fun module! Learnt about CSS filters: brightness, contrast, grayscale, sepia, hue-rotate, blur, etc. The blurred glow technique was cool. Learnt about backdrop-filter. Went deeper into border-radius and how the algorithm works.
Day 49, 29-05-2025
32% into module 9. Today was about shadows. Learnt about box-shadow and filter: drop-shadow and the differences between them. Most of the lesson today was about designing and implementing different kinds of shadows: countoured shadows, single-sided shadows, inset shadows, etc. I found the lesson about how to go about designing them and thinking about the light source to be particularly useful.
Day 50, 30-05-2025
50% into module 9. Learnt a bit more about colors: accessibility(contract, color blindness), selection colors and accent-color. Also started learning about gradients: linear-gradient, radial-gradient, conic-gradient and how to design easing gradients. Did exercises related to all of the above. Gradients surprised me with just how much you can do with them. The metal knob example made using conic gradients was very cool!
Day 51, 31-05-2025
59% into module 9. Did the gradient exercises. Honestly I hurried a bit through them. The syntax is too complex for me to remember so I’ll just look it up again when needed. Learnt about the -webkit-tap-highlight-color and user-select properties. The trick to increase target size using a pseudo-element was clever and good to know about. The pointer-events property seems super useful!
Day 52, 01-06-2025
73% into module 9. Learnt about clip-path! And its values like polygon, ellipse and circle. Learnt how to animate them and their gotchas when used with shadows. Did exercises related to it. Honestly very fun stuff. You can make a lot of cool animated stuff using it! Also went through the lesson on optical alignment. Good info to have with respect to typography.