1.1: File Creation

Create a folder and open it in VS Code

Using File Explorer (on Windows) or Finder (on a MAC) create a new folder named About Me Website.
Open VS Code, and click the "Open Folder..." link.

Select the folder you just made.

Create the HTML file

Create a new file named index.html by clicking the "New File" button. If necessary, open the sidebar by clicking the icon at the top left.

Now let's add the basic HTML scaffold for our webpage. In index.html add the following code:

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

  <p>This is my first webpage!</p>

</body>
</html>

Open the webpage

Ok, so this is a really simple page, but let's open the webpage to check out our single paragraph...

In File Explorer / Finder, navigate to your index.html file, and double click to open it.
A new browser tab should open, and you should see your (very simple) page!

Create the CSS file and reference it in the HTML file

Now create a style.css file just like you created the index.html.
We want to link to this stylesheet in the HTML file, we do this with a link tag.

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

Next Section

Now that we have our files created, let's work on creating the first section of our webpage: the header. Go to 2.1: Create The Header.

PreviousPart 1: Project Setup NextPart 2: Header

Last updated 7 years ago

hashtagCreate a folder and open it in VS Code

hashtagCreate the HTML file

hashtagOpen the webpage

hashtagCreate the CSS file and reference it in the HTML file

hashtagNext Section

Create a folder and open it in VS Code

Create the HTML file

Open the webpage

Create the CSS file and reference it in the HTML file

Next Section