Chapter 2: Pacific Trails Resort Case Study

In this tutorial, I’ll create a complete two-page HTML website for the Pacific Trails Resort using Visual Studio Code, Emmet shortcuts, and best practices for clean, semantic HTML. You’ll learn how to set up your project folders, structure your code with semantic elements, style your content, and validate your pages for error-free deployment. RESOURCES: Emmet Documentation: https://docs.emmet.io/cheat-sheet Navigation Bar: https://www.w3schools.com/Css/css_navbar.asp Address Element: https://www.w3schools.com/tags/tag_address.asp 00:00 Introduction & Project Overview 00:40 Creating Project Folders (chapter2 & pacific) 01:30 Creating index.html & Homepage Naming 02:00 Using Emmet to Create HTML Boilerplate 02:30 Updating the title Tag 02:50 Adding Header & H1 with Emmet 03:25 Creating Navigation Menu with UL, LI, and A Tags 04:50 Adding Navigation Links (Home, Yurts, Activities, Reservations) 06:00 Saving & Viewing Page with Live Server 06:40 Adding Main Section with H2 and Paragraph (Emmet Shortcuts) 07:40 Enabling Word Wrap in VS Code 08:10 Spell Checking & Correcting Typos 09:00 Adding Emmet Comments for Future Reference 09:40 Creating Unordered List in Main Section 10:20 Adding Content to List Items 11:00 Adding Div with Paragraph for Contact Information 12:10 Editing Keybindings to Enable Duplicate Line (Ctrl+D) 13:00 Typing Address & Phone Number with br Tags 13:50 Viewing Page in Browser & Checking Layout 14:20 Adding Footer Outside Main 15:00 Formatting Footer with small & i Tags 15:50 Styling Footer with Pipe Separator & Removing Extra Paragraph 16:20 Creating Yurts Page from index.html (Save As) 17:00 Updating title & H2 for Yurts Page 17:30 Removing Old Content, Keeping Footer 17:50 Adding Description List (DL, DT, DD) with Emmet 18:50 Adding strong to Bold Questions in DT 19:30 Typing Yurt Q&A Content 20:50 Testing Navigation Links Between Pages 21:20 Final Review & Tutorial Wrap-Up