Each of these three main web technologies plays a role in creating the content you see on a website:
classattributes, in addition to the semantic elements, to target the elements we want to style.
Every major browser comes with a built-in set of developer tools that you can use to inspect, modify, and debug the content of a web page.
NOTE: To ensure that instructions and screenshots match up with your experience, use Google Chrome browser.
To open the dev tools in Chrome, press
Ctrl+Shift+J (Windows / Linux) or
Cmd+Opt+J command should open up straight into the
console. If, for whatever reason, it doesn't, you can always click on
in the dropdown (when the dev tools are collapsed) or in the list of tabs:
To access the Chrome dev tools settings — for example, to change the theme from light to dark — click the three vertical dots:
If at any point the console becomes cluttered with errors, warnings, or anything
else, click the
Clear console button:
Okay, okay, enough background and setup. Let's write some code!
We'll start off with some simple math. In the console, type
1 + 1 and press
enter. You should see the number
The code you wrote,
2, is aptly referred to as the return value of the expression. Try out some more mathematical expressions and see what they return!
Go ahead and type that classic phrase,
"Hello, world!", into the console and
press enter. It returned
"Hello, world!" right back to us. Try typing some
more literal text into the console, such as your name. Don't forget the
debug our applications. One of the simplest is the
alert() function, which
creates a simple alert in the browser window:
Try it out yourself! Put some numbers, text, or maybe even a mathematical
alert()'s parentheses and see what happens.
Most programmers consider the first and second pass the "compilation phase." It's
to run your code ("Hey, CPU, can we have enough memory to hold this
It's a lot like setting up a chain of dominoes. The third phase, as we called it
above, is often called the "execution phase." It's where the code is run top-down,
of "doing work."
code in these READMEs. If the piece of code is a function, we'll include a pair
of trailing parentheses to mark it as such, e.g.,
myFunction() or the already
alert(). If the piece of code is a keyword in the language or a
variable that we're referencing, there'll be no parentheses:
It's impossible to overstate how important practice is when you're learning a new programming language. You can read the READMEs and watch the videos, but the true education is in writing code — lots of it.