Pacific Trails Resort Case Study Chapter 6 Css

Chapter 6 Page Layout

You’ve already configured the centered page layout with CSS. We’ll add to your toolbox of CSS page layout techniques in this chapter, starting with the box model. You’ll explore floating and positioning elements with CSS. You’ll be introduced to using CSS to add interactivity to hyperlinks with pseudo-classes and use CSS to style navigation in unordered lists. You will practice coding new HTML5 elements that structure web page content.

Inspiration

The Box Model


Little Boxes

Resources & Chapter Links


Explore Further

Visit Modernizr and explore a free open-source JavaScript library that enables backward compatibility for HTML5 and CSS3 in older browsers.

Review Activities

Review game activities are available for this chapter.
Check your knowledge of chapter terms and concepts.

Chapter Updates

  • Page 285, HTML5 Shim (AKA HTML5 Shiv)
    The HTML5 Shiv has moved from Google to GitHub at https://github.com/aFarkas/html5shiv.

    Download https://github.com/aFarkas/html5shiv/archive/master.zip
    Extract the .zip file. Locate the dist/html5shiv.js file and copy it into the same folder as your web page.

    Include the following code in the head section of your web page.
    <!--[if lt IE 9]>
    <script src="html5shiv.js"></script>
    <![endif]-->


  • Hands-On Practice 6.11, Page 286
    Obtain the html5shiv.js file as described above,
    Step 3 Add the code listed above below the closing style tag and above the closing head tag.

  • Hands-On Practice 6.7, Page 272
    Name the folder replacech6 instead of replacech5.

  • JavaJam Coffee House Case Study
    Configure the HTML5 Shim as noted in the first chapter update.

  • Fish Creek Animal Hospital Case Study
    Configure the HTML5 Shim as noted in the first chapter update.

  • Pacific Trails Resort Case Study
    Configure the HTML5 Shim as noted in the first chapter update.

  • Path of Light Yoga Studio Case Study
    Configure the HTML5 Shim as noted in the first chapter update.

    Do not delete the id="hero" code from the Classes and Schedule pages. You will use this in the Chapter 7 Case Study.


Questions or Comments?

The author would like to hear from you! Send an e-mail to webdevfoundations@gmail.com

Pacific Trails Case StudyChapter 7 HTML & CSS Index Page<!DOCTYPE html><html lang="en"><head><title>Pacific Trails Resort</title><meta charset="utf-8"><link rel="stylesheet" href="pacific.css"><link rel="icon" href="images/favicon.ico" type="image/x-icon"><meta name="viewport" content="width-device-width, initial-scale=1.0"><!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--></head><body><div id="wrapper"><header><h1>Pacific Trails Resort</h1></header><nav><ul><li><a href="index.html">Home</a></li> <li><a href="yurts.html">Yurts</a></li> <li><a href="activities.html">Activities</a></li> <li><a href="reservations.html">Reservations</a></li></ul></nav><div id="homehero"></div><main><h2>Enjoy Nature in Luxury</h2><p><span class="resort">Pacific Trails Resort</span> offers a special lodging experience on the California NorthCoast. Relax in serenity with panoramic views of the Pacific Ocean.</p><ul><li>Private yurts with decks overlooking the ocean</li><li>Activities lodge withfireplace and gift shop</li><li>Nightly find dining at the Overlook Cafe</li>

0 Thoughts to “Pacific Trails Resort Case Study Chapter 6 Css

Leave a comment

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *