Book Image

Responsive Web Design by Example : Beginner's Guide

By : Thoriq Firdaus
Book Image

Responsive Web Design by Example : Beginner's Guide

By: Thoriq Firdaus

Overview of this book

<p>Responsive web design is an explosive area of growth in modern web development due to the huge volume of different device sizes and resolutions that are now commercially available. You can now create your very own responsive website quickly and efficiently, allowing you to showcase your content in a format that will work on any device with an Internet browser.<br /><br />By following our detailed step-by-step instructions in this structured reference guide, you will learn how you can build engaging responsive websites. With coverage of Bootstrap, Skeleton, and Zurb Foundation you'll learn about three of the most powerful responsive frameworks available today.<br /><br />Leading you through by practical example, you'll find that this essential reference develops your understanding by actually helping you create beautiful websites step by step in front of your very eyes. After going over the basics, you'll be able to choose between creating your own responsive portfolio page with Skeleton, building a stunning product page with Bootstrap, or setting up your own professional business website with Zurb Foundation. Ultimately you'll learn how to decide which framework is right for you, and how you can deploy and customize it to your exact specifications!</p>
Table of Contents (14 chapters)
Responsive Web Design by Example Beginner's Guide
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Time for action – constructing the Services page content markup


We will be creating the Services page in the following steps:

  1. Open service.html in a code editor.

  2. Change the document title in the <title> tag to something like Services or Our Service. It is up to you to rename the title, as long as it relates to the page.

  3. Similar to the homepage, we will first create a container for the content. In this case, we assign <div>, with the row content page our-services class, as follows:

    <div class="row content page our-services">
      <div class="large-12 columns">
      </div>
    </div>

    An additional page class is added so that we are able to apply styles to the webpages in general. The our-services class will be used to apply styles specifically to the service page, if the need arises.

  4. Then we add the breadcrumb navigation:

    <div class="row content page our-services">
      <div class="large-12 columns">
        <ul class="breadcrumbs">
          <li><a href...