DEV Community: Rocco Sangellino

How To Build a Simple Navbar with HTML and CSS

Rocco Sangellino — Mon, 08 Mar 2021 07:18:41 +0000

In this week's article, I want to jump right into building a simple navbar using HTML and CSS. Let's take a look at the design we will be building and review the requirements.

Table of contents:

What we are building
Requirements
Implementation
Conclusion

What we are building

We will be building a simple navbar with HTML and CSS. We will use the below design as the guideline for our component.

Requirements

Below are the requirements we need to build the navbar.

Navbar background-color is #333333
Navbar hover background-color is #272727
Navbar active background-color is #272727
Text color is #e7e7e7
Brand font-size is 24px
Links should have 24px of padding all around
RS should be a link

Implementation

Step 1

The first thing I do is ask myself what elements might make sense to build a navbar. With HTML we know we have semantic elements we can choose from. In this case, since we know it's a navigation component we will use the nav element as our wrapping container. Let's also add a class of navbar so we can apply styles later

<nav class="navbar"></nav>

Step 2

Next, I would review the content inside the navigation.

I would split the content into two parts:

The brand content
The navigational items

The reason I would split this up is that the brand content isn't necessarily a navigation item and I want the HTML to have the correct meaning.

Step 3

Next, let's implement option one from Step 2, The brand content. Since we know from the requirements it needs to be a link I would use the anchor tag. I will also add a class name of brand so we can style it later.

Our code should now look like this:

<nav class="navbar">
  <a class="brand" href="#">RS</a>
</nav>

Step 4

Next, let's implement option two from Step 2, the navigational items. I would classify these as a list of links. Keeping with ensuring our HTML structure is semantic I would use a list to structure the items.

Our code should now look like this:

<nav class="navbar">
  <a class="brand" href="#">RS</a>
  <ul>
    <li>
      <a href="#">Blog</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
    <li>
      <a href="#">Profile</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
  </ul>
</nav>

Step 5

Next, let's start adding some styles. I am going to use flexbox (checkout CSS-TRICKS for an in-depth explanation on flexbox) to align the brand and navigation horizontally and start adding some of the required styles.

Our styles should now look like this:

/* We don't want any links to be underlined. Let's remove that globally */
a {
  text-decoration: none;
}

.navbar {
  background-color: #333333;
  display: flex;
  /* let's align the items so everything is nice and centered */
  align-items: center;
}

/* We want all links in the navbar to be #e7e7e7 */
.navbar a {
  color: #e7e7e7;
}

Step 6

Next, let's style the list. Since we want the list to be horizontal we can use flexbox again to achieve this.

Our list styles should look like this:

.navbar ul {
 /* Let's reset the margin and padding of the list so it's is flush. */
  margin: 0;
  padding: 0;
  /* Let's remove the bullet points */
  list-style-type: none;
  /* display the list flex and align the items centered */
  display: flex;
  align-items:center;
}

Overall, our styles should look like this:

/* We don't want any links to be underlined. Let's remove that globally */
a {
  text-decoration: none;
}

.navbar {
  background-color: #333333;
  display: flex;
  /* let's align the items so everything is nice and centered */
  align-items: center;
}

/* We want all links in the navbar to be #e7e7e7 */
.navbar a {
  color: #e7e7e7;
}

.navbar ul {
 /* Let's reset the margin and padding of the list so it's is flush. */
  margin: 0;
  padding: 0;
  /* Let's remove the bullet points */
  list-style-type: none;
  /* display the list flex and align the items centered */
  display: flex;
  align-items:center;
}

Step 7

Next, let's style the brand and navigation links. We need to add the spacing around the brand and links.

Our link and brand styles should look like this:

.navbar .brand {
  display: block;
  color: #e7e7e7;
 /* Remove padding from top/bottom and add 24px padding right/left */
  padding: 0 24px;
  font-size: 24px;
}

.navbar ul li a {
  color: #e7e7e7;
  padding: 24px;
  /*Let's make the anchor display block.
     This will ensure when we hover, focus, or is active we get the full width and height 
      of the container.
  */
  display: block;
}

/* When a use hovers or focuses to a link change the background */
.navbar ul a:hover,
.navbar ul a:focus {
  background-color: #272727;
}

Overall, our styles should look like this:

/* We don't want any links to be underlined. Let's remove that globally */
a {
  text-decoration: none;
}

.navbar {
  background-color: #333333;
  display: flex;
  /* let's align the items so everything is nice and centered */
  align-items: center;
}

/* We want all links in the navbar to be #e7e7e7 */
.navbar a {
  color: #e7e7e7;
}

.navbar ul {
 /* Let's reset the margin and padding of the list so it's is flush. */
  margin: 0;
  padding: 0;
  /* Let's remove the bullet points */
  list-style-type: none;
  /* display the list flex and align the items centered */
  display: flex;
  align-items:center;
}

.navbar .brand {
  /*Let's make the anchor display block.
     This will ensure when we get the full width of the container.
  */
  display: block;
  color: #e7e7e7;
 /* Remove padding from top/bottom and add 24px padding right/left */
  padding: 0 24px;
  font-size: 24px;
}

.navbar ul li a {
  color: #e7e7e7;
  padding: 24px;
  /*Let's make the anchor display block.
     This will ensure when we hover, focus, or is active we get the full width and height 
      of the container.
  */
  display: block;
}

/* When a use hovers or focuses a link change the background */
.navbar ul a:hover,
.navbar ul a:focus {
  background-color: #272727;
}

Step 8

Next, we need one final piece, styling the active navigation link.

First, let's update the HTML to add the active class to the About link.

<nav class="navbar">
  <a class="brand" href="#">RS</a>
  <ul>
    <li>
      <a href="#">Blog</a>
    </li>
    <li>
      <a class="active" href="#">About</a>
    </li>
    <li>
      <a href="#">Profile</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
  </ul>
</nav>

Next, let's add the active style. Since the active style is the same as focus and hover we can add the active styles to it:

.navbar ul a:hover,
.navbar ul a:focus,
.navbar ul .active {
  background-color: #272727;
}

Overall, our styles should look like this:

/* We don't want any links to be underlined. Let's remove that globally */
a {
  text-decoration: none;
}

.navbar {
  background-color: #333333;
  display: flex;
  /* let's align the items so everything is nice and centered */
  align-items: center;
}

/* We want all links in the navbar to be #e7e7e7 */
.navbar a {
  color: #e7e7e7;
}

.navbar ul {
 /* Let's reset the margin and padding of the list so it's is flush. */
  margin: 0;
  padding: 0;
  /* Let's remove the bullet points */
  list-style-type: none;
  /* display the list flex and align the items centered */
  display: flex;
  align-items:center;
}

.navbar .brand {
  /*Let's make the anchor display block.
     This will ensure when we get the full width of the container.
  */
  display: block;
  color: #e7e7e7;
 /* Remove padding from top/bottom and add 24px padding right/left */
  padding: 0 24px;
  font-size: 24px;
}

.navbar ul li a {
  color: #e7e7e7;
  padding: 24px;
  /*Let's make the anchor display block.
     This will ensure when we hover, focus, or is active we get the full width and height 
      of the container.
  */
  display: block;
}

/* When a user hovers, focuses or if the link is active change the background */
.navbar ul a:hover,
.navbar ul a:focus,
.navbar ul .active {
  background-color: #272727;
}

Full code below via codepen:

Conclusion

With some basic knowledge of HTML and CSS, we were able to create a fully functioning navbar component.

If you haven't already please follow me on Twitter (@RoccoSangllino) where I share more information on web development.

What is semantic HTML?

Rocco Sangellino — Mon, 01 Mar 2021 03:45:49 +0000

When starting to learn HTML you will hear the term semantic markup. What does this mean and why is it important? Let's break it down and take a look at some examples.

What is semantic HTML?
Why is this important?
Examples of semantic elements
Conclusion

What is semantic HTML?

Before we dive into semantic HTML let's define semantics:

semantics is the study of meanings. - Merriam-Webster

When we write our HTML structure we want to ensure we give it meaning. HTML provides a set of tags we can use to build the structure of our document. We want to consider the meaning of these tags so we can appropriately layout our site in such a way another developer, browser, and assistive technologies can understand.

Why is this important?

There are two main reasons why this is important:

It makes it easier to read the HTML. When you are reading through the document and see the element <nav> right away you know that consists of some type of navigation.
It's a great start to providing accessible websites. Assistive technologies, specifically a screen reader, will scan the document to get information. It helps assistive technologies to better associate the content of the site. For example, screen readers allow users to skip content based on headings, so ensuring you are using the correct heading structure and not skipping heading levels is important.

Examples of semantic elements

Below are some examples of semantic elements:

<form> - used to gather user input.
<p> - used for creating paragraphs.
<header> - used to define the header of the document or section.
<section> - used to group related content.
<footer> - used to provide a footer for the main document or a section.
<nav> - used as the container element for navigation links.
<h1-h6> - defines the heading levels of the document.
<main> - used to define the main content of the site.

Conclusion

Semantic markup is used to give our document structure meaning. It provides developers a better understanding of the document and allows assistive technologies to do their jobs better.

If you haven't already please follow me on Twitter (@RoccoSangllino) where I share more information on web development.

HTML Body Tag Explained

Rocco Sangellino — Mon, 22 Feb 2021 06:29:56 +0000

In this article, we are going to continue our Basic HTML series. Over the last couple of weeks, I have discussed basic HTML structure (Basic HTML Structure Explained) and explained what the head tag is (HTML Head Tag Explained). This week let's take a look at what the body tag is and some common elements you will see contained inside the body tag.

Table of contents

What is the body tag?
Common HTML Elements
Conclusion

What is the body tag?

The body tag is a container element that holds the contents of the site. Anything you potentially want visible to the user will go inside the body tag.

For example, if I want to display "Hello World" I would do the following:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="Rocco Sangellino" />
  <meta name="description" content="Basic html body tag explained" />
    <link rel="stylesheet" href="style.css" />
    <script src="main.js"></script>
    <title>What is the body tag</title>
</head>
<body>
    Hello World!
</body>
</html>

With that basic example, you created a web page! Since the body tag is a container that holds the contents of the site we can now expand on this and start to add other elements inside such as headers, navigation, sections, paragraphs, tables, forms, etc. Let's take a look at some common elements.

Common HTML Elements

HTML provides us with many elements that we can use to structure our site. Below are some common elements you will encounter when building a website:

div - The div tag stands for "division". In other words, it's a generic container that holds other elements or text. It can be used to "divide" your sites into different sections.
```
<div>
    I am a container that can hold other HTML elements.
</div>
```
Rendered HTML:
spanThe span tag is similar to a div, in that it's a container. The difference being a div is a block-level element and the span is an inline element.
```
<span>I am mostly used to markup text or other inline elements like icons.</span>
```
Rendered HTML:
h1-h6 The h1-h6 tag defines the heading layout of the site. Generally, you will have one h1 and each subsequent heading should be nested according. As we will be learning in future articles this is important for semantic markup and screen readers.
```
<h1></h1>
    <h2></h2>
        <h3></h3>
            <h4></h4>
                <h5></h5>
                    <h6></h6>
```
Rendered HTML:
section - The section tag is the same as a div in that it is a block-level container that defines a section of the site. The difference is a section has semantic meaning where a div does not.
```
<section>
    <h2>About Me</h2>
    <p>Hello! My name is Rocco. Thank you for reading my blog.</p>
</section>
```
Rendered HTML:
p - The p tag is used for paragraphs.
```
<p>I would put my bio in a paragraph tag.</p>
```
Rendered HTML:

table - The table tag is used for tabular data. The table tag will contain other elements to fill out a complete table. Such as: thead, tbody, tr, th, and td

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Phone</th>
     </tr>
    </thead>
    <body>
      <tr>
        <td>Rocco Sangellino</td>
        <td>example@gmail.com</td>
        <td>111-111-1111</td>
       </tr>
     </tbody>
</table>

Rendered HTML:

a - the a tag stand for "anchor" or hyperlink. In order words, it enables you to link to other websites on the internet.
```
<a href="https://blog.roccosangellino.com">Rocco's Blog</a>
```
Rendered HTML:

ul - The ul stand for an unordered list. This allows you to add a bulleted list to your site.

<ul>
    <li>
        <a href="http://twitter.com">Rocco's Twitter</a>
    </li>
    <li>
        <a href="https://blog.roccosangellino.com">Rocco's Blog</a>
    </li>
</ul>

Rendered HTML:

w3schools has a comprehensive list of HTML tags with examples. I encourage you to take a look.

Conclusion

In this article, we learned that the body tag is a container element that holds the contents of a website. Anything you want visible to the user will go inside the body tag. With this basic understanding, you can start to create web pages. However, we have just scratched the surface of building sites. Let's pick up in the next article discussing what semantic markup is and why it's important.

If you haven't already please follow me on Twitter (@RoccoSangllino) where I share more information on web development.

HTML Head Tag Explained

Rocco Sangellino — Mon, 15 Feb 2021 06:36:48 +0000

In last week's blog post Basic HTML structure explained I covered the basics of HTML structure. In this article let's go more in-depth on the purpose of the head tag.

Table of contents

What is the head tag?
Title Tag
Meta Tag
Link Tag
Style Tag
Script Tag
Conclusion

What is the `head` tag?

The head tag is a container that holds metadata about the document. Metadata is information that describes other data. For example, the author or created date associated with this blog post would be considered metadata. The information we place in the head tag is not visible to the user. The data in the head tag can be used by the browser to set the document title, character set, styles, scripts, author, keywords, and other data we will see below.

Basic example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="Rocco Sangellino" />
    <meta name="description" content="Basic html tag explained" />
    <link rel="stylesheet" href="style.css" />
    <script src="main.js"></script>
    <title>My awesome document title</title>
</head>
<body>...</body>
</html>

Let take a look at title, meta, link, style, and script more in-depth.

`title` Tag

The title tag sets the title of the document. The title is displayed in the browser tab.

<title>My awesome document title</title>

`meta` Tag

The meta tag allows you to add metadata about a document. The data is not visible to the user but used by browsers and search engines. The browser may use the data to determine content about the site such as character set and viewport. You can also target search engines by using the meta tag to add keywords to the site.

Let's say I want to enhance my SEO rankings by adding some keywords to my site. Below is an example of how we can use the meta tag to achieve this.

<meta name="keywords" content="HTML" />

NOTE: name and content are attributes. Attributes allow us to provide the extra data needed. Think of attributes as key/value pairs where name is the key and keywords is the value. I will go more in-depth on attributes in a future article.

To build on our example above let's provide the author of the document.

<meta name="author" content="Rocco Sangellino" />

To help to ensure the site renders properly on different devices we can tell the browser how to control the dimensions and scaling of the site. We do this by adding the attribute name with a value of viewport to the meta tag.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

As you can see the meta tag is powerful. It helps us provide the browser and search engines extra data to help bolster our site.

`link` Tag

The link tag is used to tell the browser the relationship between the current document and an external resource. In most cases, the external resource is a stylesheet. Another common use case is to specify the favicon of the document which is the icon of the site. To link an external resource (i.e. stylesheet), we supply the link tag with a couple of attributes.

For example, let's say we want to link the style.css resource.

<link rel="stylesheet" href="style.css" />

In the above example, we have two attributes rel and href. The rel attribute stands for relationship. We are specifying how the link is related to the current document. In this case, we want the relationship to be a stylesheet. The href attribute specifies the location of the resource. In this case, the resource is located in the current directory of the site.

Before moving on let's take a look at one more example:

<link rel="icon" href="favicon.ico">

In this example, we are specifying the relationship of the link to the current document to be an icon. Next, we provide the path to the icon in the href attribute.

There are many more attributes that can be provided. A full list can be found at developer.mozilla.org.

`style` Tag

The style tag allows us to add styles to the document without linking to an external resource. Often you will see type and media attributes on a style tag. There are a few others however, type and media are most popular.

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        body {
            background-color: #fff;
        }
        h1 {
            color: blue;
        }
    </style>
</head>
<body>...</body>
</html>

In the above example, I supplied the type attribute, however, modern browsers will use text/css as the default value if type isn't supplied.

NOTE: For a more in-depth list you can check them out at developer.mozilla.org.

`script` Tag

The script tag provides two ways to include JavaScript in our websites. Similar to the link tag we can link to an external resource or similar to the style tag we can include code right in the document.

To link to an external resource, we must provide the scr attribute to the script tag. The src attribute tells the browser where it can find the resource.

<script src="main.js"></script>

Below is an example of adding the code in the current document.

<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        alert('Hello World');
    </script>
</head>
<body>...</body>
</html>

Also, the script tag can be used in the body tag. Using it in the head tag is just one option.

NOTE: The script tag can be used with other languages and has many more attributes. For more in-depth information you can check out at developer.mozilla.org.

Conclusion

In this article, we continued our discussion on basic HTML setup by exploring the use of the head tag. While there are many more attributes and use cases to be learned this information should get you started. Be on the lookout for more HTML articles in the weeks to come.

If you haven't already please follow me on Twitter where I share more information on web development.

Basic HTML Structure Explained

Rocco Sangellino — Mon, 08 Feb 2021 16:43:11 +0000

HTML is one of the first building blocks to learn how to build websites. There are a set of rules that must be followed in order to build HTML documents. Let's break down the basic structure of an HTML document to help us start building websites.

Table of Contents

What is HTML?
Basic HTML Structure
What is a Tag?
What is a DOCTYPE?
What is the html tag?
What is the head tag?
What is the body tag?
Conclusion

What is HTML?

HTML (Hyper Text Markup Language) is the most widely used markup language in existence. HTML is the primary markup language used to build websites. It was born out of SGML and XML in the early nineties. HTML is used to semantically define the structure of a document.

Since the early days of the web, there have been many versions of HTML:

Version	Year
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML	2000
HTML5	2012

Basic HTML Structure

HTML is written using a nested structure of tags. When the web page is loaded the browser interprets the tags and renders the document.

Below is an example of a basic HTML document. Let's break down each piece on the sections below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

What is a Tag?

Tags are keywords the browser uses to determine how to render an HTML document. Tags that have content require an open and closing tag. For example: <div>Content</div>. Not all tags require content, so in those cases we can condense an open and closing tag into one. We call that a self closing tag. For example: <br />.

What is a `DOCTYPE`?

The DOCTYPE sets the parsing and validation rules of a document. This ensures different browsers use the same set of rules. Since HTML has many different versions it's important to specify which rules the browser should follow. Below are a couple example of different doctypes.

<!-- Html 5 doctype -->
<!DOCTYPE html>
<!-- Html 4.01 strict doctype -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"    "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body></body>
</html>

<!-- Html 4.01 strict doctype -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"    "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body></body>
</html>

You can read more about doctype at the W3C site.

What is the `html` tag?

The html tag is the root element of the document. This should be added immediately after the doctype. Within the html element, we separate the rest of our HTML code into two elements, the <head> and the <body> tags.

What is the `head` tag?

The head tag will generally contain information about the document. Everything in the head tag will not be visible to the user, but are important to the browser. Inside the head tag we can define meta data (<meta>), document title (<title>), styles (<style>), and scripts (<script>).

NOTE: I will go more in-depth on each of these tags in a future blog.

What is the `body` tag?

The <body> tag is where we put all our content. Anything that we want visible to the user will go inside the body tag. This is where the bulk of your HTML will be written. Everything from headers to images, paragraphs, tables, and forms will all end up here. Learning the various kind of HTML tags will allow you to build the body of the site.

Conclusion

Knowing HTML is essential to building websites. This article covered the basic layout of an HTML document. Checkout back for more in-depth articles about HTML tags and how they can be used to build a site.

What is http://localhost:8080?

Rocco Sangellino — Mon, 01 Feb 2021 18:42:20 +0000

Recently I was a part of a conversation on twitter where Danny asked a great question. "What is localhost:8080"? In this article let's break it down, and defined what the means.

// Detect dark theme var iframe = document.getElementById('tweet-1352713206263853057-160'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1352713206263853057&theme=dark" }

Before we can define what http://localhost:8080 is we need understand some basic concepts:

What is an Internet Protocol Address (IP)
Domain Name
Port Number

Putting it all together:

What is http://localhost:8080?
Conclusion

What is an Internet Protocol Address (IP)

NOTE: The information below is simply a high level overview. Comment below or message me on Twitter if you want a more in-depth overview.

IP stands for Internet Protocol, which is a set of rules that allows devices to communicate over the internet. An address, in this context is similar to a person or business mailing address, but for a machine/computer/server instead. There are billions of devices all over the world, and an IP address is how we locate and communicate with them.

There are two types of IP addresses, Internet Protocol Version 4 (**IPv4**) and Internet Protocol Version 6 (**IPv6**). The below definitions were taken from wikipedia:

IPv4 is usually represented in dot-decimal format consisting of four decimal numbers, each ranging from 0 to 255, separated by dots, e.g., 172.16.254.1.
IPv6 address is represented as eight groups of four hexadecimal digits, each group representing 16 bits (two octets, a group sometimes also called a hextet[6][7]). The groups are separated by colons (:). An example of an IPv6 address is: 2001:0db8:85a3:0000:0000:8a2e:0370:7334

Fun Fact: Did you know the world is running out of IPv4 addresses?!?! Here are a couple of resources to check out:

Domain Name

A domain name like google.com are human readable names that map to an IP address, the device or in this case a web server that is hosting google.com. Anytime you enter a domain name in a browser it has to go through a Domain Name System (DNS) resolver. DNS takes the "friendly" name of google.com and does a lookup to find googles IP address.

Port Number

A port number is a 16-bit unsigned integer ranging from 0 to 65535. Since an IP is the address of a device, and that device can have many processes running on it such as: a web server, ftp server, mail server, it needs a way of knowing which process to respond to so it can respond to the request correctly.

There are two important port numbers to know for web development: 80 and 443. Port 80 is the default port number used for HTTP requests and 443 is used to HTTPS requests. If you are interested you can check out wikipedia for a list of well known port numbers and what processes they are used for.

What is `http://localhost:8080`?

Now that we have learned the basics let's break this url down into three separate pieces to make it easier to understand:

http is the HTTP protocol we want to use.
localhost is the domain name, i.e. the friendly name of the device we want to access. In this case it's the machine you are developing on.

In almost all cases localhost is mapped to the IP address of 127.0.0.1 on your machine. These settings can be overridden in your machines host file. A host file on an operating system maps hostnames to specific IP addresses. However, I only recommend changing these settings if you are familiar with the host file.

Example host file:
8080 is the port number that we want our device to respond to.

NOTE: The 8080 port number could have be any port above the restricted port range. The development server happen to pick port 8080. If this port was already in use some servers will increment until they find an open port. For example, if I have two VueJS applications running, one will run on port 8080, and the other will run on port 8081.

Conclusion

Putting all the pieces together when we enter http://localhost:8080 into a browser we are making a HTTP request to our local development web server at the localhost domain listening to process messages on port 8080.

Please follow Danny (@100days100) on twitter as he documents his journey into web development.

How to setup your machine to use Docker and WordPress

Rocco Sangellino — Sun, 24 Jan 2021 23:19:53 +0000

When building a website using WordPress often times you will want a development environment to work with before pushing to production. There are a few different ways to achieve this goal. In this article we are going to see how to setup WordPress using docker. This article will assume you are somewhat familiar with WordPress and using either a Mac or Windows machine. If you are unfamiliar with WordPress please check out wordpress.org for more details.

What is Docker?
Container
Installing Docker
Setting up WordPress
Stopping the WordPress Container
Conclusion

What is Docker?

NOTE: If you are familiar with Docker you can skip this step.

First let's briefly talk about what docker is. According to the docker website:

Docker is an open platform for developing, shipping, and running applications. Docker enables you to separate your applications from your infrastructure so you can deliver software quickly. Docker provides the ability to package and run an application in a loosely isolated environment called a container.

I bolded the word container because it's worth noting that docker itself is not a container. It provides the means to run containers (more on containers below). You will often come across docker being talked about as if it were a container. One reason for this is:

Because of the popularity and explosive growth of Docker in the community, it has become synonymous with containers. The term “docker” can refer to the software as a whole, the command line application, the company, or interchangeably with the word “container”.

A friend of mine, Rob Sigrest (learn more about him on his github page) gave a presentation and came to that conclusion above with his experience in the industry.

Container

NOTE: If you are familiar with what a container is you can skip this step.

Now that we know docker is the software that can run a container what is a container? According to the docker website:

A container is a standard unit of software that packages up code and all its dependencies so the application runs quickly and reliably from one computing environment to another.

In simplest terms, a container allows you to run your application code segregated from other code on your system. This eliminates the need to install all of the necessary dependencies on your local machine. For example, as we will see later I use docker to run WordPress without having to install all the dependencies WordPress requires such as apache, php, and MySQL.

A major benefit Rob mentioned during his presentation is a container images can be run on any platform with a compatible container runtime. So for example, you could run containers in production on a Linux system but develop them using the same container runtime (like Docker) on Windows or Mac.

Installing Docker

Now that we got the definitions out of the way let's get to the fun part, installing docker and running WordPress.

NOTE: If you already have docker installed you can skip this step.

Download and install docker desktop here
Follow the instructions all the way through. At some point in the installation it will ask you for your system password. You will need to provide docker with your password because docker needs elevated permissions to perform some tasks.

Side Note:

When docker desktop is installed it will install a tool called docker-compose. This is important because we will be using this to run our containers.

Compose is a tool for defining and running multi-container Docker applications. With Compose, you use a YAML file to configure your application’s services. Then, with a single command, you create and start all the services from your configuration. - Docker website

Setting up WordPress

Now that we have docker and docker-compose installed let's get WordPress up and running.

NOTE: If you already have a location where you like to create your projects you can skip steps 1-3 and navigate to that directory.

Open your terminal and type the following command:

Mac
```
cd ~/
```
Windows
```
cd %userprofile%
```

The above command will change directory (cd) to our home folder

Create the Projects directory
```
mkdir Projects
```
The above command will create a directory (mkdir) called Projects in our home directory.
Change directory to Projects
```
cd Projects
```
Create the WordPress directory inside the Projects directory
```
mkdir wordpress
```
Change directory to WordPress
```
cd wordpress
```
To confirm your terminal should look something like:
Open the wordpress folder in your text editor. I am using VS Code.
Create a file called docker-compose.yaml and enter the below contents:

NOTE: It is important the file is called docker-compose.yaml otherwise docker-compose won't work.

Source file from Brad Traversy's github
```
version: '3'

services:
  # Database
  db:
    image: mysql:5.7
    volumes:
      - db_data:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress
    networks:
      - wpsite
  # phpmyadmin
  phpmyadmin:
    depends_on:
      - db
    image: phpmyadmin/phpmyadmin
    restart: always
    ports:
      - '8080:80'
    environment:
      PMA_HOST: db
      MYSQL_ROOT_PASSWORD: password 
    networks:
      - wpsite
  # Wordpress
  wordpress:
    depends_on:
      - db
    image: wordpress:latest
    ports:
      - '8000:80'
    restart: always
    volumes: ['./:/var/www/html']
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
    networks:
      - wpsite
networks:
  wpsite:
volumes:
  db_data:
```
Your text editor should look something like:

The above docker-compose.yaml file will pull three containers: MySQL, phpmyadmin, and WordPress.

SIDE NOTE:

I won't be explaining all the properties here, however I want to take a minute and explain the volumes and ports property.

When we specify volumes: ['./:/var/www/html'], what this means is docker will mount our local systems directory of ., meaning our current directory (in our case wordpress), to /var/www/html inside the container. /var/www/html is where the source code for WordPress is stored in the container. This will allow us to develop our plugin or theme on our local machine and be available to the container.

When we specify '8000:80' in the ports sections of the config we are telling the docker to map our local system 8000 port to the containers port 80. Port 80 in the container is the port our WordPress is running. However, we want to be able to access this on our local machine so we need to map a port from our local machine to the container port running the site.

You can learn more about what each of these properties are at dockers website.
Let's head back to the terminal and navigate to our wordpress directory

Mac users
```
cd ~/Projects/wordpress
```
Windows users
```
cd %userprofile%\Projects\wordpress
```
Now that we are in our wordpress directory let's start up our containers
```
docker-compose up -d
```
This step might take a few minutes as docker will need to pull all the above images from our docker-compose.yaml file. You should also see output in the terminal that looks something like:

You should now start to see files and folders being added to the wordpress directory.

The above command will start the containers in detached mode, meaning it will run in the background and you can close your terminal if you like when it has completed all the downloads.

At this point we should be able to access our WordPress site at http://localhost:8000 and phpmyadmin at http://localhost:8080.

Select the language you want to use and click Continue.

Fill out your sites details and click Install WordPress.

SUCCESS!

Congratulations you now installed WordPress using Docker! You can build your plugins and themes as you normally would inside wordpress/wp-content/ directory.

Stopping the WordPress Container

Once we are done building our site and we no longer need our containers running there are two ways to achieve this.

Navigate to ~/Projects/wordpress in your terminal and enter the below command if you want to stop the running containers, but want to save all data associated with your site.
```
docker-compose down
```
Navigate to ~/Projects/wordpress in your terminal and enter the below command if you want to stop the running containers and remove all data associated with your site.
```
docker-compose down --volumes
```

Conclusion

There are a few ways you can get WordPress running locally, however I have found using Docker makes it easier. I can count on the fact that all the right dependencies will be used and I don't have to install specific applications on my machine. If you are interested in learning more about what tools and application I use for development check out my Setting up a web development machine article.

Button or Link - Which to choose?

Rocco Sangellino — Thu, 14 Jan 2021 20:38:18 +0000

When building your website you often will be faced with a choice between using a button or link (a). In some cases a link is the clear choice when you need to link to another page, but what about in page features like ajax request, expand/collapse, and so on. Let's take a look at the uses for each and see the benefits of choosing one over the other.

Button
Link
Why is the distinction important?
Conclusion

Button

The HTML <button> element represents a clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality. By default, HTML buttons are presented in a style resembling the platform the user agent runs on, but you can change buttons’ appearance with CSS. - Mozilla

In other words a button is used for in page actions. Some example may include:

Expand/Collapse
Opening a modal
Taking action to make an ajax request to update data
Submitting a form

<button type="button">Add Comic</button>

Link

The HTML <a> element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address. Content within each <a> should indicate the link's destination. If the href attribute is present, pressing the enter key while focused on the <a> element will activate it. - Mozilla

<a href="https://google.com">Google</a>

Why is the distinction important?

Screen readers and keyboard navigation have slightly different handling of buttons and links. If we deviate from those rules and guidelines we can be causing frustrations for our users that rely on those tools. Below are some examples of the differences:

When a screen reader loads your site it will count the number of links and lets the user know.
When you focus to a link a screen reader will read the link content and then say "link".
Links are activated on enter.
Buttons can be activated with space or enter.

Users who are familiar with screen readers, keyboard navigation and other tools are relying on us to follow a set of rules and guidelines so they are able to navigate our site as a visual user or mouse user would.

For example: Let's say you use a link instead of a button the user might be inclined to the spacebar to perform the action, but it won't work. This could cause frustration and could lead to them leaving your site.

Conclusion

It's important to use semantic markup so we can provide the best possible experience for all users. If for some reason you can't use a button you can use the aria-role of button so screen readers with treat the element as a button. However, it will be up you to implement the functionality to ensure the behavior acts as a button.

Thanks for reading. Be on the lookout for more accessibility tips.

8 Tips to Improve Your Sites Accessibility

Rocco Sangellino — Fri, 08 Jan 2021 18:36:58 +0000

There are many different techniques and rules to building an accessible website and it might feel overwhelming. However, we want to make sure we build it in such a way that is usable for everyone. Below are a few tips that you can start implementing today that can improve your sites accessibility:

Heading Structure
Alt Attribute
Descriptive text for links
Form Labels
Table Captions
Scope Attribute
Visible Focus
Tabindex
Conclusion

1. Heading Structure

It is important to provide the correct heading structure as your headings outline the content of your site. Assertive technologies, browser plugins, and other tools can provide ways for users to navigate your site based on headers.

<h1>Heading 1</h1>
    <h2>Heading 2</h2>
        <h3>Heading 3</h3>
            <h4>Heading 4</h4>
                <h5>Heading 5</h5>
                    <h6>Heading 6</h6>

2. Alt Attribute

When using images on your site you should always provide the alt attribute. The alt attribute is used to the describe the image. This allows assertive technologies to read the description to the user. You might be asking yourself "What if I want to use an image for icons or presentational purposes?". In this case you should still add the alt attribute but leave the value empty. This lets assertive technologies know it's safe to ignore the image.

For example, let's say we want to display the below image on our site and we want assertive technologies to be able to read the description to the user.

The HTML for the above image would look like:

<img src="1968-chevrolet-camaro-convertible.png" alt="1968 Red Chevrolet Camaro Convertible" />

3. Descriptive text for links

Using descriptive text for your links allows users to distinguish the different links on the site and helps them determine if they want to follow the link. This is vital for users using a screen reader. They can navigate your site using the tab key and rely on the content to help them understand what they are viewing. The descriptive text help determine if they should proceed to clicking the link.

Don't do

<a href="#">Click here</a>

<a href="#">1968 Chevrolet Camaro Convertible</a>

You do not need to include the word "link" in your text because the screen reader will announce to the user they are on a link.

4. Form Labels

Form labels provide context as to what the form input is requiring. There are two ways to associate a label with form element: explicitly or implicitly (see below for examples). The form label also provides a larger clickable area to access the form element. When you click the form label it will automatically set focus to the associated element.

Explicitly

Explicitly means the for attribute on the label matches the the id attribute of the form element.

<label for="first-name">First Name</label>
<input id="first-name" type="text" value="Rocco" />

Implicitly

Implicitly means you wrap the form element within the label element.

<label>
    First Name
    <input id="first-name" type="text" value="Rocco" />
</label>

I recommend using the explicit approach as according to WAI. It generally has better screen reader support.

5. Table Captions

A caption acts as a title of a table. It's useful for a user using a screen reader. If the user is in table mode they primarily use the caption to identify tables. This allows for better navigation and data association. I recommend adding captions to all tables to ensure the best possible experience for all users. If you don't want the caption displayed you can use CSS to display the element off-screen.

<table>
    <caption>Company Information</caption>
    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Symbol</th>
            <th scope="col">Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Microsoft Corporation</th>
            <td>MSFT</td>
            <td>$218.29</td>
        </tr>
    </tbody>
</table>

6. Scope Attribute

The scope attribute is used by screen readers to associate data cells with corresponding header cells. Screen readers will do their best to guess which to use. The default value of scope is col. I recommend being explicit to avoid guessing.

<table>
    <caption>User Information</caption>
    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Rocco Sangellino</th>
            <td>36</td>
        </tr>
    </tbody>
</table>

7. Visible Focus

Visible focus helps a keyboard user know which actionable element has focus. The browser has a default style but these tend be removed in css resets or if styles are undesirable. You are able to add your own style to match your sites design. The benefit of providing a focus style is it provides aid to a keyboard user operating your site. The important piece is to at lease add some type of style to a focus state to ensure the best possible experience for all users.

<button type="submit">Submit</button>

/* default Chrome style */
:focus {
    outline: -webkit-focus-ring-color auto 1px;
}

/* Custom CSS */
button:focus {
  outline: none;
  border: 2px solid red;
  color: blue;
}

8. Tabindex

Tabindex is used to manage keyboard focus. There are three types of uses: tabindex="-1", tabindex="0", tabindex="1" (or any number greater than 1). Lets break down what each of these mean below:

tabindex="-1" - removes the element from the default navigation flow. Meaning you will not be able to tab to the element using the keyboard, but you will be able to programmatically set focus. Most of the time these are used on non-interactive elements such as: div, span, or paragraph. This can be useful when a modal is opened and you want to set focus to it or if you are in a form and want to set focus to an error message.

<div class="modal-dialog" tabindex="-1">
    <div class="sr-only">Start of modal</div>
    <h2 class="modal-header">Header</h2>
    <div class="modal-body">Modal Content</div>
    <div class="sr-only">End of modal</div>
</div>

document.querySelector('.modal-dialog').focus();

tabindex="0" - allows elements to receive keyboard focus without affecting the normal navigation flow. This is usually used on elements besides links and form elements as those already have keyboard navigation. This can be used if you are creating a custom element that is not normally focusable.

<div tabindex="0" role="button">I am now focusable via the keyboard.</div>

NOTE: If you use role="button" you will need to add enter and spacebar functionality as the div needs to fully act as a button.

tabindex="1" - manually setting the tabindex to something other than -1 or '0' should be avoided. This will affected the normal navigation flow and could be confusing to the user and cause undesirable results. All elements that are tabbable will have a default tabindex based on their position in the DOM. Looking at the example below notice how no tabindex is set. The browser will first focus to the button then to a and finally to the last button.

<button type="button">Will be focused first</button>
<a href="#">Will be focused second</a>
<button type="button">Will be focused third</button>

Conclusion

I provided a few tips that can be used to update your current site or if you are starting a new one. I encourage you to take the time and read up on web accessibility so all users can enjoy your site. Below are a few links to help you get started:

Setting up a web development machine

Rocco Sangellino — Fri, 01 Jan 2021 19:48:39 +0000

When beginning to code, sometimes it can feel overwhelming to create your ideal setup. When starting your web development journey in HTML, CSS, and JavaScript, it is helpful to have a starting point for getting set up. With so many different languages, programs, and free resources, you often find yourself wondering where is best to start. I've created a list of applications to help you get started in your journey to becoming a programmer. There are many ways to get yourself going, and I encourage you to do your own research to see what works best for you. Here are some great applications to help you get setup and on your way:

Homebrew (available on Mac)
Git
Browser
Text Editor
Terminal
NodeJS
Docker
HTTP and REST Client
Conclusion

Homebrew (available on Mac)

Homebrew is a package manager (see definition below) that allows you to install applications (packages) via the command line. One of the benefits of using a package manager is it allows you to automate your system install. This is helpful when you upgrade to a new computer and aren't restoring from a backup. What might take you hours to setup your system could take minutes with a startup script using a package manager (be on the lookout for a future article breaking down what a startup script would look like). If you are familiar with Linux this is similar to the apt on Debian or pacman on Arch.

A package manager keeps track of what software is installed on your computer, and allows you to easily install new software, upgrade software to newer versions, or remove software that you previously installed. As the name suggests, package managers deal with packages: collections of files that are bundled together and can be installed and removed as a group. - debian.org

NOTE: You don't necessarily need this to be a developer or to get started but it could become beneficial and I recommend installing it.

Installing Homebrew

Homebrew
- I recommend following the instructions in the above link. However, for a quick reference, the below command should install homebrew. Open a terminal and paste the following command - /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)". After running the previous command you may be prompted for further instructions.

Git

Git is a version-control system for tracking changes. Version control is the practice of tracking and managing file changes to your code or assets. Think about it as saving changes to a file in word or google docs, but keeping a record-of who changed the file, when it was changed, and what changes occurred at each save point.

NOTE: Version control is an important concept to understand. You will encounter this on your journey and I recommend installing.

Installing Git

git
- There are a couple different ways to install git depending on your OS. The above link will have a breakdown of Link, Mac, or Windows. Here is a quick reference:
- Mac
- Open your terminal and paste git --version. If git isn't installed, it will prompt you with instructions to install.
- Alternatively if you have homebrew installed you can paste the following command in a terminal brew install git
- Linux (debian based)
- First you need to update your packages and then install git. We can do this in one line sudo apt update && sudo apt install git
- Git for windows

Browser

My browser of choice for development is Google Chrome. I use chrome because I prefer the dev tools over firefox. In my opinion chrome's dev tools are easy to use, has a variety of extensions, and I like the built in feature that allows you to simulate mobile screen sizes. However, firefox is great and I use multiple browsers while developing to test my code and ensure it is working in all browsers.

Installing a browser

Google Chrome
firefox
Safari preinstalled on mac
Edge preinstalled on windows

Text Editor

There are many editors you can choose from. It will come down to personal preference in which one you choose. My editor of choice is VS Code. It integrates well with many programming languages and has a plethora of extensions to choose from. Below is the link to VS Code along with some alternatives you may like.

NOTE: You can use any text editor to develop. Even a plain editor like notepad. I recommend installing one of the below editors as it will provide additional tooling that will help you develop. Such as syntax highlight, code formatting, debugging tools, and more.

Installing a text editor

VS Code
- Extensions I use
Atom
Sublime Text
Vim

VS Code Extensions

NOTE: You don't necessarily need any of the below extensions to develop. For each of the below extensions I explain why I use them and what they are used for. I encourage you to try them and see which ones you prefer.

DotENV - This is a nice extension to have because it adds syntax highlighting for .env files rather them appearing as plain text files.
ESLint - I use this extension to integrated ESLint into VS Code. This provides immediate feedback into linting errors or warnings as you are coding. If you are unsure what ESLint is below is a description from the ESLint website:

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.

GitLens - I like this extension because it adds git integration into VS Code. This allows me to quickly see when, why, and who changed a line of code without having to use the command line or another tool.
Git History - While GitLens provides me a quick look into changes, Git history allows me to view and search history right form VS Code. This saves me time without having to switch applications to view prior changes.
Path Intellisense - I use this extension all the time when importing files. It provides intellisense and autocompletion for filenames.
Prettier - Code formatter - I like Prettier because it allows you to define a set of rules for how you want your code formatted. For example, tabs vs paces, semi-colons vs no semi-colons, trailing commas, and a lot more rules. The reason this is valuable is because it keeps your code style consistent and it integrated with ESLint.
Vetur - In my opinion this is a must for Vue.js developers. Vetur adds additional tooling like syntax highlighting, linting, snippets, intelliSense, and more to your vue files. You can also enable support for Typescript in your html templates. This is useful for immediate feedback if you have any errors or warnings within your template.
Auto Rename Tag - I find this extension useful because I don't have to worry if my HTML tags are mismatched. Once I start to change the HTML tag this extension will automatically rename the closing tag ensuring no mismatches take place.
Babel ES6/ES7 - This extension is useful because it adds JS Babel es6/es7 syntax coloring to your JavaScript files.

Terminal

There are a variety of terminal emulators to choose from. I develop on a Mac and my go to terminal is iTerm2. It offers a split pane feature that I like and use all the time. On windows I use cmder and on linux I use terminator.

NOTE: Most computers come with a built in terminal and you don't need to install a different one. I recommend becoming familiar with one as you will be interacting with a terminal when developing.

Installing a terminal

iterm2
- I also make my terminal beautiful by using "Oh My ZSH!" and powerlevel10k
cmder
terminator - sudo apt update && sudo apt install terminator

NodeJS

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. If you are on Mac or Linux you may want to install nvm which is a version manager. This allows you to switch between node versions.

NOTE: To be a web developer you don't need node.js. However, when you install node it comes with npm (node package manager, definition below from npmjs). I recommend installing this as you will encounter node.js and npm when learning from tutorials or classes you may take.

npm makes it easy for JavaScript developers to share and reuse code, and makes it easy to update the code that you’re sharing, so you can build amazing things.

Installing node.js without nvm

node.js - download the LTS version

Installing node.js with nvm

node version manager
Once you have installed nvm, open a terminal and enter nvm install node "node" is an alias for the latest version
- If you want to install a specific version of node you can replace node with the version you prefer.

HTTP and REST Client

A HTTP and REST client allows you to send requests, view responses, and debug APIs. Postman and Insomnia both provide nice user interfaces to interact with APIs. I use these daily to ensure the APIs I am using are working as intended.

NOTE: You don't necessarily need to install a HTTP and Rest client to be a web developer. However, as I mentioned this will be beneficial to test APIs you are working with. I recommend installing at least one of the follow.

Installing a HTTP and REST Client

Postman
Insomnia - I download Insomnia Core.

Docker (Optional)

The term docker has become synonymous with the term container. From the Docker website:

A container is a standard unit of software that packages up code and all its dependencies so the application runs quickly and reliably from one computing environment to another.

In simplest terms, a container allows you to run your application code segregated from other code on your system. This eliminates the need to install all of the necessary dependencies on your local machine. For example, I use docker to run WordPress without having to install all the dependencies WordPress requires such as apache, php, and MySQL.

NOTE: Docker is not a requirement and not needed to be a web developer. I included docker because it is something I use daily and is popular within the dev community.

Installing docker

Docker

Conclusion

There are a lot more tools out there that you will run into. I hope my list gets you started on your development journey. I encourage you to try them out and see what's right for you. I personally use each of these daily and have enjoyed working with them.

Check back soon for more posts where I outline how to break down a project, how to use project management tools, and keeping yourself on task and on target.

Most importantly, I would love to hear feedback on what you found helpful and if there are resources that you think would be helpful and/or could be added. You can leave comments down below or find me on twitter.

DEV Community: Rocco Sangellino

How To Build a Simple Navbar with HTML and CSS

What we are building

Requirements

Implementation

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

Conclusion

What is semantic HTML?

What is semantic HTML?

Why is this important?

Examples of semantic elements

Conclusion

HTML Body Tag Explained

What is the body tag?

Common HTML Elements

Conclusion

HTML Head Tag Explained

What is the head tag?

title Tag

meta Tag

link Tag

style Tag

script Tag

Conclusion

Basic HTML Structure Explained

What is HTML?

Basic HTML Structure

What is a Tag?

What is a DOCTYPE?

What is the html tag?

What is the head tag?

What is the body tag?

Conclusion

What is http://localhost:8080?

What is an Internet Protocol Address (IP)

Domain Name

Port Number

What is http://localhost:8080?

Conclusion

How to setup your machine to use Docker and WordPress

What is Docker?

Container

Installing Docker

Setting up WordPress

Stopping the WordPress Container

Conclusion

Button or Link - Which to choose?

Button

Link

Why is the distinction important?

Conclusion

8 Tips to Improve Your Sites Accessibility

1. Heading Structure

2. Alt Attribute

3. Descriptive text for links

4. Form Labels

5. Table Captions

6. Scope Attribute

7. Visible Focus

8. Tabindex

Conclusion

Setting up a web development machine

Homebrew (available on Mac)

Installing Homebrew

Git

Installing Git

Browser

Installing a browser

Text Editor

Installing a text editor

VS Code Extensions

Terminal

Installing a terminal

What is the `head` tag?

`title` Tag

`meta` Tag

`link` Tag

`style` Tag

`script` Tag

What is a `DOCTYPE`?

What is the `html` tag?

What is the `head` tag?

What is the `body` tag?

What is `http://localhost:8080`?