Intermediate HTML and CSS

Last week, I learned about the foundations of web development. This week, I explored some intermediate HTML and CSS concepts, as well as a touch of JavaScript.

I completed the Intermediate HTML and CSS course from The Odin Project curriculum, and also made some small progress in the JavaScript course. The course primarily covered intermediate HTML and CSS concepts, forms, and the CSS grid layout.

The intermediate HTML concepts discussed were simple enough. There is a lesson each for Emmet, SVGs, and tables. Emmet is basically a tool that allows you to write HTML a lot quicker by using syntax from CSS selectors. Perhaps the most useful (and arguably most used) Emmet feature is typing ! and pressing Enter, which automatically generates HTML boilerplate for you. However, I do also add another meta tag with name="description" to add a description for my websites.

I would absolutely love to use SVGs (animated SVGs in particular) more in the future, but I think I’m too early in my learning journey to be going down that rabbit hole. Here’s an article by Josh Comeau that gives an introduction on SVGs, and the cool things he’s done with them!

As for the intermediate CSS concepts, a ton was covered. Pretty much everything mentioned there was very useful. CSS units (rem is great!), resets (I use this one), text styles, additional properties not discussed from the Foundations course, advanced selectors, positioning (which I used to struggle with before), functions, custom properties, frameworks, and preprocessors. That’s a lot!

The concepts I’ve applied the most in my projects are using proper units, selectors, and custom properties. I now use rem instead of px for font sizes, margins, and paddings. Although, px still has its place for setting widths and heights on elements. Selectors like > I use a lot more in my CSS now. As for custom properties, I use them for setting the color scheme of my project (e.g. --c-red: #ff0000;).

And while we’re on the topic of units, this video by Kevin Powell on rem vs em is quite eye-opening. It is because of this video that I use em for buttons!

Now, let’s talk about forms. On the surface, you’d think forms would be quite simple, but there is so much to read up on about forms. In MDN’s documentation on web forms, there was so much information to unpack. And that’s not even including client-side form validation! While I didn’t expect forms to be quite a hefty chapter, it certainly taught me so much more than I knew before.

After the forms chapter, I am now introduced to a new CSS layout: grid. While I still personally find the flexbox layout a bit more intuitive, I still understood the grid layout quite well and was able to accomplish the admin dashboard project without much trouble. I can definitely see its use for layouts like these. I am quite interested to know though how grid can be used once mobile responsiveness is considered. If you want to see the two projects I’ve made throughout this course, you may refer to this GitHub link.

That’s pretty much it for that course. I’ve already started the JavaScript course, but I don’t want to go into the technical details of it just yet since this blog article is mainly for the stuff I learned from the intermediate HTML and CSS course. I’ve completed two projects in the JavaScript course so far, library and tic-tac-toe.

Overall, a week filled with a lot of learning. Next week will be all JavaScript!