About This Book

How to Get the Most Out of This Book

Chapter 1: Setup and Tooling

Chapter 2: What is a Web Page?

Chapter 3: Using CSS to add Style

Chapter 4: JavaScript

Chapter 5: Intro to Programming Languages

Chapter 6: Terminal

Chapter 7: Git and Version Control

Chapter 8: Frontend and Backend Web Development

Chapter 9: Field Guide

Changelog

Enter your name and email address below, then click the **"Send my free chapter"** button to get started

A Field Guide to Your New Career

How to Become a Web Developer: A Field Guide

We're starting with the fundamentals; web pages. Ultimately, Web Development is about creating web pages. And though there is much more going on behind the scenes - as you'll come to understand throughout this book - we will start by looking at what a web page is.

People often talk about websites and web pages as if they are the same thing.  This is fine for everyday discussions, but as a Web Developer, you should understand that they are different.  A 

 is a collection of web pages, linking to other web pages.  A 

Additionally, not everything you see on a web browser is a web page.  Web browsers can load PDF files and image files in addition to web pages. 

Have you ever been sent a PDF document in an email and then opened it in your web browser?  This is an example of a web browser displaying something that is not a web page.  If you're ever in doubt if something is a web page or one of these special file types, look at the end of the URL. Generally, any URL that ends in a file type like .pdf, .png, .jpeg is not a web page.  

Open the following links and look at the end of their URLs.  

 is an HTML document that can be displayed by a web browser.

 is a collection of web pages linking to other web pages.

, better known as HTML, is the language of the World Wide Web (WWW), and it has been since the very first web page, built-in 1991.  You can see the first 

.  I encourage you to open it in a browser to see it in action. 

It's rather incredible that it is still visible and usable today.  This is possible because the first web page was built in HTML, and HTML continues to be the foundational language of all content on the web.  Notice the .html at the end of the file.  

Here's what the first web page looks like:

HTML started as a simple set of rules that let you add links and basic formatting to text.  It was popular, but programmers wanted more, so they began creating their own versions.  Things quickly got messy, with each browser supporting different versions of 

.  In came The W3C organization (World Wide Web Consortium), which helped standardize HTML rules and still does to this day.

To better understand what HTML is, let's break down the acronym.  

 refers to a system of linking topics to related information.  In short, it means a page that links to other pages.  

When you have a web page linking to other web pages, you have a website.  If you go back to the first web page, you'll notice it's just that: an HTML file that has links to other HTML files.  Thus, technically it's a website, though granted it's a very simple one.

In the previous screenshot, each of the links on the "first website" link to other web pages.  The pink arrow shows that the "What's out there?" link opens another web page called "General Overview."

.  Markup language is a generic term that refers to 

 language that tells you how to format a digital document.  It does this via a standardized set of rules.  These rules are different depending on which markup language you are using.

Markup is easy to take for granted because almost all the interactions we have with text have markup applied.  When you are writing in a word processor, typing an email, or even looking at spreadsheets, you're looking at markup. 

In the following screenshot, all these popular interfaces - Google docs, email, and Google Spreadsheets - are using markup.  

Text that does not have markup is called 

, and it's unlikely that you see it very often. 

To help demonstrate what markup does, we are going to look at what the first website looks like without any markup, i.e., in 

That is what plain text looks like.  Without markup, there are no links, and all the text looks the same.  Try this experiment with other text from a word processor, emails, or web pages.  Seeing the markup stripped away will give you a better understanding of what markup does.   

HTML is a Markup Language, not a Programming Language.

Programming languages allow you to run a process or execute an action, which HTML does not do.  We will talk about programming languages later in this book.  

Exercise 2 of 8: Uncomment Examples Part I

I am going to introduce a process in this Exercise that we will repeat another 3 times as we work through the chapter.

The process will go like this: open an HTML file that has HTML examples on it.  These examples are currently commented out, meaning they don't show on a web browser.  You will remove the comments and then view the changes in a web browser.  

---
code: https://gitlab.com/fullstackio/books/newline-course-apps/angel-garbarino-how-to-become-a-web-developer/-/tree/main/code/2-html?ref_type=heads
---

# Chapter 2: What is a Web Page?

We're starting with the fundamentals; web pages. Ultimately, Web Development is about creating web pages. And though there is much more going on behind the scenes - as you'll come to understand throughout this book - we will start by looking at what a web page is.

#### Web page vs. Website?

People often talk about websites and web pages as if they are the same thing.  This is fine for everyday discussions, but as a Web Developer, you should understand that they are different.  A **website** is a collection of web pages, linking to other web pages.  A **web page** is just a single HTML document.  

Additionally, not everything you see on a web browser is a web page.  Web browsers can load PDF files and image files in addition to web pages. 

Have you ever been sent a PDF document in an email and then opened it in your web browser?  This is an example of a web browser displaying something that is not a web page.  If you're ever in doubt if something is a web page or one of these special file types, look at the end of the URL. Generally, any URL that ends in a file type like .pdf, .png, .jpeg is not a web page.  

Open the following links and look at the end of their URLs.  

-   [This is a pdf file](https://www.fullstackreact.com/assets/media/react-from-zero/89ansd/table-of-contents/react-from-zero-book-table-of-contents.pdf). It is not a web page.

![](https://d2uusema5elisf.cloudfront.net/books/web-developers-field-guide/images/2-What-is-a-Webpage/1-dot-pdf.png)

-   [This image](https://www.fullstackreact.com/assets/images/react-from-zero/react-from-zero-book-mockup-shadow-facing-forward-cover-01-md.png) is a png file.  It is not a web page. 

![](https://d2uusema5elisf.cloudfront.net/books/web-developers-field-guide/images/2-What-is-a-Webpage/1-dot-png.png)

T> ### Web Page vs. Website
T>
T> A **web page** is an HTML document that can be displayed by a web browser.
T> 
T> A **website** is a collection of web pages linking to other web pages.

## HTML

**HyperText Markup Language**, better known as HTML, is the language of the World Wide Web (WWW), and it has been since the very first web page, built-in 1991[^cern].  You can see the first [web page at this link](http://info.cern.ch/hypertext/WWW/TheProject.html).  I encourage you to open it in a browser to see it in action. 

It's rather incredible that it is still visible and usable today.  This is possible because the first web page was built in HTML, and HTML continues to be the foundational language of all content on the web.  Notice the .html at the end of the file[^html].  

![](https://d2uusema5elisf.cloudfront.net/books/web-developers-field-guide/images/2-What-is-a-Webpage/1-dot-html.png)

Here's what the first web page looks like:

![](https://d2uusema5elisf.cloudfront.net/books/web-developers-field-guide/images/2-What-is-a-Webpage/2-first-website.png)

I>HTML started as a simple set of rules that let you add links and basic formatting to text.  It was popular, but programmers wanted more, so they began creating their own versions.  Things quickly got messy, with each browser supporting different versions of [HTML](https://www.wired.com/1997/04/a-brief-history-of-html/).  In came The W3C organization (World Wide Web Consortium), which helped standardize HTML rules and still does to this day.

To better understand what HTML is, let's break down the acronym.  

### HyperText

The "HT," **HyperText** refers to a system of linking topics to related information.  In short, it means a page that links to other pages.  

When you have a web page linking to other web pages, you have a website.  If you go back to the first web page, you'll notice it's just that: an HTML file that has links to other HTML files.  Thus, technically it's a website, though granted it's a very simple one.

![](https://d2uusema5elisf.cloudfront.net/books/web-developers-field-guide/images/2-What-is-a-Webpage/3-website-links.png)

In the previous screenshot, each of the links on the "first website" link to other web pages.  The pink arrow shows that the "What's out there?" link opens another web page called "General Overview."

### Markup Language

The "ML" in HTML stands for **markup language**.  Markup language is a generic term that refers to _any_ language that tells you how to format a digital document.  It does this via a standardized set of rules.  These rules are different depending on which markup language you are using.

Markup is easy to take for granted because almost all the interactions we have with text have markup applied.  When you are writing in a word processor, typing an email, or even looking at spreadsheets, you're looking at markup. 

In the following screenshot, all these popular interfaces - Google docs, email, and Google Spreadsheets - are using markup.  

![](https://d2uusema5elisf.cloudfront.net/books/web-developers-field-guide/images/2-What-is-a-Webpage/4-doc-email-spreadsheet.png)

Text that does not have markup is called **plain text**, and it's unlikely that you see it very often. 

To help demonstrate what markup does, we are going to look at what the first website looks like without any markup, i.e., in **plain text**. 

#### Exercise 1 of 8: Plain Text vs. Markup

1.  Open the [first website](http://info.cern.ch/hypertext/WWW/TheProject.html) in a browser window.
2.  Select and Copy all the text on the web page.
3.  Open the [My Text Area](http://www.mytextarea.com/) website in another browser window.
4.  Paste the copied first website content onto the My Text Area web page.[^my-text-area] 

You should see the following:

![](https://d2uusema5elisf.cloudfront.net/books/web-developers-field-guide/images/2-What-is-a-Webpage/5-plain-text.png)

That is what plain text looks like.  Without markup, there are no links, and all the text looks the same.  Try this experiment with other text from a word processor, emails, or web pages.  Seeing the markup stripped away will give you a better understanding of what markup does.   

T> #### HTML is a Markup Language, not a Programming Language.
T>
T> Programming languages allow you to run a process or execute an action, which HTML does not do.  We will talk about programming languages later in this book.  

#### Exercise 2 of 8: Uncomment Examples Part I

I am going to introduce a process in this Exercise that we will repeat another 3 times as we work through the chapter.

The process will go like this: open an HTML file that has HTML examples on it.  These examples are currently commented out, meaning they don't show on a web browser.  You will remove the comments and then view the changes in a web browser.  