Back to Basics: HTML, CSS, and JavaScript Refresh

I love front-end development. The back-end is important because it is often the backbone of the functionality, but there is something so magical to me about the way you get to see everything come to life when working on the front-end. My favorite unit in bootcamp was React because of how easy it made it to create beautiful projects. However, I want to make sure I never get rusty when it comes to the basics of front-end development. Because I’ve known HTML, CSS, and some JavaScript since I was a child, it can be easy to ignore them for fancier new languages and frameworks when practicing. This week I received an interview for a programming school and camp for children. While preparing, I noticed that their front-end curriculum understandably focuses heavily on the building blocks of HTML, CSS, and vanilla JavaScript. I decided that this was the perfect opportunity to practice these skills.

I’m a big fan of the courses on Scrimba, so I decided to go through their HTML, CSS, and JavaScript component building crash course to get some reps in. In this course, I built 5 components: a nav bar with a dynamically changing name, a button that can hide or reveal text, a form that allows user to add a customized border to an image of their choice, a page theme selector, and a gallery that displays randomized images that change upon click or keydown. Throughout these mini-lessons, I got a lot of practice with Flexbox, DOM manipulation, and event listeners amongst other things. While none of these skills are new to me, it felt good to practice them and remember how these languages work at their most basic level.

My biggest takeaway from these tutorials is the reminder of how powerful these tools are even without fancy frameworks or libraries. I still love React, but it is helpful to continue practicing JavaScript so that I can have a better understanding of how it works at its core. It was also an excellent reminder of how beautifully HTML, CSS, and JavaScript work together. If one is writing something in pure HTML classes may seem like an extra step with no value add, but they become a powerful attribute when you can use them with CSS to style easily and efficiently or with JavaScript and entirely change the functionality of your project with just a few lines of code.