Chapter 7: Pacific Trails Resort Case Study

In this video tutorial, we will update the Pacific Trails Resort website using the existing Chapter 6 files as our starting point. You'll learn how to enhance a website with HTML and CSS, refine navigation, and create a two-column layout using floated section elements. While modern layouts often use Flexbox and Grid, understanding foundational techniques like the universal selector, floated elements, and pseudo-classes helps maintain legacy code and strengthens your CSS fundamentals. We'll cover: setting up a universal selector, styling headers and navigation, configuring pseudo-class links, adding section and main element styling, and structuring content with margins, padding, and columns. By the end, your website pages will be structured according to best practices. RESOURCES: Emmet Cheat Sheet: https://docs.emmet.io/cheat-sheet/ W3C CSS Validator: http://jigsaw.w3.org/css-validator/validator CSS background-size Property: https://www.w3schools.com/csSref/css3_pr_background-size.asp CSS Box Sizing: https://www.w3schools.com/csSref/css3_pr_background-size.asp 0:00 – Introduction & Project Overview 1:05 – Copying Chapter6 Files to Create Chapter7 2:30 – Understanding the Universal Selector & Box-Sizing 4:15 – Updating #wrapper and Body Styles 6:00 – Styling H1 and Navigation 8:10 – Adding Floats, Padding, and Width for Layout 10:20 – Configuring Hero ID Selectors (#homehero, #yurthero, #trailhero) 11:45 – Styling Main & Section Elements (Two-Column Layout) 14:10 – Footer Styling and Background Colors 15:30 – Navigation Descendant Selectors & Removing Bullets 17:00 – Pseudo-Class Links (:link, :visited, :hover, :active) 19:15 – Updating H3 Elements and Adding Section Tags 21:40 – Testing Layout in Browser & Inspecting Elements 23:00 – Final Review of Two-Column Layout & Content Updates