📖 Writing Code Using VS Code

Introduction to IDEs

Integrated Development Environments (IDEs) simplify the process of writing and managing code. While you can use basic text editors, IDEs like Visual Studio Code (VS Code) provide features like syntax highlighting, debugging tools, and built-in version control, making them essential for efficient web development.

VS Code is highly recommended for this course due to its:

  • Cross-platform compatibility (PC, Mac, Linux)
  • Syntax highlighting for detecting errors
  • Built-in support for Emmet, a tool for quick HTML scaffolding

Getting Started with VS Code

To begin, download and install VS Code from the official site: https://code.visualstudio.com/. Once installed, familiarize yourself with the workspace, which includes:

  • The editor pane for writing code
  • The file explorer for managing project files
  • The integrated terminal for running commands

Using Emmet to Create a Sample HTML Document

Emmet is a built-in feature of VS Code that allows you to quickly generate HTML structure and commonly used tags. It helps streamline the coding process by reducing repetitive typing. Follow these steps to create your first HTML document:

  1. Create a new file in VS Code and save it as index.html.
  2. Type ! in the editor and press Tab. This will generate the default HTML5 boilerplate.

What the Emmet Output Looks Like


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

In addition to the boilerplate, Emmet can help you quickly generate common HTML tags. For example:

h1 + Tab
Generates <h1></h1>.
p + Tab
Generates <p></p>.

These shortcuts save time and ensure consistent, error-free code. Experiment with Emmet to familiarize yourself with its capabilities.

Understanding Tags

HTML tags define the structure and meaning of your content. For example:

<title>
Defines the text shown in the browser tab.
<body>
Holds the visible content of the page.

Adding Content to the Page

HTML tags wrap the page content to give the browser context for understanding the purpose of the content. A top-level heading displayed on the page would look like this. Notice how the heading is contained within the <body> tags for display on the page and the heading content is contained within the <h1> tags for display style and context (large, bold heading text).

<body>
    <h1>My Heading Content</h1>
</body>

Update the HTML document to include the following.

  1. Replace the content of the <title> tag with your name and the assignment title (e.g., "John Doe's Workflow").
  2. Add an <h1> tag in the <body> section with the text: "Welcome to John Doe's Workflow!"
  3. Add a <p> tag below the heading with a brief introduction (e.g., "This is John Doe. I'm excited to learn about web design!").

Resources for Further Learning