If you get tired of reading...
Here is the YouTube version of this lesson.
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.
Please share this series with the hashtag #fullstackroadmap and help me spread the word!
- 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
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.
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.
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.
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.
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 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.
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.
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.
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.
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.
And here is what it does.
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
- Notice how in my
colorsvariable, 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!
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.
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.
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!
If you're looking for a way to practice what we've learned, here's your challenge: