DEV Community: Zach Gollwitzer

CSS Grid Course for Complete Beginners

Zach Gollwitzer — Mon, 24 May 2021 10:14:34 +0000

Prerequisites

A basic understanding of HTML
A basic understanding of CSS
A working knowledge of Flexbox (I will be borrowing many concepts from my Flexbox tutorial here)

The goal for this lesson

View this lesson on YouTube here

By the end of this lesson, you will:

Be able to explain to someone what CSS Grid is
Understand the basic syntax and model of CSS Grid
Understand how CSS Grid and Flexbox (prior lesson) relates
Understand when to use Flexbox and when to use CSS Grid for CSS layouts (yes, they can be used together!)
Be able to build the Holy Grail Layout with CSS Grid and Flexbox (see below)

What is the "fullstackroadmap" series?

This is part of my fullstack developer series, where you'll go from never having written a line of code to deploying your first fullstack web application to the internet. Click this link to get an overview of what this series is all about.

Series Table of Contents
Github Repository - where you'll find all the code we write in this series
YouTube Playlist
Series Overview
100 Days of Code Challenge - I highly recommend you take this on while reading this series!

Please tag me on Twitter @zg_dev and share this series with #100DaysOfCode!

Let's Begin - What is CSS Grid?

CSS Grid is a 2-dimensional layout system. In other words, you can control how elements sit on both the x and y axis, which is an addition to Flexbox, which we learned in the prior lesson of this series.

Here is why we need CSS Grid in our lives:

Before 2009 (pre Flexbox/Grid) front-end developers used "hacky" solutions to create complex layouts. This included those nasty float and clear properties along with some tedious mathematical calculations.
From 2009-2017 (Flexbox exists, Grid doesn't), the CSS layout game was easier than before, but still didn't have a great solution for "high level" layouts (such as the Holy Grail layout). You could get it done with Flexbox, but this required some "tricks" and a good amount of ingenuity.
From 2017 forward, we have CSS Grid for high-level, complex, 2-d layouts and Flexbox for simpler layouts. It's the best of both worlds.

But the next obvious question becomes... How do we know when to use CSS Grid vs. Flexbox?

When to use CSS Grid vs. Flexbox

CSS Grid and Flexbox work together. They are both part of the CSS3 spec, and while they do similar things related to layouts, they were not intended to compete with each other.

Use Grid when:

You need full control of rows AND columns (examples: full page layouts, gallery items)
You want to explicitly define the layout regardless of content size (i.e. if you are using Flexbox and it starts to get really complicated with a bunch of heights and widths, you probably should be using Grid)

Use Flexbox when:

Your content is a row OR column (examples: horizontal navbar, vertical sidebar)
You want the size of items to determine layout

We will go through an example of this later in the tutorial so you can see this in action.

One more thing before we get started...

Do all browsers support CSS Grid?

For the sake of a beginner learning front-end web development, YES. As of March 2017, all major browsers have built-in support for CSS Grid, and you shouldn't be worried about this.

For someone working in the industry who must support Internet Explorer (bless your soul) and some other old browsers, NO. You will need "fallback" styles. Luckily, with media queries, this is straightforward.

@supports (display: grid) {
  /* Put your CSS Grid styles here */
}

Everything you put in that block will apply if the browser supports CSS Grid.

Grid Container vs. Grid Items

If this heading sounds familiar, good. If not, please please please go read my Flexbox tutorial before continuing forward. This post is highly dependent on concepts we learned there and I will be glossing over them here.

Just like we had "Flex containers" and "Flex Items", with CSS Grid, we have "Grid Containers" and "Grid Items".

Look at the following HTML and CSS.

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
</div>

.grid-container {
  display: grid;
}

Like Flexbox, we activate CSS Grid by setting the display CSS property.

With a few tweaks to the grid settings and some additional color styles on the grid items, you can create something that looks like this:

As a preview to the remainder of the tutorial, notice the following things.

The above visual is one of many examples I could have used. For our example, I kept things simple and made our grid perfectly square (3 rows, 3 columns, all equal height and width)
The dotted lines are important. These are the boundaries for our grid.
With CSS Grid, we call the rows and columns "tracks"

Understanding CSS Grid is all about knowing how to manipulate the size and location of each grid item. To do that, we have several container-level properties and several grid-item-level properties available.

Before you freak out

What you're about to see is a long list of CSS properties that we can use with CSS Grid. At first glance, they are intimidating, but if you went through my Flexbox tutorial, you have the foundation required to understand this stuff well. We will add some new concepts, but most of the content to follow is "layers" on top of what you already know. I'm confident that the overwhelm you're about to feel will subside quickly as we dive in.

Grid Container vs. Grid Item Properties

Consistent with my prior tutorial on Flexbox, here are two cheat-sheets for CSS Grid that have really helped me. When I was learning, I kept them open constantly. I recommend you do the same for a couple weeks.

Cheat Sheet #1 - Great for experimenting with different property values in a live setting
Cheat Sheet #2 - Great for visualizing properties based on their container vs. item classification (as I've done below)

Also consistent with previous tutorials, below are links to the MDN documentation for CSS Grid properties. I will explain each of these in detail throughout the post.

Grid Container Properties

Set these properties on the HTML "container" you want to turn into a grid. Don't memorize these; we'll learn how they work later.

Activate the Grid

display: grid - Activates CSS Grid system on your HTML elements (other valid values include inline-grid and subgrid, but we won't cover these here)

Sizing

grid-template-rows - Defines the size of the grid rows
grid-template-columns - Defines the size of the grid columns
row-gap - Defines the size of the horizontal "gutters" between rows
column-gap - Defines the size of the vertical "gutters" between columns
grid-auto-rows - When you don't explicitly set a row's size (via grid-template-rows), the size is determined by this value.
grid-auto-columns - When you don't explicitly set a column's size (via grid-template-columns), the size is determined by this value.

Alignment

grid-auto-flow - Sets the algorithm used to place grid items that you don't explicitly place
grid-template-areas - A bit hard to explain this property without an example. I will cover this later in the tutorial.
justify-items - Aligns items along the horizontal axis within their grid areas
align-items - Aligns items along the vertical axis within their grid areas
justify-content - Aligns the grid item "group" along the horizontal axis (similar to how we used it in Flexbox where flex-direction: row)
align-content - Aligns the grid item "group" along the vertical axis (a bit different than how we used it with Flexbox)

Grid Item Properties

Sizing

grid-row-start - For a given grid item, defines the vertical starting point
grid-row-end - For a given grid item, defines the vertical ending point
grid-column-start - For a given grid item, defines the horizontal ending point
grid-column-end - For a given grid item, defines the horizontal ending point

Alignment

justify-self - Aligns a single grid item on the horizontal axis
align-self - Aligns a single grid item on the vertical axis

Here is a visual of all these properties in one spot.

Shorthand Grid Properties

Just like Flexbox, Grid has shorthand properties that combine some of the above properties together. Remember this?

/* Both rules below are equivalent. */
.flex-container {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-container {
  /* Shorthand property for Flexbox!
     Equivalent to:

     flex: <flex-grow> <flex-shrink> <flex-basis> */
  flex: 0 1 auto;
}

We can do similar things with CSS Grid. I do not recommend using these until you have become comfortable with the longhand properties above. Nevertheless, here they are:

grid - The shorthand of all shorthand properties. This defines pretty much everything at once (row, columns, areas, flow)
grid-template - Similar to grid, but less comprehensive. Defines the rows, columns, and areas of the grid.
gap (grid-gap) - Defines all the "gutters" at once
grid-area - Defines the entire area of a grid item at once
grid-row - A subset of grid-area, this defines the row sizing of a grid item
grid-column - A subset of grid-area, this defines the column sizing of a grid item

And if you need to see these visually like I do, here is a mind map to reference.

Part 1: Constructing the Grid

While I'm confident we can get through this topic without much confusion, it's going to require a methodical series of steps. Read carefully and don't skip ahead. This goes in a specific order.

First off, let's construct the "playground" we are going to use to explore CSS Grid. In the Codepen below, the only grid-related property I have set is this:

.grid-container {
  display: grid;
}

The Grid itself is activated, but we haven't set any properties on it yet. Please read through the CSS comments in the Codepen below and get yourself comfortable.

Visually speaking, here is what we are dealing with.

In "grid speak", here is what we have done. Since all of these properties default to these values, you could delete everything below and achieve the same layout as above.

.grid-container {
  display: grid;
  grid-template-rows: auto auto auto;
  grid-template-columns: auto;
  align-items: stretch;
  justify-items: stretch;
}

.gi-1 {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 2;
}

.gi-2 {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 1;
  grid-column-end: 2;
}

.gi-3 {
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 1;
  grid-column-end: 2;
}

The Grid Template

There is a lot to unpack here. Let's start with these two properties:

grid-template-rows
grid-template-columns

These two properties alone will define our "gridlines", and ultimately, the structure of our "grid".

If we don't set these properties explicitly, we get something called an "implicit grid", which will always be 1 column wide and the number of rows will be based on the number of grid items. In our case, we had 1 column X 3 rows (because we had 3 grid items).

To really see this in action, let's remove the grid items for a moment and look at examples. We will start simple:

.grid-container {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 2fr 1fr;
}

When you see fr, this means "fractional unit", and works identically to how our flex-grow and flex-shrink values did in our Flexbox tutorial (again, if you haven't please read it before moving on).

In the example above, we have defined grid-template-rows in 3 equal parts. We have allocated 3 "fractional units" (1fr + 1fr + 1fr), so each row will receive 33.33% of the available grid space. We defined grid-template-columns in 2 parts, but they are not equal. In total, we have allocated 3 fr units, but gave 2 of them to the first column and 1 to the second. If each unit is equal to 33.33% (1/3), then the first column will be 66.66% wide and the second column will be 33.33% wide. Here is the grid we just defined:

One thing that you'll notice is that we have 2 columns, but 3 "lines" that represent boundaries. This is similar to the fence-post math problem. Because of this, I have renamed them to CL-n and RL-n, short for "Column Line #n" and "Row Line #n".

Here's one more example.

.grid-container {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

We have defined 8 rows and 8 columns of equal width an height (i.e. a perfectly "square" grid). Here is what it looks like.

Before we move on, let's simplify our CSS by using the repeat function. In this tutorial, I won't be getting into the "shorthand" Grid properties much, but this one is simple and will save you some typing. As opposed to typing a bunch of 1fr units to define our grid, we can write this:

.grid-container {
  display: grid;
  grid-template-rows: repeat(8, 1fr);
  grid-template-columns: repeat(8, 1fr);
}

Positioning Items on the Grid

Let's keep going with that 8x8 grid example from above and add some grid items. By default, here is what we get when we add 3 grid items with no width/height and no additional Grid properties.

In CSS Grid terminology, the "grid area" represents the space that a grid item occupies. We have not explicitly instructed our grid to place the grid items, so they will take up 1 "cell" of the grid each. Here is a more detailed visual:

The above visual is the "default", but what if I wanted to place these three items in specific locations on the grid? Maybe something like this:

Before CSS Grid, achieving this layout would require a tremendous effort. With Grid, it's simple. To place items, you just need to specify the "line" that they start/end on from a row/column perspective. Let's break this down:

Grid item 1
- Starts on RL-3, ends on RL-4
- Starts on CL-3, ends on CL-4
Grid item 2
- Starts on RL-6, ends on RL-7
- Starts on CL-6, ends on CL-7
Grid item 3
- Starts on RL-8, ends on RL-9
- Starts on CL-8, ends on CL-9

Let's take this information and translate it into CSS. All of the properties below are grid item (not container) properties.

.gi-1 {
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 3;
  grid-column-end: 3;
}

.gi-2 {
  grid-row-start: 6;
  grid-row-end: 7;
  grid-column-start: 6;
  grid-column-end: 7;
}

.gi-3 {
  grid-row-start: 8;
  grid-row-end: 9;
  grid-column-start: 8;
  grid-column-end: 9;
}

Optionally, you could could have used the grid-row and grid-column properties here to simplify, but like I mentioned earlier, it is best to use the longhand properties until you are really comfortable with CSS Grid! Here's the result:

Sizing Items on the Grid

By default, our grid items are filling the space of one grid "cell" naturally. If you look at any of the Codepens above, you can see the following specs for our grid:

The Grid container is 310px wide and 310px tall with a border of 5px. Therefore, the total available space is 300px wide and 300px tall (when box-sizing: border-box)
The Grid is 8 x 8
Each grid "cell" will be 37.5px wide and 37.5px tall (300px / 8)

There are two ways that we can resize them:

Set an explicit width and height on each
Change the grid-row-end and grid-column-end properties

Option #1 isn't great because it will open a can of worms we're not ready for yet.

Let's try option #2 and replicate this:

While this might seem difficult, we can use the same method we did to place the grid items above! Here's the CSS.

.gi-1 {
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 3;
  grid-column-end: 6;
}

.gi-2 {
  grid-row-start: 6;
  grid-row-end: 7;
  grid-column-start: 6;
  grid-column-end: 7;
}

.gi-3 {
  grid-row-start: 8;
  grid-row-end: 9;
  grid-column-start: 8;
  grid-column-end: 9;
}

And here's the result:

Review: Setting up the Grid

At this point, you know the basics of setting up a CSS Grid container and placing/sizing items within it. The structure is relatively simple as you have seen throughout the tutorial.

<div class="grid-container">
  <div class="grid-item gi-1">1</div>
  <div class="grid-item gi-2">2</div>
  <div class="grid-item gi-3">3</div>
</div>

.grid-container {
  /* Generic CSS properties */
  width: 310px;
  height: 310px;
  border: 5px solid #212226;

  /* Grid container properties */
  display: grid;
  grid-template-rows: repeat(8, 1fr);
  grid-template-columns: repeat(8, 1fr);
}

.gi-1 {
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 3;
  grid-column-end: 6;
}

.gi-2 {
  grid-row-start: 5;
  grid-row-end: 7;
  grid-column-start: 6;
  grid-column-end: 7;
}

.gi-3 {
  grid-row-start: 8;
  grid-row-end: 9;
  grid-column-start: 1;
  grid-column-end: 9;
}

While this will get you started, there is more to talk about, and certainly some details that I purposefully omitted here. We will circle back to some of these properties later. For now, let's talk about aligning grid items within the grid container AND within their "grid areas".

Basic CSS Grid Alignment

If you following this tutorial closely, you might be asking why we are talking about "alignment". Didn't we just talk about alignment?

While we discussed the placement and sizing of grid items, we did not cover their alignment, which can happen in two ways:

Alignment within a item's "grid area"
Alignment within a grid container

"Grid Area" Alignment

We briefly covered what a "grid area" means, but not enough for you to walk away confidently. Let's go back to our 8x8 grid and define a "grid area" that we want to experiment with.

Since our grid is 8fr x 8fr, this "grid area" is 4fr x 4fr. We can place a grid item in this space using the following HTML and CSS:

<div class="grid-container">
  <div class="grid-item gi-1">1</div>
</div>

.grid-container {
  width: 310px;
  height: 310px;
  border: 5px solid #212226;
  display: grid;
  grid-template-rows: repeat(8, 1fr);
  grid-template-columns: repeat(8, 1fr);
}

.gi-1 {
  grid-row-start: 2;
  grid-row-end: 6;
  grid-column-start: 2;
  grid-column-end: 6;
}

And here it is live with some styling:

We know from earlier that the total size of a single grid "cell" is 37.5px wide and tall. Therefore, our "grid area" here is 150px wide and tall (37.5 * 4), and our grid item is stretching to fit those dimensions.

But what if we explicitly set some dimensions on our grid item? Let's set this grid item to 120px:

.gi-1 {
  width: 120px;
  height: 120px;
}

When we do this, our "grid area" will remain the same, but now our grid item does not fill 100% of it.

So now we've got this empty space within our "grid area". Would it be possible to center my grid item in the "grid area"? Of course! Here's the recipe:

.grid-container {
  justify-items: center; /* horizontal */
  align-items: center; /* vertical */
}

Here's what we just did:

See how our grid item is now centered in the "grid area"? Here's the code–I suggest toggling these two CSS properties on and off in the CSS to visualize what it is doing.

Seems similar to Flexbox Alignment...?

In Flexbox, we use the following two CSS properties to align items within their flex container:

justify-content - aligns items on the "main axis"
align-items - aligns items on teh "cross axis"

With CSS Grid, if we want to align grid items within their "grid areas", we use these properties:

justify-items - aligns items in the horizontal direction within the grid area
align-items - aligns items in the vertical direction within the grid area

CSS Grid also has the justify-content and align-content properties, but we aren't quite ready to explore those yet.

To make this even more clear, let's add another grid item into the equation. This time, it will occupy 2fr x 2fr units for the "grid area". This means that the "grid area" dimensions will be 75px wide and tall (37.5 * 2). We will make our second grid item 45px (arbitrary, anything less than 75px will work) wide and tall so that it has some "empty space" and we can see the effect of these alignment properties. Here's what we're dealing with (without any alignment properties set yet):

Let's go one step at a time. First, we'll set the vertical alignment of the grid items within their "grid areas".

.grid-container {
  align-items: center; /* vertical */
}

Here's what we get:

Now, we will set the horizontal alignment with justify-items.

.grid-container {
  align-items: center; /* vertical */
  justify-items: center; /* horizontal */
}

As you can see, our grid items are now centered within their "grid areas".

Here is the relevant code:

In this tutorial, I'm supplying you with visualizes that help you see what is happening, but how would we verify these things without them?

Glad you asked–if you open up the Google Chrome Developer Tools (other browsers like Firefox work too), you will see something like this:

Notice how our items are perfectly centered within their "grid areas".

Aligning the Entire Grid

Up to this point, we have been working in "perfect conditions":

.grid-container {
  width: 310px;
  height: 310px;
  border: 5px solid #212226;
  display: grid;
  grid-template-rows: repeat(8, 1fr);
  grid-template-columns: repeat(8, 1fr);
}

Our grid container HTML element has 300px of "available space" which is evenly filled with our grid itself (because of our grid-template rules). The repeat(8, 1fr) rule is saying "I want 8 rows and 8 columns, and I want each grid cell to evenly divide the 300px of available space". Therefore, in our examples so far, each grid cell is 37.5px wide and tall (300 / 8).

What if we changed the rule to this?

.grid-container {
  width: 310px;
  height: 310px;
  border: 5px solid #212226;
  display: grid;
  grid-template-rows: repeat(8, 25px);
  grid-template-columns: repeat(8, 25px);
}

Our grid container's available space is 300px, but now, our grid is 200px wide and tall (25px * 8). Our grid is smaller than our grid container. Here's a visual of what that might look like by default.

Let's put our grid items back on. Since we decreased the size of our grid, we need to decrease the size of our grid items. Remember:

Grid item 1 has a "grid area" equal to 4x4, which is equal to 100x100 pixels (25 * 4 = 100)
Grid item 2 has a "grid area" equal to 2x2, which is equal to 50x50 pixels (25 * 2 = 50)

To ensure that the grid items are smaller than their "grid areas", let's make them 50x50 and 25x25 pixels respectively (exactly half the size of their "grid areas" in each case).

Here's what our CSS looks like so far:

.grid-container {
  width: 310px;
  height: 310px;
  border: 5px solid #212226;
  display: grid;
  grid-template-rows: repeat(8, 25px);
  grid-template-columns: repeat(8, 25px);
}

.gi-1 {
  color: #1E4040;
  background-color: #71D99E;
  grid-row-start: 2;
  grid-row-end: 6;
  grid-column-start: 2;
  grid-column-end: 6;
  width: 50px;
  height: 50px;
}

.gi-2 {
  color: #71D99E;
  background-color: #3A8C7D;
  grid-row-start: 7;
  grid-row-end: 9;
  grid-column-start: 2;
  grid-column-end: 4;
  width: 25px;
  height: 25px;
}

Let's throw a little curveball here to practice our grid item alignment skills. Add the following CSS to your grid container:

.grid-container {
  justify-items: end;
  align-items: end;
}

This will reposition both items to occupy the bottom-right corner of their "grid areas". Here's what that looks like:

justify-content and align-content

We are finally ready to see what these two properties do. Once again–if the grid size is smaller than the grid container size, these properties will align the ENTIRE grid within the grid container. Let's go ahead and center our grid by adding these properties to the container.

.grid-container {
  justify-content: center;
  align-content: center;
}

Here's what we get:

In the image above, it's obvious what is happening. The entire grid is centered within the grid container and the grid items are placed at the end of their "grid areas". Once we turn this into code, it's not so obvious:

But once again, you can open your developer tools and hover over the grid to see a clearer picture of what's going on. The developer tools do not highlight the "grid areas" that we talked about, so I added those in manually. Since we defined our grid items to be perfect multiples of the grid area sizes, they fit perfectly within the grid cells.

More Grid Alignment Examples

It would be overly tedious for me to create visuals for every possible alignment combination. That is what cheat sheets are for. Nevertheless, I want to give you a few more examples to look at to better understand these grid alignment properties.

Example 1

Example 2

Example 3

CSS Grid Basics Summary

At this point, I've shown you the basics of CSS Grid. There is a lot more that you can do with it, but we've got the core concepts in place.

Before moving on with the tutorial, you should feel comfortable explaining how the following CSS properties are used in the context of the CSS Grid system.

Container Properties
- display: grid - activates the grid
- grid-template-rows / grid-template-columns - Defines the number of rows/columns in the grid
- justify-content / align-content - Aligns the entire grid (if it is smaller than its container)
- justify-items / align-items - Aligns grid items within their "grid areas" (which are defined at the item level)
Grid Item Properties
- grid-row-start / grid-row-end - Defines the horizontal "grid area" for an item
- grid-column-start / grid-column-end - Defines the vertical "grid area" for an item

A Quick CSS Grid Challenge

With your current knowledge, you should be able to create the design from the very beginning of this tutorial:

Here is a starter Codepen (just hit the "fork" button to copy it to your account) along with the solution:

Starter - https://codepen.io/zg_dev/pen/JjENBKX
Solution - https://codepen.io/zg_dev/pen/gOgWjMo
Solution (using shorthand Grid properties) - https://codepen.io/zg_dev/pen/WNRjKEL

Intermediate CSS Grid

The remainder of the tutorial will be an exploration of CSS Grid properties and how we can make the most out of this system. While the following content is not required to use CSS Grid effectively, I highly recommend reading all of it. I do not intend to cover every remaining detail of CSS Grid, but rather point out the most useful parts that we haven't touched on thus far.

CSS Grid "Gutters"

When you make a grid on a web page, you're most likely going to want some spacing between your grid items. We could create this spacing with padding, margin, or even some Flexbox magic, but there is no need to when you have the power of CSS Grid. We call this spacing "gutters" and it is easy to do with the row-gap and column-gap properties.

Let's start with a basic 3x3 grid.

Here are the CSS Grid properties you need to create this:

<div class="grid-container">
  <div class="grid-item gi-1">1</div>
  <div class="grid-item gi-2">2</div>
  <div class="grid-item gi-3">3</div>
  <div class="grid-item gi-4">4</div>
  <div class="grid-item gi-5">5</div>
  <div class="grid-item gi-6">6</div>
  <div class="grid-item gi-7">7</div>
  <div class="grid-item gi-8">8</div>
  <div class="grid-item gi-9">9</div>
</div>

.grid-container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
}

Let's add some gutters:

.grid-container {
  row-gap: 10px;
  column-gap: 10px;
}

Yep, it's really that easy. Just add your desired "gutter" width and your grid items will magically space themselves out in a responsive way.

To reinforce some concepts from earlier, let's reduce the size of our grid and center it in its container. Remember, we have 300px of space available within the grid container, so if we set the width/height of each grid "cell" to 50 pixels, the total grid size will now be 50 + 50 + 50 = 150px. After doing that, we can use justify-content and align-content to center our grid in the grid container. Here are the changes I'm making to achieve this:

.grid-container {
  /* REMOVE THIS 

  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr); 

  */

  /* ADD THIS */
  grid-template-rows: repeat(3, 50px);
  grid-template-columns: repeat(3, 50px);
  justify-content: center;
  align-content: center;
}

CSS Grid Automatic Flow

Do you remember from the Flexbox tutorial where we talked about the flex-direction property?

If you set the value to row, your flex items would be horizontally aligned. If set to column, they would be vertically aligned.

With CSS Grid, we don't have the concept of a "main axis" and "cross axis", but we do have the ability to change the natural flow of grid elements.

Let's say you have a basic grid with the following HTML and CSS:

<div class="grid-container">
  <div class="grid-item gi-1">1</div>
  <div class="grid-item gi-2">2</div>
  <div class="grid-item gi-3">3</div>
  <div class="grid-item gi-4">4</div>
</div>

.grid-container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
}

Since we haven't explicitly defined where each grid item goes on the grid yet, where would you expect them to be?

By default, they are aligned horizontally on the grid, and overflow to the next row if there are too many items. In this case, we have 3 columns defined in our grid and 4 items, so the first three will line up horizontally, and the final item will break to the next row.

If we wanted, we could explicitly place each grid item to stack on top of each other vertically, but that's a lot of work! If you wanted to change the "flow" of these grid items, all you need is the grid-auto-flow property, which acts similarly to the Flexbox flex-direction property. Most commonly, you will be using either row (the default value) or column. Let's change it to column and see what happens.

.grid-container {
  grid-auto-flow: column;
}

Just like that, our grid looks completely different!

You can also set this to dense, which will look for empty spaces in your grid and place smaller grid items in them (even if they are not in the right order). I won't be covering this here, but feel free to experiment with it as it could be good use-case for picture grids.

Explicit vs. Implicit Grid

Let's say we have this grid:

<div class="grid-container">
  <div class="grid-item gi-1">1</div>
  <div class="grid-item gi-2">2</div>
  <div class="grid-item gi-3">3</div>
  <div class="grid-item gi-4">4</div>
</div>

.grid-container {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(3, 1fr);
}

We have not explicitly placed or sized the grid items, which means they will do two things by default:

Flow in the row direction (thanks to the default value of the grid-auto-flow property set to row)
Each item will stretch to fill its "grid area" (thanks to the default value of justify-items, which is stretch)

Since we defined 3 columns and 1 row, the first 3 grid items will occupy the first row, and the 4th grid item will... Occupy the 2nd row? But wait, we didn't define a second row...

The fourth grid item is part of what we call the Implicit Grid.

Let's back up. Our Explicit Grid is a 1 x 3 (row x col) grid, defined by these properties:

.grid-container {
  display: grid;
  grid-template-rows: 1fr; /* Defines 1 row that fills the entire grid space */
  grid-template-columns: repeat(3, 1fr); /* Defines 3 columns of equal space */
}

Naturally, these allows 3 items to fit nicely in the grid. If we have 4 or more items, they will start occupying the Implicit Grid. By default, "extra" items will flow according to the grid-auto-flow property and will take up space equal to the size of their content.

We can change this behavior with the grid-auto-rows and grid-auto-columns properties. Instead of sizing the Implicit Grid according to content size, let's give it some dimensions.

.grid-container {
  display: grid;

  /* Explicit Grid */
  grid-template-rows: 1fr;
  grid-template-columns: repeat(3, 1fr);

  /* Implicit Grid Behavior */
  grid-auto-flow: row; /* This is the default, but setting it anyways for demonstration */
  grid-auto-rows: 100px;
  grid-auto-columns: 50px;
}

This means that any grid item placed on the Implicit Grid will have a height of 100px (row height) and width of 50px (column width). Let's go ahead and place our 4th grid item on this Implicit Grid:

.gi-4 {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 4;
  grid-column-end: 5;
}

Remember, our explicit grid looks like this:

In the CSS above, we are saying, "place grid item 4 between RL-2 and RL-3, and between CL-4 and CL-5". But wait, those don't exist?!

Sure, they don't exist, but we can still place grid items on them. The explicit grid will shrink and our grid item will be placed and sized on the Implicit Grid according to the grid-auto-rows and grid-auto-columns properties, which are 100px and 50px respectively in this situation. Therefore, our 4th grid item will be 100px tall and 50px wide. See below:

Below, I have highlighted these concepts in more detail:

After seeing this, you may have the question, "Why would we ever need this?".

If you are ever building a grid where you don't know how many items you will have, it is a good practice to set the grid-auto-rows and grid-auto-columns properties. If you want some flexibility, you can add something like this:

.grid-container {
  grid-auto-rows: minmax(100px, auto);
  grid-auto-columns: minmax(50px, auto);
}

By doing this, you are declaring that all grid items that fill the Implicit Grid will have a minimum width and height of 50px and 100px respectively. If those grid items have content larger then these dimensions, then their width and height will be set to auto.

A Different Way to Use CSS Grid

We are almost to the finish line. The only property that we have not yet covered is the grid-template-areas property. I saved this for last because it is not necessary to use, but provides an easy way to define "grid areas". Up to this point, we placed grid items using the following method:

We first define the grid:

.grid-container {
  width: 310px;
  height: 310px;
  border: 5px solid #212226;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
}

Then, we explicitly place each grid item using the grid "lines":

.gi-1 {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 3;
}

.gi-2 {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 1;
  grid-column-end: 2;
}

.gi-3 {
  grid-row-start: 1;
  grid-row-end: 4;
  grid-column-start: 3;
  grid-column-end: 4;
}

With the grid-template-areas, we can achieve the same result in a different way:

.grid-container {
  grid-template-areas:
      "item1 item1 item3"
      "item2 . item3"
      ". . item3";
}

.gi-1 {
  grid-area: item1;
}

.gi-2 {
  grid-area: item2;
}

.gi-3 {
  grid-area: item3;
}

The syntax here looks odd, but it is a much more "visual" way to use CSS Grid. In the .grid-container styles, notice how we have 3 quotation groups separated by spaces. Since we have defined a 3x3 grid, the quotation groups represent the rows while the individual items represent the columns. Furthermore, the . represents "empty space".

In each grid item style, we are defined that item's "alias" which as you can see, is used above in the grid-template-areas.

Let me format this so it is clearer what is happening:

"item1    item1    item3"
"item2      .      item3"
"  .        .      item3"

Notice how "item3" fills the entire 3rd column? Take a look at the Codepen above.

You can quickly see what's going on here and for some, this is a more intuitive way to create grids.

Naming your Grid Lines

In the above section, we talked about a more intuitive way to create a CSS Grid. This section will offer another alternative.

You've seen this already:

For educational purposes, I have been labeling the grid "lines" as "CL-n" and "RL-n" to indicate "Column Line 1" and "Row Line 1", but when we translate this into CSS, it looks like this:

.gi-1 {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 3;
}

If we needed a way to remember the line names, we could assign them on the grid container:

.grid-container {
  display: grid;
  grid-template-rows: [RL-1] 1fr [RL-2] 1fr [RL-3] 1fr [RL-4];
  grid-template-columns: [CL-1] 1fr [CL-2] 1fr [CL-3] 1fr [CL-4];
}

And then use them on the grid items:

.gi-1 {
  grid-row-start: RL-1;
  grid-row-end: RL-2;
  grid-column-start: CL-1;
  grid-column-end: CL-3;
}

Here's a demo:

CSS Grid and Flexbox Work Together

I said at the beginning of this tutorial that we would go through an example so you can see how Flexbox and CSS Grid play nicely together. As a refresher, here are a few rules-of-thumb to go by when deciding between Flexbox and Grid:

Use Grid when:

You need full control of rows AND columns (examples: full page layouts, gallery items)
You want to explicitly define the layout regardless of content size (i.e. if you are using Flexbox and it starts to get really complicated with a bunch of heights and widths, you probably should be using Grid)

Use Flexbox when:

Your content is a row OR column (examples: horizontal navbar, vertical sidebar)
You want the size of items to determine layout

Below, I have created two examples that use CSS Grid and Flexbox interchangeably. I suggest spending 10 minutes reading through the CSS of each.

Picture Gallery

A simple picture gallery with a "sticky" navbar and footer. This layout would require a few "hacky" CSS tricks to achieve before, but with Grid and Flexbox, it is relatively straightforward. In particular, there are a few critical pieces to this that you should focus on while reading through the code:

Notice how I have placed a "grid inside a grid". This is perfectly okay.
Notice that the main grid-container has a 100vh height, and has set the main content (the pictures) to a unit of 1fr. This means that the navbar and footer will get their explicitly defined heights of 70px and 40px and the picture grid will take up the remaining space in the viewport (visible screen).
Notice that I set the .pictures grid to have an overflow: scroll setting. This ensures that adding pictures to the grid will not cause our navbar or footer to disappear on scroll.

The "Holy Grail" Layout

This is the "final project" for our CSS Grid tutorial. You will have to build this (or something very similar) many times in your web dev career, so I wanted to give you a template to start with!

If you would like to build this with me, I created a YouTube video showing you how.

Here's the final product.

Before you leave

Thanks for reading! If you liked this and want to support me, you can do two things that I would really appreciate.

Follow me on Twitter @zg_dev
Subscribe to my email list below

Detailed Flexbox Tutorial for Complete Beginners #fullstackroadmap

Zach Gollwitzer — Sun, 28 Mar 2021 20:23:32 +0000

This lesson is also on YouTube:

Prerequisites

The goal for this lesson

By the end of this lesson, you will:

Be able to explain to someone what Flexbox is
Understand how Flexbox can make your workflow faster and WAYYYY less frustrating
Have a firm understanding of basic Flexbox syntax and patterns
Build the following design with Flexbox:

What we are covering in this lesson

What is Flexbox?
What can Flexbox do for us?
- Simplify layouts in CSS
- Reduce reliance on media queries for responsive design
Basic Flexbox Concepts
- Flex container vs. Flex items
- Main axis vs. Cross axis
- Aligning and spacing flex items
- Flex wrap
- Flex sizing
A Frontend Mentor HTML/CSS Challenge with Flexbox!

What is the "fullstackroadmap" series?

Series Table of Contents
Github Repository - where you'll find all the code we write in this series
YouTube Playlist
Series Overview
100 Days of Code Challenge - I highly recommend you take this on while reading this series!

Please tag me on Twitter @zg_dev and share this series with #100DaysOfCode!

Let's Begin - What is Flexbox?

Flexbox is a one-dimensional CSS layout system enabled by a single CSS property:

.container-element {
  display: flex;
}

By setting this property on an HTML element, all of that element's direct children will behave in a totally different way than we previously discussed.

Remember from our CSS crash course when we talked about the "normal flow" of HTML elements? We talked about block, inline-block, and inline HTML elements. To review:

Block element - Breaks to a new line, respects width/height properties, 100% width of container by default
Inline Block element - Respects width/height properties, but does not break to a new line and does not take up 100% width of container by default
Inline element - Does not break, does not respect width/height properties, does not take up 100% width of container by default

These are the "default" display types. By adding display: flex to an HTML element, we can unlock a tremendous amount of possibilities!

What Can Flexbox Do for Us?

I could tell you or I could show you. Plenty of resources tell you. Let me show you.

Here is a CSS layout WITHOUT using Flexbox. Read through the CSS and particularly pay attention to the "layout properties" section. Notice how I am using lots of widths and margins to get the layout how I want it. Before Flexbox was released, this is how you might write the CSS.

See the Pen Float Layout (legacy layouts) by Zach
(@zg_dev) on CodePen.

Now that we have Flexbox, we can achieve the same layout with a lot less CSS. Notice how many lines of CSS we were able to remove below. Also, notice that we no longer need a bunch of percentages, floats, and absolute positioning to achieve this layout!

See the Pen Flexbox Layout by Zach
(@zg_dev) on CodePen.

Let's look at another example. In the Codepen below, I have centered a div container to the middle of the screen WITHOUT using Flexbox. This requires a few CSS tricks that are not all that intuitive!

See the Pen Centering Elements Without Flexbox by Zach
(@zg_dev) on CodePen.

The next example is identical to above except now, we are leveraging flexbox to easily center this div.

See the Pen Centering Elements With Flexbox by Zach
(@zg_dev) on CodePen.

In that last example, we went from this:

/* Legacy solution */

.container {
  height: 100vh;
}

.div-to-center {
  max-width: 250px;
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

To this:

/* Flexbox solution */

.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.div-to-center {
  max-width: 250px;
}

In my opinion, our Flexbox solution is simpler and easier.

In summary, here are the main reasons why you should learn Flexbox.

Easier to design responsively
Less CSS code
Less calculations
Aligning and centering content is WAY EASIER

From Floats to Flexbox and Grid

Before Flexbox, web developers used "floats", "clearfixes", and a bunch of other "hacks" to get the layout of their webpage looking good. CSS was never intended for complex layouts in the beginning, so when websites started using navbars, sidebars, footers, and other layouts, they needed to find a "workaround" to their problems.

When Flexbox was introduced, the CSS layout game changed. We can now easily build complex layouts without "CSS Tricks".

But shortly after Flexbox came about, this thing called "CSS Grid" was released into most major browsers. Like Flexbox, CSS Grid aims to make CSS layouts easier.

If that's the case, why are we learning Flexbox? Why not skip it and learn CSS Grid? Here are two reasons why:

Flexbox and CSS Grid are NOT mutually exclusive. They work together. I'll show you how in future lessons.
Flexbox is "required" knowledge for the modern front-end web developer.

The next lesson of this full-stack series will be about CSS Grid, and luckily, it follows a very similar structure to Flexbox. In other words, learning Flexbox will help you learn CSS Grid quicker.

While we will not be covering CSS Grid in this lesson, many of the concepts here will carry forward to when we do learn it!

Flex Containers vs. Items

We have already used the concept of "containers" in previous lessons, but we haven't looked at it in isolation. Take a read below:

<div class="main-container">
  <div class="container-1">
    <p>Some random HTML</p>
    <div class="sub-container-1">
      <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
      </ul>
    </div>
  </div>
  <div class="container-2">

  </div>
  <div class="container-3">

  </div>
</div>

Unimpressive, I know, but the structure above highlights a crucial concept in CSS, and particularly, Flexbox layouts. In this structure, we have a main-container div, which has three "children" containers. One of the child containers, container-1, has a child container itself.

This pattern is important to understand because when using Flexbox, we ALWAYS need to be aware of which HTML element is the "container" and which HTML element(s) are the "child elements" of that container.

Without any CSS added, all of the div elements above are "block" elements. But what if we did this:

.main-container {
  display: flex;
}

This single CSS rule turns the main-container div into a "flex container". This also means that all of this container's direct children are now "flex items". In this case, there are four total HTML elements affected:

main-container - becomes a "flex container"
container-1 - becomes a "flex item"
container-2 - becomes a "flex item"
container-3 - becomes a "flex item"

We'll talk about what this means shortly, but what about the rest of the HTML elements? What about sub-container-1? What about the p element? What about the ul and li elements?

Listen up, you're going to need to remember this–only direct children of "flex containers" are "flex items".

What if I did this?

.main-container {
  display: flex;
}

.container-1 {
  display: flex;
}

Certainly, a "flex container" cannot be a "flex item" too right?!

Wrong.

A single HTML element can be both. This will make more sense soon.

Let's do some more practice identifying "flex containers" and "flex items".

<div class="main-container">
  <div class="left-container">
    <h2>Some heading</h2>
    <p>Some paragraph text</p>
  </div>
  <div class="right-container">
    <h3>H3 Heading</h3>
  </div>
</div>

.main-container {
  display: flex;
}

.left-container {
  display: flex;
}

Given the HTML and CSS above, name all the flex containers, flex items, and "block" items.

Flex containers - .main-container and left-container
Flex items - .left-container, .right-container, h2, p
Block items - h3

As we go through this tutorial, be sure to identify the "flex container" and its "flex items" before writing any additional code!

Flex Container Flex Item Properties

At this point, you know how to activate Flexbox on an HTML element (display: flex), and you know how to identify the "flex container" and "flex items".

As we go through the remainder of this tutorial, my intention is NOT to regurgitate Flexbox documentation. My goal is to logically step through how this entire system works. Therefore, I want to start by providing you with a few resources to have open as we go through this.

Consistent with previous tutorials, I want to provide you with links to the MDN documentation on Flexbox. Below are links to documentation. I will explain each of these in detail throughout the post.

"Flex Container" CSS Properties
- display: flex - Activates Flexbox on an HTML element
- flex-direction - Defines the "main" and "cross" axis
- justify-content - Defines the alignment of flex items on the main axis
- align-items - Defines the alignment of flex items on the cross axis
- flex-wrap - For overflowing content, defines whether it will "wrap" to the next line
- align-content - Only applies if flex-wrap is set to wrap, and defines the alignment of all the wrapped content on the cross axis (I know, a bit confusing)
"Flex Item" CSS Properties
- align-self - Similar to align-items and align-content above, but only applies to a single flex item
- order - Change the order of flex items
- flex-grow, flex-shrink, and flex-basis - All properties related to how large the flex item will be in the container. These are probably the trickiest of all properties, but we'll walk through them.

A quick note on "shorthand" flex properties - If you read the docs, you'll notice that I have left out properties like flex and flex-flow. These are "shorthand" properties that combine two or more other properties. For example, flex combines flex-grow, flex-shrink, and flex-basis while flex-flow combines flex-direction and flex-wrap. Since we are just learning, there is NO NEED for these yet. Once you are completely comfortable with the long-hand properties, you can start using these, but not before.

Lastly, before we get started, I want to point you towards an excellent "cheat sheet" for Flexbox. For the first couple weeks of working with Flexbox, I had this cheatsheet open in my browser at all times.

Default Properties

Just like there are default margins, colors, display types, and other property defaults in CSS, Flexbox comes with some defaults. Remember, creating a Flex Container is easy:

<div class="container">
  <p>Paragraph element 1</p>
  <p>Paragraph element 2</p>
  <p>Paragraph element 3</p>
</div>

.container {
  display: flex;
}

Once you write that CSS, a series of "defaults" will be applied to the flex container and items in it. In other words, the CSS in the above code snippet is equivalent to the CSS below. Here is a Codepen to prove it.

.container {
  display: flex;
}

/*  
    You could delete everything below, and nothing will change.  All of
    the properties below are "defaults" and are applied automatically

    Please note that "normal" and "auto" will adopt different behavior 
    based on different situations.  I have commented what this "normal" value
    resolves to with Flexbox.
  */
.container {
  flex-direction: row;
  justify-content: normal; /* stretch */
  align-content: normal;
  align-items: normal; /* stretch */
  flex-wrap: nowrap;
}

p {
  align-self: auto;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

As we go through this tutorial, remember that if we do not explicitly set these properties, they will default to the above values!

The Main Axis vs. Cross Axis (flex-direction)

Once an HTML element becomes a "flex container", you have to think about it differently. By default, each flex container looks something like this:

Each flex container will take up space (width, height) and the flex items within it will be placed along either the main or cross axis.

We can determine the main and cross axis based on the flex-direction property, which is by default, set to row. This tells us that the main axis is horizontal and the cross axis is vertical. If you need to change the direction of the main/cross axes, you can do so like this:

.container {
  display: flex;
  flex-direction: column;
}

Here's what this does:

Changing this single property changes the main and cross axes, which influences how the flex items are arranged within the flex container. In the Codepen below, click the button to toggle between the two states.

See the Pen Default Flexbox by Zach
(@zg_dev) on CodePen.

What if the container size changes?

In the Codepen example above, I gave the flex container a width of 300px and a height of 200px. What if I omitted these?

Just like regular block elements, a flex container without explicit height/width values will occupy 100% width and the height will be based on the height of the content within.

See the Pen Flex Direction without explicit container dimensions by Zach
(@zg_dev) on CodePen.

An Important Preface to the Rest of This Post

For the remainder of this post, I will be using the following flex settings:

.flex-container {
  display: flex;
  flex-direction: row; /* main axis is horizontal, cross axis is vertical */
}

It would be redundant to show examples with a flex-direction of both row AND column. Since we will be working with a main axis that is horizontal, all our calculations will be done on the "width" property of elements, but if the main axis was column, we would have to look at the "height" property.

Alignment of Flex Items

Main Axis Alignment (justify-content)

By using the justify-content property on the flex container, you can influence how the flex items are aligned on the main axis.

.container {
  display: flex;
  flex-direction: row;
  justify-content: start (default) | end | center | space-between | space-around | space-evenly; /* Use this to align items on the main axis */
}

There are six values here that you'll want to know. You can test them out here, or see them visually below.

As a clarification, the difference between space-around and space-evenly is subtle, but there is a difference. With space-around, the space between flex items will be equal, but the space on the edges will not. With space-evenly, all empty space will be equal.

Cross Axis Alignment (align-items)

In addition to alignment on the main axis, we can align on the cross axis.

Before we look at the possibilities, I want to bring your attention to something. In the above examples, you'll notice that all the flex items occupy 100% height. This is because the default value for align-items is normal (see docs). The value "normal" can mean different things in different situations. In this case, "normal" means "stretch", which will automatically "stretch" the height of flex items to fit the height of the flex container.

Once we start applying some of these cross axis alignment values, you will notice that the flex items will no longer "stretch" to be the full height of the container.

With the align-items property, there are five main values. Depending on the "natural" height of each flex item, these will look different.

Overflowing flex items

So far, we have looked at simple examples. But what if you have so many flex items in a flex container that they don't fit within the defined space?

To illustrate this, let's put together the following scenario:

Flex Container size
- 4px border
- 408px width (we will use border-box sizing, so need to add left + right border of 4px each to get 8px, and then add that to total width of 400px to get 408px)
- 200px height
Flex items size
- 50px width
- 50px height

In this scenario, you can fit a total of 8 flex items within the flex container (50px * 8 = 400px). Looks pretty good so far–if you inspect this Codepen with dev tools, you can confirm that each flex item is exactly 50x50 pixels.

See the Pen flex-wrap and align-content (improper usage) by Zach (@zg_dev) on CodePen.

But what if we doubled the number of squares? Instead of 8, we had 16? Here's what happens.

See the Pen flex-wrap and align-content (improper usage) by Zach
(@zg_dev) on CodePen.

There are a few weird things going on here:

It appears that most of these flex items are NOT 50px wide (actually, none of them are). We set a width of 50px, so why is this happening?
Flex items overflowing the container, which is clearly a problem we will want to fix.

When you work with Flexbox, if the total dimensions of the flex items exceed the dimensions of the flex container, they will first shrink to their smallest possible dimensions, and if they still do not fit in the container, they will overflow.

If items are overflowing outside your container, you have two options:

Specify what you want to do with the overflowing flex items
Wrap the overflowing flex items to the next line

In CSS (not just Flexbox), there is a property called overflow that you can specify on a container to define how it handles overflowing content. Here are the possible options. If you set this property to overflow: auto on the container, a scrollbar will appear and the overflowing flex items will hide. You can then scroll to see them!

See the Pen flex-wrap and align-content (overflow property) by Zach
(@zg_dev) on CodePen.

But if you are creating a grid of items, you probably don't want your users to have to scroll to see all of them. You probably want to just wrap them to the next line. Instead of setting the overflow CSS property, we can set the flex-wrap property on the flex container.

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

Here is what happens when we do that.

See the Pen flex-wrap by Zach
(@zg_dev) on CodePen.

Looks a lot better right? But what's up with that whitespace between the items?

We just talked about align-items earlier, so you might be inclined to try something like this to fix that:

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start; /* This should remove the whitespace right??... */
}

By now, I hope you're getting used to me saying this but... When we added the flex-wrap property, the rules of the game changed. Again.

When we set this property to anything other than the default, we now must use align-content rather than align-items to position the wrapped flex items on the cross axis.

Here are the possible values. They are basically the same as the values for align-items. We'll go with flex-start to put all of the items at the beginning of the container and remove that whitespace in the middle.

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start; /* Use align-content when flex-wrap: wrap is set.  Otherwise, use align-items */
}

Here's what that looks like:

See the Pen flex-wrap + align-content by Zach
(@zg_dev) on CodePen.

Just remember, if flex-wrap is set to anything OTHER THAN nowrap (default), use align-content, NOT align-items to arrange flex item groups on the cross axis.

Flex Item Properties

To this point, we have covered all the flex container CSS properties, but that's not all we can do! At the flex-item level, we can do two main things:

Change the alignment of a flex item
Change the size of a flex item

Let's start with the first one because it is a much simpler discussion.

Aligning a single flex item

If you want to take a single flex item and align it differently than the rest, you can use the align-self property. Remember though, this CSS rule must be applied to that individual item, NOT the container.

Look at this magic:

See the Pen Align Self by Zach
(@zg_dev) on CodePen.

Feel free to click on the CSS of the Codepen, but here's a summary:

Flex items 1, 5 - align-self: flex-start
Flex items 2, 4, 6, 8 - align-self: center
Flex items 3, 7 - align-self: flex-end

Sizing flex items

In my opinion, this is the hardest part of Flexbox, but if you have a solid understanding of everything above, it shouldn't be too overwhelming.

With the prior examples above, we set explicit width and height properties on our flex items (50x50 pixels). When the total dimensions of these items does NOT exceed that of the flex container, we see that they maintain these width and height properties of 50x50, but when we add too many, they start to shrink to try and fit into the container, and then overflow (if we omit the flex-wrap: wrap property).

While it might seem obvious why an element with width: 50px is 50 pixels wide, when dealing with Flexbox, this does not tell the entire story!

flex-grow: 0 - If (and only if) the main axis has extra space, this is the factor which an item will "grow" to fit that empty space (we will explore this more later). The value of 0 means that by default, the item will NOT grow to fit the remaining space.
flex-shrink: 1- If (and only if) the main axis DOES NOT have extra space, this factor determines whether the flex item will "shrink to fit" or not. The value of 1 means that by default, the item will shrink to fit the container.
flex-basis: auto - The value "auto" is another way of saying, "look at my height and width properties for sizing". In our example above, a value of "auto" here means that each flex item will equal 50x50 pixels (because that's what we set the width and height to).

flex-grow

I know this is confusing, but let's take a look at the following example and reason through it.

See the Pen Flex Sizing by Zach
(@zg_dev) on CodePen.

In this example, we have the following conditions:

50x50 pixel flex items (x4)
408px width flex container w/4px border (so effectively, this is a 400px wide container, which can fit 8 total flex items of the above size)
All flex items: flex-grow: 0 (the default)
All flex items: flex-shrink: 1 (the default)
All flex items: flex-basis: auto (the default)

Since we have four flex items with 50px widths, that means that the total space on the main axis is allocated as follows:

Occupied space: 200px (50px * 4 items)
Unoccupied space: 200px (Total width - Occupied space)

At the moment, all four of our flex items have a flex-grow factor of 0. This means that if there is empty space (which there is, 200px), each item will take up 0% of it. Let's say we wanted to change this rule to say that if there is empty space, items 2 and 4 will each occupy 50% of it. Here's how we would write that in CSS.

.flex-container {
  display: flex;
}

.flex-item-1 {
  flex-grow: 0; 
}

.flex-item-2 {
  flex-grow: 1; 
}

.flex-item-3 {
  flex-grow: 0; 
}

.flex-item-4 {
  flex-grow: 1; 
}

And here is what that looks like in real life:

See the Pen flex-grow example #1 by Zach
(@zg_dev) on CodePen.

Now here is where it gets a bit confusing. By specifying a flex-grow value of 1, that doesn't mean that the item gets 100% of the empty space. To calculate how much empty space it will occupy, you have to look at all the flex items in the container and sum their flex-grow values together.

Let's do some simple math:

Total "empty" or "unallocated" space equals 200 pixels
Total flex-grow values = 0 + 1 + 0 + 1 = 2 "units of space"
200 pixels / 2 units = 100 pixels, so each "unit" equals 100 pixels
Flex items 2 and 4 both get a single unit, so they both will equal their original width (50px) + 100px (one unit) of unoccupied space for a total of 150px of total width.

Go ahead, open up the Codepen and check the widths in dev tools!

flex-shrink

To understand this, we need to have an example where there are too many flex items for the container. Instead of 4 flex items (which leaves 200px empty space), let's go with 9 flex items, which will overflow by 50px.

See the Pen flex-grow example #2a by Zach
(@zg_dev) on CodePen.

Hold the phone here! If the total available width in this flex container is 400px and we just added 9 flex items that are 50px each (9 * 50 = 450px), then how on earth are they all fitting in the container?

This works because by default, all flex items have a flex-shrink value of 1. This means that if we "overflow" by 50px, each flex item will take an equal share of that overflow and shrink by that amount (so long as it doesn't shrink the items less than the size of their content).

Let's break it down again:

400px total width
9 flex items at a width of 50px each = 450px, so there is 50px of "overflow"
Each flex item: flex-shrink: 1
9 flex items, so adding the flex-shrink values up, we get 1 + 1 + 1 + 1 + 1 + 1 + 1 + 1 + 1 = 9 units
50px of overflow / 9 units = 5.55px
So... each flex item will reduce from an original size of 50px to a size of 50px - 5.55px = 44.45px

Go ahead, open up dev tools and check. Each flex item should now have a width of 44.45px.

But wait a minute... Didn't we try this "overflow" thing before and some flex items broke out of the main container?

Yes. Each flex item can only shrink so far. Eventually, it reaches its smallest possible width, which is the width of its inner content. This inner content width cannot be easily derived, but if you are really curious, here's a SO answer that addresses it.

Anyways, here is our example from above, but this time, we have 1 too many flex items.

See the Pen flex-grow example #2b by Zach
(@zg_dev) on CodePen.

If you delete flex item 12 from the HTML, all the items will fit again. But let's see why this is the case using simple math again.

400px total width
12 flex items at width of 50px each = 600px, so there is 200px of "overflow"
Each flex item: flex-shrink: 1
12 flex items, so adding the flex-shrink values up, we get 1 + 1 + 1 + 1 + 1 + 1 + 1 + 1 + 1 + 1 + 1 + 1 = 12 units
200px of overflow / 12 units = 16.66px
So... each flex item will reduce from an original size of 50px to a size of 50px - 16.66px = 33.34px

Sounds great, but here's the problem... Some of our items (10, 11, and 12) cannot shrink to 33.34px, which means we are going to have some overflow. Remember, flex items can shrink, but not more than their inner content.

Let's back up. We know for sure that 9 items fit in this container, so let's go with that for now.

See the Pen flex-grow example #2a by Zach
(@zg_dev) on CodePen.

Let's see how we can use flex-shrink to alter how our "overflow" space is allocated to each flex item. Right now, we have 50px of "overflow" (50px flex items * 9 = 450px - 400px of total flex container space). We have to allocate that 50px "overflow" out to flex items. At the moment, each flex item has a flex-shrink value of 1, which means they will all receive an equal allocation (so long as that doesn't shrink the item smaller than its content).

What if I wanted the first 3 elements to keep their full size of 50px and let the remaining flex items absorb that 50px "overflow"? Here's how you do it:

.flex-container {
  display: flex;
}

.flex-item-1 {
  flex-shrink: 0; 
}

.flex-item-2 {
  flex-shrink: 0; 
}

.flex-item-3 {
  flex-shrink: 0; 
}

/* No need to set the rest because they default to flex-shrink: 1 */

Now, we have flex items 1-9 with the following flex-shrink values:

0 + 0 + 0 + 1 + 1 + 1 + 1 + 1 + 1 = 6 "units"
Total overflow of 50px (50px * 9 = 450px - 400px = 50px)
1 unit = 50 / 6 = 8.33px

So in this scenario, flex items 1-3 keep their width of 50px and the remainder are reduced by 8.33px (so long as this is possible based on their inner content width). Here it is in code:

See the Pen flex-shrink example #2d by Zach
(@zg_dev) on CodePen.

Look closely, the first three items are 50px wide while the rest are 50px - 8.33px = 41.66px wide.

Quick Review

We know that if there is "empty space" in a flex container, flex-grow determines how flex items will occupy that space. We also know that if there is "overflow" in a flex container, flex-shrink will determine how the items will shrink to fit the space.

The last piece to the puzzle is flex-basis.

flex-basis

In all of our examples so far, the flex-basis property has been set to auto, but there are more values possible.

Here they are:

flex-basis: auto - looks for width and height properties on element, and if not found, adopts the content width and height
flex-basis: content - to avoid a lengthy, unnecessary discussion, think of this as the equivalent to auto
flex-basis: %, px - In addition to auto and content, it can accept any values that the normal CSS width and height properties can accept.

If we change this value from auto to a specific width or height, the flex items will change size. In the example below, all the flex items have widths of 50px, but by explicitly defining widths via the flex-basis property, I can override them. You'll notice that I've assigned flex-basis values of 25%, 35%, 15% and 20% for items 1-4 respectively. These add up to 95%, so you will see a small amount of "empty space" at the far right side of the container.

See the Pen flex-basis 1 by Zach
(@zg_dev) on CodePen.

The reason there is empty space is because by default, all the flex-grow values are set to 0. If I added flex-grow: 1 to any of the elements, they will no longer respect their width or flex-basis values and will expand to fill the remaining space. Let's go ahead and do that with flex item 4.

See the Pen flex-basis 2 by Zach
(@zg_dev) on CodePen.

As you can see, the flex-grow, flex-shrink, flex-basis, and width/height properties all compete with each other to assign dimensions to flex items. The challenge is to know which ones will win in each situation.

Ordering Flex Items

The last part of Flexbox that I want to cover here today is the order CSS property. In any case, the most straightforward way to order HTML elements is to change their order within the HTML itself. But sometimes, when designing responsively, you may want to order the Flex Items differently based on different screen sizes. This is where the order property comes in.

It is relatively simple. By placing the order property on a single flex item, you can specify where it belongs on the main axis. In the example below, I have set each flex item to 25% width via the flex-basis property and re-ordered the items with the order property:

.flex-container {
  display: flex;
}

.flex-item-1 {
  flex-basis: 25%;
  order: 3;  
}

.flex-item-2 {
  flex-basis: 25%;
  order: 4; 
}

.flex-item-3 {
  flex-basis: 25%;
  order: 2; 
}

.flex-item-4 {
  flex-basis: 25%;
  order: 1; 
}

Here is what that looks like (note that the numbers in the boxes indicate the actual HTML order).

See the Pen flex order by Zach
(@zg_dev) on CodePen.

Conclusion and Code Challenge

Getting comfortable using Flexbox takes time. You need to build things to really grasp what this is all about. Use the post above along with this cheatsheet as you use Flexbox in your webpages and you will start to recognize how much of an improvement it is over the classic way of creating CSS layouts! You will also realize that with Flexbox (and in the next lesson, CSS Grid), CSS Frameworks are often not necessary to build beautiful designs on the web.

To reinforce these skills, I suggest watching this video where I build the following design with Flexbox! I'll see you in the video :)

Responsive Web Design for Complete Beginners #fullstackroadmap

Zach Gollwitzer — Tue, 09 Mar 2021 01:10:18 +0000

Prerequisites

The goal for this lesson

View this lesson on YouTube here

By the end of this lesson, you should what "responsive web design" is and why we care so much about it.

In the prior lesson, we built this pricing component with HTML and CSS:

But when we resize this in the browser, it gets cut off...

In this lesson, we're going to learn how to fix this design and make it look like this on a mobile device:

And in future lessons, we will be adding Flexbox and CSS to our toolkit so that we can create these awesome designs! Let's dive in, we've got a lot to learn!

What we are covering in this lesson

What is responsive design and why does it matter?
Mobile-first vs. desktop-first designs
What are CSS Breakpoints?
A Responsive Design Checklist
Learning how to turn our pricing card from the previous challenge into a mobile-responsive design

Useful series links

This is part of my full-stack developer series, where you'll go from never having written a line of code to deploying your first full-stack web application to the internet. Click this link to get an overview of what this series is all about.

Series Table of Contents
Github Repository - where you'll find all the code we write in this series
YouTube Playlist
Series Overview
100 Days of Code Challenge - I highly recommend you take this on while reading this series!

Please tag me on Twitter @zg_dev and share this series with #100DaysOfCode!

What is Responsive Web Design?

We call it "responsive" design because our websites and web apps should "respond" to the user changing his/her screen size. In other words, the user should have a pleasant experience using your website on their iPhone and their massive, 2560 pixel monitor.

Maybe the best way to visualize what we mean by "responsive design" is to look at a website with poor responsive design. It's 2021, and thanks to all the website builder tools, most websites meet the minimum standards for responsive design. For that reason, I made a simple example showing what responsive design is NOT.

Here is the design from above, but "responsive". It is by no means the most beautiful thing in the world, but it demonstrates what "responsive design" means in a visual way.

When I first started learning to write HTML and CSS, the last thing I wanted to worry about was fitting my web app on multiple screen sizes. Writing the HTML, CSS, and JavaScript was hard enough on one device! I'm guessing you feel the same way, and for that reason, I want to start by explaining why I feel the need to include this topic in my full-stack web developer roadmap series.

You should care about responsive design because if you don't, your users will leave and probably not come back

If your users have to squint to see your website on their iPhone and can't click the links because they are so small, they will get frustrated and they will leave, no matter how good the "content/functionality" of your site is.

Okay okay, but Zach, I'm learning to code; not trying to build the perfect software product right?

I get it. Sometimes, you need to learn concepts; not waste your time fiddling around with different screen sizes for your apps. For that reason, I am going to show you the "80/20" guide to responsive design. Getting your website/app to look good on all devices shouldn't be rocket science. To help us prove this out, let's look at something called "mobile-first web design".

Mobile First vs. Desktop First

When I first heard these terms, I thought I needed to learn some entirely new framework for writing CSS.

These terms are much simpler than people make them.

When someone says that they prefer mobile-first design, they are literally telling you that they write the CSS code for a mobile device first, and then write the necessary "breakpoints" (more on this later) and CSS rules to make the same site look good on large screens.

Given the necessity of functional mobile designs in today's world, it is good to adopt a "mobile-first" mindset from the outset. Embrace it, and your users will thank you.

Design Starts without Code

Here is a concept that took me a while to internalize. Before you write a single line of code, you should have some sort of visual to look at for your mobile and desktop designs. At a minimum, you should have one of the following two things:

Wireframes - simple sketches of your design to illustrate the layout you want
Mockups - full designs that depict layout (how the elements are arranged) and style (colors, fonts, etc.)

A wireframe is meant to be simple. The quickest way to get started is with some good ole' pencil and paper. Here is an example:

There are wireframing softwares available, but since the goal of wireframing is to get a visual idea out of your head, pencil and paper work well. If you need to design several website/app views in a much larger project, you probably need a mockup. This will be a (near) exact replica of what you want your end application to look like. While there are plenty of tool available for doing this, the easiest way to get started at the time of writing is with Figma.

If you don't have a clear visual of what you're trying to create, you won't be able to strategically write your HTML and CSS to fit that design. In other words, you'll waste a LOT of time.

But I can't design well?

That's fine. You don't have to.

I don't consider myself a terrible designer, but I've struggled a lot with it and I don't really enjoy it. The best solution in my situation is simple–hire a great designer to design all your web apps.

But finding a great designer takes time and it takes money; something that most of us don't have when we're learning to code.

Our next best option is to leverage existing designs, which is why we are using the Frontend Mentor designs in this course!

If you enjoy design and are decent at it, you might like to spend some time on this step of the process. If not, leverage existing designs as much as you can.

Can we review? What is "mobile-first" design again?

Before you write a single line of code, you need a wireframe or a mockup for both your mobile and desktop versions of the app/website. If you need both, where does the "mobile-first" part come in?

The "mobile-first" concept enters the picture when we start coding, but before we can talk about it, we need to explore something called a "CSS breakpoint".

What is a CSS Breakpoint?

So far in this series, we've left the "logic" of our webpages to JavaScript. Luckily, CSS has a few built-in ways to add logic to your designs, and one of those is breakpoints.

If I set a breakpoint at 600 pixels, what does that mean?

Well, the "viewport" of your webpage (the visible page in the browser) is always going to have a width. Remember, we can see it using JavaScript?

document.innerWidth

And we can use it with CSS too.

.some-class {
  width: 100vw; /* 100vw is equivalent to document.innerWidth */
}

If I set a "breakpoint" at 600 pixels, I can style the elements on the page differently depending on whether the screen size is less than 600 pixels or more than 600 pixels. The following example isn't necessarily "useful", but it demonstrates this concept well. We are changing the text color based on the screen size.

Changing the color of text isn't all that useful, but we can also change the flow of the elements on the page. This is where media queries start helping us out a lot!

From this simple example, you can imagine how helpful these breakpoints will be for us!

Choosing your Breakpoints

Remember, our goal is to design our webpages so that they are easy to interact with on ALL devices. Each device will have a different default pixel width, but here are some ranges that we can look at.

TVs and High-Resolution Desktops - 2560 pixels
Laptops - 1024-1440 pixels
Tablets - 600-800 pixels
Mobile Devices - 320-480 pixels

Please note, these are not precise ranges; they are just to give you a "ballpark" idea of what we're dealing with.

So the question becomes... If we have hundreds of different screen sizes that we have to design for, do we need hundreds of CSS breakpoints?

No!!

Each breakpoint you add to your webpage adds work to your day. Here are the questions we should be asking when determining what breakpoints to use and how many to use.

Will this webpage be used on a mobile device often?
Is having an intricate mobile, tablet, and desktop design critical?
Are there breakpoint "standards" we can use?

Usually, the answer to the first question is yes unless the web app has a mobile app. For example, YouTube doesn't need to break the bank on a mobile-responsive web app because they have mobile apps on both Android and iOS. Remember, web app !== mobile app.

In our case, the answer to question #2 is no. We care mostly about learning concepts here, not optimizing a product.

The answer to question #3 is yes and no. Since there are so many different devices out there, it is hard to determine a "standard" for when your web app needs to change layouts. That said, there are several CSS frameworks out on the market that we can copy breakpoints from. We won't be diving into CSS frameworks in this full-stack series (reasoning explained in prior lesson), but here's the thing about CSS frameworks–their creators have thought about this stuff a LOT. Most CSS frameworks come with some sort of layout system, and that layout system is based on the breakpoints that they choose.

One of the most popular CSS frameworks is Boostrap, and here are their CSS breakpoints.

≥576px (sm)
≥768px (m)
≥992px (l)
≥1200px (xl)
≥1400px (xxl)

Do we have to use all six of these? No.

Our goal is to learn the basics of responsive design and focus on the code side of things, and therefore, we only need to use 1-2 of these (one design for mobile and tablet, one design for everything larger than those).

Writing Breakpoints with CSS

We have been hanging out in theory land this entire post, so let's finally write some code! Here is the basic "breakpoint" syntax.

/* On screen sizes ≥756px, apply these CSS rules */
@media (min-width: 756px) {

  /* CSS rules go here */

}

Before we go any further, let's figure out what this @media syntax means. Here is the documentation for it, but in short, this is what we call a CSS At-rule, which tells the CSS code how to behave. There are several other "At-rules", but @media is what we're interested in for now.

It is called a "media" query because this rule allows us to target different types of digital devices. Let's re-write the same rule from above four different ways.

@media all and (min-width: 756px) {} /* Target all devices */
@media print and (min-width: 756px) {} /* Target paged material (i.e. "print preview" mode) */
@media screen and (min-width: 756px) {} /* Target mobile devices, tablets, computer screens (most common) */
@media speech and (min-width: 756px) {} /* Target speech synthesizers */

The following two rules do the same thing.

@media all and (min-width: 756px) {}
@media (min-width: 756px) {}

So what's going on here?

CSS has logical operators just like we learned about with JavaScript. Remember this?

const myVar = 20;

if (myVar >= 10 && myVar <100) {
  // Some code here
}

The && operator allows us to required multiple "conditions". With our @media queries, we may need to target multiple conditions. For example, we could target only "screens" that are between 400 and 600 pixels with this rule.

@media 
  only screen 
  and (min-width: 400px) 
  and (max-width: 600px) {
    /* CSS rules here */
  }

Furthermore, min-width and max-width are not the only arguments you can use with these rules. In the next few lessons, I am going to introduce CSS Grid and Flexbox, which are not supported yet in all browsers. We could use the @supports at-rule along with a media query to only apply certain styles to browsers that support these frameworks.

/* Only use these rules if the browser supports Flexbox */
@supports (display: flex) {

  /* CSS rules here */

}

The 80/20 Guide to Media Queries

As you can see, we're getting a little carried away here. Media queries are not just for setting breakpoints and changing CSS styles on different sized devices. We can do all sorts of interesting things with them.

But as I promised you at the beginning of this full-stack developer series, I'm going to show you what's important and what's not. And right now, this is the only syntax that is important to us.

@media (min-width: 756px) {

}

Since our goal is to learn full-stack web development (which spans a TON of topics) we don't have time to care about...

Browser support
Media types
CSS logical operators

You may need these at some point, but you'll address it when you get there.

For now, I want you to learn exactly how to read this stylesheet.

html {
  box-sizing: border-box;
}

img {
  width: 100%
}

@media (min-width: 576px) {
  img {
    width: 49%;
  }
}

@media (min-width: 992px) {
  img {
    width: 24%;
  }
}

Here is the Codepen for this to have as a reference. If you open it up, you can resize it to see how it works. A quick explanation:

Mobile devices will display 100% width images (i.e. images vertically stacked)
Tablet devices will display 49% width images (i.e. 2 images in each row). We can't use 50% because of whitespace. Once we learn Flexbox and CSS Grid, this won't be a problem for us anymore.
Desktop devices will display 24% width images (i.e. 4 images in each row).

See the Pen Simple Media Queries by Zach
(@zg_dev) on CodePen.

Believe it or not, what we have just written above is considered "mobile-first" CSS. Why? Because we are writing our breakpoints using the min-width property. All the "default" styles at the top will apply to mobile devices, and then subsequent rules in the media query rules will override these default styles.

Also, remember that 576px and 992px came from the Bootstrap breakpoints we talked about above.

Here's how this stylesheet is interpreted.

Browser: "Hey CSS, here's a stylesheet with some breakpoints for you. The current screen size is 1200px. What width should the images be?"
CSS: "Oh hey Browser. Let me read through this..."
CSS: "First, I see an image width of 100%. Let me keep reading though in case there are rules later in the file"
CSS: "Oh wait! I see a media query with a CSS rule on images. Is the current screen of 1200px greater than 576px? Why yes it is! Let me replace my image widths to now be 49%"
CSS: "Okay I'm getting tired, but let me keep reading. I see one more media query. Is the current screen of 1200px greater than 992px? Yep! Let me replace my image width to now be 24%."
CSS: "Looks like that's the end of the file. I'll keep image widths at 24%."

What if we threw a curveball and had the following stylesheet?

html {
  box-sizing: border-box;
}

img {
  width: 100%
}

@media (min-width: 992px) {
  img {
    width: 24%;
  }
}

@media (min-width: 576px) {
  img {
    width: 49%;
  }
}

Notice how in this stylesheet, the media queries are reversed! Since the CSS document is read from top to bottom ("cascading"), the min-width: 992px media query will NEVER get applied. Since the final media query applies to all devices above 576 pixels, that will also apply to large desktop devices, and since it is last in the stylesheet, it will override the first media query! In effect, for non-mobile devices, there will be 2 images per row.

The lesson here? The order of your media queries is very important. Here are a few things to remember:

Media queries always go at the bottom of your stylesheet
If you have multiple min-width media queries (i.e. "mobile-first"), the largest pixel values go last.
If you have multiple max-width media queries (you usually won't because that is considered "desktop-first"), the smallest pixel values go last.

What do I put in the media query blocks?

The answer to this will become more apparent with experience. The important thing to know is that most of your CSS styles will go at the top of the file; not within media query blocks. In other words, you want to style your HTML "mobile-first" and then make small tweaks to larger designs only when necessary (via media queries).

We will be practicing this throughout the remainder of the series, so don't worry too much just yet.

"Mobile-first" Revisited

In my opinion, the reason mobile-first is a good practice to follow is for two reasons:

HTML is naturally "responsive"
Most people will visit your website/app on a mobile device at some point (but not vice-versa)

As you write more HTML and CSS, you will realize that without CSS, HTML shows up just fine on a mobile device. It may not look pretty, but it will have readable text and reasonably sized images.

Poor mobile experiences only happen when you start overriding HTML's natural behavior with CSS. If you design for desktop-first, there is no guarantee that your website/app will be useable on a mobile device. If you design mobile-first, your website/app will likely work just fine on larger screens without any modification.

And once again, "mobile-first" simply means writing breakpoints with min-width media queries as opposed to max-width.

Here is "mobile-first":

html {
  box-sizing: border-box;
}

img {
  width: 100%
}

@media (min-width: 576px) {
  img {
    width: 49%;
  }
}

@media (min-width: 992px) {
  img {
    width: 24%;
  }
}

And here is "desktop-first":

html {
  box-sizing: border-box;
}

img {
  width: 24%;
}

@media (max-width: 992px) {
  img {
    width: 49%;
  }
}

@media (max-width: 576px) {
  img {
    width: 100%;
  }
}

This is a subtle difference, but an important one.

A Responsive Design Checklist

True to our "80/20" theme, here are the most important things to look for when reviewing your webpages. If you can put a check-mark by each of these, everyone will be happier.

Fluid Layouts - Does your content rearrange itself on different devices?
Images - Do your images maintain good aspect ratios on all devices? Are they appropriate sizes on each device?
Text - Your text should be a "comfortable" size with "comfortable" spacing on every device. No hard and fast rules here, but generally, keep your body text around 16 pixels, and no more than 700 pixels wide on any device.
Overflow - Nothing should overflow the screen (i.e. cut-off images or text)
Full-width mobile content - As a general rule of thumb, don't show columns on mobile devices, and make everything 100% width of the screen.
General Useability - Are your buttons big enough to click on a mobile device? Are the most important things showing first? I could get into a long checklist on this one, but just have a friend use your site on a mobile device and desktop device. They will quickly be able to notice anything that doesn't "feel" right.

A Quick Project

In the next two lessons of this series, we will be wrapping up our lengthy discussion on CSS with Flexbox and CSS Grid. In addition, we will be doing two projects that will combine everything we've learned.

For now, I challenge you to turn our HTML/CSS challenge from the prior lesson into a mobile-responsive webpage. In this video, we built this:

Here is the Codepen that I built it in.

See the Pen Pricing Card Code Challenge #fullstackroadmap by Zach
(@zg_dev) on CodePen.

When you resize the browser, this design does not "respond". I want you to refactor the code you wrote so that when looking at this on a mobile device, you see this:

Two Ways to Solve this

When we first built this, we did it "desktop-first". Because of this, the quickest and simplest way to make it "responsive" is to add CSS to the following media query:

@media (max-width: 650px) {

  /* Make it responsive with CSS here */

}

Currently, our pricing card has a width of 600 pixels, so in order to make it "responsive", we need to change its layout on devices less than 650 pixels (or somewhere around that number–it doesn't have to be exact).

Here is the solution to the "desktop-first" approach (hint: it only requires a few lines of CSS, and no changes to the HTML).

The second way of solving this is by using a "mobile-first" approach. This will take much longer and will be more challenging because you will need to completely rethink your HTML and CSS. If you go this route, I suggest the following breakpoint to stay consistent with the Bootstrap breakpoints we have been using throughout this lesson.

@media (min-width: 576px) {

}

Here is the solution using the "mobile-first" approach.

I mentioned earlier in the post that "mobile-first" designs will save you time and lines of code, but in this particular case, that was not true. Don't worry though, as your projects get larger and more complex, the "mobile-first" mindset will pay off!

Lesson 8 - CSS Crash Course for Beginners #fullstackroadmap

Zach Gollwitzer — Mon, 01 Mar 2021 15:58:13 +0000

Prerequisites

This tutorial is for the complete beginner. Here are the required skills:

A basic understanding of HTML
Required for solving the code challenges: lessons 1-7 in this series.

The goal for this lesson

See this crash course on YouTube:

By the end of this lesson, you will have built this from scratch (Frontend mentor link).

And after a few short lessons on responsive design, CSS Grid, and Flexbox, we will build this (Frontend mentor link).

And finally, we'll bring everything we've learned in this course together to build this (Frontend mentor link). No, this is not the final project, but will be pretty exciting to build with our new skills!

What we are covering in this lesson

What is CSS (cascading style sheets)?
The basics of CSS
- What is a “selector”?
- What is a CSS “property”?
The “Box Model”
- Block vs. Inline Elements
- Box Sizing
- Layouts in CSS
CSS Units of Measure
Common CSS Properties
- Font styling
- Background styling
- Color Codes
- “Shorthand” CSS
A four-step system for writing great CSS and HTML
Code Challenges!

Supplemental Lessons

While these are not part of the core CSS crash course, these are extremely important topics to know. While building out our designs pictured above, we will be using all three of these and I highly recommend that you watch my tutorials on each of them before attempting the challenges.

Media Queries and Responsive Web Design (coming soon)
CSS Flexbox (coming soon)
CSS Grid (coming soon)

What we are NOT covering

Finally, we will NOT be covering...

Graphic design and wireframing - These are huge parts of building a web product, but our focus is learning web development skills; not graphic design or user experience design principles. Designing a visually pleasing and easy to navigate user interface is critical to building a successful app, but you have the rest of your career to learn these. Furthermore, if you're a mediocre graphic designer like myself, I recommend leveraging designs of the pros (legally of course). Frontend Mentor removes the design step from the equation and allows us to focus on coding the design. Don't try to mix design with coding. You'll take 10x as long on your projects. Design, then code.
CSS Pre-processors (Sass, LESS, PostCSS) - These can be useful for large projects and codebases but usually overkill for smaller projects like the ones in this course.
CSS Frameworks (Bootstrap, Materialize, Tailwind, etc.) - CSS frameworks and UI libraries can be extremely helpful, but you need to learn the fundamentals first. I don't want to lock you into a framework that is popular today but dead tomorrow. When I was learning, Bootstrap was huge. Now, Tailwind is popular. You can always learn these on the fly, so I'm going to teach you the fundamentals and let you educate yourself based on what is required for your future projects.

Useful series links

Series Table of Contents
Github Repository - where you'll find all the code we write in this series
YouTube Playlist
Series Overview
100 Days of Code Challenge - I highly recommend you take this on while reading this series!

Please tag me on Twitter @zg_dev and share this series with #100DaysOfCode!

What is CSS (Cascading Style Sheets)?

We've already learned the basic concept of CSS. In the previous lesson, I introduced the "house" analogy, which describes the following:

When building a house...

HTML is the structure (i.e. wood, bricks, concrete, foundation)
CSS is the style (i.e. paint, landscaping)
JavaScript is the function (i.e. electric, plumbing, heating, water)

The first question we have to answer is, what does "cascading" mean?

When working with CSS, it is possible to define more than one style for a single HTML element. Because of this, the CSS needs to know which rule to actually apply to it. When we say "cascading", we are referring to this fact.

Let's say I had the following HTML snippet:

<div class="main-container">
  <p>Some text</p>
</div>

Now, let's add three CSS rules (I'll explain how these work later):

.main-container {
  color: red;
}

.main-container p {
  color: green;
}

p {
  color: blue;
}

The question is–what color will "Some text" be?

The answer is green, but right now, we don't know enough about CSS to make this determination. Let's jump in.

Basic CSS Syntax

Here is the video version of this section

So... What is the purpose of CSS? The purpose of CSS is to "select" an HTML element and apply some type of style to that HTML element. Here are the two things that CSS can do for you:

Change the layout of HTML elements on the page (rows, columns, sections, sizes)
Change the style of HTML elements on the page (fonts, colors)

In the Codepen below, I've demonstrated both layout and style. To achieve this result, I have used CSS properties that we will be looking at over the next several lessons.

See the Pen CSS Layout and Style Example by Zach
(@zg_dev) on CodePen.

The diagram below shows the relationship between HTML and CSS in addition to the basic structure of both.

As you can see above, we are using the HTML element's class property to "select" it, and then applying the color style to that element. We have given the color property a value of #211E1E, which is a dark grey color. In effect, we are turning the text dark grey.

In this example, .some-class is the "CSS selector", color is the CSS property, and #211E1E is the CSS property value (a hex code, which we'll cover later).

At this point, it is not clear why I'm using these selectors and properties. For example, why do I have a . before the class name? How did I know to use color to change the text color? To answer these questions, let's explore a few of the basic ways to "select" an HTML element with CSS. Don't worry about all the possible properties yet–we'll get there eventually. For now, I'll try and stick with the color property, which changes the color of the text of the selected element.

The 3 Main CSS Selector Types

There are three primary ways you can "select" an HTML element in order to style it.

By tag
By class
By ID

Since we learned about HTML in the prior lesson, these should sound familiar. Let's take a minute to review anyways.

<p class="main-text" id="first-paragraph">First paragraph of document</p>

Can you spot the tag, class, and id here? Of course! The tag is p, the class is main-text, and the ID is first-paragraph. If you remember from the previous lesson, we were able to use these values to "select" HTML elements using JavaScript. Remember this?

// Select by tag
document.querySelector('p');

// Select by class
document.querySelector('.main-text');

// Select by ID
document.querySelector('#first-paragraph');

The code above selects this HTML element in three different ways using JavaScript. We use the same type of syntax to select this HTML element with CSS.

/* Oh hey, I'm a CSS comment.  I'm slightly different than HTML and JS comments */

/* Select by tag */
p {
  color: red;
}

/* Select by class */
.main-text {
  color: red;
}

/* Select by ID */
#first-paragraph {
  color: red;
}

These are all valid ways to select the HTML element from above using CSS.

For now, I'm going to be using the color property and value as a placeholder to explain CSS selectors and "cascading" concepts. This changes the text color of the HTML element. We will be walking through all the different CSS properties later in the lesson, but we're not quite ready.

Here is a useful little cheat sheet that I created to help you remember these three most common CSS selector types. The property color: green is not important here. This could be any CSS property.

CSS Combinators

The three methods that I wrote above are the "textbook" ways to select and style an HTML element. But we are on lesson 8 of our series and by now, you have probably caught on to the fact that in web development, there are ALWAYS more ways to do things. The same holds true in this scenario.

With CSS, there are "combinators" that allow us to "combine" our selectors to identify an HTML element. Many times, these can be avoided by placing an ID or class attribute on an element, but you should still be familiar with them. Here's what we're dealing with:

Descendant selectors
Child selectors
Sibling selectors

Hmmm... This sounds familiar, doesn't it...

Do you remember this image from the prior lesson on HTML?

Do you remember how we talked about an HTML document being structured like a big happy family of grandparents, parents, children, and siblings? Well lucky for us, we can leverage that concept once again here.

Let's see how we can combine some CSS selectors to identify various elements in this HTML document. Here it is again in case you can't see it from the photo:

<html>
  <head>
    <title>Site Title</title>
  </head>
  <body>
    <div class="main-body">
      <h1>Article Heading</h1>
      <p>Some text in the article</p>
      <p>Some more text</p>
      <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
      </ul>
    </div>
    <div class="footer">
      <p>Site created by Zach</p>
    </div>
  </body>
</html>

Selecting descendants

Let's say that we wanted to put a CSS style on every li element that exists in the <div class="main-body"> element. How would we do this?

Why not something like this?

li {
  color: green;
}

Congrats! All your li elements will have green text. Time to call it a day and have a beer.

Not so fast...

What happens if we put another list inside the <div class="footer"> container?

<html>
  <head>
    <title>Site Title</title>
  </head>
  <body>
    <div class="main-body">
      <h1>Article Heading</h1>
      <p>Some text in the article</p>
      <p>Some more text</p>
      <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
      </ul>
    </div>
    <div class="footer">
      <p>Site created by Zach</p>
      <ul>
        <li><a href="#">Footer link 1</a></li>
        <li><a href="#">Footer link 2</a></li>
        <li><a href="#">Footer link 3</a></li>
      </ul>
    </div>
  </body>
</html>

In reality, it is very common to see lists appear in a footer like this, but they are often styled differently than lists in the main body of the HTML. If we used the selector from above, even our footer list items will have green text, which we probably don't want!

Let's come up with a better solution:

/* Select all li elements that exist inside the element with a class of .main-body */
.main-body li {
  color: green;
}

With CSS, we can combine selectors separated by spaces to identify descendants of elements. No matter how many additional HTML elements we add to the .main-body div, they will all inherit this style. To drill this point home further, let's look at some different HTML.

<div id="main">
  <div>
    <div>
      <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
      </ul>
    </div>
      <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
      </ul>
  </div>
</div>

#main li {
  color: green;
}

By using the "descendant selector" above, we can target all the li tags at multiple levels, so long as they exist below the level of our "pre-selector". In this case, the first selector, #main is the "pre-selector" and the second selector, li is the actual element(s) you are targeting for that style.

See the Pen Selecting Descendants in CSS by Zach
(@zg_dev) on CodePen.

Selecting Children

Sometimes, you only need to target the children of a specific HTML element for styles. Let's say you had the following HTML.

<div id="main">
  <p>first paragraph</p>
  <p>second paragraph</p>
  <p>third paragraph</p>
  <div>
    <p>fourth paragraph</p>
  </div>
</div>

If we used the CSS selector #main p, we would be able to style all of the p elements in this HTML. But we can use the following syntax to select only the direct children of #main.

#main > p {
  color: blue;
}

The first, second, and third paragraphs will have blue text while the fourth will have the default text color.

See the Pen Selecting Children in CSS by Zach (@zg_dev) on CodePen.

Selecting Siblings

The last type of combinator you can use is a sibling selector, but I think it is important to disclose–I NEVER use these. Others may feel differently about this, but in the five years I've been writing CSS, I have never come across a compelling case for using these selectors. Drop a comment or hit me up on Twitter @zg_dev if you come up with a good reason to use these.

But of course, I can't just make a bold statement like that and expect that you trust me. Let me show you what I mean here.

Let's say you had this HTML document.

<div id="main">
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <p>first paragraph</p>
  <p>second paragraph</p>
  <p>third paragraph</p>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <p>fourth paragraph</p>
  <p>fifth paragraph</p>
  <p>sixth paragraph</p>
</div>

And for some odd reason, you only want to style the paragraph elements immediately following the lists (first and fourth paragraphs). Here's how you could do that with a sibling selector.

ul + p {
  color: red;
}

See the Pen Selecting Siblings in CSS by Zach
(@zg_dev) on CodePen.

This will look through the entire HTML document and look for all p elements that immediately follow a ul element (aka "adjacent sibling"). And if you wanted to target all of the siblings to ul elements, you just change your CSS to this:

ul ~ p {
  color: red;
}

In my opinion, the ~ and + combinators aren't necessary. If you find yourself in this situation, do the following.

Find the HTML element you want to target
Add a class or ID to that element
Style using a class or ID selector

Sure, it's some extra lines of code, but it is easier to follow (and your future self will thank you for writing easy-to-read code).

Other ways to select HTML elements with CSS?

There are other ways to select an HTML element with CSS. For example:

<p class="regular-text">some text here</p>
<div class="regular-text">some text here</div>

p[class="regular-text"] {
  color: blue;
}

If you just used .regular-text to select the elements, you would be styling both the p and div elements. You can specify that you only want the p elements with a class of .regular-text.

The likelihood of a situation like this coming up? Very low. Therefore, I won't be spending time explaining all these nuanced ways of using CSS selectors. You can look them up as you need them.

Remember, this crash course and full-stack developer series is about getting you acquainted with the most important concepts. And 95% of the time, you'll never need anything more than what we've talked about so far. Feel free to dig through some advanced CSS tutorials on your own, but at this stage of your journey, I believe it is a waste of your time to do so.

Selecting multiple HTML elements with CSS

To this point, we've only selected one HTML "group" at a time (one selector can target multiple elements). In certain cases, you might want to apply a few "common" styles to several elements and then add additional styles individually. Let's say you had the following HTML.

<div class="box-1">
  <p>Box 1</p>
</div>
<div class="box-2">
  <p>Box 2</p>
</div>

We haven't talked about CSS properties yet (so don't worry about how these work now), but let's say that we wanted to make both of these boxes the same width and height, but style their borders and text colors separately. Here is the inefficient way to do it:

.box-1 {
  width: 200px;
  height: 200px;
  border: 1px solid green;
  color: green;
}

.box-2 {
  width: 200px;
  height: 200px;
  border: 1px solid blue;
  color: blue;
}

Wouldn't it be nice if we could assign the width and height properties one time rather than writing for each element? Good news, we can! Here's how I would write this CSS.

.box-1, .box-2 {
  width: 200px;
  height: 200px;
}

.box-1 {
  border: 1px solid green;
  color: green;
}

.box-2 {
  border: 1px solid blue;
  color: blue;
}

By separating each selector using a comma, we can select multiple HTML "groups" at the same time. In the example above, we are applying the width and height properties to both selectors and then individually applying border and color (text color) styles to each.

We haven't talked a lot about software engineering "best practices", but what we did here was "refactor" our previous code to adhere to "DRY" (don't repeat yourself) principles.

Here's the Codepen for this.

See the Pen Multiple Selectors at once with CSS by Zach
(@zg_dev) on CodePen.

Using Multiple Classes on a Single HTML Element

In the example we just looked at, we have two classes and are defining "shared styles" for them. We could achieve this same result another way! Take a look.

See the Pen Multiple Classes on HTML by Zach
(@zg_dev) on CodePen.

The change that I made is subtle. All I did was add another class to the HTML–make sure you add a space between classes in the class HTML attribute.

<div class="box-1 box">
  <p>Box 1</p>
</div>
<div class="box-2 box">
  <p>Box 2</p>
</div>

Instead of having two classes, box-1 and box-2, we now have three. We can use the box class to define our shared styles:

.box {
  width: 200px;
  height: 50px;
}

And then use our individual classes for unique styles.

.box-1 {
  border: 1px solid green;
  color: green;
}

.box-2 {
  border: 1px solid blue;
  color: blue;
}

Two methods, same solution.

Pseudo Classes/Elements

In addition to being able to select multiple CSS groups at once, we can also use something called a "pseudo" class/element. We will NOT be talking in detail about this, but you need to know it exists for when you do come across it in the future.

Here is the one of the most common occurrences of this concept.

<button>Hover me</button>

button:hover {
  color: red;
  cursor: pointer;
}

By adding :hover directly after the button selector, we are saying, "when the mouse hovers over this button, I want to apply the following CSS styles to it".

Like I said, we will not be covering this in detail here. Here is some documentation on pseudo elements and classes that you can read if you are curious.

Here is the example above in action. Hover your mouse over the button to see it work!

See the Pen MWbvWym by Zach
(@zg_dev) on CodePen.

Multiple Selectors vs. Nested Selectors

In the previous example, we saw this.

.box-1, .box-2 {
  width: 200px;
  height: 200px;
}

In the section prior to that, we saw things like this:

.box-1 p {
  color: green;
}

They look awfully similar don't they? As you read and write CSS, be conscious of this difference. In the first case, you're saying "I want to apply these styles to all HTML elements that have a class of box-1 OR box-2". In the second case, you're saying "I want to apply these styles to all p elements that exist inside elements with a class of box-1".

The difference is subtle, but important. Speaking of this difference...

Let's Talk about CSS Specificity

The "cascading" concept in CSS (aka "specificity") is super important for a beginner to understand.

Being able to select HTML elements is part one of the battle. The second part is figuring out which styles apply to the given element. This is not hard when there is only one CSS style per HTML element, but oftentimes, there are several styles competing against each other in a CSS battle. To demonstrate, let's look at some HTML that has many ways to select each element.

<div class="main-container">
  <p class="main-text" id="first-paragraph">First paragraph of document</p>
</div>

Let's say our goal was to change the text color of our p element. We could do that in several different ways.

/* Hey, I'm a CSS comment again. */

/* Everything below does the SAME THING */

p {
  color: red;
}

.main-text {
  color: red;
}

#first-paragraph {
  color: red;
}

div p {
  color: red;
}

div .main-text {
  color: red;
}

div #first-paragraph {
  color: red;
}

.main-container p {
  color: red;
}

.main-container .main-text {
  color: red;
}

.main-container #first-paragraph {
  color: red;
}

div > p {
  color: red;
}

.main-container > p {
  color: red;
}

.main-container > #first-paragraph {
  color: red;
}

.main-container > .main-text {
  color: red;
}

😳

Yep, I know. Not what you wanted to see. And it gets worse...

If you were to write all of these lines of CSS in the same file, they would all be competing with each other.

"But why would you ever put multiple styles in the same CSS file?"

If you are the only developer writing the styles for your HTML, then you probably wouldn't. But in many cases, a website or web app will have multiple stylesheets, and some of those will be externally generated. In other words, you may want to take a pre-existing website theme and apply your own custom styles to it. In this case, you will be writing competing styles to the ones that were already defined.

And in this case, you need to know which style declarations take precedence over one another.

There are two dimensions we must think about here.

Location of the CSS selector in the file
Specificity of the CSS selector

Location of the CSS Selector in the File

Let's start easy. Say we had the following HTML.

<p>Some text</p>

If we had the following CSS file, what color will the text be?

p {
  color: red;
}

p {
  color: green;
}

If you have been following along with this series, you might be thinking, "That's not valid CSS! You've already declared p, you can't do it again!".

Good logic, but it is indeed valid CSS. Unlike JavaScript, you can declare the same CSS rule twice in the same file. Knowing this fact, which style takes precedence here?

The text will be green because that is the last rule in the file. CSS will always give the final rule precedence assuming the selectors have the same level of "specificity".

Specificity of the CSS Selector

Let's modify the example from above.

<p class="my-text">Some text</p>

.my-text {
  color: red;
}

p {
  color: green;
}

What color will the text be? The answer is red. In this case, even though our color: green style came last in the file, it doesn't matter because selecting an HTML element by its class is "more specific" than selecting by its tag.

Here is the continuum of CSS selector "importance":

In other words, if given the choice of the following three selectors, the text color will be set to green no matter which order you place the rules in because it is the "most specific".

#first-paragraph {
  color: green;
}

p {
  color: red;
}

.main-text {
  color: red;
}

Easy enough, but this "specificity" business gets a little confusing when we start talking about something like this:

<div>
  <p class="my-text">paragraph text</p>
</div>

div .my-text {
  color: red;
}

.my-text {
  color: green;
}

What color will the text be? The answer is red.

When we look at a selector like div .my-text, it is basically saying, "find me all elements with a class name my-text that are descendants to div elements". Then we have to ask ourselves... Does the first paragraph have a class of my-text AND a div ancestor (could be parent, grandparent, great-grandparent, etc.)? The answer is yes, so the paragraph text will be red.

See the Pen Which style takes precedence? by Zach
(@zg_dev) on CodePen.

In summary, even though the second CSS rule above is at the end of the file, that doesn't mean it will apply to all elements.

After reading the last couple of paragraphs, you might be thinking that this is awfully complicated. To help us out, let's look at two ways that you can always use to determine which CSS rule applies to each HTML element. Here they are:

Test it out (my favorite method)
Calculate it

The easiest way to figure it out is to put together an example in Codepen and see which one takes precedence (as we did above).

The second way is to actually calculate the "specificity" of a CSS rule. Here's how you do that.

Count the number of ID selectors in the rule
Count the number of class selectors in the rule
Count the number of tag selectors in the rule

Combine the count from steps 1-3 in order, and you've got your "specificity" value.

Let's do that for our two rules from above. See the comments for the calculation.

/* 
  Number of ID selectors - 0
  Number of class selectors - 1
  Number of tag selectors - 1

  Total "Specificity" - 011
*/
div .my-text {
  color: red;
}

/* 
  Number of ID selectors - 0
  Number of class selectors - 1
  Number of tag selectors - 0

  Total "Specificity" - 010
*/
.my-text {
  color: green;
}

As you can see, the first selector is more specific than the second, and therefore will always take precedence (unless it simply does not apply to the HTML element like we saw in the second paragraph from our example above).

Let's look at one last example to really nail this concept. Here's the HTML and CSS with the specificity calculation.

<div class="my-container" id="container-id">
  <p class="my-text" id="text-id">Some text</p>
</div>

All of the rules below select the same p element above.

/* 
  Number of ID selectors - 0
  Number of class selectors - 2
  Number of tag selectors - 0

  Total "Specificity" - 020
*/
.my-container .my-text {
  color: red;
}

/* 
  Number of ID selectors - 2
  Number of class selectors - 0
  Number of tag selectors - 0

  Total "Specificity" - 200
*/
#container-id #text-id {
  color: orange;
}

/* 
  Number of ID selectors - 1
  Number of class selectors - 0
  Number of tag selectors - 1

  Total "Specificity" - 101
*/
div #text-id {
  color: green;
}

/* 
  Number of ID selectors - 1
  Number of class selectors - 0
  Number of tag selectors - 0

  Total "Specificity" - 100
*/
#text-id {
  color: blue;
}

/* 
  Number of ID selectors - 0
  Number of class selectors - 0
  Number of tag selectors - 1

  Total "Specificity" - 001
*/
p {
  color: purple;
}

The text color will be orange because the total specificity of that selector is the greatest. Once again, you can always just test it out like I did below!

See the Pen Which style takes precedence? v2 by Zach
(@zg_dev) on CodePen.

Inline HTML Styles

The last thing we have to talk about are inline styles. They look like this.

<p style="color: red; padding: 1px;">Some text</p>

If you apply an inline style, it will take precedence over all other styles, but it is usually not recommended because too many of these will really clutter up your HTML! Some CSS frameworks implement inline styles like this, but that is a debate and topic for another day. For now, just keep these to a minimum.

Here is a Codepen example that shows how an inline style can override a style applied with an ID selector.

The !important keyword

What if I told you that by writing a single word, you can override all the CSS "specificity rules" (including inline styles)?

If you write !important at the end of a CSS property, it will take precedence over every other rule. Here's an example.

<p id="my-text">Some text</p>

p {
  color: red !important;
}

#my-text {
  color: blue;
}

While the second selector has more specificity, the text will be red because we have added !important to the end of the property value. This can be done on a property-by-property basis. For example:

p {
  color: red !important;
  font-size: 18px;
}

#my-text {
  color: blue;
  font-size: 16px;
}

In this case, the color will be red but the font size will be 16px.

Now let's have a little chat about this !important keyword. While it does provide you with an easy way to get a CSS style working without having to think much, it is usually a bad practice. There is no definitive guideline as to when this is acceptable to use, but here is a good rule of thumb.

Use !important if doing so is the ONLY viable method for styling an element

This could occur if you are trying to override styles applied from an external stylesheet (CSS frameworks, UI libraries, etc.).

What is a CSS Property?

As I introduced at the beginning of this lesson, CSS allows us to achieve two primary objectives:

Styling HTML elements
Positioning HTML elements (layout)

What if I wanted to create an HTML element that has a blue background, is a perfect square, has a black border, and has some large white text centered in the middle? I can do this with basic CSS properties.

The HTML for this is simple:

<div>
  <h2>Some Text</h2>
</div>

The CSS is the tricky part.

div {
  width: 200px;
  height: 200px;
  border: 5px solid black;
  background-color: navy;
  color: white;
  text-align: center;
  line-height: 200px;
}

h2 {
  margin: 0;
}

As you can see, I've used a variety of properties to achieve this result. From width, height, and border to background-color, color, and text-align, combining these CSS properties together helps us achieve the intended result.

Here is the live version of this example.

See the Pen CSS properties example by Zach
(@zg_dev) on CodePen.

How do I know what CSS properties to use?

Great question.

I don't have a great answer.

The truth is, knowing what properties to use is largely a matter of time combined with lots of experience. Studying all the properties at once won't help you. Making flash-cards might help a little, but I wouldn't recommend it.

As we dive into the Box Model and some common CSS properties, try to focus on concepts; not memorization. After all, you've always got the CSS documentation if you forget what something does.

What is the Box Model in CSS?

Here is the video version of this section

Similar to the Document Object Model (DOM) that we explored in the prior lesson, the Box Model can be explained simply, or we can get into tons of nuance.

It is best described visually via the Firefox Developer Tools (we talked a lot about these in prior lessons).

This is saying that our p element has content dimensions of 667 pixels x 18 pixels, has 20 pixels of padding on all four sides, has a 5 pixel border, and has 20 pixels of margin on all four sides.

The Box Model attempts to describe how much "space" an element takes up on the page. The following properties influence that "space" that the element occupies. I suggest skimming through their documentation.

But these are not the only properties that come into play when we talk about the Box Model. It is often difficult to introduce this model to beginners because there are several combinations of properties that will completely change the "rules of the game".

To better explain these "rules", I have created an interactive Codepen that we will be using to better understand the Box Model and all of its nuances. Keep this open in another tab while you read the following sections so that you can see in real-time what I am talking about.

See the Pen Building the Box Model 1 by Zach
(@zg_dev) on CodePen.

Element Display Types

The display CSS property is arguably the most diverse CSS property there is.

Here are the possible values you can set for it.

display: none - Hides the element from the page
display: block - The default display type for most HTML elements
display: inline - The default display type for a, span, img, button, input, and several other HTML elements.
display: inline-block - A mix between block and inline (more on this in a minute)
display: flex - Enables the Flexbox framework (out of scope for this tutorial)
display: grid - Enables CSS Grid framework (also out of scope)

The display: none value is easy to grasp. Open up the Codepen from above and change the "Display Type" dropdown to "none". The orange box will disappear.

The block, inline, and inline-block properties require a bit of an explanation. Let's jump in.

Block vs. Inline Elements

Most elements will have display: block as their default state. Open up the Codepen example from above and reset all the values.

By default, it has a "block" display type. This means:

The orange paragraph element will occupy 100% width of its container because we have not explicitly set a height or width (they are both set to auto)
The orange paragraph is on its own line

Now, set the "Content Width" to 400px and "Content Height" to 200px using the dropdowns. The orange paragraph element should change sizes.

Reset all properties.

Now change "Display Type" to "inline". You should see the orange paragraph element jump up to the same line as the green text that was formerly above it. With an "inline" element, the following behavior happens:

The element will only occupy the height and width of the content within it. In this case, that content is the text, "Some Content".
The element will not break on a new line

Now, change the height and width properties using the dropdown again. Nothing should happen. That is because when an element is "inline", it does not respect its width and height properties.

Without resetting anything, change the display type to "inline-block". What happens?

The display property inline-block is the same as inline except that it respects its width and height properties.

Box Model Variations

Another property that will change the "rules of the game" is the box-type CSS property. It does not affect the flow of the elements on the page like display does, but it affects the calculation of how much space an element occupies. Here are the two values.

box-type: content-box - this is the default value
box-type: border-box - as you will see, this is easier to grasp and often preferred among developers

To see this in action, open up the Codepen from above again, reset everything, and then select the following options.

Set the content width to 400px
Set the content height to 200px

Now, toggle between the two "Box Type" dropdown options. Notice how the size of the orange paragraph element changes by a small amount?

To make this more noticeable, change the "Padding" option to 20px. Now, toggle the box type again. Now, you should see large changes in size. This is because when you are using the value border-box, the total size of the element will be equal to its height and width. When using a value of content-box (the default), the size of your element is the summation of its dimensions, padding, and border.

Let's look at that screenshot from earlier.

In this example, we have the following "specs".

Element width of 667 pixels
Element height of 18 pixels
Padding of 20 pixels (all sides)
A 5-pixel border on all sides
Margin of 20 pixels (all sides)

With box-type: content-box, the total height of this element is 18 + 20 + 20 + 5 + 5 pixels, or 68 pixels. Here, we add the element height, bottom padding, top padding, bottom border, and top border. Notice that we did NOT include the margin. Margin surrounds the element, but is not part of the element. We could also calculate the width as 667 (width) + 20 (left padding) + 20 (right padding) + 5 (left border) + 5 (right border), to get 717 pixels.

With box-type: border-box, the calculation is much easier. The total "space" occupied by the element is its width and height. If you add padding or a border, the size of them will reduce the content area of the element, but not the total space occupied by the element.

The border-box type is a bit simpler to understand and makes your job quite a bit easier when trying to fit elements inside parent containers. In the demo below, look out for the following things.

The orange background with "Parent Container" text is an image and is there to help you visualize the dimensions of the parent container.
The child container has no background color, but has a 5px black border
Notice how in the first example (content-box), the child is breaking out of the parent container despite being the same exact dimensions. This is because it has a 5px border, which adds space to it. In the second example, this 5px border doesn't cause any problems because it simply reduces the total inner content dimensions, not the outer dimensions.
When you toggle the padding for both, you'll notice that in the first case, it further expands the size of the child element; breaking it even further out of its parent container. In the second example, once again, the child is contained within the parent container. Padding is added, but it doesn't change the total dimensions.

See the Pen Content vs. Border Box by Zach
(@zg_dev) on CodePen.

Because this property makes our lives so much easier, in many CSS stylesheets, you may see the following code.

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

This is a portion of what we call a "CSS reset". The goal of this is to make every element on your webpage have border-box box sizing. The * selectors target all elements.

Box Model Review

One could argue that the Box Model encompasses everything we do in CSS. The main takeaways that I want you to have are these.

The Box Model describes how much "space" an HTML element occupies on a webpage
This "space" is heavily influenced by the box-sizing property
The "space" and layout is heavily influenced by the display property
The most important components of the Box Model are height, width, padding, border, and margin
All other CSS properties are supplementary to this Box Model concept

Layout Properties

This section deserves an entire lesson on its own. Positioning HTML elements skillfully on a webpage is not a straightforward topic because there are so many different ways to approach it. You can use margins, floats, and display properties to position elements. You can use Flexbox. You can use CSS Grid. And finally, you can use a CSS framework to help you with this.

Rather than trying to cram a large topic into an impossibly small section, I want to draw your attention to three CSS properties that you will spend a lot of time with.

position
display
float - with the introduction of Flexbox and CSS Grid, you probably won't ever have to use this, but you may see it in someone's code and therefore we need to cover it

Position

There are five possible values for the position property as shown in its documentation.

static - the default value (most common)
absolute - Removes an element from the content flow and positions it "absolutely" relative to the nearest parent element with a position of relative. If an "absolute" element has no parent with a "relative" position, it will be positioned relative to the viewport (same as the "fixed" position below).
relative - Activates the z-index property. Allows content to be positioned in relation to itself, and is often used in conjunction with the absolute property value above.
fixed - Removes an element from the content flow and occupies no "space" (often used for navigation bars). The element will now be positioned relative to the viewport.
sticky - similar to fixed, and is not fully supported yet

Since static is the default and sticky isn't commonly used yet, we'll focus in on absolute, relative, and fixed. I will not be explaining these in detail, but here is an example I created that showcases how they work.

See the Pen Position Property CSS by Zach
(@zg_dev) on CodePen.

Display

We talked pretty extensively about this one already in our discussion about the Box Model, but I want to hit it at a different angle here.

As we move forward in this series and as you progress in your career, you're going to learn that this display property might be the most powerful CSS property of them all. For example, what happens when we do this:

.some-element {
  display: flex;
}

By specifying the flex value of this display property, we have opened up an entirely new world. All the elements within this one are now going to be arranged and positioned based on the Flexbox specification, which is an entire tutorial on its own. Likewise, we could do this:

.some-element {
  display: grid;
}

By specifying this value, we once again have opened up an entirely new world of "CSS Grid".

Both Flexbox and CSS Grid are extremely powerful components of CSS (and they are both relatively new). They are so powerful that with them, we no longer need a CSS framework to make our development effective.

We will come back to these in future lessons.

Must Know CSS Properties

Here is the video version of this section

Through our discussion on the Box Model and Layout, I believe we have touched on some of the more important CSS properties, but there are hundreds more. In this section, I want to share some of the most common by category.

Don't worry if you can't remember all these; we will be using them heavily in our code challenges.

CSS Units of measure (pixels, rem, percentages, etc.)
Color codes and CSS properties
Font Properties
Background Properties
Writing "shorthand" CSS

CSS Units of Measure

CSS doesn't require complex math, but it does require math.

While there are many units of measure, we're going to focus on:

Pixels (and viewport units)
Percentages
rem and em units

Pixels

Let's start with pixels, which are by far the easiest to grasp. Your computer screen is made of pixels, and a webpage is displayed on your computer screen, thus your HTML elements are always defined in terms of pixels.

We can use pixels to define font sizes, padding and margin amounts (remember, Box Model!), element heights and widths, and more. For example, here are a few common properties we are about to talk about in action (using pixels).

See the Pen Using pixels by Zach
(@zg_dev) on CodePen.

When using Firefox (or any browser) developer tools, the numbers that you see when you hover over HTML elements are expressed in pixels regardless of how you originally defined them.

While we are talking about pixels, I want to revisit something we talked about in the prior lesson on the DOM. Remember when we talked about these built-in properties?

window.innerHeight; // The webpage height in pixels
window.innerWidth; // The webpage width in pixels

As of right now, we only know how to find these numbers using JavaScript, but they are also available to us with CSS! To use these in CSS, we can write the following lines of CSS.

.some-element {
  width: 100vw;
  height: 100vh;
}

By using vw ("viewport width") and vh ("viewport height"), we can assign elements to have dimensions equal to the entire width or height of the visible webpage. By putting 100 in front, we are saying, "Make this element 100% of the current viewport height/width".

You won't have to use this often, but it will come in handy.

Percentages

Take a look at this brainteaser.

See the Pen Using CSS percentages by Zach
(@zg_dev) on CodePen.

Read through the HTML and CSS and then ask yourself–if we have assigned a width of 100% to the .progress-bar div, then why is it not equal to the width of the main container?

The reason is because when defining dimensions using percentages, these percentages are relative to the parent element.

In this case, .inner-container has a width of 150px, while .container has a width of 200px. Since .progress-bar is the child of .inner-container, it will have a width equal to 100% * 150px, NOT 100% * 200px;

But...

If the parent container does not have a width defined, then the percentage will be relative to the first parent that does have a dimension defined. If we remove the width property from .inner-container, then our progress bar will be equal in width to the main container.

This seems complicated, but percentages are used heavily when we want to make our web applications responsive on all devices. We won't talk much about responsive web design here in this tutorial, but consider what would happen if you defined an HTML element to have a width of 900px. Mobile devices are usually between 400-500 pixels, which means the element that you have defined will overflow out of the visible screen (the "viewport") when your user sees it on a mobile device. If we instead defined the width of this element as something like 90%, we no longer have this problem. We will talk more about this concept later, but let's keep moving for now.

rem and em Units

These measurements are specific to font sizes. We will soon cover font properties, but first let's understand how we measure the size of them. Here are three ways that we can define the size of a font.

body {
  font-size: 16px; /* 16px is a "standard" value for normal text on most webpages */
}

body {
  font-size: 1em; /* 100% of the parent element's font size */
}

body {
  font-size: 1rem; /* 100% of the root element's font size */
}

The first case is simple, and oftentimes, you'll see it used on the root element, html. The subsequent two methods define the font size based on either the parent element or the root element. Let's say we had the following HTML and CSS.

<html>
  <head></head>
  <body>
    <p>Paragraph #1</p>
    <p class="smaller-text">Paragraph #2</p>
  </body>
</html>

html {
  font-size: 16px;
}

/* Since the root font size is 16px, 1rem equals 16px */
body {
  font-size: 1rem;
}

/* Since this element's parent, `body` has a font size 
of 16px, this will have a font-size of 0.8 * 16 = 12.8px */
.smaller-text {
  font-size: 0.8em;
}

This example, although contrived, is a common way of defining font sizes. We define the root element a hardcoded pixel value (usually 16 pixels), and then define elements within the html font sizes relative to that root font size.

Color Codes and CSS Properties

I'm not going to get too detailed here; just give the basic overview.

Here are the most common color-related CSS properties.

color - defines the text color of the container or element
background-color - defines the background color of the element
border-color - defines the border color

And here are four valid ways to define a color.

green - a built in value
rgb(0, 255, 0) - RGB stands for "red", "green", "blue". Valid values are from 0-255, which is equal to one byte.
#00ff00 - The "hex" or "hexadecimal" version of the color. The first two characters represent red, the second two green, and the third blue.
rgba(0, 255, 0, 0.8) - Same thing as RGB, but the last number represents the transparency value. In this case, we are defining 80% transparency.

While the built in colors like "green" or "blue" are just part of CSS, we can easily convert back and forth between RGB and Hex. It is simply a matter of converting binary to hexadecimal and vice-versa. There are plenty of online converters you can use to do this.

And one more thing while we're here–check out Adobe Color as a tool for building color themes and working with these color codes.

As a quick review, if we wanted to make all paragraph elements a sky blue color, we could do this:

p {
  color: #16A6F5;
}

Or this...

p {
  color: rgb(22, 166, 245);
}

Or this...

/* Here is a list of color keywords - https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#color_keywords */
p {
  color: lightblue;
}

Font Properties

While we have already covered the font-size property, there are a couple other important font properties to be aware of.

font-family - defines the font that your webpage will use
font-size - defines the size of the font
font-weight - defines the thickness of the font (i.e. regular, bold, etc.)
line-height - defines the spacing between lines of text

In most cases, you'll see the font-family and font-size defined at the root element, html.

html {
  font-family: "Georgia", serif;
  font-size: 16px;
}

The first part of the font-family property represents the actual family (i.e. "Georgia") while the second part represents the generic family (i.e. "serif"), which acts as a fallback value in case the main family is not able to load correctly in the webpage (usually due to unsupported fonts on certain browsers).

For a list of font families and fallbacks, this W3 page is a good reference.

But what if you're not happy with the built-in browser fonts? Adding a custom font can be done in a few different ways, but the most straightforward and common way is by adding a link tag in the head of your HTML document; just like you would a stylesheet.

Let's say we wanted to add the Roboto font family to our webpage. Head over to Google Fonts and copy that link tags you see on the right side of the page. It should look like this.

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap" rel="stylesheet">

Before we wire these up to our HTML document, I want to point out one important thing. You can see in the href attribute, we have font weights of 400 and 900 selected. In other words, we can use the font-weight property with values of 400 and 900 to change the thickness of our text. Let's go ahead and wire it up now.

<html>
  <head>
    <title>My Webpage</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap" rel="stylesheet">
    <link href="./path-to-stylesheet.css" rel="stylesheet">
  </head>
  <body>
    <p>Paragraph #1</p>
    <p class="bold-text">Paragraph #2</p>
  </body>
</html>

Now, all we have to do in our stylesheet is this:

html {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
}

And if we wanted to make one of those paragraphs bold, we could do this:

.bold-text {
  font-weight: 900;
}

Here is a Codepen showing this in action. Please note that the process of adding a custom font family in Codepen is slightly different because the HTML code editor represents the body and not the html document. Just go to Settings->HTML and paste the link tags into the "Stuff for head" section.

See the Pen Including Custom Fonts by Zach
(@zg_dev) on CodePen.

Background Properties

Whether we are talking about background colors, background images, or how these backgrounds are positioned, the following CSS properties are really helpful to keep in the back pocket.

Each of these properties will affect the content area of the Box Model (including padding, but excluding border and margin).

background-color - changes the color of an HTML element
background-image - uses an image as a background
background-position - if using a background image, positions the image
background-repeat - determines whether a background image is repeated
background-size - changes the size of the background image

Changing the background color is pretty straightforward, but make sure that the element you are styling has a width and a height either explicitly or implicitly. After all, an element that has no dimensions cannot have a background!

<div class="container">
<div>

.container {
  width: 500px;
  height: 500px;
  background-color: #46D5F2;
}

Adding a background image is a bit trickier. If you are adding a background image, you most likely will be working with a picture, and therefore, you want that picture to fill the entire visible screen (the "viewport"). I have no intention in this massive post to walk you through all the possible combinations, so let's look at an extremely common example that you will see and use.

<div class="container">
  <div class="text-container">
    <h2>Some Centered Large Text</h2>
  </div>
</div>

First, we need to get a high-resolution image (at least 1920x1080, but larger is preferable) for our background. Low-res images will NOT look good on large screens! Here is one from my golf site.

All we need is the image link and we should be set!

/* This is a basic CSS reset.  By default, the body will have
   margin and padding that will prevent our background image from
   taking up the entire screen */
body {
  margin: 0;
  padding: 0;
}

/* Sets the background image */
.container {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-image: url('https://www.thediygolfer.com/wp-content/uploads/2020/12/homepage-background.jpg');
  background-position: right center;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
}

/* Centers the text container on the page */
.text-container {
  background-color: white;
  width: 200px;
  margin: 200px auto;
  padding: 20px;
  border: 1px solid black;
}

There is a lot going on here, I know. What I want you to focus on are the following things.

I have set the .container to have a 100vh and 100vw. This ensures that the HTML element with the background occupies the entire visible webpage, or the "viewport"
I have set the margin and padding to 0 for the body element to remove browser default styles that will prevent our background from occupying the entire page. Go ahead and remove this block of code in the Codepen and see what happens.
Each of the background properties have a set of possible values. These are good defaults. The only property that might be worth changing is the background-position property depending on what parts of your image you want to be shown.
Everything else that I didn't comment on will become part of your "CSS vocabulary" with practice (and I will likely cover them in the code challenge for this lesson).

Here is the end result. I highly suggest clicking through this and removing CSS properties one at a time to see what they do to the overall webpage.

See the Pen Background images by Zach
(@zg_dev) on CodePen.

Writing Shorthand CSS

And finally, the last thing I want to cover here is something that might be confusing to you like it was me when I was starting out. Many of the CSS properties that we have covered have "shorthand" ways of writing them. When talking about the Box Model, we can define a border around an element.

.some-element {
  border: 1px dashed black;
}

This creates a 1 pixel, dashed black line as a border. But...

We could have written this across three separate properties.

.some-element {
  border-width: 1px;
  border-style: dashed;
  border-color: black;
}

In other words, the first way was the "shorthand" way of writing this CSS rule. We can also do this with other properties like margin. Here's the long way to define margin for an element.

.some-element {
  margin-top: 10px;
  margin-right: 5px;
  margin-bottom: 2px;
  margin-left: 15px; 
}

Here's a shorter way to write the same CSS.

.some-element {
  margin: 10px 5px 2px 15px;
}

And if you want the same margin value on all sides, this is all you have to do.

.some-element {
  margin: 20px;
}

As you write CSS, you will pick up on these "shorthand" ways of writing it. I know it is confusing now and tough to remember what to use and when, but if you are ever lost, remember, you've got the documentation available to you!

A Systematic Way to Write CSS Effectively

In my experience, the real key to using CSS effectively is to ask the following four questions in order, every time you style a webpage. These will become second nature eventually.

How do I want to arrange these HTML elements on the page?
How does this arrangement look in the form of HTML?
How can I use CSS to achieve the layout I have imagined?
How should each element be styled?

Talking about CSS in isolation isn't helpful. We have to consider the HTML part too.

I'm going to walk you through these four questions using an example similar to the one below. Take a look at the webpage we looked at earlier:

See the Pen CSS Layout and Style Example by Zach
(@zg_dev) on CodePen.

Step 1: How do I want to arrange the elements?

In the example above, my goal is to have two boxes, horizontally arranged side-by-side with text in them.

Step 2: How does this arrangement look in HTML?

Since I have two boxes, I probably need two div elements. These div elements are perfect "containers" for things like this. I also need a "main" container, so I'll wrap everything in another div.

Furthermore, I need a heading and some paragraph text in each box. The most basic representation of this layout in HTML would be:

<div>
  <div>
    <h2></h2>
    <p></p>
  </div>
  <div>
    <h2></h2>
    <p></p>
  </div>
</div>

Of course, I need to put some text in the h2 and p elements and add a few classes to the elements (so that I can select them easily with CSS), but this represents the "skeleton" that I'm trying to imagine in this step.

Step 3: How can I use CSS to achieve the layout I have imagined?

In this step, we're focusing on getting those HTML elements arranged in the correct spots on the webpage. We are NOT worried about how pretty they look yet.

Unfortunately, this step is where experience using CSS comes in handy. There are several "layout" CSS properties to use here, and we can actually achieve the same result in a couple different ways. Since I will be walking through these properties later, I'm going to just give them to you now.

But the first thing we need to do is modify our HTML so that we have the necessary selectors ready to use! Here's how I would modify it.

<div class="container">
  <div class="box-1">
    <h2>Box 1</h2>
    <p>some text</p>
  </div>
  <div class="box-2">
    <h2>Box 2</h2>
    <p>some text</p>
  </div>
</div>

Sure, I could have used ID attributes instead of classes, but in this example, it doesn't matter. We just need something that will make writing our CSS easier. Here is how our HTML looks without CSS layout properties (I added borders so you can visualize it better).

See the Pen Layout only example (html only) by Zach
(@zg_dev) on CodePen.

By default, these will be stacked on top of each other vertically (we'll talk about why later). Since we want them to be arranged horizontally, we need to add some CSS. Here's one way to do it:

.box-1 {
  float: left;
  width: 50%;
}

The float property will break the first box out of its "natural" layout and the width will make it take up 50% of the page. This is the easiest way to achieve our desired result, but as you start writing more and more CSS, you'll realize that using the float property for layouts is very cumbersome and produces some unexpected results. In the next lesson, we will learn about Flexbox, which is how I would prefer to achieve this layout. Don't worry about how this works yet.

.container {
  display: flex;
  flex-direction: row;
}

.box-1, .box-2 {
  flex: 50%;
}

Here is our result after adding this CSS.

See the Pen Layout only example by Zach
(@zg_dev) on CodePen.

At this point, we have successfully arranged the items in the right place on the page.

Step 4: How should each element be styled?

The last step is in my opinion, the easiest. All we have to do now is take our elements that we have arranged on the page and give them nice colors, borders, spacing, etc. Let's add the following CSS to our existing webpage.

.box-1, .box-2 {
  flex: 50%;
  text-align: center;
  margin: 20px;
  padding: 20px;
}

.box-1 {
  border: 2px solid green;
  color: green;
}

.box-2 {
  border: 2px solid blue;
  color: blue;
}

Starting from the top, we have added a text-align property which will center all the text elements inside our div containers. We also added margin and padding (will talk about this in a minute), which just spaces things out nicely. We then add a green border and color (font color) to the box-1 class and the same properties in blue for box-2.

Here's our final result.

See the Pen Layout + Style Example by Zach
(@zg_dev) on CodePen.

A Project to Learn CSS

Like most things in web development, the only true way to digest this stuff is to build something. Instead of giving you a boring overview of all the possible CSS properties, we're going to use what we've learned in this lesson and start building something real.

The challenge that we are doing is from a site called Frontend Mentor, which provides really nice UI designs (that I could not design myself) and presents them as HTML/CSS/JS challenges.

Here is the challenge that we will be completing.

Since we know how to write JavaScript, HTML, and now CSS, we should be able to complete this entire challenge! I will be releasing some supplemental CSS videos on responsive web design, Flexbox, and CSS grid, so I suggest supplementing this challenge with those videos and trying parts of it on your own. I would not expect you to be able to build this on your own, but there will be many opportunities throughout to pause the video and try it for yourself.

Best of luck, here is the video solution!

HTML Crash Course + Overview of the DOM #fullstackroadmap

Zach Gollwitzer — Tue, 09 Feb 2021 22:48:51 +0000

The goal for this lesson

By the end of this lesson, I want you to clearly understand the following:

What is HTML?
What is the Document Object Model? (DOM)
What is the relationship between JavaScript, HTML, and CSS?
How to write a basic webpage

At the end of the lesson, we will be building this:

See this lesson on YouTube here

Useful series links

Please tag me on Twitter @zg_dev and share this series with #100DaysOfCode!

Series Table of Contents
Github Repository - where you'll find all the code we write in this series
YouTube Playlist
Series Overview
100 Days of Code Challenge - I highly recommend you take this on while reading this series!
My CodeWars Profile - Follow me and I'll follow you back. This is where we will do our coding challenges throughout the series!

Building a House

If we were building a house, we would have to follow three main steps:

Build the structure (i.e. wood, concrete, brick, roofing, etc.)
Set up plumbing, electric, water lines, and other functional requirements
Make the house look good with paint, siding, and landscaping

If our house was a website, #1 is the HTML, #2 is the JavaScript, and #3 is the CSS.

You could live in your house with only the structure (HTML), but it wouldn't be pleasant.

You could live in your house with only the structure (HTML) and decorative touches (CSS), but unfortunately, you'd be living in a beautiful house where the toilets don't flush and the light switches don't turn on the lights.

HTML, CSS, and JavaScript work together. While the only true requirement for a webpage is HTML, a modern web developer must deeply understand the connection between the three and learn to use each effectively.

We're skipping CSS... For now

While you might see a few lines of CSS within this lesson (where necessary for an explanation of an HTML concept), the goal is not to learn CSS in this lesson.

We have plenty to learn with HTML alone! Don't worry though, the next lesson will be a CSS crash course :)

Remember, CSS is the styling of the web, and is not necessary to build a functional webpage.

Essential Concepts of HTML (HyperText Markup Language)

Like we did with the JavaScript section of this course, I'm not going to show you EVERY DETAIL of HTML. While we have far less ground to cover here than we did with JavaScript (HTML is much simpler), there are still HTML concepts that are overkill for you to learn if you are trying to become a web developer quickly.

For example, HTML has a "tag" (we'll talk more on this) called <table> which allows you to create tables. I could spend an entire lesson teaching you how to create and style tables in HTML, but I won't because even to this day, I use a table generator like this to create my HTML tables and styles. Here's a table that I created in a few minutes using the table generator tool.

See the Pen Basic Table by Zach
(@zg_dev) on CodePen.

This code above is hosted on Codepen, which we will be using frequently for the next few lessons. I recommend creating a free account so you can follow along.

Instead of spending all our time on something like HTML tables, we will be spending a lot of time on things like:

Commonly used HTML tags (html, body, head, div, p, input, span, h1, h2, img, button, etc.)
HTML attributes (style, id, class)

Let's get started!

Basic Structure of an HTML document

This is what we call "HTML boilerplate", which just means that no matter what type of webpage you are creating, it will ALWAYS follow this structure.

<html>
  <head>
    <title>Site Title</title>
  </head>

  <body>
    <!-- This is an HTML comment 

    It looks different than our JavaScript comments
    and can be used across multiple lines

    -->
  </body>
</html>

While this is all that is necessary for a webpage, here is a more "real world" version of HTML boilerplate.

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8" />

    <title>Example Site</title>
    <meta name="description" content="An example HTML site" />
    <meta name="author" content="Zach Gollwitzer" />

    <link rel="stylesheet" href="css/styles.css" />
  </head>

  <body>
    <script src="js/scripts.js"></script>
  </body>
</html>

You don't have to memorize this, but keep it handy.

(Optional section) For those curious, here is what some of that cryptic stuff means:

!doctype html - Tells the web browser to expect an HTML document. This is not an HTML element.
lang="en" - Tells search engines and web browsers what language this webpage is written in. Here are all the valid country codes.
charset="utf-8" - This defines what character set to use and is a very involved topic.
<html></html> - The HTML container
<head></head> - Stores all the metadata about the webpage
<title></title> - Look up at the text in your browser's tabs. The contents of this will represent the tab name.
<meta> - Nope, not <meta></meta>. Some HTML tags are "self closing". This just defines useful information for the browser and search engines to use when viewing the webpage.
<link> - This allows you to connect your CSS stylesheet. We will be talking more about this in a future lesson.
<script> - This allows you to connect JavaScript code to your HTML document. We will cover this later in the post when we talk about the document object model (DOM).

HTML Tags and Attributes

Here is the basic structure of an HTML element.

Let's walk through each piece here. Here is the most basic way to write HTML:

<p></p>

<p> is the "opening" tag that tells the webpage that we are starting an HTML element. </p> is the "closing" tag (notice the /) that says to the browser, "hey, I'm done with the contents of this HTML element.

There are many HTML tags available to you (you can see them all here), but as a web developer starting out, you will only need a handful of them to create beautiful webpages and apps.

Let's add some content.

<p>Here is some content</p>

You can write whatever you want within the bounds of the two HTML tags, <p> and </p>. Now, let's add an attribute.

<p class="my-first-class">Here is some content</p>

The word class is the attribute, and "my-first-class" is the value we are giving this attribute. Think about it like the JavaScript variables we covered in the prior lessons of this series.

const class = "my-first-class";

The above code is JavaScript, NOT HTML, but it is a very similar concept to the attribute shown above.

Just like you can use a variety of HTML tags, you can also use a variety of HTML attributes that will affect the behavior of that element.

We will talk about these tags shortly, but first, we need to make a few distinctions.

Tags vs. Elements

Before we get any further, let's distinguish between a "tag" and an "element". The terms are often used interchangeably, but I generally view an "element" as a complete unit while I think of a "tag" as a symbol.

Here's an element:

<p class="paragraph-style">Some content</p>

And here's a tag:

<p></p>

I will use "tag" to speak about function and "element" to speak about general structure.

Types of HTML tags

In my head, there are two levels of classification when it comes to HTML tags. This page classifies HTML tags into many more categories, but I think my simplified view will help you as a beginner.

Normal vs. "self-closing" tags
Container vs. Standalone tags

Normal vs. Self-Closing Tags

Most HTML tags have an "opening" and "closing" component to them. Here are some examples.

<p></p>
<h1></h1>
<div></div>
<span></span>
<strong></strong>

But some elements are what we call "self-closing". Here are common examples.

<img />
<input />
<meta />
<link />

You can nest elements within a normal HTML element while you cannot nest elements within a self-closing HTML element.

<!-- Correct usage -->
<div>
  <p>some content</p>
</div>

<!-- INCORRECT usage (will not render) -->
<img <p>some content</p> />

Container vs. Standalone tags

We know that we cannot "nest" or "embed" elements within a self-closing HTML element, but when should we be nesting HTML elements within the "normal" elements?

For example, the following HTML is valid, but should we write it this way?

<p>
  Some content
  <p>some nested content</p>
  <div>more nested content</div>
</p>

NO!! While this HTML will render in the browser, it is improperly using the HTML tags. Some HTML tags such as div, table, ol, ul, and body are meant to have nested elements within them. Other HTML tags such as h1, h2, h3, h4, h5, h6, p, and strong are not good as "containers" for other elements.

To learn more, let's look at a list of common HTML tags.

Common HTML Tags

To avoid being a complete redundancy of all the great resources that document HTML tags, this section will provide you with the most common HTML tags that I use as a full-stack developer.

Remember, this is not an exhaustive list, but rather the essential tags you'll need to know. You can visit this reference page for all available tags.

The Codepen below has two sections. On the left is the HTML code. On the right is the output.

Study these common tags for a few minutes, but don't obsess over memorizing them. We will do a challenge exercise later in this lesson that will help you apply the concepts. Additionally, you can always look them up in the documentation. I suggest opening this in Codepen for a full-screen view.

See the Pen Common HTML Tags by Zach
(@zg_dev) on CodePen.

HTML is NOT case-sensitive!

As you were looking through the HTML, you might have noticed that all of the tags were written in lowercase letters. This is generally how you should write HTML, but the following code is valid too.

<div>
  <p>HTML is not case-sensitive</p>
</div>

Line breaks do not affect HTML

You also might have noticed when looking through the code that there was a significant space between blocks of HTML code, but in the output, those same spaces did not exist.

You might think that the following code would result in a large space between the paragraphs:

See the Pen Line Breaks Don't Matter in HTML by Zach
(@zg_dev) on CodePen.

Global Attributes vs. Element Attributes

Again, here is an HTML element.

The attribute class is a global attribute, but what exactly does this mean?

It would be useless for me to walk you through ALL of the possible attributes for ALL HTML tags. Instead, you need to understand how they work.

Remember in the prior lesson where we talked about the various JavaScript objects and their built-in methods?

And remember when we tried to call an Array method on a String data type?

const str = "i am a string";

// This won't work because reverse() is a built-in method
// on Arrays, NOT Strings!
str.reverse(); // TypeError: str.reverse is not a function

HTML attributes are very similar to these object methods. Each HTML tag (p, div, img, etc.) has a set of element attributes that can be used on them to modify their behavior and styling. There are also a set of global attributes that can be used on ALL HTML tags.

For example, you CAN put a src attribute on an img tag.

<img src="https://www.somewebsite.com/images/image1.png" />

But you CANNOT put src on a p tag.

<!-- INCORRECT -->
<p src="https://www.somewebsite.com/images/image1.png">Some text</p>

It won't throw an error, but it won't do anything useful. This is because src is NOT a global attribute. It is an element-specific attribute that pertains to img tags.

On the other hand, you COULD do the following:

<img class="some-style" src="https://www.somewebsite.com/images/image1.png" />
<p class="some-style">Some text</p>

Above, we are using the class attribute on both elements because it is a global attribute.

Mid-Lesson Code Challenge

To check your knowledge, we are going to stop here and apply the concepts we just learned.

Create a Codepen account for free
Open this Pen and click "Fork" in the bottom right corner of your screen. This will allow you to edit it on your own account.

Solve the challenge below, and tag me with your solution on Twitter @zg_dev! Be sure to use the #100DaysOfCode hashtag in your Tweet!

A few hints:

The big text is an h1 element.
Don't worry about the colors, borders, and text styles. They will happen automatically if you build it correctly with the HTML
Be sure to personalize the content (including links) so you can share it! You can share it on Twitter by clicking that share link at the bottom right corner of your Codepen page.
Here is the solution, but don't cheat yourself! Give it a try first!

How to follow along for the rest of this tutorial

In the next part of this lesson, we will be connecting some JavaScript with a Codepen HTML document. Here is how you can follow along.

First, you'll notice that in each Codepen "Pen", there is a section for HTML, CSS, and JavaScript. Any JavaScript you type into the JavaScript section will be automatically connected to your HTML document. Normally, you would have to do something like this:

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8" />

    <title>Example Site</title>
    <meta name="description" content="An example HTML site" />
    <meta name="author" content="Zach Gollwitzer" />

    <link rel="stylesheet" href="css/styles.css" />
  </head>

  <body>


    <!-- Normally, you have to manually connect your JavaScript code to your HTML code
          like we are doing here.  We will talk more about this later.
    -->
    <script src="js/scripts.js"></script>
  </body>
</html>

With Codepen, all of this is automatically taken care of for you. All you have to do is start typing some JavaScript in the designated area.

But... What if you want to experiment around with some JavaScript before typing it here? You have two options:

Use Codepen's built-in Console (bottom left corner)
Use the browser console

Unfortunately for us, option #1 isn't great because Codepen's console isn't very interactive. Option #2 isn't great because within the Firefox browser (which we have been using in this series), the dev tools console does not properly connect with Codepen.

I hate to come up with a workaround solution for us, but here it is... I suggest using Google Chrome with your Codepen Pens. Don't worry, these problems won't exist once we start developing locally, but for now, it's what we have to deal with. So open Google Chrome, and once there, you can use the dev tools to interact with your Codepen.

Finally, make sure the "CodePen" is selected for the JavaScript execution context:

The Document Object Model (DOM)

So you just learned HTML for the first time and now, I'm throwing you a curve-ball. The Document Object Model, or "DOM" is the bridge between JavaScript and HTML.

Most web development courses teach HTML prior to teaching JavaScript, but I did the opposite because understanding the DOM without having a basic background in JavaScript is a fools errand. I learned HTML before JavaScript and when we got to the DOM section, I had NO IDEA what the instructor was talking about.

And that is a shame, because a strong understanding of the DOM will go a long way in today's world where front-end frameworks like React, Vue, and Angular dominate the web. All of these frameworks heavily leverage the DOM and the React framework even defines its own "virtual DOM".

Why are we talking about the DOM?

No matter what front-end framework you use, in some way or another, it will be leveraging the DOM. You may not see how that is happening due to layers of abstraction, but at the basis of every front-end application, the DOM is what allows us to connect our JavaScript to our HTML and make things happen.

While you don't need to be an expert in this topic, you should understand what the DOM is and how it plays into the code you are writing.

So what is the DOM (Document Object Model)?

The "DOM" is NOT a programming language. The "DOM" is also not part of JavaScript. So what is it?

The DOM is an API for an HTML document. What is an API? Here is the definition I came up with in my post explaining APIs:

A software API can be thought of as a "user manual" that allows developers to do something useful with 3rd party software/hardware without knowing the inner-workings of that software/hardware.

In other words, you want to do something programmatically with your webpage, but you don't want to become an expert in the low-level details of how HTML actually works (i.e. how it is actually rendered on a webpage, NOT how to write it).

I know your head is probably spinning, so let's make this real. Take a look at the following HTML document.

<html>
  <head>
    <title>My webpage</title>
  </head>
  <body>
    <h2>Welcome to my HTML tutorial</h2>
    <p>Click the button below to begin</p>
    <button>Start Tutorial</button>
  </body>
</html>

And here is what it looks like (I put some basic CSS styles on it, but again, don't worry about them YET).

See the Pen Basic HTML Document by Zach
(@zg_dev) on CodePen.

Go ahead, click that button.

What does it do?

NOTHIN. IT'S USELESS.

If we want that button to do something, we need to bring in our friend, JavaScript. As we talked about earlier, JavaScript is what brings a webpage alive.

But how do we make that happen? Somehow, we need to identify that button HTML element and tell it to do something when someone clicks it. So it's a two-step process:

Identify an HTML element using JavaScript
Once identified, instruct it to do something in JavaScript

Identifying HTML Elements with JavaScript

This is where the DOM comes in. As we said, the DOM is an API for accessing HTML elements.

Here's how we identify that button:

const btn = document.querySelector("button");

This is JavaScript running in your web browser, and all we are doing is assigning our identified HTML element to a variable called btn. But what is document? And what is this querySelector() method on it?

An Analogy for Understanding the DOM (Document Object Model)

At this point, I'm assuming you kind of understand what I'm saying, but it's still fuzzy. That's okay.

To aid our discussion, think of an HTML document as a paper map, and think of the DOM combined with HTML as Google Maps.

Photo by Glenn Carstens-Peters on Unsplash

There's not much you can do with a physical, paper map. But with Google Maps (or something similar), we have unlimited potential.

123movies
.mapouter{position:relative;text-align:right;height:250px;width:450px;}embedgooglemap.net.gmap_canvas {overflow:hidden;background:none!important;height:250px;width:450px;}

With Google Maps, we can build applications like Uber because it has a pre-defined structure (API) for using it! We can "plug in" all sorts of integrations.

An HTML document is a bit boring on its own; just like a paper map. But once we define a structural representation of that HTML document (the DOM), we have unlimited possibilities!

The Structure of the DOM (HINT: it's a tree!)

We call this a String object in JavaScript:

const str = "some string";

We call this a Number object in JavaScript:

const num = 20;

We call this an null primitive in JavaScript:

let someVar = null;

And we call this an HTMLElement object in JavaScript:

const btn = document.querySelector("button");

The HTMLElement data type is not native to JavaScript. It's not even available in server-side (NodeJS) JavaScript! So what is it?

This is just one of many "leaves" that makes up the "DOM Tree". More on this soon.

A 10,000 Foot View of the DOM

Before we get into this, let me give you four things to consider as we explore this:

The DOM is complex, and at your current skill level (assuming you're following along with this series), you will NOT fully grasp it. That's okay. Try to follow the high-level themes, but don't stress over the details. This will not make or break your ability to program web apps.
The DOM is not part of the JavaScript programming language (but can be used by it; hence why we call it an "API")
Each browser has a slightly different implementation of the DOM, but these differences shouldn't matter to most web developers.
The DOM is not a programming language, but rather a "model" or "representation" of an existing structure (HTML). It adapts a lot of OOP (Object Oriented Programming) concepts which can be confusing since we haven't learned it yet, but just remember, each piece of the HTML can be "modeled" according to properties and methods (what it is made of and what it can do).

To understand this as a beginner, we're going to need some visuals and work our way slowly into the details.

First, I want you to get clear on a couple of things.

The browser itself is programmable
Each browser tab contains exactly 1 HTML "Document" (this is technically not true if you have an iframe, but not important here)

The Window Object

So what can that browser of yours do that you would want to program? Here are a few ideas:

We can...

Scroll up and down through the content of a webpage
Refresh the page
Resize the browser window

And the best part? We can write JavaScript to do this via the DOM.

To programmatically control the browser itself, we will use a global DOM object called window.

Here is the link to its official documentation that I recommend you quickly glance at.

Per the photo above, you can think of the window object as a representation of the Browser. More specifically, it represents a single tab within your browser.

Some common Window methods

To get you started, go ahead and open up your browser dev tools and execute the following code.

// Opens an alert box
window.alert('I love programming');

// Opens a new browser tab
window.open('https://www.google.com');

// Scrolls (smoothly) down by exactly 1 page
// (make sure you are on a webpage that has enough content to scroll)
window.scrollBy({
  top: window.innerHeight,
  left: 0,
  behavior: 'smooth'
});

// Reloads the browser tab
window.location.reload();

Since window is a globally available object in the browser, you don't need to preface all of your commands with it. The following code will work the same as the code above.

// Opens an alert box
alert('I love programming');

// Opens a new browser tab
open('https://www.google.com');

// Scrolls (smoothly) down by exactly 1 page
// (make sure you are on a webpage that has enough content to scroll)
scrollBy({
  top: innerHeight,
  left: 0,
  behavior: 'smooth'
});

location.reload();

Some Common Window Properties

While these are some of the common "methods" that you might be using, here are some of the common "properties" that belong to the global window object. Feel free to type these into your dev tools Console.

// Width and height in pixels of the space that displays the HTML
window.innerHeight 
window.innerWidth

// Width and height in pixels of the entire browser window
window.outerHeight 
window.outerWidth

window.localStorage // You'll use this later in the series for storing temporary information in the browser
window.location.href // The URL you are currently at

// How many pixels you have scrolled vertically and horizontally within your browser tab
window.scrollX
window.scrollY

Some Common Window Events

This one might be a bit confusing at first, but with the DOM, you can trigger code based on certain events. Here's a simple example of how that works:

window.onscroll = function () {
  console.log('stop scrolling me!!');
}

Above, we are creating a function and assigning it to the onscroll event, which is one of many events you can "plug in to" on this object. Every time you scroll on the page, you will see "stop scrolling me!!" printed to your dev tools Console.

We will come back to "events", but there are a few more things we need to learn first.

The "Document" Object

No, not the "Document Object Model". There is a literal object called document. Let's look at that picture again.

We just talked about the Browser, represented by the window object, but now, we need to talk about that HTML Document that is being displayed within the window. Every browser tab that you have open right now is a representation of a single HTML document. We can refer to this in JavaScript code via the DOM as document.

Since the HTML document is within the browser window, it makes sense that this object is a property of the window object. Even so, it is globally available, which means you don't have to precede it by window. Type any of the following code into your dev tools console and it should work just fine.

// These are both valid.  `document` is a property of `window` AND it is globally accessible
window.document.baseURI
document.baseURI

While you can scroll, refresh, and manage tabs in your browser via window, the document object allows you to manipulate the actual contents of the webpage. Here are a few things you can do:

Add/Remove HTML elements to the page
Modify existing HTML elements
Add "event listeners" to HTML elements

You can think of document as a representation of the HTML Document. This HTML Document is structured like a tree and believe it or not, you already have a basic understanding of this! Let's look at a very simple HTML document.

<html>
  <head>
    <title>Site Title</title>
  </head>
  <body>
    <div class="main-body">
      <h1>Article Heading</h1>
      <p>Some text in the article</p>
    </div>
    <div class="footer">
      <p>Site created by Zach</p>
    </div>
  </body>
</html>

See what this HTML looks like here

When we type document into our console, we will get an "object representation" of the HTML code we see above (please note that if you are typing this into your Codepen console, you might see something slightly different, which is because Codepen inserts additional HTML and CSS for certain functionality of their service).

Now compare the object in the photo above to something like this:

const obj = {
  prop1: {
    nestedProp: 'some value'
  },
  prop2: ['i', 'am', 'an', 'array']
};

If these two "objects" look different to you, that is good, because they are different. While the HTML document object appears to have properties similar to our good 'ole JavaScript object above, they work a bit differently.

This is valid:

const obj = {
  prop1: {
    nestedProp: 'some value'
  },
  prop2: ['i', 'am', 'an', 'array']
};

console.log(obj.prop1.nestedProp);

This is NOT valid:

console.log(document.body.div.h1); // TypeError: Cannot read property 'h1' of undefined

So... How do we access the various HTML elements that are clearly stored in the document object??

The "DOM Tree"

Like we learned about before, the DOM is not a programming language, and it's not actually part of native JavaScript. It is a "model" for an HTML Document. Within that "model", we have "branches" and "leaves" just like a tree. Translated into programming-speak, we call each of these branches and leaves "Nodes". And no, this has nothing to do with NodeJS (a server-side JavaScript runtime we will be working with soon).

Here is our HTML document from earlier with a few additions:

<html>
  <head>
    <title>Site Title</title>
  </head>
  <body>
    <div class="main-body">
      <h1>Article Heading</h1>
      <p>Some text in the article</p>
      <p>Some more text</p>
      <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
      </ul>
    </div>
    <div class="footer">
      <p>Site created by Zach</p>
    </div>
  </body>
</html>

Here's how we draw this in "DOM Tree" format:

To effectively use the DOM via JavaScript, you should think of these "Nodes" like you would an ancestral hierarchy. You've got children, siblings, parents, grandparents, and great-grandparents. For example, all the li tags within the ul tag are siblings because they are at the same level in the hierarchy. Likewise, the p tags in the div with the main-body class are siblings. Body is the child of HTML while both of the div nodes are children of the Body node.

The above picture is a simplified view. Each "Node" has unique characteristics, and there are a couple common node types (here's a comprehensive list):

Element Nodes
Text Nodes
Attribute Nodes

I'm going to bring back a diagram that you've probably seen before:

Now let's relate this to these "Nodes".

The <p></p> tag is an "Element Node". The class="some-class" is an "Attribute Node". The Content value is a "Text Node". Here, I'll prove it to you by creating this exact element in JavaScript:

// Create empty containers for each node type
const elementNode = document.createElement('p');
const textNode = document.createTextNode('Content');
const attributeNode = document.createAttribute('class');

console.log(elementNode); // <p></p>
console.log(textNode); // "Content"
console.log(attributeNode); // class=""

// Start constructing the HTML element
// Currently, our element is:  <p></p>
elementNode.appendChild(textNode);

// Currently, our element is: <p>Content</p>
attributeNode.value = 'some-class';
elementNode.setAttributeNode(attributeNode);

// Currently, our element is: <p class="some-class">Content</p>
console.log(elementNode);

// This inserts our new HTML element at the bottom of whatever webpage you are currently on (try it out!)
document.body.appendChild(elementNode);

Congrats! We just recreated an HTML element with JavaScript! I used some API methods that we haven't talked about, but hopefully you can see what is happening here in a general sense. For example, appendChild() will take an existing node and insert it between another node.

What is the point of doing this though? I can think of a few examples:

A user creates a calendar event and you need to display it in an existing webpage
A user adds an item to their todo app
A user creates a post on facebook

All of these actions require HTML to be created on the fly (via JavaScript).

Now that we have covered some basics of the DOM, let's see how we can use it. Please know that in the following example, we will not be covering everything there is to know about the DOM API. As I mentioned earlier, the goal is to get acquainted with the DOM and understand how and why it is used; not master it.

A DOM Example

Now that you have a baseline understanding of how the DOM works, let's put it in action! Let's take a look at that HTML document from earlier:

See the Pen Basic HTML Document by Zach
(@zg_dev) on CodePen.

Let's say our objective is to add a line of text (i.e. a p element with some text in it) every time we click the button. Here are the steps we must take:

Find a way to identify the button HTML element using the DOM API
Register a "click event" on this HTML element (i.e. tell it what to do when it is clicked)
Write a function that will add a p element to the HTML Document (DOM) every time the button is clicked

Step 1: Identify the button

To identify an Element type using the DOM, we have several ways of doing this. First, let me show you what the HTML looks like for the button above, because without seeing it, you cannot effectively identify it.

<button id="btn-1" class="my-btn">CLICK ME</button>

Let's walk through this. The id attribute is a global HTML attribute that can be used on ANY type of HTML element. I have assigned btn-1 as the ID for this element, but you could have named it anything you want. You could even name it my-btn; the same exact name given to the class attribute, which is also a global attribute available to all HTML elements.

We as the developer have assigned this button HTML element an ID and a class, which means we have many ways to identify it. The first way we can identify this is the most generic:

document.querySelector('button'); // "<button id='btn-1' class='my-btn'>CLICK ME</button>"

In this case, we are using the querySelector() built-in method and selecting based on the tag name (button) of the element, which will return the first occurrence of an HTML tag in the HTML document. Here, you can learn more about this method.

There is no problem with this method in our HTML example because we only have 1 button in the entire HTML document! But if later, we added another button, this method of selection will cause us problems because we are not being specific enough. Here's a better way to identify it.

document.getElementsByClassName('my-btn'); // HTMLCollection [button#btn-1.my-btn, btn-1: button#btn-1.my-btn]

But wait a second... When using this method, we are not returned a single element! That is because in HTML, you can assign a single class name to multiple HTML elements. Therefore, the getElementsByClassName() will return an HTMLCollection type, which is basically a fancy Array of HTMLElement types. That's probably not what we're looking for here since we only want to identify a single button.

Read more about getElementsByClassName() here.

Let's try another way.

document.getElementById('btn-1');  // "<button id='btn-1' class='my-btn'>CLICK ME</button>"

Ahhhh, that's better! Unlike the class attribute, you can only assign an ID to one element within the document. This would be INVALID:

<button id="btn">Button 1</button>
<button id="btn">Button 2</button>

We CANNOT have two button elements that both have an ID of btn! So going back to our getElementById() method, we know that we are being specific AND we will only be searching for a single HTML element within the document.

But to this point, I've been leading you in unnecessary directions. We could have modified our first method, querySelector() to identify this button by its tag, class, or ID!

// Get the first occurrence of <button></button> within the HTML document
document.querySelector('button');

// Get the first occurrence of an HTML element that has a class of "my-btn" in the HTML document
document.querySelector('.my-btn');

// Get the HTML element that has an ID of "btn-1"
document.querySelector('#btn-1');

Notice anything in this code above? I do. It looks like we are adding in . and # before the identifier to look for a class and ID respectively. Keep this in mind, you'll see it again when we start talking about CSS in the next lesson.

While all three of these methods will return us the same result for this specific HTML document, that will not always be the case. Remember, be as specific as possible when identifying HTML elements.

Below, I have written all the ways we could identify that button in our HTML. The first couple methods will return you an individual HTMLElement while the second section will return an HTMLCollection (again, just a fancy Array of HTMLElement types).

// Will return a single HTML Element
document.querySelector('button');
document.querySelector('.my-btn');
document.querySelector('#btn-1');
document.getElementById('btn-1');

// Will return an HTMLCollection (multiple HTML elements stored in an Array)
document.getElementsByClassName('my-btn');

// Will return a NodeList (very similar to HTMLCollection)
document.querySelectorAll('button');
document.querySelectorAll('.my-btn');
document.querySelectorAll('#btn-1');

I know we haven't discussed HTMLCollection, NodeList, etc. yet, but stick with me. Now that we have our button identified, let's do something cool with it.

Step 2: Register a "click" event on the button

C'mon Zach, you're teaching me ANOTHER new concept??

I know, this is a lot. But we are about to talk about something called "event handling", which is a big part of programming front-end applications. "Events" are not specific to front-end programming though; you will soon learn that events are a huge part of programming in general.

In front-end programming, an "event" is something that occurs as a RESULT of a user action. Here are some examples:

A user hovers their mouse over an HTML element (like a button)
A user scrolls down to read the rest of an article
A user clicks a button
A user starts typing into an <input> field

There are many more events that can occur, but if I had to pick the most common one based on my experience, it would be a "click" event.

But how do we work with these "events"?

So far, you know how we can identify a single HTML element within the HTML document by using the DOM. Once you have identified that element, you can assign it to a variable.

const myButton = document.querySelector('#btn-1');

Hint: within the Codepen editor for this HTML example, you can right-click and "Inspect Element" to get to the console still. I suggest doing so and following along here!

The variable myButton now represents an Element, which has properties, methods, and events attached to it. I suggest you take a look at each for a minute or two:

In other words, we have a really powerful JavaScript object that we can use to make our HTML document come to life!

There are two ways that we can register an "event listener" on this specific HTML element.

Here's the first:

const myButton = document.querySelector('#btn-1');

// eventObj is automatically passed as an argument to this callback function 
function respondToClick(eventObj) {
  const randomNum = Math.floor(Math.random() * 100);
  console.log('The random number is: ' + randomNum);
}

// Pass in a callback function for this click event
myButton.addEventListener('click', respondToClick);

And here's the second:

const myButton = document.querySelector('#btn-1');

// eventObj is automatically passed as an argument to this callback function 
function respondToClick(eventObj) {
  const randomNum = Math.floor(Math.random() * 100);
  console.log('The random number is: ' + randomNum);
}

// Pass in a callback function for this click event
myButton.onclick = respondToClick;

Go ahead, paste these code snippets (one at a time of course) in the JavaScript section of this Codepen.

There is nothing remarkable about what we are doing here. We select an element from our HTML document using the DOM (document.querySelector()), write a function that prints a random number to the console, and then instruct our HTML element, myButton to respond to click events by running that function, respondToClick().

You might ask, how did I know to pass in click to the addEventListener() method, or how did I know to use onclick in the second version?

The easiest way to learn about events is by reading through the Events Reference page on MDN. I suggest clicking around (no pun intended) in that documentation for a few minutes to get a sense of what events are available to you in the browser as a developer.

Step 3: Add an element to the HTML Document Programmatically

We're almost there! We now just have to adapt our respondToClick function so that it will add a new p element to the DOM every time the button is clicked. We don't need to get fancy; let's just add a p tag with the same text that we are currently printing to the Console.

In order to do this, we'll need to use some DOM methods that help us modify the existing HTML document and its elements. Let's take a look at the reference for the document object. You can find it here.

Remember, document is the "global" object and represents the "entry point into the web page's content". Since our HTML document is rather small in this case, we can use this global object to insert p tags at the end of the content. Here are the methods we'll need to make this happen:

Document.createElement() - Allows us to create a new p HTML element (i.e. it will initialize something like <p></p>)
Document.createTextNode() - Allows us to create the text which we will insert into our new element
Node.appendChild() - Allows us to add our new "text node" to our new paragraph element (<p></p>)

Let's see how it works:

const myButton = document.querySelector('#btn-1');

// eventObj is automatically passed as an argument to this callback function 
function respondToClick(eventObj) {
  // Generate some random text
  const randomNum = Math.floor(Math.random() * 100);
  const pContent = 'The random number is: ' + randomNum;

  // Initialize a `p` tag - <p></p>
  const newElement = document.createElement('p');

  // Initialize some text content
  const newTextNode = document.createTextNode(pContent);

  // Insert the text content between <p> and </p> from the element we initialized earlier
  newElement.appendChild(newTextNode);

  // Insert the new `p` element at the end of the HTML <body></body> tag
  document.body.appendChild(newElement);
}

// Pass in a callback function for this click event
myButton.addEventListener('click', respondToClick);

And now, when we click the button, it inserts a new element to the HTML document!

You can see the working Pen here.

Navigating an HTML Document

Let's return to the HTML document we looked at previously.

<html>
  <head>
    <title>Site Title</title>
  </head>
  <body>
    <div class="main-body">
      <h1>Article Heading</h1>
      <p>Some text in the article</p>
      <p>Some more text</p>
      <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
      </ul>
    </div>
    <div class="footer">
      <p>Site created by Zach</p>
    </div>
  </body>
</html>

The example we just walked through was wide, but not deep. While we covered how to select, insert, and respond to events, we did not talk about techniques for parsing through an HTML document. For example, how would we...

Select and modify the second item of the list?
Add a fourth element to the list?
Add another p element after the second p element?

To accomplish this, we need to remember that every HTML document is just a "tree".

Furthermore, if we connect the dots a little bit, we can recognize that "sibling" nodes in an HTML document might make sense to store in an Array. Let's see that in action.

Selecting "children" elements

Our first task is to modify the second element of our list. To do this, I'm thinking we do the following:

Find a way to identify the list within the HTML document
Find a way to select an individual element from the list

Based on what we have talked about, I would not expect you to know how to do this yet. The purpose here is to get you into the "DOM mindset" and expose you to some common ways that you might use the DOM API in your projects.

So let's start by identifying that list within our HTML document. There are MANY ways that we can do so, but I'll start with the most logical one.

Since we only have one ul tag in the entire document, we can use a basic query selector.

const list = document.querySelector('ul');

As with any tutorial, my goal is to make you self sufficient, so the first question we should be asking here is, "what type of node is this?". With the DOM, it is often tough to know what type of node you are dealing with whether that be a text node, attribute node, or element node. If at any point you don't know what you're working with, here's how you figure it out.

const list = document.querySelector('ul');

console.log(list.nodeType); // 1

You can use the nodeType property that exists on ALL nodes. But what does 1 represent? Here's a table that tells you. In this case, we are working with an Element. From this information, we can visit the Element documentation and take a look at some of the properties and methods available to us.

If you visit the Element docs, you'll see that one of the available properties on an Element node is children. Since the li tags are "children" to the ul "container" tag, this seems like a property that might help us.

As you can see, it's kind of like an Array, but not quite. Go ahead and take a look at the HTMLCollection documentation. While here, you'll notice that there is a method called item(), which we can pass an "array index" to get a certain element from the HTMLCollection "Array".

const list = document.querySelector('ul');

// Remember, arrays are "zero-indexed"
const secondListItem = list.children.item(1);

Now that we have identified our element, all we have to do is modify it. In this case, secondListItem is an Element type, which has an editable property called textContent. Let's use this to change the value of the second element in our list.

const list = document.querySelector('ul');

// Remember, arrays are "zero-indexed"
const secondListItem = list.children.item(1);

secondListItem.textContent = 'a new value';

Awesome! We have modified the second element of HTML list.

Now here's something important to remember–the change you just made is temporary. If you are rendering static HTML code in the browser, JavaScript cannot directly edit it. Once you refresh the page, your second list item will return to the original value. Knowing this, you might ask, "if the changes are temporary, what's the point?". This is a tough question to answer at our current level of understanding, but a very good question. The answer will reveal itself to you as we get deeper into this series, but here's my short answer–the user needs to see changes in real-time. If your user has to wait 2 seconds or even refresh the page every time he/she takes an action, the user experience will be poor.

Creating elements

Our next goal is to add a fourth element to our list. Remember, our ul list is an Element, which has properties and methods that we can use. But if you read through its documentation, you probably won't find anything that helps us here...

And this brings up a very important (but kind of confusing) concept–inheritance. Remember how I talked about how everything in the "DOM Tree" is a "node"? Well, I meant it. It doesn't matter whether we are working with an Element, Attribute, or Text. They all "inherit" from the Node type, which means they all can use the properties and methods on the Node type along with their own properties and methods. This is an OOP (object-oriented programming) concept and can be quite confusing. We will learn more about this later in the series.

Anyways, since there is nothing useful to us on the Element type, let's take at the documentation for the Node type.

It has a method called appendChild() that will help us add that fourth list item!

Notice that the parameter it specifies, aChild, is a node. In our case, we probably want to create another li element, which we can do with the document.createElement() method.

const list = document.querySelector('ul');

// Creates <li></li>
const newListItem = document.createElement('li');

// Creates <li>Fourth list item</li>
newListItem.textContent = 'Fourth list item';

// Adds the new element to the existing list
list.appendChild(newListItem);

If you're really paying attention to this article closely, you might remember that when we created a new element earlier, we did something like this to add the text to the element.

const newListItem = document.createElement('li');
const textNode = document.createTextNode('Fourth list item');
newListItem.appendChild(textNode);

This is just another way to solve the problem. You'll learn that with the DOM and programming in general, there are ALWAYS several ways to achieve the same thing.

Adding elements between other elements

Our final objective is to add the following p element after the first p element.

<p>Some inserted text</p>

So... What element do we need to select? The Node type has a method called insertBefore() which we can use to insert our p element before the second p element (hence, after the first p element).

Here's a problematic way to identify that second p item.

const pItem = document.querySelector('p');

Why is this problematic? If you try it out, you'll realize that this selects the first p element and ONLY the first p element. Let's try this:

const pItems = document.querySelectorAll('p');

Better, but not great. This will give us all the p elements in the entire document, including the one in the <div class="footer"></div> element. Let's get a little bit more specific with our query.

// First, select the div with a class of "main-body"
const mainBody = document.querySelector('.main-body');

const pItems = mainBody.querySelectorAll('p');

This is much better. The pItems variable will be a NodeList, which is similar to HTMLCollection which we looked at earlier. We can use the item() method on it to select the second p element.

// First, select the div with a class of "main-body"
const mainBody = document.querySelector('.main-body');

const pItems = mainBody.querySelectorAll('p');

const secondParagraphElem = pItems.item(1);

Now, we just need to insert a new p element after this selected element.

// Step 1: Find the element we want to insert something after
const mainBody = document.querySelector('.main-body');
const pItems = mainBody.querySelectorAll('p');
const secondParagraphElem = pItems.item(1);

// Step 2: Create the element we want to insert
const newElem = document.createElement('p');
newElem.textContent = 'some inserted text';

// Step 3: Insert the element
mainBody.insertBefore(newElem, secondParagraphElem);

You'll notice that the insertBefore() method has two parameters. If you read the documentation, you'll learn that we need to call this method on the "parent element" that we want to insert the new element in. In this case, the "parent element" is mainBody (look at the DOM Tree diagram earlier in this post). The first parameter is the element you want to insert, which is newElem. And the second parameter is the "reference element", which represents the element you want to insert your new element before. In this case, that is secondParagraphElem.

If you want to see all of this code in action, check out this Pen I made!

See the Pen Another Basic HTML Doc by Zach
(@zg_dev) on CodePen.

The DOM is Confusing

If you're still reading, good. You've got the type of mind for this challenging skill we call programming. That said, you're probably still confused with this "DOM" concept, and I don't blame you. There is a LOT going on with the DOM and I could easily create an entire programming course on it alone. It would take weeks to cover all of the DOM interfaces, methods, properties, and events.

For that reason, we're stopping here. My goal here was to introduce you to the DOM, so I hope I did that effectively.

As we move forward through this full-stack series, you probably won't be working with the DOM a ton. The reason? Because front-end frameworks like Angular, React, and Vue abstract the DOM away and provide you with easier ways to manipulate it.

That does NOT mean learning the DOM is unimportant. Quite the contrary! Knowing how the DOM works and being able to use it will give you an edge on other web developers who never spent the time to learn it.

So if you don't feel confident with the DOM, that's okay. Keep moving forward. If you can explain the basic concept of the DOM and do super basic things with it, you are in a great spot!

A Recap of HTML

Remember, if we are building a house, HTML is the structure, CSS is the styling, and JavaScript is the functionality. To me, HTML can be expressed in two ways:

Static HTML
Dynamic HTML

Static HTML is what we learned in the first part of the lesson. When you write static HTML, you are basically telling your browser, "Here's the document I want you to display, and it's never going to change". Static HTML is all over the web. Most blogs and writing on the web are just static HTML documents.

Dynamic HTML is the second part of this lesson. By "modeling" an HTML document, we can plug into it with JavaScript (via the DOM) and make some crazy things happen! This is required for web apps like YouTube, Facebook, and others. While we could use the DOM alone to bring this functionality to our apps, there are easier ways to do this (i.e. front-end frameworks like Angular, React, Vue, etc.).

Writing "Semantic" HTML (the new parts)

The last thing I want to cover in this crash course on HTML is something that is not required for you at this stage in your journey, but helpful to know about.

Let's go back to that house analogy. If HTML is the "structure" of the house, what does that include? I'm no home-builder, but to build a house, you need more than just 2x4s. You need multiple types of wood, and additionally, other materials for certain sections of the house you are building.

HTML is no different. While we could build our HTML documents with a bunch of div elements, that is not "semantic". In other words, we are not conveying what the elements are meant to contain effectively.

There are many HTML tags that I did not show you during the first part of this post to avoid over-complicating the discussion. But from a semantic standpoint, it is "best practice" to use HTML elements that convey what the elements represent in your document.

Most of the elements I am about to show you were introduced in the HTML5 standard, which is the newest standard of HTML. Consider the following HTML document:

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8" />

    <title>My Blog</title>
    <meta name="description" content="An example blog site" />
    <meta name="author" content="Zach Gollwitzer" />

    <link rel="stylesheet" href="css/styles.css" />
  </head>

  <body>
    <div class="navbar">
      <ul>
        <li>Home</li>
        <li>About</li>
        <li>Blog</li>
      </ul>
    </div>
    <div class="sidebar">
      <div>
        Some sidebar offering here
      </div>
    </div>
    <div class="main-content">
      <div class="article-1">
        <p>Some text for the blog post</p>
      </div>
      <div class="article-2">
        <p>Some text for the blog post</p>
      </div>
      <div class="article-3">
        <p>Some text for the blog post</p>
      </div>
    </div>
    <div class="footer">
      <p>Some footer text</p>
      <p>Copyright, 2021</p>
    </div>
    <script src="js/scripts.js"></script>
  </body>
</html>

If we added some CSS (styling) to this HTML document, we'd have a blog page with a navigation bar at the top, a sidebar on the right, a list of blog posts in the main area, and a footer at the bottom. Here's my golf blog as an example of the layout I'm describing.

The HTML document above is fine. It works perfectly. But as you can see, we're using a lot of div elements despite the fact that each section of this document has a different purpose. When I say "semantic HTML", I'm referring to this:

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8" />

    <title>My Blog</title>
    <meta name="description" content="An example blog site" />
    <meta name="author" content="Zach Gollwitzer" />

    <link rel="stylesheet" href="css/styles.css" />
  </head>

  <body>
    <nav class="navbar">
      <ul>
        <li>Home</li>
        <li>About</li>
        <li>Blog</li>
      </ul>
    </nav>
    <section class="sidebar">
      <div>
        Some sidebar offering here
      </div>
    </section>
    <main class="main-content">
      <article class="article-1">
        <p>Some text for the blog post</p>
      </article>
      <article class="article-2">
        <p>Some text for the blog post</p>
      </article>
      <article class="article-3">
        <p>Some text for the blog post</p>
      </article>
    </main>
    <footer class="footer">
      <p>Some footer text</p>
      <p>Copyright, 2021</p>
    </footer>
    <script src="js/scripts.js"></script>
  </body>
</html>

Can you see the difference? In the second version, I'm using the following HTML tags that we haven't covered before:

<nav></nav> - here is the documentation
<section></section> - here is the documentation
<main></main> - here is the documentation
<article></article> - here is the documentation
<footer></footer> - here is the documentation

Furthermore, tags like strong and em that I introduced to you at the beginning of the post work fine, but in the new HTML5 standard, are not technically "recommended". The idea with the newest HTML standard is that each HTML tag should represent intent, not style. For example, the section tag indicates that everything within it is part of an independent section of the webpage. You shouldn't use this tag for any other purpose.

Now if we zoom out a bit, these details that I'm introducing should not be at the top of your priority list. These are details that you'll focus on down the road when you are trying to master your craft.

I bring them up here so that you are not surprised when you see them in another developer's code.

Remember, the documentation is your friend! If you stumble upon something you haven't seen before, just look it up! If you don't know what a certain tag should be used for, read the documentation page for it!

Finally, your HTML Challenge

From this point forward, our lesson challenges are going to be a lot more fun than the previous lessons. Rather than writing plain JavaScript code, all challenges from here forward will combine HTML, CSS, and JavaScript. Not only that, but you'll now have something to share with the world!

When you complete these challenges, be sure to share them on Twitter with the hashtag, #100DaysOfCode.

And don't forget, we call this a "challenge" because it is very challenging. You should not be able to complete this without some additional research!

Challenge Instructions

Fork this Codepen to your account (click the "Fork" button in the bottom right corner of the browser window)
Create this:

User Stories

A "user story" is something you'll use often in programming. It defines how a user should interact with your application and is commonly used during the requirements gathering phase of application development. Below are the user stories for this challenge.

A user should be able to click buttons on the right side of the screen to generate a random meme, joke, quote, or riddle
Only one piece of content should show at a time. For example, if the user clicks "Show a meme" and there is a quote showing already, the application should remove the quote and show a random meme.
Content should be displayed under the appropriate heading (i.e. a joke should not show up under the memes heading)
When showing a random riddle, the answer should never be revealed without the user explicitly clicking the "Reveal Riddle Answer" button on the right.
If a user clicks "Reveal Riddle Answer" and there is no riddle, an alert should let them know they need to generate a riddle first
If a user clicks "Reveal Riddle Answer" and the answer is already revealed, an alert should let them know that the answer is already revealed

Some Hints

As I said, this programming challenge is tough. You'll need to look things up on Google. Here are some hints to help:

The div element with a unique id or class name can be a great way to establish a "container" for future content (even before that content exists)
You might need to use the HTMLElement.hidden property for the riddles
There is no "perfect" solution. Solve it how you think makes sense
The starter has some code already written for you. Read it and see what it is doing! You should be able to solve this without adding any additional functions.

The Solution

If you want to see how I implemented it, you can either...

Lesson 6 - JavaScript Built-In Functions and Objects #fullstackroadmap

Zach Gollwitzer — Tue, 19 Jan 2021 23:45:25 +0000

See this lesson on YouTube here

Please tag me on Twitter @zg_dev and share this series with #100DaysOfCode!

Useful series links

Series Table of Contents
Github Repository - where you'll find all the code we write in this series
YouTube Playlist
Series Overview
100 Days of Code Challenge - I highly recommend you take this on while reading this series!
My CodeWars Profile - Follow me and I'll follow you back. This is where we will do our coding challenges throughout the series!
My Twitter Profile - Where you can stay updated

The goal for this lesson

In the prior lessons, we covered many of the basic parts of JavaScript, and with our 25 code challenges, we even explored a few of the built-in JavaScript methods.

In this lesson, I'm going to not only teach you how to read JavaScript MDN documentation but will also show you the most common built-in objects and functions that you might see as a developer.

At the end, I have curated 10 code challenges that will enforce some of the concepts explained within the post.

Here are the topics we will cover.

How to read documentation
Quick Start to Callback Functions
Primitives vs. Objects (I've been lying to you in the prior lessons)
Dates
Regular Expressions
Common String Methods
Common Array Methods
Math Library
Error types
NaN, null, undefined

This will be the last post in this series where we will be covering the basics of JavaScript. If at any point you would like to further your education past what we have talked about, I highly recommend You Don't Know JavaScript.

There are additional JavaScript concepts such as async/await, Promises, and Classes, but we will probably not be covering these until we have a foundation in the basics of HTML, CSS, and JavaScript. I do plan on covering them, but not YET.

How to read documentation

We will start with a very important skill that you must have as a programmer. You may have heard the saying, RTFM, which stands for "Read the f******** manual". This is common in software engineering because most problems can be solved by reading documentation. And when I say "documentation", I'm just referring to the instructional guides written to explain how to use a certain framework, library, or programming language.

Since we have only been exposed to JavaScript thus far, the most common source of documentation is MDN (Mozilla Developer Network). Here is the homepage for JavaScript documentation.

The documentation for each language/framework/library will be different, but high-quality documentation usually has the following resources available to the developer.

A QuickStart or Overview guide
An extended tutorial
API Reference (often just called "Reference" or "API")

Whenever I start learning a new framework, the QuickStart and tutorial(s) is a great way to learn the basics and then I lean on the API reference (along with unofficial tutorials) as needed while building my project.

Here is the API Reference for the JavaScript programming language. Since JavaScript is so widespread, there are several websites that provide an API reference, but usually, frameworks and libraries will only have one "official" set of documentation.

As you scroll through JavaScript's reference, you may be confused, and that's okay. Remember, the reference documents everything about JavaScript. You don't need to read it like a book. Use it as a reference (hence the name).

Let's say that you were solving one of the practice problems from the last lesson and you wanted to know more about the push() method that we use on arrays. Here's how you get there.

Go to the JavaScript reference
Since push() is an array method, find the Array data type and click on it.
Scroll down to "Instance methods" and click the push method.
Read the page that explains how this method works

Step #4 is much easier said than done. Reading documentation is hard for beginners, so let's walk through how to do it.

Overview Section

Let's look at an Array method called pop(). It is one of the easiest methods to learn. Here is the documentation that the screenshots are from.

The documentation usually starts off with an overview of the function. This oftentimes is the only information that you'll need. From this overview, we can see that the pop() method removes the last element of an array (i.e. modifies the original array) and returns the element that was removed.

But maybe the overview section doesn't give you all the information you need. Scroll down to the syntax section.

Syntax

This section is probably the most direct way of documenting a function. This explains to you the inputs and outputs that the functions receives and returns respectively. Once you get good at reading documentation and have a familiarity with programming in general, this section is usually all that you will need to start using a given function.

Let's continue with the array.pop() method.

By looking at this, we can infer that the pop() method does not take any parameters and returns the value of the array that was removed.

Unlike the overview section, this also notes that if you use the pop method on an empty array, it will return undefined. You can go ahead and try this out in your dev tools console.

const emptyArr = [];

const result = emptyArr.pop();

console.log(result); // undefined

Let's look at another method that is a bit more complex. Here is the array.join() method's "Syntax" section (link to page).

Unlike the array.pop() method, this one has a single, optional parameter. We can tell that the parameter is optional because [separator] has [] surrounding it. Additionally, in the parameters section, it denotes that this is optional.

Looking at the return value, you can see that this method returns a String value with all the elements of the given array joined together. It also notes that if you try to use this method on an empty array, the return value will be an empty string.

Here's how you would translate this documentation into code.

// First, let's test it without any parameter (since params are optional)
let arr = ['hello', 'world'];

arr.join(); // "hello,world"

// Now, let's add a parameter in there
arr.join(" ") // "hello world"

// And finally, let's try it on an empty array which according to
// the documentation, should return an empty string
let empty = [];

empty.join(); // ""

Here's the syntax section of the push() method.

Let's start with this part:

arr.push([element1[, ...[, elementN]]])

What on earth is going on here?! What this is trying to explain is the function's parameters. First, the brackets [] indicate that arguments are optional (not to be confused with the array bracket syntax we learned earlier). In this case, if you don't pass an argument, your array will remain unchanged. Second, you'll notice the ... which tell us that this method takes an infinite number of arguments.

As we look at the return value, we can see that it returns the length of the new array after the push operation. Take a look at the code below and guess what the result variable equals.

const arr = [1, 2, 3, 4, 5];

const result = arr.push(6, 7, 8, 9);

console.log(result);
console.log(arr)

No, result does not equal [1, 2, 3, 4, 5, 6, 7, 8, 9] as you might expect. The result variable equals 9 (the length of the new array) and arr equals the new array.

You might ask–well we assigned this with the const keyword, so how can we re-assign it?! I don't want to get too far off topic, so go read this if you're curious.

Okay, let's look at one more example.

First, you'll see that this function has two parameters. The valueToFind parameter is required while the fromIndex is optional (you'll notice at the bottom of its description, it says that it defaults to 0).

The return value is a boolean, which indicates whether valueToFind exists in the arr that we are searching in.

Using just this information above, we can try out a few different ways of using this method.

const myArray = ['orange', 'blue', 'green', 'red'];

myArray.includes('orange', 1); // false, since we start searching at index 1 and orange is index 0
myArray.includes('orange'); // true
myArray.includes(); // false, need a parameter

Examples, Specifications, Browser Compatibility

The remaining sections you will see in the documentation for a specific method like the ones above are useful, but not always required.

The examples section is self-explanatory. The specifications section will show you where in the ECMAScript standards you will find this method (remember from lesson 2?).

And finally, the browser compatibility will show you which browsers this function will work correctly in. If you look at the arr.includes() method, it won't work in Internet Explorer, so if you are building an application that needs to work in IE (say in a large corporation), you should NOT use the arr.includes() method. Starting out, I wouldn't focus on browser compatibility though–learning to code is hard enough!

Callback Functions: Confusing, but necessary

Before we start exploring the different built-in JavaScript functions, you need at least a general understanding of callback functions.

No, these are not a different type of writing a function. They represent a different way of using a function.

Here is some really confusing code that I hope you will have a basic understanding of 5 minutes from now.

function myCallback(someNumber) {
  return someNumber * 2;
}

function mainFunction(randomNumber, shouldCall, callback) {

  let result = randomNumber;

  if (shouldCall) {
    result = callback(randomNumber);
  }

  return result;
}

mainFunction(20, true, myCallback);

This also could have been simplified to the following (does the same exact thing):

function mainFunction(randomNumber, shouldCall, callback) {
  let result = randomNumber;

  if (shouldCall) {
    result = callback(randomNumber);
  }

  return result;
}

mainFunction(20, true, (num) => num * 2);

Unfortunately for the beginner, the second block of code is what you'll see most often because it is more succinct.

Let's walk through the first code block with some comments.

function myCallback(someNumber) {
  return someNumber * 2;
}

function mainFunction(randomNumber, shouldCall, callback) {

  let result = randomNumber; // in this example result === 20

  // In this example, shouldCall is `true`, so we do reach the callback
  if (shouldCall) {

    // In this example, `callback` represents `myCallback` from above
    result = callback(randomNumber);
  }

  // Since `result` was re-assigned by the callback function, returns 40
  return result;
}

mainFunction(20, true, myCallback); // returns 40

We could have gotten the same result by just calling myCallback.

myCallback(20); // returns 40

There is nothing special about myCallback. It is just a function, but instead of calling this function separately, we can ask mainFunction to do it for us! Zooming in on result = callback(randomNumber), you can see that we are taking the value of randomNumber, which is 20 in this case and passing it in as an argument to callback. What is callback? It's the function we pass in as an argument.

So let's take the function we defined just a second ago, myCallback, and pass it into mainFunction as an argument!

mainFunction(20, true, myCallback);

And of course, you don't have to define myCallback as a separate function. You could do it as an anonymous function OR an arrow function. All of these produce the same result.

function myCallback(someNumber) {
  return someNumber * 2;
}

function mainFunction(randomNumber, shouldCall, callback) {
  let result = randomNumber;
  if (shouldCall) {
    result = callback(randomNumber);
  }
  return result;
}

/**
 * Different methods of using callbacks below 👇
 */

// Using pre-defined function as a callback
mainFunction(20, true, myCallback);

// Using anonymous function as a callback
mainFunction(20, true, function (num) {
  return num * 2;
});

// Using an arrow function as a callback
mainFunction(20, true, (num) => {
  return num * 2;
});

// Using an arrow function with abbreviated notation
mainFunction(20, true, (num) => num * 2);

// Using an arrow function with even MORE abbreviation
mainFunction(20, true, num => num * 2);

So... What's the point of a callback?

There are two advantages:

Reusability of functions
Asynchronous programming

Callbacks enable reusability

Let's look at a built-in JavaScript function called arr.map(). You can find the documentation here, and I encourage you to try and figure it out before we start talking about it.

const myArray = [2, 4, 6, 8];

// itemFromArray represents a single value from the array above such as `2`
// Hint: the arr.map() function is similar to looping through an array like we did in the challenge problems from lesson 5
function myCustomMapOperation(itemFromArray) {
  return itemFromArray * 2;
}

const newArray = myArray.map(myCustomMapOperation);

console.log(newArray); // [4, 8, 12, 16]

In this example, I am passing myCustomMapOperation as my "callback" function into the built-in arr.map() JavaScript function. This custom callback function that I wrote will double the values in an array.

But what if my array was filled with string values and I wanted to make a new array that only contains the first letter of each string? Don't I have to go search for another built-in JavaScript function to do this?

NO!!

Callback functions make things reusable. Since we as the developers are responsible for defining what that callback function will do, we can reuse the arr.map() function for a variety of purposes. Here's how I would implement the idea I just presented.

const myArray = ["Hello", "world", "my", "name", "is", "Zach"];

function myCustomMapOperation(itemFromArray) {
  // You can grab characters from a string value just like you can 
  return itemFromArray[0];
}

const newArray = myArray.map(myCustomMapOperation);

console.log(newArray); // ["H", "w", "m", "n", "i", "Z"];

Asynchronous Programming: Callbacks, Promises, and async-await

Yep, I said it. "Asynchronous" is a word that you're going to learn to love and hate at the same time.

In programming, not all operations happen near-instantaneous like the code we have been writing does. For example, what happens when a web app needs to fetch some data from a database and the internet is slow that day? This operation is going to take a couple of seconds depending on the latency of your internet.

You might say–well then, let's just wait until it is done before executing any more code?

Wrong answer, but a good thought. We cannot just wait for it to happen because in many apps, there are hundreds of these operations happening at once and if we waited for each of them, our webpage would take several minutes to load. Nobody wants that.

We will not be diving into any code in this lesson, but there will be a future lesson solely devoted to covering asynchronous programming because it is a large topic and can get rather confusing.

Primitives vs. Objects

If you've been following along with this lesson series, you might have heard me say "everything in JavaScript is an object". Until now, I haven't explained myself.

But since we will be covering a lot of these built-in JavaScript functions and objects in this lesson, you need to have a basic understanding of primitives vs. objects.

Here is what I mean:

const string1 = new String('Hello, world!');
const string2 = 'Hello, world!';

console.log(string1 === string2); // false
console.log(string1 == string2); // true

Remember the === and == from lesson 3? Triple equals compares both type and value. Double equals just compares value.

The value of these "strings" are equal, but the type is not (one is an object and one is a string).

You're probably thinking–"so you're telling me that string1 is not a string???!".

That's exactly what I'm telling you. And furthermore, some might argue that string2 is not a string because it has "methods" on it. For example:

// This code is valid
'am I a string?'.toUpperCase();

How on earth can a "string" also have a method like this? We will not answer this question in a huge amount of detail, but I want to at least address it.

What is a primitive value?

Think of a "primitive" as the simplest form of something. If a coding language had a "periodic table of elements", it would be filled with "primitives".

In JavaScript, there are six primitives.

string
number
bigint
boolean
undefined
symbol

We haven't talked about all of these, and that's okay.

A "primitive" data type does not have any "methods" attached to it, but behind the scenes, JavaScript wraps primitive values with their corresponding Object value. This is why 'some string'.toUpperCase() is valid JavaScript code.

So what do I do about this?

I created this section of the lesson series because this was a question that I had when I learned JavaScript.

I recommend that you take this as "good to be aware of" information, but do not go any further than that yet. Once you are more experienced, you can go back and learn the underlying details of the JavaScript language. If you are a naturally curious person like me, I suggest reading the following short resources and then return to the lesson.

Let's return to the code at the beginning of this section with some comments to wrap up our short discussion on primitives.

// DO NOT define your strings like this
const string1 = new String('Hello, world!');

// DO define your strings like this
// We call this a "string literal" 
const string2 = 'Hello, world!';

console.log(string1 === string2); // false
console.log(string1 == string2); // true

// Here, we are converting string1 from an Object to a primitive and then comparing
console.log(string1.valueOf() === string2); // true

// JavaScript will wrap string2 in a String object prior to executing this method
// You don't need to do anything further than this
console.log(string2.toUpperCase());

What is this "new" keyword?

Another reason I wanted to visit this section is because as we move into topics like JavaScript Dates (next section), you will start to see a JavaScript keyword, new.

Technically, new is an operator, but we didn't cover it in our lesson about operators. Here is what the new operator does:

Creates a blank JavaScript object
Links this new object to a "parent" object

There are actually some additional steps, but not relevant to us yet.

In plain English, the new operator creates an "instance" of an existing object. We will revisit this concept later in the series. For now, whenever you see the new operator, just think of it like this:

We have some existing, pre-defined object such as Date
We want a "copy" of that object that we can store in a variable
So... We use the Date as a "template" to create that "copy"

Speaking of dates...

Dates

Official Documentation.

I'm going to let you in on a secret–most developers don't have a great understanding of JavaScript dates. Don't worry if dates confuse you initially. I have an entire post explaining them if you are interested in diving much deeper.

Anyways, here is the quick-start. To create a new date object (remember, new just creates a "copy" of the Date "template"):

const now = new Date();

console.log(now); // Thu Jan 14 2021 10:51:27 GMT-0500 (Eastern Standard Time)

The value stored within this date object represents the number of milliseconds that have elapsed since midnight on January 1, 1970, UTC.

You can see that value by using the valueOf() method.

const now = new Date();
const millisecondsValue = now.valueOf();

console.log(now); // Thu Jan 14 2021 10:53:26 GMT-0500 (Eastern Standard Time)
console.log(millisecondsValue); // 1610639606819

Why January 1st, 1970? What is UTC? Again, read my detailed post if you're curious.

If you want to define a specific date, you can pass a variety of arguments into the Date object. Again, if you want the nitty gritty details, read my post on JS Dates.

// EXAMPLE #1
// Inputs as arguments
// Date(year, month, day, hour, minute, second, millisecond)
// Note: the month is 0-indexed (I have no clue why...)
new Date(2020, 11, 2, 7, 10);
// EXAMPLE #2
// Inputs as various strings
// This works with pretty much anything you can think of
new Date('Jan 20 2020');
new Date('January 20 2020');
new Date('Jan-20-2020');
new Date('Jan 20 2020 02:20:10')
// EXAMPLE #3
// Inputs as numbers (milliseconds)
new Date(102031203)
// EXAMPLE #4
// Inputs as ISO 8601 (we are about to talk about this)
new Date('2020-01-20T00:00Z')
// EXAMPLE #5
// Inputs with timezone specifications
new Date('Jan 20 2020 02:20:10 -10:00') // SPECIAL CASE
new Date('Jan 20 2020 02:20:10 -1000') // SPECIAL CASE
new Date('Jan 20 2020 02:20:10 (EDT)') // SPECIAL CASE
// EXAMPLE #6
// The current moment, specified in the user's local timezone
new Date(Date.now()) // SPECIAL CASE

Some useful Date methods

toString()
toISOString()
getDate()
getMonth()
getFullYear()

These are the common ones. For more, visit the documentation.

Here is a quick example how you can use these methods.

const now = new Date();

// Prints the local date and time
now.toString(); // Thu Jan 14 2021 10:53:26 GMT-0500 (Eastern Standard Time)

// Prints date in ISO8601 format.  See - https://cdn-images-1.medium.com/max/2000/1*f1Ye0uCRt1ziCG18sl74CQ.png 
now.toISOString(); // 2021-01-14T15:53:26.819Z
now.getDate(); // Returns 14 because I'm writing this on Jan 14, 2021
now.getMonth(); // Returns 0 because the month method is zero-indexed (i.e. Jan = 0, Feb = 1)
now.getFullYear(); // Returns 2021

I think that is enough for now. You don't need to be an expert in JS dates, but definitely need to have some familiarity.

Regular Expressions

A "regular expression" can almost be considered a language on its own (not turing complete of course). The purpose of a regular expression is to find characters within a string based on a certain pattern that you define.

This is a loaded topic and confusing one, but you WILL use regular expressions as a developer. Below is a 10,000 foot summary of regular expressions. If you want more detail, please read my detailed post on them. At this point in your journey, getting deep into regular expressions is probably not the priority. The important thing right now is to know what they are, what they do, and how to read them–not how to write them.

Here is the documentation for regular expressions.

The best example that we can use to explain why regular expressions (often abbreviated as "regex" or "regexp") matter is validation of form data.

Let's say that you have a user register form for your app, and over the last several weeks, you've been getting a lot of invalid email addresses registering for your app. You of course don't want this. You want valid emails.

To avoid this, you can validate the user's input with a regex prior to registering them. Here is how you might do this.

const emailValidatorRegex = new RegExp('^.+@.+\..+$');

const userInput = 'invalidemail@g';

const isValid = emailValidatorRegex.test(userInput);

console.log(isValid); // false

^.+@.+\..+$ is considered the regular expression, and all of those symbols represent something very specific. This is by no means the best regex to use for validating emails (it actually overlooks a lot of scenarios), but it is a good place for us to start.

Before we explain this pattern, I want to introduce the absolute basics of regular expressions.

No matter what language you're working in, regular expressions follow the same structure.

Identifiers
Quantifiers

Identifiers

These help you identify characters within a string. They can be anything from a single character to a more advanced expression.

For example, to identify a string that has the letter g in it, you can do this:

const regex = new RegExp('g');

const string1 = 'my favorite food is steak';
const string2 = 'my favorite thing to do is code';

console.log(regex.test(string1)); // false
console.log(regex.test(string2)); // true

You could also check for an entire word.

const regex = new RegExp('favorite');

const string1 = 'my favorite food is steak';
const string2 = 'my favorite thing to do is code';

console.log(regex.test(string1)); // true
console.log(regex.test(string2)); // true

Regular expressions are case-sensitive, so the following expression won't match.

const regex = new RegExp('FavoritE');

const string1 = 'my favorite food is steak';
const string2 = 'my favorite thing to do is code';

console.log(regex.test(string1)); // false
console.log(regex.test(string2)); // false

Identifiers do not have to be letters, numbers, and words. There are "special" identifiers that can identify patterns. Here are a few common examples, but you can find a more exhaustive list in my detailed post on regular expressions.

[A-Z] - Match all uppercase letters
[a-z] - Match all lowercase letters
[0-9] - Match all numbers
[A-Za-z0-9] - Match all letters and numbers
. - Match any character (wildcard)
\d - Match all numbers (another way to write [0-9])
\s - Match any white space character
\w - Match all letters and numbers (another way to write [A-Za-z0-9])
^ - Indicates the start of a line
$ - Indicates the end of a line
(dog|cat) - Matches "dog" OR "cat"

Let's use [A-Za-z] as an example. This matches ALL letters (uppercase AND lowercase).

const regex = new RegExp('[A-Za-z]');

const string1 = 'my favorite food is steak 239042038124';
const string2 = 'my favorite thing to do is code 23094029340923';

console.log(regex.test(string1)); // true
console.log(regex.test(string2)); // true

Wait a second... If [A-Za-z] matches only letters, then why are the expressions above returning true? So far, we have been using the test() method, which will check if your regular expression matches ANY PART of a string. But what part did it match?? To find out, you can use the exec() method, which will return an array that tells you what was matched in your string.

const regex = new RegExp('[A-Za-z]');

const string1 = 'my favorite food is steak 239042038124';
const string2 = 'my favorite thing to do is code 23094029340923';

// Using the exec() method
console.log(regex.exec(string1)); // ["m", index: 0, input: "my favorite food is steak 239042038124", groups: undefined]
console.log(regex.exec(string2)); // ["m", index: 0, input: "my favorite thing to do is code 23094029340923", groups: undefined]

In the example above, the first element of the array is the substring that was matched. The second element tells you at what index of the string it was matched at. In this case, we matched the first letter of each string, which has a 0 index. The third element is the original string, and the fourth element shows the groups that were matched (but this is an advanced topic we will not be covering).

So... Why did we only match the first letter of each string? Doesn't [A-Za-z] match ALL letters?

Queue quantifiers.

Quantifiers

Here are the quantifiers.

* - Matches 0 or more of the preceding character
+ - Matches 1 or more of the preceding character
? - Matches 0 or 1 of the preceding character
{1} - Matches exactly 1 of the preceding character
{1,} - Matches 1 or more of the preceding character (identical to +)
{2,6} - Matches between 2 and 6 of the preceding character

And this is how we can fix our code from above to match ALL of the letters. By adding * at the end, we are saying, "match 1 or more letters".

const regex = new RegExp('[A-Za-z]+');

const string1 = 'my favorite food is steak 239042038124';
const string2 = 'my favorite thing to do is code 23094029340923';

// Using the exec() method
console.log(regex.exec(string1)); // ["my", index: 0, input: "my favorite food is steak 239042038124", groups: undefined]
console.log(regex.exec(string2)); // ["my", index: 0, input: "my favorite thing to do is code 23094029340923", groups: undefined]

You'll notice that the first element of both arrays equals my, which is still not what we are trying to match! The reason–we did not match the spaces between the words!

All you have to do is add a space in your character group (the brackets).

// WE CHANGED THIS LINE - see the space at the end??
const regex = new RegExp('[A-Za-z ]+');

const string1 = 'my favorite food is steak 239042038124';
const string2 = 'my favorite thing to do is code 23094029340923';

// Using the exec() method
console.log(regex.exec(string1)); // ["my favorite food is steak ", index: 0, input: "my favorite food is steak 239042038124", groups: undefined]
console.log(regex.exec(string2)); // ["my favorite thing to do is code ", index: 0, input: "my favorite thing to do is code 23094029340923", groups: undefined]

Now, our exec() method returns all of the words.

And finally, if we wanted to match the entire string, we could of course just add 0-9 into our character group, but I'm going to do it in a slightly inefficient way to demonstrate something.

// WE CHANGED THIS LINE - see the space at the end??
const regex = new RegExp('[A-Za-z ]+[0-9]+');

const string1 = 'my favorite food is steak 239042038124';
const string2 = 'my favorite thing to do is code 23094029340923';

// Using the exec() method
console.log(regex.exec(string1)); // ["my favorite food is steak 239042038124", index: 0, input: "my favorite food is steak 239042038124", groups: undefined]
console.log(regex.exec(string2)); // ["my favorite thing to do is code 23094029340923", index: 0, input: "my favorite thing to do is code 23094029340923", groups: undefined]

In this code, we want to match any letter or space (identifier: [A-Za-z ]) 1 or more times (quantifier: +) and then match 1 or more numbers ([0-9]+). If we reversed the strings, our expression would no longer work.

const regex = new RegExp('[A-Za-z ]+[0-9]+');

const string1 = '239042038124 my favorite food is steak';
const string2 = '23094029340923 my favorite thing to do is code';

// Using the exec() method
console.log(regex.exec(string1)); // null
console.log(regex.exec(string2)); // null

Our exec() function returns null because our regex pattern no longer matches the strings!

Another way to write a regular expression

So far, we have written them like this:

const regex = new RegExp('[A-Za-z ]+[0-9]+');

You can also write them like this:

const regex = /[A-Za-z ]+[0-9]+/;

From my experience, most developers tend to use the second version.

At this point, we have covered the bare basics of JavaScript regular expressions and for the sake of your sanity and my own, we will stop here. You can learn more about regular expressions in the future, but hopefully, this brief overview gets you to a place where you can recognize what they do and how to read them.

Common String Methods

Remember from our discussion above, a String is considered an "object" in JavaScript, and thus, has built-in "methods" (just another word for "functions"). I do not intend to cover all of the String methods (you can find them here) nor do I intend to explain any one of these in extreme detail. My intention is to show you some of the common methods and the basics of how they work so when it comes time to use them, you will already have some familiarity.

Here are the string methods that I find myself using most.

replaceAll()
toUpperCase()
substring()
trim()
match()

replaceAll

Official Docs

This method comes in handy when you want to replace multiple occurrences of a value in a string.

const myString = 'My Dog jumped on the bed.  My dog is a bad Dog.';

// Remember, a string primitive like `myString` is immutable, so we are
// not editing it directly.  We are assigning the result to a new variable
const newString = myString.replaceAll('Dog', 'Cat');

console.log(newString); // My Cat jumped on the bed.  My dog is a bad Cat.

Notice anything wrong here? We only replaced the uppercase version of Dog! This is where regular expressions come in handy. The replaceAll() method accepts either a string OR a regular expression for its first argument.

const myString = 'My Dog jumped on the bed.  My dog is a bad Dog.';

const newString = myString.replaceAll(/[Dd]{1}og/g, 'cat');

console.log(newString); // My cat jumped on the bed.  My cat is a bad cat.

We wrote /[Dd]{1}og/g as our regular expression which will match exactly 1 character that is either D or d followed by og. The g character at the end is not something we talked about earlier, but it represents the "global" flag (i.e. match ALL occurrences of this pattern rather than just the first). For more on regular expression flags, you can read this.

As you can see above, we replaced all occurrences of "dog" (uppercase and lowercase) by using a single expression.

toUpperCase

Official docs

This method does exactly what its name suggests. It capitalizes every letter in a given string.

const myString = 'some string';

console.log(myString.toUpperCase()); // SOME STRING

You'll see how this method can be useful in the next method, substring().

substring

Official Docs

If you look in the documentation, you'll see the following two methods.

Notice that thumbs down icon? That means that the method is "deprecated" (no longer supported). Deprecated methods will still work in most cases, but may become unsupported by certain browsers over time.

While I did accidentally use substr() in a prior lesson during one of our code challenges, you should always use substring() because it is not deprecated.

This method is great when you need to isolate a section of a string.

// Index          0123456789 ......
const myString = 'the programmer had a lot of bugs in his house';

const substr = myString.substring(4, 14);

console.log(substr); // programmer

Notice the index values that I placed above the first couple letters in myString. The substring() method takes two arguments–the starting index and ending index. In this example, we start at index 4 and end at index 14. If you would have skipped the first argument (i.e. myString.substring(4)), the method would return the entire string starting at index 4.

This method can come in handy in lots of situations, but here's one that I've found myself using it for which utilizes substring() and toUpperCase().

// Index          0123456789 ......
const myString = 'the programmer had a lot of bugs in his house';

// Capitalize the first letter of the sentence
const substr = myString[0].toUpperCase() + myString.substring(1, myString.length);

console.log(substr); // The programmer had a lot of bugs in his house

myString[0] retrieves the first letter of the string. We then take that value and make it uppercase using toUpperCase(). We then use the substring() method to get the remainder of the string (start at index 1, which is the second letter and end at the final letter, which should have an index equal to the length of the string). Finally, we "add" or "concatenate" these two strings together.

trim

Official Docs

This method will "trim" the whitespace off the ends of a string. It may not seem apparent why this is useful, but sometimes, when you grab data from an external API or database, you can't be sure whether the format of that data will be correct.

For example, let's say you get the following data from an external API.

const externalData = [
  {
    title: 'How to code      ',
    author: ' Zach'
  },
  {
    title: ' What is Vim?',
    author: ' Zach'
  },
  {
    title: '  How do loops work in JavaScript?    ',
    author: ' Zach'
  }
];

The data itself looks fine, but you've got some extra spaces that don't need to be there. Here's how you fix it using trim() and a basic for loop (see last lesson).

const externalData = [
  {
    title: 'How to code      ',
    author: ' Zach'
  },
  {
    title: ' What is Vim?',
    author: ' Zach'
  },
  {
    title: '  How do loops work in JavaScript?    ',
    author: ' Zach'
  }
];

for (let i = 0; i < externalData.length; i++) {

  const currentTitle = externalData[i].title;
  const currentAuthor = externalData[i].author;

  externalData[i].title = currentTitle.trim();
  externalData[i].author = currentAuthor.trim();
}

console.log(externalData);

If you run this code, you'll see that the objects in the array no longer have spaces around them. It is important to note that trim() only removes the spaces at the beginning and end of the string; not the spaces between the words. That is why our titles still have those spaces.

match

Official docs

So... Remember how we talked about those things called "regular expressions" a couple of hundred words ago? Well, they're back. Again.

The match() method is very similar to the exec() method we talked about with regular expressions. Let's look at them both for comparison.

const regex = /[A-Za-z ]+[0-9]+/;

const str = 'my favorite food is steak 239042038124';

// Using the exec() method
const result1 = regex.exec(str);

// Using the match() method
const result2 = str.match(regex);

/*
  Both result1 and result2 equal: 

  ["my favorite food is steak 239042038124", index: 0, input: "my favorite food is steak 239042038124", groups: undefined]
*/

These two methods will return the same exact value as long as you are NOT using the global flag in your regular expression.

Common Array Methods

Array Documentation

And we are on to arrays! The same rules apply for this section–I'm not intending to provide an exhaustive list with exhaustive explanations; just giving an overview of some of the most common methods.

Here are the array methods that I find myself using most. Please note that most of them require a decent understanding of callback functions, so be sure to re-read the section above if you're still fuzzy on those.

push() / pop() / shift() / unshift()
slice()
splice()
findIndex() / indexOf()
map()
forEach()
includes()
filter()
reduce()

Remember, these are not to memorize!. You can always look them up. I'm showing them to you so that you are aware of them and can identify when they might be useful.

My goal here is not to detail every last thing you can do with each method. The documentation already does that. My goal is to point out why you might want to use these methods.

push, pop, shift, unshift

Official docs - push, pop, shift, unshift

These are related. They let you add/remove elements from an array. From my experience, push() is the most common method that you will use.

const arr = [1, 2, 3];

// Add element to end of array
arr.push(4); // New array: [1, 2, 3, 4]

// Add element to beginning of array
arr.unshift(0); // New array: [0, 1, 2, 3, 4];

// Remove last element of array
arr.pop(); // New array: [0, 1, 2, 3]

// Remove first element of array
arr.shift(); // New array: [1, 2, 3]

slice

Official docs

The arr.slice() method comes in handy when you need to make a copy of an array. To a beginner, this may seem useless, but when you start dealing with immutable state in a front-end framework like React, this method will be invaluable to you.

const myArr = ['please', 'subscribe', 'to', 'my', 'YouTube channel'];

const fullCopy = myArr.slice(); // ['please', 'subscribe', 'to', 'my', 'YouTube channel']

const partialCopy = myArr.slice(0, 1) // ['please', 'subscribe']

splice (not to be confused with slice)

Official docs

If you want to add an element somewhere other than the beginning (unshift()) or end (push()) of an array, splice() is your method. Here is a common way to use it. See the docs for more use cases.

// Index                       0  1  2    3     4  5 
const somethingDoesntBelong = [1, 2, 3, 'oops', 5, 6];

// Start at index 3, delete 1 item, and replace with the number 4
somethingDoesntBelong.splice(3, 1, 4);

console.log(somethingDoesntBelong); // [1, 2, 3, 4, 5, 6]

findIndex / indexOf

Official docs

The findIndex method accepts a callback function as an argument and will find the first element in an array that matches the conditions set in your callback function.

The indexOf method simply searches for the first occurrence of a value in an array and is a much simpler method to use.

Let's start easy with the indexOf method. This just locates a value in an array, and if it doesn't find it, returns -1.

const arr = ['red', 'blue', 'green'];

const blueIndex = arr.indexOf('blue'); // 1
const purpleIndex = arr.indexOf('purple'); // -1

But what if you have a more complex array like this?

const moreComplexArr = [
  {
    firstName: 'Bob',
    lastName: 'Smith'
  },
  {
    firstName: 'Alice',
    lastName: 'Smith'
  },
  {
    firstName: 'Jon',
    lastName: 'Smith'
  },
  {
    firstName: 'Jon',
    lastName: 'Doe'
  }
];

How do we find the person with the last name of "Doe"? You might think about trying something like this:

// Using array from above

const valueToFind = {
  firstName: 'Jon',
  lastName: 'Doe'
};

// DOESNT WORK!!! Returns -1
const resultIndex = moreComplexArr.indexOf(valueToFind);

This doesn't work because checking the equality of an object is a bit more complex than just passing it in as a value.

With findIndex, we can locate this element.

const moreComplexArr = [
  {
    firstName: 'Bob',
    lastName: 'Smith'
  },
  {
    firstName: 'Alice',
    lastName: 'Smith'
  },
  {
    firstName: 'Jon',
    lastName: 'Smith'
  },
  {
    firstName: 'Jon',
    lastName: 'Doe'
  }
];

const incorrectIndex = moreComplexArr.indexOf({ firstName: 'Jon', lastName: 'Doe' });

// THIS DOES WORK
const correctIndex = moreComplexArr.findIndex((arrItem) => {
  return arrItem.lastName === 'Doe';
});

console.log(incorrectIndex); // -1
console.log(correctIndex); // 3

The findIndex() method provides a lot more flexibility!

map

Official docs

Of all these built-in array methods, this one is probably my most used. Here is a very practical example. Let's say you have retrieved an array of blog posts from your database and the category property is not filled out. For all these blog posts, you want them to be categorized in the "Learn to Code" category.

const blogPostsFromDatabase = [
  {
    title: 'How to use the map() function',
    category: 'uncategorized'
  },
  {
    title: 'What is JavaScript?',
    category: 'uncategorized'
  },
  {
    title: 'Why are you crazy enough to learn to code?',
    category: 'uncategorized'
  },
];

function ourCustomCallback(blogPost) {
  blogPost.category = 'Learn to Code';

  return blogPost;
}

const resultingArray = blogPostsFromDatabase.map(ourCustomCallback);

/*

Here is our resultingArray

[
  {
    title: 'How to use the map() function',
    category: 'Learn to Code'
  },
  {
    title: 'What is JavaScript?',
    category: 'Learn to Code'
  },
  {
    title: 'Why are you crazy enough to learn to code?',
    category: 'Learn to Code'
  },
];


*/

The map method can be used in a TON of different situations. If you ever have an array where each element of the array needs to be modified in a similar way, the map method will come in handy.

forEach

Official docs

So far, I have only shown you how to write a basic for loop. Here is what we have looked at:

const arr = [1, 2, 3];

for (let i = arr.length; i++) {
  // Do something with each element of array
}

But there is a simpler way to write this same for loop–the forEach() Array method.

Please read this for a comparison of the basic for loop and the forEach loop. The short answer–each way has its advantages, and in most cases, which one you choose does not matter.

Here is the basic way to use this.

const arr = [1, 2, 3];

let sum = 0;

// We aren't using the `indexOfItem`, but I wanted to put it here to show that it is available to you
function myCallbackFunc(arrItem, indexOfItem) {
  sum = sum + arrItem;
}

arr.forEach(myCallbackFunc);

console.log(sum); // 6

Here is a cleaner (but less beginner-friendly) way to write this. Here, we are using an arrow function as the callback rather than defining it separately.

const arr = [1, 2, 3];

let sum = 0;

arr.forEach(arrItem => {
  sum += arrItem;
});

console.log(sum); // 6

includes

Official docs

If you ever need to figure out whether a value exists in an array, use this method. Please note that you cannot use this to find complex data types like objects or other arrays.

Let's say that you have the following array, and you want to figure out whether the color orange exists in it. You can clearly see that it does, but you won't always have this clarity while writing code. Maybe this array came from a database and you don't know what to expect!

const myColors = ['blue', 'red', 'purple', 'orange', 'green'];

Here is one way that we could figure it out:

const myColors = ['blue', 'red', 'purple', 'orange', 'green'];

let orangeExists = false;

for (let i = 0; i < myColors.length; i++) {
  if (myColors[i] === 'orange') {
    orangeExists = true;
  }
}

console.log(orangeExists); // true

And here is a simpler way to do it.

const myColors = ['blue', 'red', 'purple', 'orange', 'green'];

let orangeExists = false;

myColors.forEach(color => {
  if (color === 'orange') {
    orangeExists = true;
  }
})

console.log(orangeExists); // true

But by using includes(), we can do it even simpler:

const myColors = ['blue', 'red', 'purple', 'orange', 'green'];

let orangeExists = myColors.includes('orange');

console.log(orangeExists); // true

Furthermore, you could have even used a different method altogether to achieve this. See below:

const myColors = ['blue', 'red', 'purple', 'orange', 'green'];

let orangeExists = myColors.indexOf('orange') !== -1;

console.log(orangeExists); // true

We know that if indexOf does NOT find the element in the array, it returns a value of -1. I know this because I read the documentation.

We can use this logic to determine if a value exists in an array; similar to the includes() method.

Hopefully, you are starting to see how much code these built-in methods can save you from writing if you know when to use them!

filter

Official docs

Behind map(), this might be my second most utilized built-in array method.

Unlike some of these other methods, the filter() method has a very obvious use-case that most people can resonate with even if they don't write a lot of code.

Let's say we are building the "My Orders" page for Amazon. On this page, you can view all of your past orders, but you can also filter by various conditions. You can display orders for a certain time frame, your open orders, your digital-only orders, and your canceled orders.

When Amazon loads the data into this page, it likely comes in the form of an array (this is a fictional representation):

const allOrders = [
  {
    productName: 'Tea pot',
    isDigital: false,
    isCancelled: false,
    isOpen: false
  },
  {
    productName: 'Blue Gildan Mens Hoodie',
    isDigital: false,
    isCancelled: true,
    isOpen: false
  },
  {
    productName: 'Code Complete Kindle Book',
    isDigital: true,
    isCancelled: true,
    isOpen: false
  },
  {
    productName: 'Atomic Habits Kindle Book',
    isDigital: true,
    isCancelled: false,
    isOpen: false
  }
];

When the user clicks the filter to select only the Digital orders, how might we write the code to do that? Using the filter() method of course! We can also get an array with combined filters!

Here's how it works–if the return value of our callback function is true for a specific array item, then this array item will be included in the resultant array.

const digitalOrders = allOrders.filter((orderItem) => {
  return orderItem.isDigital;
});

const digitalCancelledOrders = allOrders.filter((orderItem) => {
  return orderItem.isDigital && orderItem.isCancelled;
});

const physicalOrders = allOrders.filter((orderItem) => {
  return !orderItem.isDigital;
});

You will use this method a lot, so learn it well!

reduce

Official docs

I saved the hardest for last because while it can come in handy, you don't need it. Take a look at the example, but don't stress over learning this–we have more important things to learn over the next few lessons.

You probably recognize this by now:

const arr = [10, 20, 30, 25, 14];

let sum = 0;

for (let i = 0; i < arr.length; i++) {
  sum += arr[i];
}

console.log(sum); // 99

The reduce() method is just a shorter way of writing this code.

Here is the same code from above re-written using the reduce() method.

const arr = [10, 20, 30, 25, 14];

function reducerCallback(sum, currArrItem, currArrIndex) {
  return sum += currArrItem;
}

// 0 represents the "initial value"
const result = arr.reduce(reducerCallback, 0);

console.log(result); // 99

We start our sum value at 0 by passing it in as the second argument (just like we did in the code prior to this). The reducerCallback will loop through each value in the array and increment the value of sum by each item in the array. This callback function will then return the "accumulated" sum.

But what if a method doesn't exist for what I'm trying to do?

Glad you asked. In some cases, you might want to perform some operation that cannot be done using the built-in JavaScript methods.

In that case, you have two options:

Write a bunch of JavaScript code to solve the problem
Use a JavaScript "library"

If you tried to compare the equality of objects by writing "Vanilla" (plain) JavaScript code, here's what you would need to write. I don't recommend it.

The better solution is to use a code library like Lodash. We will talk a lot more about code libraries and how to use them later, but for now, just take a glance at the code I've written below (utilizing the Lodash library).

Quick tip: The Lodash library provides functions for various data types (similar to the JavaScript built-in functions) and we often refer to it as "functional programming".

// Don't worry, we have not covered this yet and I don't expect you to know it
const lodashLib = require('lodash');

// As a side-note, the "convention" that a lot of programmers use to import 
// this library is to use an underscore as the name of it.  You will see this a lot.
// const _ = require('lodash');

const objA = {
  prop1: 'value',
  prop2: 20
};

const objB = {
  prop1: 'value',
  prop2: 20
};

console.log(objA === objB); // false (you can't compare equality of JS objects)

// If we tried to implement this ourselves, it would take 100s of lines of code
lodashLib.isEqual(objA, objB); // true

In future lessons, we will walk through how to use a library like this.

The JavaScript Math Library

Even if you are not building Finance web applications, you are going to need to know a couple common functions from the JavaScript Math library.

Now I want to touch on a minor point (at least in our journey) before we get started. Take a look at the following code.

const myDate = new Date();
const year = myDate.getFullYear();

const negNum = -50;
const posNum = Math.abs(negNum);

Dates and the Math library are unrelated, but do you notice anything weird about the code above? I do. In the first code snippet, we are creating a Date using new Date() while in the second snippet, we are using the Math library as Math.abs().

Don't we need to do this???

const math = new Math();

math.abs(-20);

NO, this is an incorrect way to use the Math library and if you try to run that code, you're going to get the following error message:

Uncaught TypeError: Math is not a constructor

What is that word, "constructor"??

Well, it has to do with constructing an Object in JavaScript and has its roots in something called "Object-Oriented Programming" (OOP). Later in this series, we will discuss this along with the concept of "classes", "static methods", and "instance methods".

Math.abs() is a static method while myDate.getFullYear() is considered an instance method. This is not necessary to know right now, but I wanted to point it out so that when you see it in the future, it is not a complete surprise.

Some common uses of the Math library

Even for beginners, the documentation for the Math library is not that difficult to read.

Here are some common ways (not exhaustive) to use it:

// Math has some built-in "constants" you can use
Math.PI // 3.141592653589793
Math.E // 2.718281828459045

// And some static methods
// Takes absolute value of number
Math.abs(-60); // 60

// Rounds up to nearest integer
Math.ceil(Math.PI); // 4

// Rounds down to the nearest integer
Math.floor(Math.PI); // 3

// Rounds to nearest integer
Math.round(Math.PI); // 3

// Returns smallest/largest number
Math.min(3, 4, 5, 6); // 3
Math.max(3, 4, 5, 6); // 6

// Returns a random number between 0 and 1
Math.random();

Before we move on from this, I want to focus on that Math.random() method a little bit longer because it will come in handy if you know how to use it.

Since it returns a random value between 0 and 1, we can use this fact along with some basic logic to get a random index in an array. We have used this in previous lessons of this series but I have not yet explained how it works.

// Gives us a random number between 0 and 1
const randomNumber = Math.random();

// By multiplying by 100, we move the decimal over 2 spaces, and now, we have
// a number between 0 and 100 (but it is still a decimal)
const largerNumber = randomNumber * 100;

// By rounding down, we now have a random, whole number from 0-99
const wholeNumber = Math.floor(largerNumber);

// Now let's see how this can be useful
const arr = ['just', 'an', 'example', 'array'];
const lengthOfArr = arr.length; // 4

// Let's combine everything together
// This gives us a random, whole number from 0 - 3, which is the same
// index values we need to access values of our array
const randomIndexForArray = Math.floor(Math.random() * lengthOfArr);

const randomArrValue = arr[randomIndexForArray];

You may not use this trick in many of your applications, but it sure is useful for unit testing!

JavaScript Error types

I know, the rest of this lesson looks rather boring, but if you've made it this far, please stick around because understanding error types, NaN, null, and undefined values are super important!

A JavaScript error happens when you try to execute JavaScript code that is either invalid or is incapable of handling the values you have given to it.

In JavaScript, there are several different types of errors, but they all "inherit" (this is an object-oriented programming term) from the Error object, which you can see the documentation for here.

While there are more than just three types, these three are the most common ones that you will see and need a high-level understanding of.

ReferenceError
SyntaxError
TypeError

JavaScript ReferenceError

Official docs

When you try to "reference", or "use" a value that doesn't exist, you'll get this error. Here's the simplest example:

const myVariable = 20;

console.log(anotherVariable); // ReferenceError

JavaScript tries to find a "reference" to anotherVariable in memory, but since we never declared it, it simply doesn't exist!

JavaScript SyntaxError

Official docs

When we talk about "syntax", we are talking about how we write our code. If you write invalid JavaScript code, the compiler won't know what to do and will throw a SyntaxError. This one is pretty easy to explain–just write some invalid JavaScript code! See if you can figure out what is wrong below.

const myObj = {
  prop1: 'some value';
  prop2: 'another value';
};

If you try to run this code, you're going to get a SyntaxError that says Unexpected token ';'. That is because instead of ;, you need , in your objects. Here is the correct way:

const myObj = {
  prop1: 'some value',
  prop2: 'another value'
};

JavaScript TypeError

Official docs

This is probably the hardest of the three to understand. It occurs when you try to perform an operation that cannot be done on a specific type of data. If you try to pass an incompatible argument into a function, attempt to modify an immutable value, or just use a value inappropriately, you will get this error.

It is confusing because there are many cases that seem like they would throw a TypeError, but don't. Consider this:

const myObj1 = { prop1: 20 };
const myObj2 = { prop1: 50 };

// Does not throw an error
const result = myObj1 + myObj2; // "[object Object][object Object]"

You can't add two objects right?? No, you can't, but it won't throw an error at you if you try. It will just combine the two objects together in a string. Logically speaking, this seems like a TypeError to me. But here are a few examples that actually do throw this error.

const myNumber = 50;
const myObject = {
  prop1: 'some value'
};

myNumber.toUpperCase(); // TypeError: num.toUpperCase is not a function
myObject.prop1(); // TypeError: myObject.prop1 is not a function

In the first case, we are trying to use a String method on a number. In the second case, we are trying to invoke a function when we are really dealing with a String.

What is "Error Handling"

The last thing that I want to cover with errors is something very important, but lost on a lot of beginners (including myself years ago).

What is the point of "handling" errors, and what does that even mean?

Well, let me paint a picture for you. Let's say that you built an application similar to Instagram and one of your users loses internet connectivity while posting a picture. Clearly, the code that allows the user to post that picture is not going to work because the user doesn't have internet access.

If we handle the error in our code, we can print something on the screen that says, "You are not connected to the internet. Please connect and try again".

If we DO NOT handle the error in our code, our app is going to crash and the user is going to have no idea what happened.

So the next question is... What errors are we trying to handle?

And this is where it is difficult for beginners to understand error handling. In most cases, the errors that we want to handle are ones caused by external code that we have no control over. We will cover this in-depth when we get there later in the series, but for now, I'll just show you how to handle errors.

try {
    const num = 20;
    num.toUpperCase();
} catch(err) {
    // If the code in the try {} block throws an error, 
    // we will reach this code block and `err` will represent the Error object
}

Of course, the code above is useless and we would never write something like this, but it demonstrates the try/catch syntax that we can use for error handling in JavaScript.

Since we put num.toUpperCase() (which throws a TypeError) in the "try" block, our code runs just fine without being interrupted. We could even print some details about this error.

try {
    const num = 20;
    num.toUpperCase();
} catch(err) {
    console.log(err instanceof TypeError); // true
    console.log(err.message); // num.toUpperCase is not a function
}

As I mentioned, we will be revisiting error handling throughout this series, so consider this your brief introduction.

NaN, null, undefined in JavaScript

I'm going to keep this final section short and sweet. There are three "data types" that we have not spent much time on, and those are NaN, null, and undefined.

NaN - "Not a Number"

You will rarely see this or use this, but you should know what it is.

From the documentation, here are the most common scenarios that will return NaN.

const myString = 'some string';

// 1. Trying to coerce a string to a number
Number(myString); // NaN

// 2. Performing an impossible math operation
Math.sqrt(-1); // NaN

// 3. Operand of an argument is NaN
Number(myString) + 20;

// 4. Trying to use an arithmetic operator (other than + ) on a string
myString * 2;

As I said, you won't see or use this much.

null

Unlike NaN, you'll encounter null values all the time! A null value is a JavaScript primitive value (remember from earlier in this post?) and represents the intentional absence of a value. In other words, you can think of it as a "placeholder" value that must be set by the developer.

When using null in an operation, it behaves as a "falsey" value. See below.

let myVariable = null;

if (myVariable) {
  console.log('this line will not print');
} else {
  console.log('this line will print');
}

Here is the official documentation for null values.

undefined

Very similar to null, undefined is a primitive value that represents the absence of a value.

You will get an undefined value when you try to use a variable that exists, but is not defined yet (and has not been assigned a null value).

let myString;
const myObj = {};

console.log(myString); // undefined
console.log(myObj.someFunction); // undefined

myObj.someFunction(); // TypeError

Since we didn't intentionally initialize myString as a null value, it carries an undefined value.

The myObj example is a bit trickier. You might infer that because myObj does not yet have a someFunction property, it would throw an error. Instead, all object properties that have not been assigned carry a value of undefined. In the example, when we try to invoke this function, we get a TypeError because you cannot "invoke" and undefined value.

Like null, the undefined primitive is treated as a "falsey" value when used in a conditional.

let myVar;

if (myVar) {
  console.log('this line will not print');
} else {
  console.log('this line will print');
}

Congrats, you made it

If you actually read this entire post, get on Twitter and let me know what you thought! My handle is @zg_dev.

Also, congrats on finishing this. I know this stuff is confusing, but with the dedication you have to finish such a long post, I know you will be successful as a software engineer!

But again, if you just read my posts, you won't learn to code. You have to practice. So get on with those challenges!

10 JavaScript Challenges

I have chosen 15 challenges for this lesson that will require you to apply the basics of the topics we covered here combined with the knowledge you acquired through prior lessons.

To get the most out of these challenges, I recommend watching my YouTube video where I solve all of them with you. I walk you through my thought process and hopefully fill in some gaps from these lessons.

Here are the challenges and solutions.

Solutions - YouTube video
Challenge Collection - Lesson 6 Collection on Codewars

Lesson 5 - JavaScript Functions, Loops, and Conditionals #fullstackroadmap

Zach Gollwitzer — Mon, 11 Jan 2021 16:18:17 +0000

See this lesson on YouTube here

Please tag me on Twitter @zg_dev and share this series with #100DaysOfCode!

Useful series links

Series Table of Contents
Github Repository - where you'll find all the code we write in this series
YouTube Playlist
Series Overview
100 Days of Code Challenge - I highly recommend you take this on while reading this series!
My CodeWars Profile - Follow me and I'll follow you back. This is where we will do our coding challenges throughout the series!
My Twitter Profile - Where you can stay updated

The goal for this lesson

In the previous two lessons of this series, we covered JavaScript variables and operators in a good amount of detail.

I believe that if you've been following along and partaking in the practice exercises at the end of each lesson, you should be in a place where we can start moving a bit faster.

In today's lesson, we will be doing just that. We will be covering conditionals, loops, and functions in JavaScript rather quickly, and then supplement that knowledge with a ton of practice.

The lesson itself is necessary, but a lot of the nuances to the JavaScript language will be realized within the practice problems that I will be solving with you at the end of the lesson. My goal is to get through 25 practice problems, which is going to result in a REALLY LONG video, but I believe that is the cost of learning to code.

So let's get into it!

What are conditionals in JavaScript?

JavaScript conditionals are simpler than I'm making them sound. Here's a basic JavaScript conditional:

if ('some string' === 'another string') {
  console.log('the strings are equal'); // this will be skipped
} else {
  console.log('the strings are not equal'); // this is what will be printed
}

If you completed the previous lesson, you know that these strings are not equal, and therefore, our "code path" will result in the "else" statement and the strings are not equal will be printed to the console.

To better understand this, here is the basic structure of a "conditional".

if () {
  // do something here
} else {
  // do something here
}

In the previous lesson, we talked about JavaScript expressions, but we only looked at them in the context of variables. For example:

const myResult = (20 === 20) && ('orange' === 'orange');

In this case, we have to look at what is right of the = and by doing that, we can determine that (20 === 20) && ('orange' === 'orange') is the expression that we are evaluating. This expression equals true, and therefore, the myResult variable is assigned a value of true.

When we look at conditionals, our expressions will be placed between parentheses.

if (put your expression here) {
  // write some code here
}

Conditionals can be written in several different ways

Below are some examples of valid conditional statements in JavaScript.

const firstNumber = 20;
const secondNumber = 10;
const jsExpression = firstNumber > secondNumber; // true

// Only using an if statement (no "else" statement required here)
if (jsExpression) {
  console.log('this expression is true');
}

// An if-else statement
if (jsExpression) {
  console.log('this expression is true');
} else {
  console.log('this expression is false');
}

// Adding another "code path" with "else if"
// Hint: you can use as many "else if" statements as you want
if (jsExpression) {
  console.log('the expression is true');
} else if (firstNumber > 0) {
  console.log('the expression is false and the firstNumber is greater than 0');
} else {
  console.log('expression false, and firstNumber 0 or less');
}

// Works the same, just formatted differently
if (jsExpression) { console.log('just a different formatting') };

What about "Switch Statements"?

Now listen up. If you're using lots of switch statements across your code, you're probably doing something inefficiently. But... There are some really good use cases for a switch statement and although I can't give you a definitive list of scenarios where you'll need to use this, I can explain why we have it in the first place.

Consider this:

// Index           0         1        2         3        4
const colors = ['orange', 'green', 'yellow', 'purple', 'blue'];

// Gets a random number between 0 and 4 and stores in a variable
const randomIndex = Math.floor(Math.random() * colors.length );

/*
  Remember, to get a value from an array, we use bracket notation
  For example, to get 'green', we use `colors[1]`

  Since randomIndex will be a random number between 0-4, we can 
  pass this in as our index to retrieve a random color from the array
*/
const randomColor = colors[randomIndex];

// Conditionals
if (randomColor === 'orange') {
  console.log('the color is orange');
} else if (randomColor === 'green') {
  console.log('the color is green');
} else if (randomColor === 'yellow') {
  console.log('the color is yellow');
} else if (randomColor === 'purple') {
  console.log('the color is purple');
} else if (randomColor === 'blue') {
  console.log('the color is blue');
} else {
  console.log('no color found');
}

The conditional statement we have written at the bottom of the code works fine. You can use this with no problems, but most developers don't like the look of it. Here's a cleaner way to write the same thing using a switch/case statement.

// Index           0         1        2         3        4
const colors = ['orange', 'green', 'yellow', 'purple', 'blue'];

// Gets a random number between 0 and 4 and stores in a variable
const randomIndex = Math.floor(Math.random() * colors.length );

/*
  Remember, to get a value from an array, we use bracket notation
  For example, to get 'green', we use `colors[1]`

  Since randomIndex will be a random number between 0-4, we can 
  pass this in as our index to retrieve a random color from the array
*/
const randomColor = colors[randomIndex];

// Switch / Case statement
switch (randomColor) {
  case 'orange':
    console.log('the color is orange');
    break;
  case 'green':
    console.log('the color is green');
    break;
  case 'yellow':
    console.log('the color is yellow');
    break;
  case 'purple':
    console.log('the color is purple');
    break;
  case 'blue':
    console.log('the color is blue');
    break;
  default:
    console.log('no color found');
}

To some, the switch statement looks better than a bunch of if-else statements. Let me explain what's going on here.

const variableToEvaluate = 'some value to match';

switch (variableToEvaluate) {
  case 'some value to match':
    // do something here
    break; // This ensures that if a match is found, no further code is run
  default:
    // If nothing matches above, this code is run
}

A switch statement works the same as an if-else statement. It looks at the value of variableToEvaluate, and then runs down the list of cases until it finds a "case" where the value matches the variable in question. If no "case" matches, then we reach the code stored in the default case.

Think of it like this–the case is similar to else if while the default is similar to else in our first example above.

Like I said, if the switch statement feels a bit uncomfortable right now, there is no need for you to use it. You can always use the good 'ole "if-else" conditional to filter through a list of potential values.

What are loops in JavaScript?

I can tell you what a loop is, but my goal in this series is to also share with you why we do things. As a beginner programmer, understanding why we need loops is not going to be apparent. Sure, you might find yourself writing loops to solve some algorithm coding challenge, but in the real world of web development, there is one use case for loops that I believe trumps all.

That use case is looping over database resources.

In the "real world", we deal with a lot of repetitive things with similar characteristics. Remember how we talked about arrays earlier?

const myArray = ['orange', 'blue', 'green'];

The above array is simple, but in a prior lesson, we talked about how you can put more than just string values in an array. You might have an array that looks like this:

const blogPosts = [
  {
    title: 'What is JavaScript?',
    author: 'Zach Gollwitzer',
    publishDate: 'Dec 20, 2020',
    content: 'some post content here'
  },
  {
    title: 'How do Arrays work?',
    author: 'Zach Gollwitzer',
    publishDate: 'Jan 1, 2021',
    content: 'some post content here'
  },
  {
    title: 'How long does it take to learn coding?',
    author: 'Zach Gollwitzer',
    publishDate: 'Jan 20, 2021',
    content: 'some post content here'
  }
]

What do you notice in the code above? Here are a few things I'm noticing.

First, the format of the array above is much different than what we've seen before. We've looked at a lot of arrays written on a single line, but when coding, you'll often have to write code that breaks on several lines. While indentation is not necessary (if you are writing Python code it would be, but not JavaScript), it helps with readability. We will talk later in the series about auto-formatters such as Prettier to help us with this. 👍

Second, I'm noticing that each object stored in our blogPosts array has a very similar structure. Each object has a title, author, publishDate, and content property. Hmmm... We might be able to take advantage of this in a couple minutes...

When I said "resources" earlier, I'm talking about a group of similar-looking data that is generally stored in a database. A blog post would be considered an individual "resource".

So you might ask–why would we want to loop over a list of blog posts?

A good idea to remember - don't hardcode things

Let's say you are coding a blog (like we will do in this fullstack series). How would you display your blog post titles on the home page using the array we just looked at above?

Here's an idea:

blogPosts[0].title;
blogPosts[1].title;
blogPosts[2].title;

Great! All we need is a little HTML and JavaScript and we have ourselves a list of blog posts.

But what happens when we add another post?

We could just add another line of code right? Maybe blogPosts[3].title?

No. No. No. No. No.

This is where loops come in. Instead of hard coding a new line of code for each additional blog post that we add, we want to be able to have our code automatically detect a new blog post and display it.

Here's how I would display my blog posts instead.

const blogPosts = [
  {
    title: 'What is JavaScript?',
    author: 'Zach Gollwitzer',
    publishDate: 'Dec 20, 2020',
    content: 'some post content here'
  },
  {
    title: 'How do Arrays work?',
    author: 'Zach Gollwitzer',
    publishDate: 'Jan 1, 2021',
    content: 'some post content here'
  },
  {
    title: 'How long does it take to learn coding?',
    author: 'Zach Gollwitzer',
    publishDate: 'Jan 20, 2021',
    content: 'some post content here'
  }
]

// ---------------------
//   This is our loop
// ---------------------
for (let i = 0; i < blogPosts.length; i++) {
  const postTitle = blogPosts[i].title;
  const postAuthor = blogPosts[i].author;
  const postDate = blogPosts[i].publishDate;
  const postContent = blogPosts[i].content;

  // Here, we would use these variables to do something with each post
  // I'll just print the values
  console.log(postTitle);
  console.log(postAuthor);
  console.log(postDate);
  console.log(postContent);
}

No matter how many posts we add to our blogPosts array, our code is ready to display them!

The structure of a JavaScript loop

You will learn later in your programming journey that there are several valid ways to write a loop in JavaScript, but there is one way that most programmers would consider the "standard" way of writing a loop. You saw it in the code above, but here it is again.

for (let i = 0; i < 100; i++) {
  // Your code goes here
}

I know, this looks intimidating. Let's walk through each part.

Just like we start a conditional statement with the if keyword, we start our loops with the for keyword.

// The code below is not valid, but gives you a visual

if () {

}

for () {

}

Within the parentheses, we need to add the following things:

A loop variable
A stop condition
A loop behavior

In this case, we used a loop variable of i.

let i = 0;

There are a couple things to point out. First, notice how we have a ; at the end of the statement. This indicates that our statement is complete and is required.

Also, notice that we are using let instead of const. This is intentional. The value of i will be changing on each iteration of our loop, and therefore, we need to "re-assign" it and use the let keyword to declare it.

Next, notice that we named the variable i. This is merely a convention, and is not required. We can call this variable whatever we would like. The following loop would be perfectly valid:

// Your loop variable doesn't have to be called `i`, but this is a conventional way to do it
for (let anyName = 0; anyName < 100; anyName++) {
  // Your code goes here
}

Finally, notice that we initialized this variable with a value of 0. This is important because it represents the starting value of our loop. In almost ALL cases, you will want to start your variable at 0 because when using loops, you'll be looping over an array, and when using arrays, the first value has an index of 0.

Next up, let's talk about the following code:

i < 100

First off, the value of 100 is entirely arbitrary, and generally, you won't be using a hardcoded number like this. In most cases, you'll replace 100 with something like blogPosts.length for reasons that will become apparent soon.

Second, it is important to understand what this statement is saying. I call it a "stop condition" because the loop will continue until i reaches a value of 100.

How does i reach 100 you might ask? Well that's where i++ comes in. If you remember from the prior lesson of this series when we talked about arithmetic operators, using i++ increments the value of i by 1. Let's look at the code one more time.

for (let i = 0; i < 100; i++) {

  // This line will run 100 times and each time, i will increase by 1
  console.log('The value of i is: ' + i);
}

Go ahead and open your browser dev tools (remember, right click anywhere in the browser, click "Inspect Element", and then select "Console") and paste this code in there.

Although your browser console will print 100 lines in less than a second, the computer is "iterating" through this loop and doing the following:

Check if the value of i is less than 100. If so, continue to the code inside the loop.
Run the code in the loop
Return to step 1

Like I said, loops are not all that useful on their own, but once we start "iterating" (this is just a fancy word programmers use) over a list of blog posts, users, notifications, or whatever else you can think of, they become very useful.

What are functions in JavaScript?

And finally, we've reached the point in our journey where we can start doing some really cool things with JavaScript.

Like I have been doing throughout this series, I'm going to introduce you to the basics (and most important parts) of functions and leave out the complicated details. We will cover the complicated details in our practice exercises and as they come up later in the series, but for now, I think they create unnecessary confusion.

Here is how you write a function in JavaScript.

function myFunction() {
  // do something here
}

Like I said, there are a lot of things we could talk about here, but I'm going to keep it to the most important things.

How to write and "call" a function

The first thing that you need to know about functions is this–there is a huge difference between "declaring" and "calling" a function.

We talked extensively about "declaring" and "assigning" variables in prior lessons, and while this is similar, the major difference is that functions don't get declared and called in the same step.

To see this in action, write the following code into your browser dev tools Console.

function myFunction () {
  console.log('hello');
}

What happened? If you answered "nothing", you are correct. This doesn't do anything that our eyes can see. We have indeed done something though...

We have talked about declaring variables in the following way:

const myVariable = 20;

// After declaring and assigning, we can see the type of this variable
typeof myVariable; // number

When we declare a function, we can do the same thing!

function myFunction () {
  console.log('hello');
}

typeof myFunction; // function

That is because our console will store myFunction in memory just like it stores myVariable in memory.

If we can retrieve the function from memory, how do we "call" it? Another way to say this is how do we "invoke" it?

To "call" or "invoke" a function, you write the following code.

// Declaring the function
function myFunction () {
  console.log('hello');
}

myFunction(); // "calling" or "invoking" the function

Go ahead, try running the code in your browser. It should print hello to your console.

Let's add some parameters and arguments to our function

The function we just wrote is pretty useless. I wouldn't recommend presenting it in a job interview.

So how do we make these functions more exciting?

By adding "parameters" and "arguments".

I'm going to show you and then we are going to get into a long-winded discussion about how it works.

// Declaration
function myFunction(param1, param2) {
  const sum = param1 + param2;
  console.log(sum);
}

// Invocation
myFunction(20, 10); // 30

If you're attentive, you'll probably recognize that param1 somehow relates to 20 and param2 somehow relates to 10. You're 100% correct, but let's explore how they are related.

When we declare a JavaScript function, we have the ability to pass zero to infinity number of "parameters" (although most developers agree that 3-5 is the maximum number of parameters a function should have). In this case, we passed in 2: param1 and param2.

How did I know to use the names param1 and param2? It doesn't matter, because these are completely arbitrary. I can name these whatever I want. Below, I changed the parameter names. Try to run the code below and see what happens.

// Declaration
function myFunction(firstNumber, secondNumber) {
  const sum = param1 + param2;
  console.log(sum);
}

// Invocation
myFunction(20, 10); // 30

The reason the code above does not run (throws a ReferenceError) is because while we have changed the name of the parameters, we forgot to update the references to the parameters within the function. Here is the correct way to write it:

// Declaration
function myFunction(firstNumber, secondNumber) {
  const sum = firstNumber + secondNumber; // I updated this line
  console.log(sum);
}

// Invocation
myFunction(20, 10); // 30

Let's stay on this point for a minute. Clearly, I am referencing my parameters from within the function, but how do I know what they represent?

Well this is where the invocation part comes in. Notice at the bottom of my code how I have passed values of 20 and 10 in as something we call "arguments".

You can think of "parameters" and "arguments" as two sides of the same coin. Developers will often use them interchangeably, but for our discussion, the distinction matters.

By declaring parameters, you are telling the computer, "Hey computer! When I call this function later in my code, I'm going to pass in two arguments, so make sure you remember them when I do!"

And by "passing arguments", you are telling the computer, "Hey computer! Remember those parameters I told you about when I wrote myFunction? Good, because here are the arguments that I want to use in their place for this function invocation. I want to replace firstNumber with 20 and secondNumber with 10.

A brief introduction to "scope"

Try running the following code.

// Declaration
function myFunction(firstNumber, secondNumber) {
  const sum = firstNumber + secondNumber; // I updated this line
  console.log(sum);
}

console.log(firstNumber);
console.log(secondNumber);

// Invocation
myFunction(20, 10); // 30

You're gonna get a big fat error that says:

Uncaught ReferenceError: firstNumber is not defined

We will be talking more about "scope" throughout the series, but for now, just remember that not all variables can be accessed from all places in your code.

The variables firstNumber and secondNumber can only be accessed from within the function, myFunction. This is by design.

Here's how I think about function scope.

function myFunction(param1, param2, param3) {
  // Any code that you write between the opening bracket {
  // and the closing bracket } will have access to the 
  // parameters (which are just variables).  In other words,
  // any code here can use `param1`, `param2`, and `param3`,
  // but once we step outside of this area, these cannot be 
  // accessed anymore
}

// This is NOT VALID because we are trying to access
// `param1` outside of its "scope"
console.log(param1);

I think that's enough for one day about scope. JavaScript is full of weird "scope" issues that are distracting to our main focus. We will cover them later as they arise, but no need at the moment.

We can declare and invoke a function simultaneously

All this time, I've been telling you that functions are declared and "called" or "invoked" in separate steps.

This is true most of the time, but there is a way to do it all at once. This is called an "immediately invoked function".

(function myFunction () {
  console.log('hello');
})();

Go ahead and run that code in your console. It should print hello. Like I said, this is not often used while programming, but occasionally good to know. All we are doing is skipping a step.

There is another way to write a function in JavaScript

I've been withholding information from you for the last couple minutes. There is another way to write a function in JavaScript.

Here it is.

const myFunction = function() {
  console.log('hello');
}

For a closer look, here is how we did it before.

function myFunction () {
  console.log('hello');
}

For our learning purposes right now, these are functionally equivalent. There is a subtle difference, but it brings in a concept called "hoisting" which is confusing to even an experienced JS dev, and I believe getting into it is destructive to our learning experience. You can "call" the first example above the same way you "call" the second example.

const myFunction = function() {
  console.log('hello');
}

myFunction(); // hello

What we did here was declare an "anonymous" function and assign it to a variable. This is what an anonymous function is:

function() {
  console.log('hello');
}

If you tried to run this anonymous function in your dev tools console, it would throw the following error.

Uncaught SyntaxError: Function statements require a function name

As you might infer, when we are declaring a function on its own, we need to give it a name. Otherwise, how will we refer back to it??

Arrow Functions

The topic of "anonymous functions" brings us to our final way of writing functions. This one is going to be a bit tricky, so brace yourself.

const myFunction = () => {
  console.log('hello');
}

What I have written above is called an "arrow function", and it is another form of an anonymous function. Just like our anonymous function example above, we cannot run these alone.

// This doesn't work
() => {
  console.log('hello');
}

While this "arrow function" might look more complicated than the conventional "anonymous function", there are only a few differences. Go ahead, look at them side by side.

const myAnonymousFunction = function () {
  console.log('hello');
}

const myArrowFunction = () => {
  console.log('hello');
}

To get from anonymous to arrow, just remove function and insert => between () and {.

You might ask why we have both of these. Arrow functions didn't exist prior to ES6 (remember from lesson 2 when we talked about ECMAScript standards?). They were introduced in the ES6 standard (in 2015) because an arrow function is easier to write. Once you start coding larger projects, you'll realize that these arrow functions are much easier to use and I would recommend getting to know them well.

There are some other benefits relating to these arrow functions, but once again, talking about them will get us into advanced territory we're not ready for yet.

Let's talk about return values

The function that we've been looking at so far has not had a return value.

function myFunction () {
  console.log('hello');
}

myFunction(); // hello

When we invoke it with myFunction(), it prints hello to the console. Now, let's assign the result of this invocation to a variable.

function myFunction () {
  console.log('hello');
}

const result = myFunction();

console.log(result); // ????

What does result equal?

The correct answer is undefined because our function doesn't return a value. Returning a value is simple; just put a return statement at the end of your function.

function myFunction () {
  return 'hello';
}

const result = myFunction();

console.log(result); // hello

Now, our result variable will be set equal to the return value of the function, which is a string, hello.

Whatever comes after the return statement will not be executed.

function myFunction () {
  let someNumber = 200;

  return someNumber;

  someNumber = 100; // will never get here
}

const result = myFunction();

console.log(result);

Since we are returning someNumber prior to re-assigning it, our result variable will be equal to 200 because we will never reach the statement someNumber = 100.

Functions and Objects together

As you have seen in this lesson, you can assign functions to variables and then execute them using the variable name.

In prior lessons, we showed how you can assign variables to object data type properties. Quick review:

const quantity = 20;

const myObject = {
  prop1: quantity
};

console.log(myObject.prop1); // 20

We can also assign functions to properties.

function myFunction () {
  return 20;
}

const myObject = {
  functionProp: myFunction
};

const result = myObject.functionProp();

console.log(result); // 20

This is going to take us a minute to comprehend, but I promise you, I'm showing it to you for a very specific reason.

The first part is simple. We define a function that returns a value of 20.

function myFunction () {
  return 20;
}

The second part is a bit trickier. We are creating an object called myObject and assigning our newly created function myFunction to a property called functionProp. Again, these are all arbitrary names. We could have named them differently.

If you remember, we access properties of an object with "dot notation". To access the function (myFunction) stored within the object, we must use myObject.functionProp.

And finally, we need to "invoke" or "call" this function, so we need to add () at the end of this. Here is a longer way to write the same code.

// Declare the function
function myFunction () {
  return 20;
}

// Declare the object, assign the function to a property of the object
const myObject = {
  functionProp: myFunction
};

// Get the function from the object property
const functionFromObject = myObject.functionProp;

// "invoke" or "call" the function
const result = functionFromObject();

// Print the return value of the function
console.log(result); // 20

Obviously, this code is more complex than it needs to be. We could easily just call the function directly.

I wanted to show you this so the next section is a bit more clear.

Built-in JavaScript Functions

As a programming language, JavaScript comes with several built-in functions that we can use in our code. These built-in functions help us modify the values of our variables. Here is an example.

const myString = 'hello world';

const newString = myString.toUpperCase();

console.log(myString); // hello world
console.log(newString); // HELLO WORLD

Believe it or not, myString.toUpperCase() is similar to myObject.functionProp() in the code from the previous section.

You might say, "but a string variable is not an object!".

You would be correct in saying this. A string is not an object in JavaScript. A string doesn't have properties like an object does.

JavaScript experts would yell at me for this, but just think of the JavaScript built-in methods as function properties of different types of variables. This is not technically correct, but once again, discussing the nuances will get us into far too advanced topics for now.

You can chain these built-in methods together.

const myString = 'hello world';

const newArray = myString.toUpperCase().split(" ");

console.log(newArray); // ['HELLO', 'WORLD']

In the above example, we first capitalize every letter in our string using toUpperCase(), and then split(" ") our string by a space delimiter " " and place the resulting two strings into an array.

These built-in methods are categorized based on the data type of your variable. Here are a few examples for each.

// String functions
const myString = 'some string';

// Makes entire string uppercase
const string1 = myString.toUpperCase();

// Replaces first occurrence of s with l
const string2 = myString.replace("s", "l");

console.log(string1); // SOME STRING
console.log(string2); // lome string

// Number functions
const myNumber = 41.6978;

// changes the number to a different decimal precision
const number1 = myNumber.toPrecision(3);

console.log(number1); // 41.7

// Array functions
const myArray = ['orange', 'blue', 'green'];

// Finds the index of the value in the array
const array1 = myArray.indexOf('blue');

console.log(array1); // 1

These are just a few examples to demonstrate and get you familiar with using the built-in methods.

Here is a link to all of the built-in JavaScript functions, but please do not read this and try to memorize them. You can always look them up and we will cover a few in our coding challenges!

Combining everything together

Like I have mentioned many times, there is a lot more to JavaScript than what I've taught you in the last three lessons. That said, we have planted a tree, and now, you just have to fill in the branches and leaves.

The best way to do that is through exercises, so for the remainder of the post, we will be going through JavaScript exercises together. I have chosen 25 exercises that will help us fill some of our knowledge gaps, and I'll do my best to point these out as we see them.

25 JavaScript Exercises

Here are the challenges and solutions.

Solutions - YouTube video
Challenge Collection - Lesson 5 Collection on Codewars

Lesson 4 - JavaScript Operators (Fullstack developer roadmap series)

Zach Gollwitzer — Sat, 02 Jan 2021 02:30:13 +0000

I'm on YouTube

If you get tired of reading...

See this lesson on YouTube here

Introduction

Please share this series with the hashtag #fullstackroadmap and help me spread the word!

Useful series links

Series Table of Contents
Github Repository - where you'll find all the code we write in this series
YouTube Playlist
Series Overview
100 Days of Code Challenge - I highly recommend you take this on while reading this series!
My CodeWars Profile - Follow me and I'll follow you back. This is where we will do our coding challenges throughout the series!
My Twitter Profile - Where you can stay updated

The goal for this lesson

By the end of this lesson, I want you to be able to read the following code and understand exactly what is happening.

let firstNumber = 20;
const secondNumber = 20;

firstNumber++;

console.log(firstNumber > secondNumber); // true
console.log(firstNumber - secondNumber === 1); // true
console.log(firstNumber - secondNumber == '1'); // true
console.log(firstNumber - secondNumber === '1'); // false

While knowing variables (last lesson) and operators (this lesson) alone will not get you very far, they are extremely important parts of JavaScript to understand that will set you up for the next couple of lessons where we will get into things like loops, conditionals, and functions.

What are JavaScript Operators?

We briefly worked with operators in the prior lesson, but I didn't explain anything about them. Operators aren't unique to JavaScript. In ANY programming language that you choose, there will be a series of operators, and these operators are often split into the following categories:

Arithmetic
Assignment
Comparison
Logical

Do I have to memorize these categories?

No, and you won't even have to memorize the operators themselves. A handful of them will become second nature to you rather quickly and the rest will probably not be used much at all. Remember, you can always use Google to remember them.

Arithmetic Operators

Addition, subtraction, multiplication, and division are pretty straightforward. You'll use +, -, *, and /.

const strVar1 = 'My name is ';
const strVar2 = 'Zach';
const numVar1 = 20;
const numVar2 = 2;

// Addition of numbers
console.log(numVar1 + numVar2); // Prints 22

// Addition of strings (also called "concatenation")
console.log(strVar1 + strVar2); // Prints "My name is Zach"

// Subtraction
console.log(numVar1 - numVar2); // Prints 18

// Multiplication
console.log(numVar1 * numVar2); // Prints 40

// Division
console.log(numVar1 / numVar2); // Prints 10

Aside from the obvious ones, here are the other arithmetic operators.

Modulus - %
Increment - ++
Decrement - --
Exponent - **

And here's how they work (make sure to read the comments).

/*
  Modulus Operator

  This might seem useless to you right now, but there are many times where this can come in handy.
  This will calculate the remainder of a division problem.
*/
console.log(18 % 2); // Prints 0 because 2 is a factor of 18
console.log(18 % 4); // Prints 2 because 4 goes into 18 four times (4 x 4 == 16), with a remainder of 2

/*
  Increment operator

  This is often used in loops (we will learn about this soon), and will add 1 to a variable
*/
let myNum = 0;
myNum++; // Equivalent to `myNum = myNum + 1;`

console.log(myNum); // Prints 1

/*
  Decrement operator

  You probably won't use this much.  Works opposite to the increment operator.
*/
let myNum = 1;
myNum--; // Equivalent to `myNum = myNum - 1;`

console.log(myNum); // Prints 0


/*
  Exponentiation operator

  Raises the value to a desired exponent
*/
console.log(8**2); // Prints 64

Assignment Operators

Remember from the previous lesson when we talked about how a variable must first be declared, and then assigned? When we talk about "assignment" operators, we are talking about the same concept.

And really, there is only one assignment operator, and we've already learned about it.

const myVariable = 20;

Did you catch what it is? The = is an assignment operator. There are other assignment operators such as +=, -=, *=, /=, %=, and **=, but you will never NEED them, and quite honestly, I wouldn't recommend using them in most cases. Here is why:

let x = 10;

x = x + 5;

console.log(x); // Prints 15

Does the above code make sense to you? It should–no trick questions going on here. The above code is simple and self-explanatory. Now, look at the following code, which does the EXACT SAME THING as the code above, but uses one of these fancy assignment operators.

let x = 10;

x+=5;

console.log(x);

In my opinion, you're not gaining much by using the fancier operator, +=. So feel free to memorize all these additional operators, but = should work just fine for you no matter how skilled of a developer you become.

Comparison Operators

In my opinion, comparison operators are the most difficult operators to understand, and can often behave in unexpected ways. Before we get into each of them, I want to explain how a JavaScript expression is evaluated. Consider the following code:

const result = 20 > 18;

console.log(result); // true

This code will "evaluates" to true, which if you remember, is a boolean value. In this case, we are comparing two literal number values. We could also do this with two variables.

const var1 = 20;
const var2 = 18;
const result = var1 > var2;

console.log(result); // true

Same thing, different look.

If you remember from the previous lesson, we talked about the "left side" vs. "right side" of the =. This is where that concept comes into play. Let's look at something a bit more confusing.

const result = 20 === 20;

console.log(result); // true

You're probably sitting there with the following thought–"Huh?...".

Yes, the above code is valid JavaScript, and quite frankly, it's pretty common to see something like this. The key to understanding this is to keep the concept of "left of the equals sign" and "right of the equals sign" clear in your head. Let's look at it again, but this time, paying attention to this left vs. right concept.

// (1)             (2)
const result =  20 === 20;

// (1) - The variable
// (2) - The expression to evaluate

In this code, we are evaluating the expression to the right of the =, which resolves to a single boolean value of true or false.

Think of it this way–a JavaScript statement like the one above happens in two steps.

Everything to the right of = is evaluated
The value from step 1 is saved into the variable left of =

In this example, we first need to evaluate 20 === 20, and then, we take the result and assign it to the result variable.

At this point, I think we are ready to jump in and look at the comparison operators in JavaScript.

Equality Comparison Operators

Not all equals signs are created equal.

= is very different from ==.

= is an assignment operator (discussed above) while == is a comparison operator.

Here is a list of all the equality operators.

== - equal value
=== - equal value AND equal data type
!= - not equal value
!== - not equal value AND no equal data type

If you can understand the first two, you can understand the last two. Let's go through some examples.

const firstVar = 300;
const secondVar = '300';

console.log(typeof firstVar); // number
console.log(typeof secondVar); // string

const result = firstVar == secondVar;

console.log(result); // true

When looking at this example, remember two things. First, remember what we are evaluating here. We are evaluating the expression 300 == '300', and then assigning the result of this expression to the variable called result. Second, notice how 300 is a number data type and '300' is a string data type.

Since we are using ==, we ONLY care about the value. We don't care about the data type, and therefore, our expression (that is assigned to result) will evaluate to true. Here's how we break this:

const firstVar = 300;
const secondVar = '300';

console.log(typeof firstVar); // number
console.log(typeof secondVar); // string

const result = firstVar === secondVar;

console.log(result); // false

There is only one difference here. Can you spot it? Well of course, we substituted === in place of ==. Now, JavaScript cares about both the value and the data type. The value of both variables are the same, but as you can see with our typeof expressions, the types are not.

When writing JavaScript, I recommend being as explicit as possible, and therefore, I don't recommend using == unless you have a specific reason to do so (which is rare). Take a look at the code below.

const firstVar = 300;
const secondVar = '300';

console.log(typeof firstVar); // number
console.log(typeof secondVar); // string

// Remember...
// (1) - Left side of `=` represents the variable
// (2) - Right side of `=` represents the expression that will be evaluated
//   (1)                 (2)
const result1 = firstVar == secondVar;
const result2 = firstVar === secondVar;
const result3 = firstVar == Number(secondVar);
const result4 = firstVar === Number(secondVar);

console.log(result1); // true
console.log(result2); // false
console.log(result3); // true
console.log(result4); // true

If you remember from the previous lesson, JavaScript has a built-in function called Number() that we can use to explicitly coerce a string to a number data type.

In result1, JavaScript implicitly (does it for us) coerces secondVar from a string to a number, and then evaluates the expression. In result2, JavaScript does not do any coercion and evaluates the expression immediately, which results in a false value because firstVar is a number while secondVar is a string. In result3 and result4, we are explicitly coercing secondVar from a string to a number before evaluating the expression. Since in both cases, the data type and the value are equal, it doesn't matter whether we use == or ===.

Zoom out–We just got really detailed, and I want to back up and reassure you that it is okay if you are getting a little lost here. Our coding exercises at the end of this post will help clarify some of the confusion, and over time, you'll catch on to this stuff. Don't sweat it yet.

What about the other data types?

You can also use == and === to compare data types other than numbers.

const stringValue1 = 'hello';
const stringValue2 = 'hello';

const result = stringValue1 === stringValue2;

console.log(result); // true

const booleanValue1 = true;
const booleanValue2 = true;

const result = booleanValue1 === booleanValue2;

console.log(result); // true

But... Once we get into objects and arrays, these comparison operators don't work. Try running the following code in your dev tools console.

console.log([1, 2] === [1, 2]); // false
console.log([1, 2] == [1, 2]); // false
console.log({ prop1: 'value1' } === { prop1: 'value1' }); // false
console.log({ prop1: 'value1' } == { prop1: 'value1' }); // false

Both arrays and both objects we are comparing look the same don't they? Well, JavaScript can be tricky sometimes (you'll hear this statement a lot), and comparing the equality of arrays and objects is a bit more complex. We won't be diving into this, but if you are curious, here is why you can't compare an array and here is why you can't compare an object. Many developers will use a library such as Lodash to make these comparisons (but this is too advanced for us at this point).

Alright, moving on to the inequality operators, != and !==. They work the same as == and ===, but in reverse. I won't spend too much time on them, but here are a few examples.

console.log(20 != '20'); // false
console.log(20 !== '20'); // true

Numeric Comparison Operators

In addition to ==, ==, !=, and !==, we can also use numeric comparison operators such as >, >=, <, and <=. As you might guess, these operators allow us to compare two numbers and represent greater than, greater or equal to, less than, and less than or equal to respectively.

const result1 = 20 > 10;
const result2 = 20 >= 20;
const result3 = 20 < 30;
const result4 = 20 <= 20;

// Yep, this is new to us.  You can actually combine variables in a single console.log statement by using commas
console.log(result1, result2, result3, result4); // true true true true

The dreaded "ternary" operator

I say "dreaded" because some developers love this operator while others think it overly complicates things. In my opinion, this operator will save you some time once you have been doing this for a while, but is not necessary at the beginning of your coding journey.

Here's what it looks like:

const result = 20 === 20 ? 'the values match!' : 'the values do not match';

console.log(result); // the values match!

Say what?...

Although we have not covered the topic of conditionals in JavaScript yet, take a look at this code:

let result;

if (20 === 20) {
  result = 'the values match';
} else {
  result = 'the values do not match';
}

console.log(result);

While the code above might not be totally clear, you can probably see what's going on. And believe it or not, both of the code blocks above are equivalent. Let's look at that ternary operator once more with some annotation.

//      (1)       (2)              (3)                      (4)
const result = 20 === 20 ? 'the values match!' : 'the values do not match';

// (1) The variable to assign the expression value to
// (2) The main expression
// (3) The value to assign if the main expression evaluates to true
// (4) The value to assign if the main expression evaluates to false

console.log(result); // the values match!

There are 3 important "tokens" in this JavaScript statement. We know what = does, but ? and : are actually part of the "ternary operator".

Please don't sweat over this now. We will have plenty of time to review it.

Logical Operators

And the final category that we need to cover is logical operators, which are:

&& - Represents "and"
|| - Represents "or"
! - Represents "not"

Sometimes, when writing code, we need to evaluate multiple expressions at once. For example, I might want to check if the user is logged in AND has sufficient permissions to visit a certain page on my app. I can use the "and" && operator to evaluate that. It might look something like this.

const isUserLoggedIn = true;
const doesUserHavePermission = true;

const canUserPerformAction = isUserLoggedIn === true && doesUserHavePermission === true;

console.log(canUserPerformAction); // true

Here is a simplified way to write that code.

const isUserLoggedIn = true;
const doesUserHavePermission = true;

// When evaluating boolean values, we don't need to use `===`
const canUserPerformAction = isUserLoggedIn && doesUserHavePermission;

console.log(canUserPerformAction); // true

Both code blocks do the same thing, but the second is more concise.

Here are a few more examples utilizing all the logical operators.

const booleanValue = false;

const result1 = 20 === 20 || 20 === 19;
const result2 = 20 === 20 && 20 === 19;
const result3 = !booleanValue;

console.log(result1); // true
console.log(result2); // false
console.log(result3); // true

Let me walk through one of these piece by piece.

const result = 20 === 20 || 20 === 19;

console.log(result1); // true

Here are the steps that the computer goes through when reading this line of code.

First off, what does 20 === 20 evaluate to? Well, it evalutes to true.
Second, what does 20 === 19 evaluate to? Well, this time, it evaluates to false.
Let's combine these two values together with ||. This represents "or", so we are really asking the question, "do either of the evaluated expressions equal true"? In this case, the first one does, so the entire expression is true.
Since the entire expression is true, let's assign that to the result variable.

After the above example, the || and && ("or", "and") probably make sense to you, but what's with this !? Didn't we already look at this when we used != and !==?

Well, kind of. If you place ! at the beginning of an expression, it reverses the value of that expression. Let's say that we had the expression 20 === 20. This obviously evaluates to true. Now what if we changed this to !(20 === 20). Now, the expression is reversed, and equals false. And why did we have to put () here? We had to put parentheses around the entire expression to tell javascript that we want to evaluate it in entirety. If we just said !20 === 20, JavaScript will evaluate this as "not 20" equal to 20. The entire expression still equals false, but for an entirely different reason that we don't have time to get into here today.

Other Operators

So far, we have covered arithmetic, assignment, comparison, and logical operators, but there are actually some additional operators that we can use in JavaScript. Since we have a lot of ground to cover in this series, I have intentionally excluded them from our lesson here.

The operators that we didn't talk about are "bitwise" operators and "type" operators. You probably won't ever use "bitwise" operators, so no need to explore those. "type" operators include typeof and instanceof. We have already used typeof.

const numberVariable = 20;

console.log(typeof numberVariable); // number

But we won't be covering instanceof yet as it gets us deep into the weeds of JavaScript.

Combining Operators

The real magic of JavaScript happens when we start combining operators together. Combining operators also gives us an opportunity to clarify our understanding of this "left side of =" and "right side of =" concept. Take a look at the rather confusing code below.

const trueBoolean = true;

const result = !(((40 / 20) === 2 && trueBoolean) || ('yes' === 'no'));

console.log(result); // false

And it can get even more complicated if we want:

const trueBoolean = true;

const result = !((((40 / 20) * 2) % 2 === 0 && trueBoolean) || ('yes' === 'no') ) === 50 !== 50;

console.log(result); // true

But here's the deal. If you ever see something this complicated in somebody's code, they have done something wrong. You should never have to think this hard to figure out what a JavaScript expression evaluates to. I'm showing you this to demonstrate that if we pay attention to our order of operations and the meaning of various operators, something like this is possible.

Let's look at the first example again and see how we got to the answer of false.

const trueBoolean = true;

//      (1)                              (2)
const result = !(((40 / 20) === 2 && trueBoolean) || ('yes' === 'no'));

// Remember...
// (1) represents the variable that will store the result of (2)
// (2) represents the expression that we need to evaluate using operators

console.log(result); // false

To better visualize this, let's split this long expression into several smaller expressions.

const trueBoolean = true;
const complexExpression = !(((40 / 20) === 2 && trueBoolean) || ('yes' === 'no'));

// "se" for sub-expression
const step1 = 40 / 20; // 2
const step2 = step1 === 2; // true
const step3 = trueBoolean; // true
const step4 = step2 && step3; // true
const step5 = 'yes' === 'no'; // false
const step6 = step4 || step5; // true
const step7 = !step6; // false

console.log(complexExpression); // false
console.log(step7); // false
console.log(complexExpression === step7); // true

Using the order of operations (mathematics concept, not coding concept), we can split our complex expression into pieces. I have gone from se1 to se7 to demonstrate how we separate each expression into components and then combine them back together. In this case, se7 should be equivalent to complexExpression.

In reality, if you had to write something this complex, you would probably make your expression simpler than complexExpression, but more consolidated than step1 through step7 that we did.

Summary

We covered a lot here, but if I had one thing for you to leave with, it would be this:

Remember, right of = is a JavaScript expression
A JavaScript expression can be simple like 20 > 19, or complex like 20 > 19 && 2 + 2 === 4. No matter how complex it gets, each expression resolves to a single value.
That single value is assigned to the variable on the left side of =.
Order of operations matter.

Challenges

And now, it's your turn to put your knowledge to the test. Pretty soon, we will be moving over to CodeWars for our lesson challenges, but we aren't quite there yet. Here are 5 challenges to work through before next lesson where we will be talking about JavaScript conditionals.

Challenge 1

Why doesn't this code work? Try to make it work and guess what the result will be (hint: this is a little bit of a review from last lesson).

const numberVariable = 0;

numberVariable++;
numberVariable++;
numberVariable++;

console.log(numberVariable);

Solution here

Challenge 2

Do the following two blocks of code result in the same answer? If not, which one would you recommend using and why?

const firstNumber = 20;
const secondNumber = '20';

const result = firstNumber === secondNumber;

console.log(result);

const firstNumber = 20;
const secondNumber = '20';

const result = firstNumber == secondNumber;

console.log(result);

Solution here

Challenge 3

What does expression5 evaluate to? How could you write this in a single line of code (for exercise purposes only; you would never want to combine all this in one line)?

const expression1 = 100 % 50;
const expression2 = 100 / 50;
const expression3 = expression1 < expression2;
const expression4 = expression3 && 300 + 5 === 305;
const expression5 = !expression4;

console.log(expression5);

Solution here

Challenge 4

What does result evaluate to? You might want to review the previous lesson for this one.

const myObj = {
  prop1: 'first value',
  prop2: 20
};

const myArray = [40, 50, 2];

const result = myObj.prop2 === (myArray[0] / myArray[2]);

Solution here

Challenge 5

This one is meant to be a tough challenge. You probably will need to Google this and it might take you a while to complete.

What does result evaluate to?

const myObj = {
  nestedObject1: {
    price: 100,
    quantity: 5
  },
  nestedObject2: {
    price: 150,
    quantity: 2
  }
};

const myArray = [myObj.nestedObject1, myObj.nestedObject2];

const result = (myArray[0].price * myArray[0].quantity) > (myArray[1].price * myArray[1].quantity);

Solution here

Lesson 3 - JavaScript Variables and Data Types (Fullstack developer roadmap series)

Zach Gollwitzer — Thu, 24 Dec 2020 23:18:44 +0000

I'm on YouTube

If you get tired of reading...

See this lesson on YouTube here

Introduction

Please share this series with the hashtag #fullstackroadmap and help me spread the word!

Useful series links

Series Table of Contents
Github Repository - where you'll find all the code we write in this series
YouTube Playlist
Series Overview
100 Days of Code Challenge - I highly recommend you take this on while reading this series!
My CodeWars Profile - Follow me and I'll follow you back. This is where we will do our coding challenges throughout the series!
My Twitter Profile - Where you can stay updated

Hold yourself accountable with 100 days of code

Today marks the first lesson where we actually start writing some real code. Because of this, I encourage you to take the 100 days of code challenge. This is a challenge created by Alexander Kallaway, who was a guy just like you and me trying to hold himself accountable to learning to code.

He started #100DaysOfCode on Twitter a few years back, and it has grown into a large community of people learning to code. Here are the rules:

Write code for at least 1 hour every day. If you have to wake up at 4am and get your hour in before your day job, DO IT. If you have to stay up an extra hour, DO IT.
Tweet your progress and encourage at least 2 other people doing the challenge each day. I'll leave templates for you in each post, and if you include the hashtag #fullstackroadmap, I'll do my best to like and retweet you!

Just finished my first lesson of the #fullstackroadmap on JavaScript variables and data types! #100DaysOfCode Click to tweet

We won't cover everything in JavaScript here

When learning a new coding language, there are many features that one could teach about that language. Some are extremely important while others are likely to be forgotten shortly after you learn them and never used again.

JavaScript has a lot of features. For example, there are a lot of "shorthand" ways to write JavaScript code as shown below.

// Oh hey, this is a comment because the line starts with two forward slashes.  It doesn't affect the code

let counterVariable = 1;

// Increases the variable by 1
counterVariable = counterVariable + 1;

// ALSO increases the variable by 1 (this is the shorthand version)
counterVariable++;

We could certainly try to learn ALL of these neat little features, but I don't think we should. The last thing that I want is for you to get lost in the shiny features of JavaScript and gloss over the things that really matter at the beginning.

So you're telling me we're only going to learn a portion of JavaScript?

YES.

And believe it or not, most employed developers can't claim full understanding of the JavaScript language; hence the popularity of Kyle Simpson's free book series, You Don't Know JavaScript.

While this book has been extremely helpful to my understanding of the JavaScript language, I have to be honest–I learned a lot more from it years after learning to code than I did when first learning to code. The book has an introduction to JavaScript, but in my opinion, it was written for someone who already knows JavaScript and who wants to level up.

Be sure to reference YDKJS (You Don't Know JavaScript) throughout your career, but in this full-stack series, I'm going to be keeping the technical details of how JavaScript runs behind the scenes to a minimum. This is not because I don't want you to learn how JavaScript works. This is so we can focus on things like creating web apps rather than learning everything about JavaScript prototypes and why JavaScript is technically not a class-based language. These things are important down the road, but in my opinion, create unnecessary confusion when getting started.

Just like a Finance professional rarely needs to know much more than basic Algebra, a full-stack web developer rarely needs to know more than the basics of a given programming language. The reason we code is to build useful things. And to build useful things, you don't need to be the next JavaScript wizard.

The most challenging part of becoming a full-stack web developer is not learning the intricacies of a given language but being able to clearly define your ideas, write them in code, deploy that code, and distribute your product to the people who need it most.

So let's start building.

Two important JavaScript concepts

Throughout this series, I'm going to be showing lots of example code snippets. Throughout those snippets, you might see things like this:

// This is a comment

/*
  This is also a comment, and extends 
  to multiple lines
  */

console.log("the console.log statement prints values to the console");

Comments can be written as a single line or multiple lines, and are often used to describe lines of code. These do not affect the code.

The console.log() function is built-in to the JavaScript programming language and allows us to print values to the console. Remember the "Console" from the first lesson?

Go ahead and type out the following program in the Firefox dev tools Console to get a feel for comments and console.log statements.

// This comment won't affect the console.log statement below
console.log("but this should print to the console");

Intro to Variables and Data Types

Every programming language has the concept of "variables". In my mind, a variable can be thought of as a "container" for data.

Think of variables like an Amazon warehouse. The warehouse has thousands of containers filled with various products, and it is meticulously organized so that the robots can find the products when they need to.

A computer is the same way. During the execution of a program (not before, not after), the computer constructs a "warehouse" similar to that of Amazon. It has thousands of "containers" that store different types of data, and all the while, the computer knows EXACTLY where to find each of these containers.

Before we get too detailed, let's see a couple of examples.

const yourFirstVariable = "learning to code gives you superpowers";

const yourSecondVariable = 10;

const yourThirdVariable = { name: "third variable", value: 40 };

Go ahead, open up Firefox developer tools, go to the console, and type in these variables! And if you don't know how to get to the console, go back to lesson 1 for an intro to dev tools.

Remember, each of Amazon's containers has different types of products stored in them just like each variable we declare in our code has different types of data stored in them. But before we get into those data types, let's talk about some of these symbols in the code above.

Pay attention to every "token"

Let's look at the first variable again.

const yourFirstVariable = "learning to code gives you superpowers";

If you remember from the previous lesson, we briefly talked about how our computer doesn't actually understand JavaScript; it only understands 1s and 0s. And to convert this line of code to 1s and 0s, we need to use something called a "compiler" to read through it and translate each character.

For a few minutes, we are going to think like a compiler, because in programming every character matters. Don't believe me? Try running this in the console.

const yourFirstVariable = learning to code gives you superpowers';

Notice what happened?

Look closely at this program and the one a few paragraphs above, and you'll notice that we're missing a ' character, which is causing our SyntaxError. You'll also notice that the JavaScript debugger calls it a "token", which is generally what we call an individual character in a program whether that be c, =, ;, 8, or '. To see all valid characters, you need to refer to something called an ASCII Table. These are all "tokens" and when the computer reads through your code, it is looking at every single token in a specific order.

As a beginner, you might find it intimidating that you have to pay attention to every single token of your program, but I can assure you, it is not as hard as you might think. Furthermore, a lot of the code editors that you'll be using in future lessons are pretty darn smart these days and will alert you when you've made what we call a "syntactical mistake".

So now that you know how important every "token" of your code is, let's walk through some important concepts within our line of code.

Declare, then assign

When working with variables in JavaScript (and most other languages), there are actually two steps required to create and use a variable.

Declaration of the variable
Assignment of the variable

Take a look at our line of code again. Can you tell where we declare it and where we assign it?

const yourFirstVariable = "learning to code gives you superpowers";

It's a trick question. We are actually doing both at once. But if we re-write the program a little bit differently, we might be able to see it.

// Once again, this is a comment and doesn't affect the code

// Declaration
let yourFirstVariable;

// Assignment
yourFirstVariable = "learning to code gives you superpowers";

This code does the same thing as the previous code, but declares and assigns the variable in two steps. You might also notice that instead of const, we used let. I'll explain why in a minute, but first, let's conceptualize what's going on here.

Remember our Amazon analogy? When we create a new container in the warehouse, we need to first register that container (probably with a unique ID). After we have registered the container, the Amazon robots know exactly where to find it. Now that the robots can find the container, we can place products in it!

The same concept works with programming. You first need to declare a variable so that the computer can allocate a place in memory for it to be stored. Once it has a place to be stored, you can then assign it some data.

var, let, const

Now back to the question you're probably asking. Why did we use let in the second example? To answer that, go ahead and run the following code in the console.

const yourFirstVariable;
yourFirstVariable = "learning to code gives you superpowers";

Yet another SyntaxError. If you're observant, you might have noticed that we are getting a lot of these SyntaxError errors. That's because when you write improper JavaScript, you are "syntactically incorrect" and the JavaScript debugger will feel no shame in telling you that you're wrong!

In this case, we are getting an error because there are specific ways that var, let, and const can be used in JavaScript.

Whenever you write a variable in JavaScript, you will always place one of these "reserved words" in front of your variable. Each of the following lines of code are valid.

const variable1 = 10;
let variable2 = 10;
var variable3 = 10;

The question becomes, how do I know when to use each of them?.

When to use "var"

Never.

The var keyword is actually a legacy keyword in JavaScript, and many JavaScript style guides (more on this later) advise programmers to use either let or const.

I am bringing this up because as you read through online tutorials or open-source codebases, you will surely see programs with the var keyword in them. This usually means that the code was written years ago or the programmer has not caught up with the times.

The main reason var is not used anymore is because while using it, variables can be re-declared, which caused a lot of confusion for developers in the past. I will not be getting into the details of this as they become very confusing very quickly and I don't want to distract from what we are learning here.

When to use "let"

If you expect the value of the variable to be reassigned during the program, use let.

This probably doesn't make sense yet, but consider the following example.

// Declaration
let myVariable;

// Assignment
myVariable = 2;

// Re-Assignment
myVariable = 4;

If you run this code in the console, it is perfectly valid and after running it, the value of your variable will be 4 because we "reassigned" it.

When to use "const"

If you expect the value of the variable to remain the same during the program, use const.

In all programming languages, there are "constants". These are variables that never change and are often written in all capital letters. For example, if you're writing a program to calculate the circumference of a circle, you might define a constant variable like TAX_RATE = 0.08. You know this tax rate won't change throughout your program, so you define it as a "constant".

While there are some technical differences in how the variables are stored between let and const, the true value of using them is to indicate to other programmers how certain variables are meant to be used. Let's say that I'm reading through someone's code and I see this:

// Top of the program
let count = 0;

// A bunch of code here

Without reading past the first couple lines, I know that somewhere in this program, the variable count will be re-assigned to a different value, and is NOT a constant variable. But if I saw the following code, I know that these values aren't going to change.

const TAX_RATE = 0.08;

// a bunch of code here

Now you might ask–why do you capitalize the variable here? What is the difference between taxRate and TAX_RATE? This makes no functional difference. It is purely semantic and I am about to explain why we do things like this in programming. Both of the code blocks below are functionally identical.

const TAX_RATE = 0.08;

console.log(TAX_RATE);

// Works the same as above!

const taxRate = 0.08;

console.log(taxRate);

Let's find out why in the next section.

How to write a variable

Back to our simple program:

const yourFirstVariable = "learning to code gives you superpowers";

Since we are using const, we know this variable will never be re-assigned throughout the program, but we haven't talked about the rest of the "tokens" in this line of code.

The next thing we need to discuss is the proper way to write JavaScript variables. Here are valid ways to write JS variables:

const yourFirstVariable = 10;
const your_first_variable = 10;
const YOUR_FIRST_VARIABLE = 10;
const yourfirstvariable = 10;
const YourFirstVariable = 10;

And here are invalid ways to write them:

const your First Variable = 10;
const 1stvariable = 10;
const 'yourFirstVariable' = 10;

You can remember the invalid ways to write a JavaScript variable by treating them like a Twitter hashtag. When you write a hashtag on Twitter, the word needs to be all in one piece. If there are spaces in your hashtag, Twitter only recognizes the first word.

Aside from that rule, there are only a couple "gotchas" to look out for. One not-so-obvious rule is you cannot start your variable with a number.

// This is valid
const variable1 = 10;

// This is NOT valid
const 1variable = 10;

You also cannot use certain characters in a variable such as ', but I would not spend your time trying to remember all the invalid ways to write a variable because you will catch on quickly and if you write a variable incorrectly, you will see errors in your console that will tell you what you've done wrong.

Now for the valid ways...

As you can see above, there are many valid ways to write JavaScript variables, but that doesn't mean you should use them all. Just like we use const and let to indicate to other programmers what type of variable we are dealing with, we can use these different "styles" to communicate as well.

As you learn programming, you'll come across something called a "Style Guide", which is a set of guidelines for writing code in a specific language or framework. No single style guide is more correct than another, but each company might specify certain ways to write code. For example, here is Google's JavaScript style guide while here is Airbnb's JavaScript style guide.

If you read through these, you'll notice that they each specify a way to name variables.

Both guides recommend using camelCase for naming regular variables, and the JavaScript community as a whole has adopted this convention.

If you started writing code in the Python coding language, you would see a lot of variables written in snake_case indicated by the underscores between variable words.

Some of the most common naming conventions are camelCase, UpperCamelCase (also called PascalCase), snake_case, CONSTANT_CASE, and kebab-case. Please note, kebab-case does not work with JavaScript variables, but all the rest do.

After looking at these style guides, you might be overwhelmed with the quantity of rules that these companies follow when writing their code, but I promise you, employees of Airbnb do not study the style guide for the first 2 weeks of their employment.

There are tools called "code linters" that can automatically detect when you have improperly implemented a certain style guide. These linters often work inside your code editor and give you feedback as you are writing the code. In the screenshot below, I have improperly used const, and the linter has let me know that I need to use let to declare the totalFullRounds variable.

As you write more and more code, you will catch on to some of these JavaScript conventions, and we will even set up one of these linters to help us write cleaner code!

Name your variables something meaningful

If you haven't caught this yet, you can use anything you want as a variable name. These are all valid:

const q = 20;
const someNumberThatRepresentsTheNumberOfUsersInMyDatabase = 20;
const numberOfUsers = 20;

While you could use any of these, can you guess which one is best?

Of course, numberOfUsers is best because it is short enough to write quickly, but long enough to describe what it represents. It is often tempting to shorten your variables like q, but your future self will thank you when you have to read through your old code and figure out what it does.

I would much rather see you write longer variables that are descriptive than shorter variables that will leave you scratching your head trying to remember what they were for.

Left vs. Right - Know the difference

Our program, once again:

const yourFirstVariable = "learning to code gives you superpowers";

So far, we have covered everything on the left side of the "equals" sign. To write a variable, you need to use either let or const followed by 1 space and a variable.

Before we jump to the other side of =, we need to understand how variables behave on both sides of it.

The left side of the equals sign

Everything left of = will always be a variable, and will always be the "container" that the values are stored in.

Please note that we are talking about =, NOT == or ===. These will come later in our series, but make a HUGE difference in how the left side behaves.

The right side of the equals sign

Everything right of = represents the value that will be stored in the "container" (left of =).

Going back to our Amazon analogy, think of the left side of = as the storage container and the right side of = as the products that go in the container.

The right side of = is a bit trickier than the left side because there are many valid things you can put there. While the only thing you can put left of = is a variable, you can put all of the following things right of =.

const variable1 = 10;
const variable2 = variable1;
const variable3 = "Zach";
const variable4 = {
  variableType: "object",
  variableValue: "some value",
};
const variable5 = (function () {
  return "Hello, my name is ";
})();
const variable6 = variable5 + variable3;

Go ahead, paste the above code in your dev tools Console. Now, write the following line:

console.log(variable6);

It prints "Hello, my name is Zach" because I have actually combined two variables into one.

Don't worry if you can't understand the above code; it is a bit advanced and we will get there eventually. Let's now dive into the different data types in JavaScript.

The semicolon at the end

You might have noticed that at the end of each line, I have been putting a ;. This represents the completion of a JavaScript expression.

You can technically run JavaScript without a semi-colon at the end of each line, but it is best practice to put it there and will keep you from experiencing odd behaviors caused by omitting it.

Try running the following code in your browser console:

const variable1 = 10; const variable2 = 20;

console.log(variable1 + variable2);

Works right? Now try this:

const variable1 = 10 const variable2 = 20;

console.log(variable1 + variable2);

It throws an error because you have placed two variable assignments on the same line without telling the compiler when the first assignment ends and when the second begins. This is why the semi-colon matters.

Please note that it is NOT correct to say "every line ends with a semicolon". The following JavaScript program is syntactically correct:

const myObject = {
  property1: "somevalue",
  property2: "anothervalue",
};

To the JavaScript compiler, this is technically one line. You could have also written it like this:

const myObject = { property1: "somevalue", property2: "anothervalue" };

JavaScript Data Types

Teaching the concept of "data types" with JavaScript is often a difficult task because JavaScript is considered a "dynamically typed" coding language.

Below is some JavaScript code:

const variable1 = 10;
const variable2 = "some value";
const variable3 = false;

And below, I have re-written the above code in TypeScript, which is a superset of JavaScript that we may look at (still deciding on this) much later in this series. When I say "superset", I'm referring to the fact that all JavaScript is valid TypeScript, but not all TypeScript is valid JavaScript (and must be "transpiled" into JavaScript to run).

const variable1: number = 10;
const variable2: string = "some value";
const variable3: boolean = false;

Notice something here?

In TypeScript, we are specifying what type of value we are assigning to the variable, while in JavaScript, we just assign it.

TypeScript is "statically typed" while JavaScript is "dynamically typed". They don't function any differently, but with statically typed languages like TypeScript, Java, C, and C++, we are being much more explicit with our "type checking".

Since JavaScript is dynamically typed, you might think, "I don't need to worry about data types!". In reality, it is quite the opposite. Because JS is dynamically typed, it is critical that you are paying attention to what types of data you are assigning to your variables and returning from your functions. Many developers prefer to write TypeScript rather than JavaScript (including myself) for this very reason, but we can't start writing TypeScript until we know how to write JavaScript!

Strings

The first type of data is a string. We can write strings in JavaScript in two ways:

const singleQuoteString = 'this is a string';
const doubleQuoteString = "this is a string";

Which one is better? Neither. They both work just fine. But as of the time of writing, most JavaScript developers would recommend using single quotes, and most "Style Guides" (as we talked about earlier) will enforce single quotes for string variables.

Anything that you put between either single quotes '' or double quotes "" will be treated as a string data type. You can even put other characters and numbers in there.

const stringVariable1 = "I am a string with a number: 10";

// This is still a string, even though it stores a number in it
const stringVariable2 = "20";

Numbers

Next, we have the number type. This is assigned without any special characters around it.

const numberVariable = 10;

The only thing that you may be tempted to do that is incorrect is this:

const invalidNumber = 10,000;

By placing the , in the number, you have made a syntax error:

Booleans

A boolean value is pretty simple to understand–it is either true or false. There are no other possible values.

const trueValue = true;
const falseValue = false;

Arrays

You can think of an array as a "list" of values. In JavaScript, you can assign any data type as an array value. An array is indicated by brackets and comma-separated values.

const numbersArray = [10, 20, 30, 40];

const stringArray = ['red', 'green', 'blue'];

const booleanArray = [true, true, false];

const mixedArray = [true, 'red', 10];

The main concept you must understand with arrays is "indexing". Each value of an array has a specific "index", and the index values always start at 0. For example, in the following array, the value red is at index 0, the value green is at index 1, and the value blue is at index 2.

// Indexes             0       1        2
const stringArray = ['red', 'green', 'blue'];

If you wanted to print a single value of this array, you would reference the appropriate index. We will get into this more later in the series, but this is how you would print the value red from the array:

const stringArray = ['red', 'green', 'blue'];

const singleArrayValue = stringArray[0];

console.log(singleArrayValue);

You could have also done this:

const stringArray = ['red', 'green', 'blue'];

console.log(stringArray[0]);

Objects

Objects are what JavaScript is built on. You might hear the phrase that in JavaScript, "everything is an object". And while I don't want to get into the subtleties of this statement now, I will say that you'll be working with objects quite often.

You can think of objects as "complex containers". If we go back to the Amazon analogy, you might imagine a container that has containers within it, and in each container, there are Amazon products waiting to be shipped. Let's take a look at a simple object:

const simpleObject = { myVariable: 'some value' };

simpleObject is the variable we are assigning the object to. myVariable is one "property" of the object, and some value is the value of that property.

If we wanted to access the value of this property, we would use something called "dot notation":

const simpleObject = { myVariable: 'some value' };

const valueOfProperty = simpleObject.myVariable;

console.log(valueOfProperty);

Think of it like this–the myVariable property is a part of the simpleObject object, and to access it, we need to first name the object that contains the property, and then the property we want to retrieve, or simpleObject.myVariable.

You can also access the values of properties similar to how we did with arrays, but in this case, we need to know the property name to access it.

const simpleObject = { myVariable: 'some value' };

// Using dot notation to access property value
console.log(simpleObject.myVariable);

// Using bracket notation to access property value
console.log(simpleObject['myVariable']);

Notice how I have passed in the string version of my object property to access the value of that property. This is functionally equivalent to using dot notation.

Objects can have nested properties too. For example, take a look at this object.

const nestedObject = {
  layerOne: {
    layerTwo: {
      layerThree: {
        layerFour: {
          layerFive: {
            theValueWeWant: 'here is my value'
          }
        }
      }
    }
  }
};

To get theValueWeWant, we would use "dot notation" to get it using the expression, nestedObject.layerOne.layerTwo.layerThree.layerFour.layerFive.theValueWeWant. Go ahead, try running the code below in the console.

const nestedObject = {
  layerOne: {
    layerTwo: {
      layerThree: {
        layerFour: {
          layerFive: {
            theValueWeWant: 'here is my value'
          }
        }
      }
    }
  }
};

console.log(nestedObject.layerOne.layerTwo.layerThree.layerFour.layerFive.theValueWeWant);

There are far more data types that you can assign to properties of objects, but we will not go into them at this time.

Also, you might notice how the names of the variables are completely arbitrary. Properties of objects are written just like a normal variable.

Functions

While we have a headline here, I will not be covering the concept of JavaScript functions in this post. I plan to cover functions and many other JavaScript basics in future posts of this series!

Summary and why variables matter

At this point, we have only covered how to declare and assign a JavaScript variable and what types of data can be assigned to a variable.

With this knowledge, there is actually not much that we can do as programmers. Variables are critical to every program, but without things like operators, if-then statements, loops, and functions, our variables are no use to us.

We will soon get to a point where we can write useful code, but for now, just remember the following things.

The first step is to declare a variable, then assign it a value (although we often do it in one step)
Use let and const, NOT var to declare and assign variables
The left side of = represents the variable that will hold the value you are assigning
There are many ways to write a JavaScript variable, but camelCase is the preferred way
There are 5 main types of variables–strings, numbers, booleans, arrays, and objects
A semicolon represents the end of a JavaScript expression

Next Steps

Be sure to get on my email list to receive updates when I post lessons in the future!
Tweet one thing you learned in this tutorial with the hashtags #fullstackroadmap and #100DaysOfCode

Just finished my first lesson of the #fullstackroadmap on JavaScript variables and data types! #100DaysOfCode Click to tweet

Your Homework

Challenge 1

In the dev tools console, figure out how to do the following (use Google to help):

Create a boolean variable called myBoolean and set it to true.
Create a string variable called myString and set it to hello world.
Create a number variable called firstNumber and set it equal to 20.
Create another number variable called secondNumber and set it equal to 40.
Re-assign secondNumber and set it equal to 80.
Create an array called myArray and put myBoolean at index 0, and myString at index 1.
Create an object called myObject and assign myArray to a property called firstProperty, and the sum of firstNumber and secondNumber to a property called sumProperty (hint: we didn't cover how to do this here).
Print myObject to the console.
Print the sumProperty of myObject to the console.
Print the value at index 1 of firstProperty.

Solution found here

Challenge 2

There are three things wrong with this code. Find them and explain why they are wrong.

const some Number = 20;

someNumber = 50

Solution found here.

Challenge 3

What does resultVariable equal? What data type is it?

We haven't covered everything here, but research this for a bit and see what you can find.

const variable1 = 20;
const variable2 = '40';

const resultVariable = variable1 + variable2;

console.log(resultVariable);

Solution found here.

Challenge 4

Why is this code invalid? Edit this until it is valid.

const objectVariable = {
  property1: 'i am property 1';
  property2: 'i am property 2';
  property3: [20, 30, 40];
};

console.log(objectVariable.property3[2]);

Solution found here

Challenge 5

Why does this code not work? Edit until it works.

const myArray = [20, 30, 40];

console.log(myArray[3]);

Solution found here

Lesson 2: What is JavaScript and How is it Used? #fullstackroadmap

Zach Gollwitzer — Thu, 17 Dec 2020 23:51:31 +0000

I'm on YouTube

If you get tired of reading...

Here is the YouTube version of this lesson.

Introduction

Please share this series with the hashtag #fullstackroadmap and help me spread the word!

Useful series links

Series Table of Contents
Github Repository - where you'll find all the code we write in this series
YouTube Playlist
Series Overview
100 Days of Code Challenge - I highly recommend you take this on while reading this series!
My CodeWars Profile - Follow me and I'll follow you back. This is where we will do our coding challenges throughout the series!
My Twitter Profile - Where you can stay updated

How to read this lesson

Unlike many of the posts I write, this one is going to be in the form of a detailed Q&A session. I have put the easier questions at the beginning and the harder ones at the end for the dedicated students out there.

What is the point of this lesson?

Context.

In just a few lessons, we will be talking about variables, data types, functions, loops, and much more, so it is important to get the 10,000 foot view of JavaScript before diving into those details.

What is JavaScript?

JavaScript is a programming language. It is unique to other languages like C++, Python, PHP, and others because it is the only language that can run in web browsers (although WASM will change that in the future, but no need to worry about it now).

More specifically, JavaScript is

What is a programming language? Well... That's a bit of a loaded question, so I've saved it for the end of this lesson (scroll down).

What can you do with JavaScript?

If you asked this 20 years ago, you might have been laughed at. Since then, JavaScript has become capable of building complex web applications like Facebook. Here are some other things you can do with JavaScript.

Run complex machine learning models with TensorFlow.js
Build Desktop applications like Visual Studio Code (the code editor I am writing this post in right now) with the Electron framework
Build complex, high-performing web apps like YouTube, Facebook, and Reddit using front-end frameworks like React, Angular, or Vue.
Convert your web apps into Mobile apps without changing your code using frameworks like ReactNative for React apps and NativeScript for Angular and Vue apps.

Speaking of frameworks...

What is a JavaScript Framework?

A "framework" is nothing more than an abstraction on top of a specific language. In JavaScript, you'll most commonly see front-end development frameworks like React, Angular, and Vue, but frameworks come in all shapes and sizes. There are also back-end frameworks for JavaScript like ExpressJS, or even more abstracted and advanced–NestJS.

When thinking about frameworks, just remember that the goal of a framework is to enable the developer to accomplish something in less time.

You could create Facebook without a framework, but it would take infinitely longer to do, and would be infinitely harder to maintain over the years. Not to mention, smart developers working at Facebook would inevitably get frustrated with how tedious their work was and create a framework to fix it (cough cough, that's how React was built, which is the framework Facebook currently uses).

So in summary, all of these things that we can do with JavaScript these days are enabled by frameworks that have been built over the years.

Is JavaScript similar to Java?

You'll read it all over the internet. Java is to JavaScript as car is to carpet.

While JavaScript was inspired by Java and was originally meant to be a "companion" to Java, the two languages are VERY different.

Here's some Java code.

class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

And here's some JavaScript code.

class HelloWorld {
  main() {
    console.log("Hello, World!");
  }
}

These programs do the same thing, but are very different looking.

Is JavaScript better than Python?

The answer to this question is "it depends", which is the answer I would give to any similar question comparing two languages.

If you want to build a complex web app and hire people to work on it and maintain it, I would argue that JavaScript is a better language to write it in. Does this mean that JavaScript performs better? Not necessarily. Does this mean JavaScript is easier to understand? Ehh, Python is WAY easier. The reason I say this is because JavaScript has a large web development ecosystem built around it that Python is slightly lacking in. In other words, the tools required for the job are more mature in the JS web dev ecosystem than the Python web dev ecosystem. You certainly could build a web app using Python (although you still need JavaScript for the front-end), but I would generally not recommend it.

But what if I wanted to build an image recognition API that uses machine learning to grant security access to employees walking into a building? I'd probably go with Python here. The Data Science and Machine Learning ecosystem is primarily centered around the Python programming language and various Python frameworks like Scikit-Learn, Tensorflow, and PyTorch. You could build machine learning apps with JavaScript using TensorflowJS, but overall, the Python communities online (currently) have more collective resources and knowledge about Machine Learning than the JavaScript communities do (although this certainly could evolve and change).

Is JavaScript the same as ECMAScript?

Nope, JavaScript is an implementation of an ECMAScript standard.

This will be easier to discuss with some context, so let's look at a couple examples of "Standards Organizations".

Ever seen a date like this?

2020-12-15T15:17:19.417Z

This is an ISO-8601 formatted datetime represented in UTC time.

The previous sentence has two standards involved.

First, we have the ISO-8601 standard as described by an organization called the International Organization for Standardization, and is a "standardized" way to format a datetime. You can even see this implemented in JavaScript.

const myDate = new Date();
const myDateISO8601 = myDate.toISOSTring();

console.log(myDateISO8601);

Use what you learned in the prior lesson of this series to run this program in the dev tools console!

Second, I mentioned that this date was in "UTC" time, which is a timezone described by a standards organization called the International Telecommunications Union.

How does this have anything to do with ECMAScript?

Organizations like the ones mentioned above are similar to the ECMA International organization which defines the standards for "ECMAScript" programming languages.

Just like an ISO-8601 date is a standard implemented by various programming languages and computers, ECMAScript is a standard implemented by JavaScript (and a few other less popular programming languages like ActionScript and JScript).

Why do we need a standard like ECMAScript?

When I first started learning web development, I had no idea how many standards organizations existed. But why do we have them?

In the case of ECMAScript, this standard is important primarily for browser compatibility. Remember, a web browser is just another computer application, and thus, must be programmed to support various features in JavaScript. The JavaScript language is constantly evolving, and in order for all the browser developers to stay on the same page and make sure that their browser will support these new features, there needs to be a centralized standard to follow.

If ECMAScript did not exist, it would be near impossible for all the different browsers (Chrome, Firefox, Safari, Edge, Brave, and last but very least, Internet Explorer) to stay compatible with new JavaScript features.

Can Learning JavaScript Get You a Job?

If you've read the prior questions, you can probably guess that YES, JavaScript is a very employable coding language.

That said, knowing JavaScript alone will not get you there. You need to learn various JavaScript frameworks like React and Angular used at top companies like Facebook and Google respectively.

Heck, JavaScript is actually the most widely used programming language as of 2020 according to StackOverflow.

Is HTML and CSS Required to Write Javascript?

Yes and no. It depends on where you are writing the JavaScript (which we will talk about later in this post).

In the Browser

The purpose of JavaScript run in the browser is to modify HTML and CSS via the DOM (Document Object Model). Again, we haven't talked about the DOM yet, but will get there soon in this series.

For example, let's say you have a button in your web app that allows you to save your profile image and return to the main screen.

Here is what this button would look like without CSS and without JavaScript.

And here is what this button would look like with CSS, but without JavaScript.

Wait a second... Isn't that the same as the original screenshot? Yes, it is. And that is because JavaScript has nothing to do with the look and feel of a website, but rather the "brains" of the website. If I created this button with just HTML and CSS, when the user clicks the button, their profile will not save. And this is where JavaScript comes to the rescue.

My app has JavaScript written that will listen for a user's click, and once clicked, will grab all the data from the profile page and send it as an API request to the back-end server, which will update the profile data in the database.

As you can see, when talking about JavaScript in the web browser, it must work together with HTML and CSS to create a functional user experience. Without HTML, you have nothing on your web page. Without CSS, you have an ugly web app. And without JavaScript, you have a webpage that is 100% static (i.e. you can't interact with it).

In NodeJS

If you are writing JavaScript on the back-end, HTML and CSS are not required.

Rather than playing nicely with its friends, HTML and CSS, back-end JavaScript will be hanging out with the database, various JS libraries, and APIs. Once again, more on this later in the series.

What is a programming language?

At the beginning of this post, I mentioned that JavaScript is a programming language, but spared you the details until now. If you want to stop reading here, that is fine, but I strongly believe that as a programmer, understanding the following concepts at least at a high-level is important in your full-stack web development career.

I'm generalizing a LOT here, but a programming language is a group of symbols (often called "tokens") that when combined together in a VERY specific way, can be translated into the 1s and 0s that a computer is able to run.

Think about it like this–we have many different spoken languages, and not all languages make sense to all people. If you started speaking Portuguese to me, my brain would simply not be able to process the various words/phrases/symbols that come with this unique language. But if you spoke English to me, my brain is very familiar with the "rules" required to translate all the words/phrases/symbols.

But there is one thing that is common among all people–body language. No matter what country you are from, although I cannot speak your language, I can certainly tell whether you are in distress, whether you are happy, or whether you are excited.

Bring it back to computers now. Every computer has a common language (i.e. "body language"), and that is 1s and 0s (synonymous with "binary" or "machine code").

Computers can't speak JavaScript. Computers can't speak Python. Computers can't speak C++. But if we write a program called a "compiler" to convert those symbols to 1s and 0s, we can translate each of these languages into the "body language" (i.e. 1s and 0s) that all computers can understand.

The remainder of this section is optional reading. To me, it is extremely interesting, but if you are trying to learn web development quickly and get a job ASAP, I suggest avoiding the rabbit hole that the next paragraph will take you down.

My explanation here is extremely simplified, and there are obviously a lot more steps and nuances involved in the process of converting a language like JavaScript into the 1s and 0s that the computer can read. To fully cover this subject, we would have to get into a discussion about syntax analysis (part 1 of the compilation process which includes lexical analysis, parse trees, recursive descent algorithms, etc.) and code generation (part 2 of the compilation process which deals with symbol tables and other fun stuff). Writing a compiler also depends on your target platform; whether you're writing it for a virtual machine or a specific CPU spec. And finally, you have to talk about the process of how all this happens. Does the code get compiled dynamically like JavaScript? Or does it get compiled manually like C, Go, or Rust? If it is compiled "on the fly" like JavaScript, how can we optimize this process to be almost as fast as manual compilation (hint: JIT compilation).

If the prior paragraph interested you despite you not understanding it one bit, I suggest two resources.

If you want a hands-on and practical understanding of how code is parsed and compiled (I'm talking SUPER detailed stuff here), check out the book Elements of Computing Systems. You have been warned, this will be a LARGE detour from your full-stack web dev journey, but I personally went on this detour and while it delayed my web dev journey, I came out of it with some serious knowledge that I was pretty pumped about.
If you are interested in these low-level topics, but don't care to get your hands dirty and see them in action, I recommend reading the book Code by Charles Petzold. This is no easy read, but will not be as large of a detour as the first option here.

Where does JavaScript code run? (optional)

When we talk about where a programming language runs, we call it a "runtime". JavaScript has two primary "runtimes":

In the browser
In NodeJS

Again, this gets into the topic of compilers (mentioned in the previous section), so I will keep it brief and high-level.

You know how I mentioned in the previous section that every coding language has a different compiler written for it? Well this is where that comes into play. When running JavaScript in the Google Chrome browser, we need something that will translate that code into machine languages (1s and 0s) that our computer (which runs the browser) can execute. To do this, Chrome uses something called the V8 Engine.

Since we are using Firefox for this full-stack series, I'll mention that unlike Google Chrome, Firefox uses a different JavaScript Engine called SpiderMonkey, which was actually the original JavaScript engine used back in the days of the NetScape browser (side note - if you want an entertaining podcast to listen to, check out Browser Wars).

And for NodeJS? Well, this is a slightly different runtime because it allows JavaScript to run completely separate from a web browser. Nevertheless, NodeJS actually uses the V8 Engine just like Google Chrome does to compile and run JavaScript. NodeJS is written in C++ and leverages the V8 Engine internally. As you might guess, the maintainers of the NodeJS project and the V8 Engine project have become close colleagues over the years considering how popular NodeJS has become.

Next Steps

You are officially two lessons down in the full-stack roadmap series, and we still haven't learned how to write JavaScript. Bummer.

But... I promise you, the context you are getting in these first couple lessons will help you tremendously along the way, so stick with it!

Be sure to get on my email list to receive updates when I post lessons in the future!

Lesson 1: Your First JavaScript Program (Fullstack developer roadmap series)

Zach Gollwitzer — Mon, 14 Dec 2020 01:15:25 +0000

I'm on YouTube

If you get tired of reading...

Here is the YouTube version of this lesson.

Introduction

Please share this series with the hashtag #fullstackroadmap and help me spread the word!

Useful series links

Series Table of Contents
Github Repository - where you'll find all the code we write in this series
YouTube Playlist
Series Overview
100 Days of Code Challenge - I highly recommend you take this on while reading this series!
My CodeWars Profile - Follow me and I'll follow you back. This is where we will do our coding challenges throughout the series!
My Twitter Profile - Where you can stay updated

Where do we start?

If you're reading this, you've most likely never written a line of code in your life, but want to learn. There are about a hundred different ways that we could get you on your feet and get started, but I think one of the best ways to get started is by seeing what's possible with very minimal effort.

As with anything new, you will have a million questions floating through your head. If you feel lost as we go through this, that's okay. You should. But trust me when I say that I got you--while things may not seem connected early on, I'll bring this stuff full circle for you and hopefully turn you into a full-stack web developer.

Browser Devtools

We start our journey in a place that you have probably been close to, but have never seen. If you're a Stranger Things fan, we're about to enter the world of the "upside-down".

To start, you will need to download the Firefox web browser to your computer. For the sake of this tutorial, it is best that we are all looking at the same thing.

Why Firefox?

This tutorial will work in any web browser (they all have their own developer tools), but we are using Firefox because their Dev tools are arguably the easiest to navigate and most helpful to beginners. And speaking of Dev tools... What are those anyway?

Glad you asked. You are going to get really familiar with these "dev tools" over the next several months because they are built-in tools included with any web browser that allows developers to see what is going on behind the scenes with their web applications; hence dev (developer) tools. To get to them, right-click anywhere in your browser and select the "Inspect" option.

From this view, there is a lot going on. Before we write our first program, I want to introduce some of the high-level things that these developer tools can help us do.

Inspector

The inspector (the default view from the GIF above) is probably the most frequented area of these tools for most developers. This is where you will inspect the HTML and CSS (don't worry, we will learn this eventually) displayed on the webpage. You can also make changes to the HTML and CSS to see what your webpage would look like before you actually make the change in your code. In other words, any changes you make in dev tools will NOT affect your actual webpage; they are temporary. Because we are making temporary edits, you can actually change the look and feel of ANY website; even if you can't edit the code behind it. But remember, nobody else will see this because it is a local, temporary change that will be overwritten on your next browser refresh.

When we get to the lessons on the Document Object Model (DOM) and the Box Model in our HTML and CSS section of the series, you will learn a lot more about this area of dev tools.

Console

You'll also spend a large amount of your time working in the console. The console is actually called a "REPL", which means read, evaluate, print, loop. Don't worry too much about this definition now. Instead, just remember that the console is primarily good for two things:

Allows you to write JavaScript code
Allows you to modify the DOM (Document Object Model), which we haven't covered yet, but will get to.

Below is an example of me demonstrating both of these ideas in the console.

As you can see, there is a lot that we can do in the console, and we will be spending a lot of time here for the next several lessons.

Network

As a web developer, you will use the network tab quite frequently, but we will not get into the details of it for quite some time here. The network tab allows you to see the "resources" that are being transferred over the network and loaded in your webpage.

For example, if I wanted to see how long it took the webpage to load the main image, what cookies got set when it was loaded, or even how large the image was, I could go to the Network tab (shown above), select "Images", and then click on the image in question.

Again, don't worry about this too much now, but know that we will be working with this later in the series.

Storage

The storage tool is yet another common thing you'll be using as a web developer, but like the network tab, we will not get to it for some time. This is also called the "Application" tab if you are using Google Chrome Dev Tools.

While most data on a web page is stored in a database and then retrieved via API calls, some data can actually be stored within the user's browser for later retrieval. When you visit websites and are asked to accept the Cookie agreement, this is what they are referring to.

Every browser like Firefox has the capability of storing web cookies and other data, which is useful for tracking user behavior (cough, Facebook), authentication, and several other things.

Like the Network tab, don't worry about this for now. Nevertheless, here is a quick view of me inspecting the cookies that Google has set in my browser.

Most of the time, the values stored here won't mean much to you if you're looking from the outside-in. But if you are actually developing a web app, this area can become very useful as we will see later.

All Other Dev Tools

You will see several other tools such as the debugger, style editor, performance, and accessibility, but I am leaving them off here because you won't need them starting out, and quite honestly, you may never use them.

Your First JavaScript Program

If you are reading this, you probably haven't written a lot of code in your life. I don't want to turn this series into a book, but rather an interactive, results-based course. For that reason, even if you don't understand the code we are about to write, I want to get you a quick win here and show you what it is like to write code.

While you can copy and paste the code snippets, I suggest typing them in line by line to get a feel for the console.

In this JS program, we will be changing the background of Google's homepage every time we click the screen.

Here is what it looks like.

// This is a JavaScript comment.  It doesn't affect the code at all

// Here, we are selecting the <body></body> HTML tag
const htmlBody = document.querySelector("body");

// This is a function
const randomClickFunction = function () {
  // This is an array of color codes.
  const colors = ["#002942", "#0CA7DB", "#F56C05", "#DB3E00", "purple"];

  // This will calculate a random "index" that we can use to select a color in the array
  const randomIndex = Math.floor(Math.random() * colors.length);

  // We are selecting a single value from our "colors" array above
  const randomColor = colors[randomIndex];

  // We are setting the webpage background our random color
  htmlBody.style.backgroundColor = randomColor;

  // We are printing a message to the console
  console.log("The user clicked and turned the background" + randomColor + "!");
};

// This sets an "event listener" which "listens" for click events on the webpage
htmlBody.onclick = randomClickFunction;

And here is what it does.

A few comments on this program

To wrap it up for this lesson, I want to point out some things about what we just did. I'm not going to be explaining every detail of how this program works because we will be diving into the JavaScript programming language in detail over the next several lessons in the series.

The purpose of writing this program was to demonstrate how you can run real code without installing fancy software or writing commands on the command line.

Be sure to read through the comments that I placed in the code above. Everything we write after the // character is considered a comment in JavaScript. The commenting syntax will differ between languages. For example, to make a comment in the Python programming language, you would use # rather than //.
Notice how in my colors variable, I have several "hex codes", but I can also specify a plaintext color such as "purple". These are all valid CSS values (more to come later).
I would consider this code to be at the intermediate level of difficulty. It took me several months of writing code before I could write something like this on my own, so don't worry if it doesn't make any sense!

Where you write the code matters!

There is a very good reason why we are using the Firefox developer tools, and specifically, the console. In order to run JavaScript code, you need to have a tool that "compiles" the JavaScript programming language. This compiler will look at the code that we wrote above and convert it to the 1s and 0s that the computer you are working at can read and understand.

We may touch on some of these low-level details such as "compilation" throughout the series, but when talking about 1s and 0s, we are dipping into the realm of Computer Science, which is very different from web development. Computer Science is what enables web development, but not every computer scientist will know how to develop on the web. You don't need to be an accomplished chef to work at Chipotle, but without the work of talented chefs, there would be no Chipotle in existence.

We could have written this code in a code/text editor, but this would have required us to perform several additional steps to get the code compiled and running smoothly in the browser. By using the Firefox console, we are able to write JavaScript code without any setup.

Writing code in the Firefox browser console is easy for starters, but a very inefficient place to write large amounts of code. Eventually, we will move away from this in favor of a more efficient code editor, but this is a great place to learn the basics.

Next Steps

This concludes lesson #1 of the full-stack developer series.

Be sure to get on my email list to receive updates when I post lessons in the future!

Go to prior lesson

Go to next lesson

Optional Challenge

If you're looking for a way to practice what we've learned, here's your challenge:

Using only this page and this page, see if you can figure out how to print a random number between 0-100 to the console in the Firefox developer tools.

Fullstack Developer Series - Learn to Code in 2021 and Beyond

Zach Gollwitzer — Mon, 14 Dec 2020 01:12:10 +0000

Welcome to my free series on learning to code. Through this free series, you will go from zero experience to deploying your first full-stack web application. Along the way, I'll teach you the essential web development concepts needed for 2021 and beyond.

Please share this series with the hashtag #fullstackroadmap and help me spread the word!

What are we building?

Update (3/23/21): When I first created this series, I said that we were going to create a personal blog and content management system, but then I realized how boring that is. Instead, we will be building an E-Commerce application with Stripe integration.

By the end of this course, you will have a fully functioning app that you can sell real products on.

No, it won't be as good as Shopify or WooCommerce. There is a reason these solutions dominate the market–they have a team of developers and have been improved upon for years.

While our solution won't be world-changing, building an E-Commerce website is one of the best ways to learn all the concepts of full-stack web development AND it will be good enough for you to sell your own products or courses if that's something you're interested in!

Where I will be updating this course

All updates to this series will be made on my Github repository.

If you don't have an account on Github, create one now. You need to do this to follow along with this series, but this will also be the account that employers will look at when you are interviewing for jobs (so make sure your username is professional).

Once you have created your account, go to my series repository and click the star so that you can find it easily later.

Who is this for?

This series is perfect for you if...

You have never written a line of code in your life, but want to learn what coding is all about
You are just starting your journey to becoming a full-stack JavaScript developer but need a roadmap to guide you
You have some experience with front or back-end web development but need to brush up on your skills

You might ask, how could this series be for all of these varying skillsets?

Well, my intention with the series is to go in sequential order from the most beginner topics to even some advanced web development topics, which means you can jump into the series according to where you are at in your personal journey!

What skills will I have at the end?

IMPORTANT!!

Let's be very clear. This series will teach you how to code and will teach you the discipline of web development.

In other words, by the end of the series, you will know how to code in JavaScript, and you will know how to create web (not mobile) applications such as Facebook, YouTube, Quickbooks, You Need a Budget, or even my own app, Eagle Eye Golf Performance.

Since this series will teach you how to code (which is very transferable to other disciplines), here are the disciplines that we will NOT cover in this series:

How to code IOS or Android apps
Data science, AI, and Machine Learning
Advanced DevOps (we will cover the basics though)
How to code in languages other than JavaScript (although we will explore a few others to give you some exposure throughout the course)

What topics will I learn in this series?

In this series, you will learn the following:

How to code (we will use JavaScript, and here's why)
General web development concepts (not specific to any language or framework)
Exposure to various web frameworks without diving too deep into any

A detailed outline can be found at the bottom of this post.

How can I ask questions?

While I may not be able to respond immediately, please follow this template on my Github repository to raise your questions. You will need a Github account to do this.

Why are you excluding certain technologies here?

When I first learned to code, I read through roadmaps like this one which are great, but extremely intimidating. Not only that, but in hindsight, I know that these roadmaps are unrealistic for someone starting out. I've been coding almost every day for over 4 years, and I haven't even covered all the topics you might find in these roadmaps. They are great for seeing the landscape ahead, but not so great for getting yourself started.

Because of this, I have chosen specific technologies for you to learn throughout this series that I think will make you the most versatile (and hireable) developer possible. We won't cover everything out there, but we will learn modern technologies that real companies use.

For example, when we get to the part of the course where we learn about web hosting for our app, there are TONS of options. We could use AWS, Azure, Linode, Digital Ocean, Heroku, and many more. But in this series, we will be using Digital Ocean because it is cheap, has a simple interface, and will teach you the first principles of hosting a web app that can be applied to any other hosting company. Aka, you'll be learning versatile skills here without having to make a choice yourself.

After going through this series, you will explore MANY MANY more technologies, so don't worry about covering them all now. Right now, the goal is to learn web development, and analysis paralysis of "what tool should I use?" shouldn't get in the way of that.

Additional Q&A

Where can I take this course?

I will be posting on my blog, Dev, Medium, and YouTube. Below are the relevant links to find the series.

Why I chose JavaScript

It's nearly 2021, and according to the StackOverflow developer survey, JavaScript is the most widely used programming language AND happens to be the language I'm most proficient in. Here are some additional reasons why JavaScript is a good choice for us.

JavaScript powers the web, and will for years into the future
JavaScript can be used on both the front-end and the back-end (more on this here). This is important because we only have to learn one language to build full-stack web applications rather than two.
JavaScript is the only true programming language that can be used in the browser, so you pretty much have to learn it no matter what (there is a nuance here though--with the introduction of WASM, you will be able to write non-JavaScript languages in the browser, but this is in its infancy and not something you will be learning at the beginning of your journey)

Why is this free?

I'll be honest, this is free because I don't have the time (I work a full-time job and do this on the side) to sit down and craft together a complete training course from start to finish, record it, edit it, market it, and market it some more. That said, my intention is to provide as good, if not a better quality series for free than most paid training courses. I do plan to sell courses in the future, but I am very passionate about teaching this subject and think everyone should have the opportunity to learn to code for free.

I genuinely think that if you go through this series, you will have the required skills to get a job as a full-stack JavaScript web developer.

Detailed Series Outline

Please note that this is an evolving outline. If there are essential web development topics that I have missed, please raise an issue on Github and I will consider adding it.

Also, please note that the actual series may not follow this outline's sequence, but will cover all of the topics at some point.

Part 1: Coding Basics

Projects

30+ JavaScript Code Challenges (mostly on CodeWars)

Topics

Write your first JavaScript program
Introduction to JavaScript (what is it, how it is used, etc.)
Browser Developer Tools
How to read Documentation (MDN - Mozilla Developer Network)
Variables and Data Types
Operators (arithmetic, comparison, logical, etc.)
Conditional Statements (if, else-if, switch/case)
Loops
Functions (plus intro to "callback" functions)
Built-in JavaScript Objects
- String methods
- Array methods
- Regular Expressions
- Math Object
- Date Object
- Error Object (and basic error handling)

Part 2: The Basics of Front-End Development

Projects

Topics

HTML Crash Course
The "DOM" (Document Object Model)
CSS Crash Course
CSS Flexbox
CSS Grid

Part 3: Basics of Back-End Development

Projects

E-Commerce App API

Topics

Terminal Basics
Git Basics (Version Control)
NodeJS Crash Course
Introduction to Package Management with NPM
Express Crash Course
Introduction to PostgreSQL Database

Part 4: E-Commerce App from Scratch (React, PostgreSQL, Express)

This part of the course will be a series of videos that will allow us to apply our skills learned throughout the course to build an E-Commerce application from scratch!

Part 5: Deployment, Testing, and CI/CD Workflows

Introduction to Digital Ocean and VPS (Virtual Private Servers)
Introduction to Nginx
Testing your app with Jest
CI / CD Introduction

Next Steps

This concludes the introduction to the full-stack developer series.

Be sure to get on my email list to receive updates when I post lessons in the future!

Go to next lesson