Chapter 6: Pacific Trails Resort Case Study

Learn how to update the Pacific Trails Resort website with a modern, centered page layout that features a hero image on each page. In this step-by-step tutorial, we’ll work with the Chapter 5 project files and enhance them using HTML, CSS, and Emmet abbreviations in Visual Studio Code. RESOURCES: Firefox Developer Tools: https://developer.mozilla.org/en-US/d... Chrome DevTools: https://developers.google.com/web/too... How to Create a Hero Image: https://www.w3schools.com/howto/howto_css_hero_image.asp w3c validator: http://jigsaw.w3.org/css-validator/validator CSS box-shadow Property: https://www.w3schools.com/CSSref/css3_pr_box-shadow.asp 00:00 – Introduction 00:45 – Setting Up Project Folders and Files 02:05 – Adding the Wrapper Div and Basic Styles 04:10 – Creating a CSS Gradient Background 07:15 – Styling the Wrapper with Box-Shadow and Widths 09:40 – Updating the Header and Navigation Styles 12:30 – Adding Padding to the Main Content Area 15:10 – Inspecting and Adjusting Styles in the Browser 17:25 – Adding a Text Shadow to Headings 19:05 – Footer Styling with em Units 20:30 – Creating Multiple Hero Image Selectors 23:15 – Applying Background Images to Home, Yurts, and Activities Pages 26:00 – Using the W3C Validator to Check CSS 28:05 – Updating HTML to Include Hero Image Divs 31:00 – Final Review and Closing Remarks