I'm on YouTube
If you get tired of reading...
Here is the YouTube version of this lesson.
Introduction
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!
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
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!
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!
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.
Top comments (0)