Introduction to HTML and CSS

Lesson 1/1 | Study Time: 60 Min

Instructions: Use VS Code to create and edit your index.html file. Use the Live Server extension to view your webpage in real-time as you develop.


How to begin:

1. Launch your code builder (Notepad or VS Code)

2. Create a New Document

3. Save As the new document, change the file extension to HTML

4. Create a simple HTML document named index.html.

5. Use the word processor to follow the steps:


Add basic elements like <h1>, <p>, and <a>.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph on my first web page.</p>
<a href="https://www.example.com">Visit Example</a>
</body>
</html>


6. Save the document.

7. Open the document from Finder (Apple) or using Explorer (Windows). Launch your HTML.

8. Your first HTML website build has been coded successfully and is now complete!


Tip: To manipulate your website, open your file in a text order or VS Code. Change the details between <h1> to manipulate your header. Name it something different. Modify the <a href> (link) tag to https://www.noirtube.com and save the file. Re-open your HTML document. Examine your modifications.

Noir Skills School

Noir Skills School

Product Designer
Loyal User
Junior Vendor
Best Seller

GDPR

When you visit any of our websites, it may store or retrieve information on your browser, mostly in the form of cookies. This information might be about you, your preferences or your device and is mostly used to make the site work as you expect it to. The information does not usually directly identify you, but it can give you a more personalized web experience. Because we respect your right to privacy, you can choose not to allow some types of cookies. Click on the different category headings to find out more and manage your preferences. Please note, that blocking some types of cookies may impact your experience of the site and the services we are able to offer.