My First HTML File

I’ve compiled some things that might help you create your first HTML file.

Creating Your Workbench Folder

Developers like having a folder dedicated to all of our projects. If you’re using a Mac, you’ll name this folder bench. If you’re using a Windows machine, you’ll probably name this folder workbench. Feel free to use your own naming convention.

Developers generally create this folder at the root of our file system.

Setting Up a File Editor

You can totally edit your HTML in a text editor like Notepad or Notepad++, so feel free to skip this section.

I personally recommend an IDE, Integrated Development Environment. Which is just a fancy file editor, like Notepad++. I recommend downloading VSCode and here’s why I like it:

  • It’s free
  • It’s features are really well documented
  • You can use it just fine without a bunch of extensions, add-ons that allow you to customize and enhance your experience with new features.
  • Searching for extensions is super easy
  • There’s a lot of community support in maintaining and creating extensions

Here’s the download page for VSCode.
Here’s a nice guide on HTML related features in VSCode that you might find helpful.

Creating Your First HTML File

Here we’ll create an HTML file with some minimal HTML.

When you first open VSCode, you see a Welcome tab.

  1. Navigate to the Start section
  2. Click the New File link
  3. Copy and Paste the following html into your file 
     <!doctype html>
 <html lang="en">
   <head>
     <title>Hello, world!</title>
   </head>
   <body>
     <h1>Hello, world!</h1>
   </body>
 </html>
  4. Save as type HTML

Viewing Your First HTML File

You can view your HTML right away by

  1. Right click your file tab
  2. Select Copy Path
  3. Paste the path into your browser, Chrome for example.

You can also view your file directly in VSCode with an extension. I chose HTML Preview. This is my preference because I don’t have to refresh the browser every time I make a change.

Editing Your First HTML File

There’s only two things you’ll care about in your first file,

  1. <title>Hello, world!</title> This is the text that the browser will use to label your tab
  2. <h1>Hello, world!</h1> This is the content on the page

You’ll fiddle around mostly inside of the <body></body> tag, because that’s where you’ll put everything you’d like to display on the page.

For more on HTML elements, and semantic markup, you might be interested in this documentation by Mozilla.

Styling Your First HTML File

Let’s not worry about CSS for right now. You’ll have a lot going on with HTML and your new IDE.

That said, you probably don’t want an ugly page. To help with that, there is a beloved CSS framework, Bootstrap, you can use by dropping one link into your html file. Developers like it because it’s free and responsive, when you change the browser size, your content will adjust too. The framework has default styles for your html tags, but you can apply different styles with html classes.

  1. Copy and paste the following line into your <head></head> section. 
     <!-- Required meta tags -->
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

 <!-- Bootstrap CSS -->
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

If you’d like to tinker with different styles, you’ll find all you need in the Bootstrap documentation.

Sharing Your First HTML File

I found some good guides on sharing your page with others for free.

Written on June 9, 2020