codeskill

Getting Started with HTML

Written by

admin_ppsh

in

Setting Up Your Environment in VSCode

Welcome! If you’ve already got your code editor of choice set up, click here to skip to the next page.

Today, we embark on the first step of our HTML journey: setting up our environment in Visual Studio Code (VSCode). This might seem like a small step, but in the grand scheme of things, it’s a giant leap towards becoming a proficient web developer.

Why VSCode?

First, let’s talk about why I’ve chosen VSCode. It’s free, user-friendly, highly customizable, and supported by a vibrant community that’s continuously contributing to its development. Whether you’re a beginner or a seasoned pro, VSCode has something to offer everyone. Of course, you may choose whichever text editor or IDE you are most comfortable using (even notepad). All the code outlined in this series will work with any text editor. I’ve personally used many different IDE’s including SublimeText, Atom, Notepad and Notepad++ amongst others. I’m currently using VSCode, but may change in the future.

Feel free to use whatever you prefer, but if you would like to use VSCode, and haven’t installed it yet – read on.

Installing VSCode

To begin, you’ll need to install VSCode. Head over to the Visual Studio Code website and download the version suitable for your operating system (Windows, MacOS, or Linux). The installation process is straightforward – just follow the on-screen instructions.

Familiarizing Yourself with VSCode

Once installed, open VSCode. Take a moment to familiarize yourself with its interface. You’ll see a sidebar on the left with options like Explorer, Search, Source Control, and Extensions. The large area on the right is where you’ll write and view your code.

Setting Up for HTML

Out of the box, VSCode supports HTML, but we can enhance our experience with extensions. Extensions in VSCode are like apps for your phone – they add new features and tools to make development easier.

Essential Extensions

  1. Live Server: This nifty extension allows you to view your HTML file in a web browser as you code. It updates in real-time, showing changes immediately.
  2. Prettier: A code formatter that keeps your code looking clean and consistent.
  3. HTML Snippets: This adds helpful snippets of HTML code, saving you time and effort.

To install an extension, click on the Extensions icon in the sidebar, search for the extension name, and click ‘Install’.

Creating Your First HTML File

Now, let’s dive into creating our first HTML file:

  1. Open VSCode.
  2. Click on ‘File’ > ‘New File’.
  3. Save this file with a .html extension, for example, index.html. This tells VSCode and web browsers that it’s an HTML file.

Writing Basic HTML

Type ! and hit Tab. Voila! VSCode automatically generates a basic HTML structure. It should look something like this:

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>

</body>
</html>

Let’s break it down:

  • <!DOCTYPE html>: Tells the browser we are using HTML5.
  • <html>: The root element of an HTML page.
  • <head>: Contains meta-information about the document, like its title.
  • <title>: The title of your document, shown in the browser’s title bar or tab.
  • <body>: Where we’ll put content that’s visible to users.

Adding Some Content

Inside the <body> tags, let’s add a heading and a paragraph:

<body>
    <h1>Welcome to My HTML Journey</h1>
    <p>Hello there! This is my first HTML page.</p>
</body>

Viewing Your Web Page

To view your web page, right-click on your HTML file in VSCode and select ‘Open with Live Server’. This should launch your default web browser and display your HTML file as a web page.

Customizing VSCode

VSCode is highly customizable. You can change themes, adjust settings, and even modify keyboard shortcuts. Feel free to explore and tweak the environment to suit your taste.

A Note on HTML Syntax

As we progress, remember that HTML is a forgiving language. However, following good syntax is crucial for readability and maintenance. Always close your tags, keep your indentation consistent, and comment on complex sections.

Practicing and Experimenting

The best way to learn HTML is by doing. Try adding more HTML elements like lists, images, and tables. Experiment with different structures and observe how they render in the browser.

As we wrap up this session, remember that setting up your environment is just the beginning. The world of HTML is vast and constantly evolving. Stay curious, experiment, and don’t be afraid to break things – that’s how we learn! In the next installment, we’ll delve deeper into HTML and start building the structure of a web page. Until then, happy coding!

More posts