Introduction

There is a bittersweet lesson to be learned at any point in a developer's career. That is, we will always be learning no matter how advanced our knowledge is in some areas even if that means revisiting the basics.

If this is your first time reading one of my blogs, please allow me to introduce myself and give you a shortened summary of my background. My name is Matt, and I'm a software engineer living in Austin, TX. I have been studying in this field for over 3 years with an academic background at Purdue University Global and Flatiron School. I specialize in Ruby on Rails, JavaScript, and React.js. However... I am recently humbled by some gaps in my knowledge with basic HTML and CSS introduced to me during an interview I had with a local organization. The purpose of this blog is to illustrate my growth and filling in those gaps.

Laying Out the Problem

I was asked three very important questions that I should have known the answers to. They are the following:

1. What is the difference between a Div and Span within HTML?

2. What is the difference between the Grid and Flexbox within CSS?

3. What is the difference between Classes and IDs in HTML?

Div VS Span

Upon reflecting on my experience, I have blindly used these elements without ever asking myself what the technical purpose of them was. I suppose I allowed myself to default on the idea that they were simply used for developer readability. This was not the case. Divs are a block level element used to wrap sections of a document while a Span is an inline level element used to wrap small portions of content on a webpage.

Resource for Div VS Span

Grid VS Flexbox

This was eye-opening to me since the use at face value for both Grid and Flexbox seemed only slightly different from each other. While this is true, the reason for why and how we use them wasn't clear to me. In my research, I found that the Flexbox Layout is designed for layout in one dimension -- either a row or column. However, the Grid Layout serves as an extended use. The Grid is designed for a layout of two dimensions -- rows AND columns at the exact same time. There are certain percs that apply to both layout types such as minmax() and fr for fractions, but for the sake of not detailing onto a sub-topic, we will save them for another blog post.

Resource for Grid VS Flexbox

Classes VS IDs

This one really made me feel ashamed of myself, but I embraced this gap in knowledge as an opportunity to grow and be a better developer.

I, personally, have used classes way more than I've ever used IDs. It came back down to the fact that I didn't understand their technical uses despite functioning in the exact same way within CSS.

Classes are meant to identify more than one element whereas IDs do not. IDs are only meant to identify a single element. Selectors are pre-built within HTML and can be used for specific purposes such as the <p> tag, but classes and IDs are mainly used to select uniquely used elements on a webpage (with classes able to be used multiple times on a single page). We are even able to use a class and ID at the same time for one element, but the restriction is that ID can only have one unique value while the class can contain multiple.

Conclusion

In my case of failure to address these technical questions, I found that I faced two options: Either I was going to allow it to defeat me, or I was going to grow from these gaps. Being a software engineer has a funny way of bringing you down to earth and reminding you that there is much to learn. My biggest take from this experience was that it never hurts to revisit your roots and sharpen your basic skills. I feel that no matter what happens from here on out, I will remain a better developer than I was yesterday because of this experience. I am thankful for what I've learned, and I am excited for my next challenges ahead!