Skip to Content

Basics of Web Design
HTML5 & CSS3 Second Edition


Chapter 8 – More on Links, Layout, and Mobile

Now that you've had some experience coding HTML and CSS you're ready to explore the topics in this chapter, including relative hyperlinks and named fragment hyperlinks, captioning a figure, more new HTML5 structural elements, ensuring compatibility with older browsers, styling for print, styling for mobile browsers, and responsive web design techniques as you configure CSS3 media queries to target mobile devices.

Design for the Mobile Web

Responsive Web Design and CSS Media Queries

Designing for the Mobile Web

Quick Browser Tools for Testing RWD & Media Queries

Testing Mobile Display

Responsive Images and the New Picture Element

Exploring CSS3 & HTML5

Adobe's new resource site, http://theexpressiveweb.com, showcases new HTML5 & CSS3 coding techniques, including CSS3 Animations, CSS3 Media Queries, HTML5 Canvas, Web Storage, and more! The site is organized by coding techniques, called "features" by Adobe — and provides for each feature with an overview, examples, browser support chart, detection and fallback strategies, and list of related Adobe technologies.

Chapter Updates

  • Page 228
    In the third paragraph on the page, replace indext.html with index.html.

  • Page 236
    Disregard the topic "The Hgroup Element". The HTML5 Candidate Recommendation included the hgroup element in the list of "at risk" features. In early 2013, the hgroup element was removed from HTML5.1. At this point web developers should not use the hgroup element. The W3C HTML5 validator has been modified to flag the hgroup element as a syntax error.

  • Page 237,#1
    Because the hgroup element was removed from HTML5 after this book was written, your web page will not pass W3C validation if you code the hgroup element. Do not code the hgroup tags.

  • Page 238 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 8.8 (pages 248-249) needs to be updated. Download the revised starter2.html file.
    • Page 248, #1
      Set the width of the nav to auto and also configure a zero left margin for the #content selector. The code sample is

      @media only screen and (max-width: 768px) {
                  nav { float: none; width: auto; padding: 0.5em; }
                 #content { margin-left: 0; }
      }



    • Page 248-249, #3
      In the code sample: the style declaration for #wrapper should be width: auto; instead of margin: auto;
      The complete code sample should be:

      @media only screen and (max-width: 768px) {
                  body { margin: 0; }
                  #wrapper { width: auto; }
                   nav { float: none; width: auto; padding: 0.5em; }
                   #content { margin-left: 0; }
                   nav li { display: inline; }
                   nav ul { text-align: center; }
      }


    • Page 249, #5
      If you'd like a little different display, do not code a style declaration for the #content selector and add the following style declaration for the nav element selector instead:
      nav { padding: 0 }

  • Page 253
    In the "Quick Tip", change "Internet Explorer prior to version 9 does support" to Internet Explorer prior to version 9 does not support".

  • Pacific Trails Resort Case Study
    Task 2 Pages 256-257
    The media queries should be coded BELOW the existing CSS in the pacific.css file.

  • JavaJam Coffee House Case Study
    Task 2 Pages 260-262
    The media queries should be coded BELOW the existing CSS in the javajam.css file.

Questions or Comments

The author would like to hear from you!
Feel free to complete the contact form with your questions or comments.

Book Cover

Review Games

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

HTML5 Resources

CSS Resources


Share |