Week 1: The Basics

Setting Up the Code Editor

We are using Visual Studio Code to build our websites. It should be pinned to the dock on the bottom of your screen. If you don't see it, go to Finder > Applications > Visual Studio Code and double click the app to open.

Create or open an existing folder by going to File > Open Folder...
If there are any files in the folder, they will show up in your "Explorer Tab" in Visual Code Editor.
To create a new file, go to File > New Text File
Save your file by going to File > Save

Starter Code

Here are the bones for a super basic website. You can save the html file from the browser (option click) or just look at the code by viewing the source.

You can copy and paste this code to get started. Or try typing it out yourself so you can see how the predictive text works.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Title</title>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>I made this myself. I am so awesome. Please clap.</p>
</body>
</html>

Formatting Text

Formatting text in HTML is a lot like formatting text in Google Docs. There are Headings, paragraph, and different types of lists.

Here are what those tags look like:

<h1>Head 1</h1>
<h2>Head 2</h2>
<h3>Head 3</h3>
<h4>Head 4</h4>
<h5>Head 5</h5>

<p>Paragraph</p>

<ul>unordered list</ul>
This is a bulleted list

<ol>ordered list</ol>
This is a numbered list

<li>list item</li>
This goes between the <ul> or <ol> tags.
When you make a list, every line needs its own <li> tag.

Adding Images

Images need to be added to the body section of your code. In Visual Studio Code, you can type img, press Enter, and the image tag will be inserted automatically.

src stands for "source" is the location of the image. It can be in your website folder, or an image link from another website. Add it between the quotation marks.

alt stands for "alternate text" and you can add a description of the image here. This is for website visitors who are blind or have low vision and use screen readers for accessibility.

It is very important that you don't delete the file extension (like .jpg or .gif or .png). This part of the file name tells the browser that you are displaying an image.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Title</title>
</head>
<body>
<img src="image.gif" alt="This is an image of something.">
</body>
</html>