Chapter 1: Basics of Web Design HTML & CSS

In this tutorial, I’ll guide you through creating your very first HTML webpage using Visual Studio Code, Emmet shortcuts, and GitHub Pages for publishing. You’ll learn how to set up your project folders, write clean HTML code, preview your work in the browser, and make it live on the web. RESOURCES: Emmet cheatsheet - https://docs.emmet.io/cheat-sheet Visual Studio Code - https://code.visualstudio.com 00:00 Introduction & Overview 00:18 Creating cis152 Folder on Desktop 00:50 Opening Folder in Visual Studio Code 01:15 Creating chapter1 Folder 01:38 Creating index.html File 02:00 Using Emmet to Create HTML Boilerplate (! + Tab) 02:40 Updating the title Tag 03:10 Explaining DOCTYPE, HTML, Head, and Meta Tags 04:25 Adding p Tag and "Hello World" Text 05:05 Saving File and Previewing with Live Server 05:45 Viewing Page Source in Browser 06:20 Signing In to GitHub 06:50 Opening Repository & Adding Files 07:30 Uploading chapter1 Folder and index.html 08:05 Committing Changes on GitHub 08:30 Configuring GitHub Pages in Settings 09:05 Selecting Branch and Saving 09:25 Waiting for GitHub Pages Build 09:50 Site Goes Live – Testing URL 10:20 Navigating to chapter1/index.html on GitHub Pages 10:50 Copying Link for Canvas Submission 11:20 Final Review of Steps