Advanced HTML and CSS

For this week, I’ve finished the Advanced HTML and CSS course from The Odin Project curriculum. Primarily, three concepts were covered: animations, accessibility, and responsive design.

The animations chapter taught transforms, transitions, and keyframes. Funnily enough though, the most interesting thing I personally learned while doing this chapter is the pixel pipeline.

Simply put, the pixel pipeline is a process used by web browsers to convert HTML, CSS, and JavaScript into visual elements shown on the screen. This article mentions the five areas of this pipeline: JavaScript, style, layout, paint, and composite.

Also, this resource is quite useful to see how an animatable CSS property may affect others. It’s good to see which properties are performant.

As for the accessibility chapter, concepts discussed were semantic HTML, accessible colors, keyboard navigation, ARIA, and auditing tools. I find this video from W3 to be a good and quick refresher on web accessibility.

For this chapter, the auditing tools lesson was definitely the one that I’ve benefitted from the most so far. It talks about some auditing tools that can be used, like Lighthouse for Chrome. In fact, I was able to diagnose some issues with this blog site because of it, and now this site has 100 on all metrics!

And now lastly, responsive design! Throughout my learning journey with the curriculum so far, it was slightly bothering me that my projects were not responsive. But, since responsiveness was not mentioned in prior lessons, I did not fret too much about it.

Going through the responsive design chapter wasn’t too bad. I found using media queries to be quite intuitive, and was able to accomplish the homepage project without much trouble. I even made my project Silksong-themed, which I found appropriate since Silksong was released a few days ago (and yes, I’ve been playing way too much the past few days…).

That’s about it. This one’s a very short read, since I just wanted to briefly cover the stuff I found most interesting or useful.

I’m currently doing the React course, so I’ll be talking about that next week!