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
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.
- Navigate to the
- Click the
- 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>
- Save as type
Viewing Your First HTML File
You can view your HTML right away by
- Right click your file tab
- 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,
<title>Hello, world!</title>This is the text that the browser will use to label your tab
<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.
- Copy and paste the following line into your
<!-- 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.