Welcome to your journey as a web developer! Before writing your first program, you need to understand what HTML is and configure your local computer environment with the tools used by industry professionals.
Lesson: p0-1-setup
Welcome to your journey as a web developer! Before writing your first program, you need to understand what HTML is and configure your local computer environment with the tools used by industry professionals.
Based on the standard HTML curriculum:
Here is the basic HTML template used by developers to start every new webpage:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<!DOCTYPE html> defines that this document is an HTML5 document.<html> is the root element of an HTML page.<head> contains meta information about the HTML page (such as the page title).<title> specifies a title for the HTML page (shown in the browser's title bar or tab).<body> defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.<h1> defines a large heading.<p> defines a paragraph.An HTML element is defined by a start tag, some content, and an end tag:
<tagname> Content goes here... </tagname>
<h1>My First Heading</h1><p>My first paragraph.</p>To start building HTML pages locally, download and install the following core developer tools:
Google Chrome is the primary browser used by developers because of its fast rendering engine and powerful built-in developer tools.
VS Code is the most popular code editor in the world. It provides syntax highlighting, auto-completion, and extensions to make writing code incredibly fast.
git --version.Open your terminal (Terminal on macOS/Linux, or Git Bash on Windows) and run the following commands to verify your setup:
# Check Node.js version
node -v
# Check npm version
npm -v
# Check Git version
git --version
Install these from the extension marketplace (Ctrl+Shift+X) for an optimal environment:
| Extension Name | Developer | Purpose | | :--- | :--- | :--- | | Live Server | Ritwick Dey | Starts a local development server with auto-refresh on save | | Prettier | Prettier | Formats your HTML, CSS, and JS automatically on save |
