Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Responsive Web Design by Example : Beginner's Guide - Second Edition - Second Edition

By : Thoriq Firdaus

4.7 (3)

Responsive Web Design by Example : Beginner's Guide - Second Edition

4.7 (3)

By: Thoriq Firdaus

Overview of this book

This is the ideal reference for both new and existing web developers who want to be able to augment their skills and showcase their content in a truly professional manner.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Sections

Time for action – heading

Conventions

Reader feedback

Customer support

Free Chapter

1. Responsive Web Design

1. Responsive Web Design

Responsive web design in a nutshell

A look into responsive frameworks

Responsive web design inspiration sources

Summary

2. Web Development Tools

2. Web Development Tools

Choosing a code editor

Time for action – installing Sublime Text Package Control

Time for action – installing XAMPP

Managing project dependency with Bower

Time for action – installing Node.js

Time for action – installing Bower

Summary

3. Constructing a Simple Responsive Blog with Responsive.gs

3. Constructing a Simple Responsive Blog with Responsive.gs

Responsive.gs components

Using HTML5 elements for semantic markups

Examining the blog's wireframe

Organizing project directories and files

Time for action – creating and organizing project directories and assets

The blog HTML structures

Time for action – constructing the blog

Summary

4. Enhancing the Blog Appearance

4. Enhancing the Blog Appearance

Using CSS3

Working with Koala

Time for action – integrating project directory into Koala and combining the style sheets

Thinking mobile first

Composing the blog styles

Time for action – composing the base style rules

Time for action – enhancing the header and the navigation appearance with CSS

Time for action – enhancing the content section appearance with CSS

Time for action – enhancing the footer section appearance with CSS

Optimize the blog for desktop

Time for action – composing style rules for desktop

Making Internet Explorer more capable with polyfills

Time for action – patch Internet Explorer with polyfills

Summary

5. Developing a Portfolio Website with Bootstrap

5. Developing a Portfolio Website with Bootstrap

The Bootstrap components

Digging into Bootstrap

Using font icons

Examining the portfolio website layout

Project directories, assets, and dependencies

Time for action – organizing project directories, assets, and installing project dependencies with Bower

The portfolio website HTML structure

Time for action – building the website HTML structure

Summary

6. Polishing the Responsive Portfolio Website with LESS

6. Polishing the Responsive Portfolio Website with LESS

Basic LESS syntax

External style sheet references

Time for action – creating style sheets and organizing external style sheet references

Working with Koala

Time for action – compiling LESS into CSS using Koala

Polishing the portfolio website with LESS

Time for action – composing the website styles with LESS syntax

Improve and make the website functioning with JavaScript

Time for action – compiling JavaScript with Koala

Summary

7. A Responsive Website for Business with Foundation

7. A Responsive Website for Business with Foundation

Examining the website layout

A look into Foundation

Additional required assets

The project directories, assets, and dependencies

Time for action – organizing the project directories, assets, and dependencies

Time for action – building the website's HTML structure

Summary

8. Extending Foundation

8. Extending Foundation

Syntactically Awesome Style Sheets

Project recap

Style sheet organizations

Time for action – organizing and compiling style sheets

The website's look and feel

Time for action – build on the website

Fine-tuning the website

Time for action – compiling JavaScript and styling the website with media queries

Summary

A. Pop Quiz Answers

Chapter 1, Responsive Web Design

Chapter 2, Web Development Tools

Chapter 3, Constructing a Simple Respons3ive Blog with Responsive.gs

Chapter 4, Enhancing the Blog Appearance

Chapter 5, Developing a Portfolio Website with Bootstrap

Chapter 6, Polishing the Responsive Portfolio Website with LESS

Chapter 8, Extend Foundation

Index

Index

Conventions

You will also find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.

Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "The boxsizing.htc file that comes with Responsive.gs will apply similar functionality as in the CSS3 box-sizing property."

A block of code is set as follows:

* { 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  *behavior: url(/scripts/boxsizing.htc); 
}

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

* { 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  *behavior: url(/scripts/boxsizing.htc); 
}

Any command-line input or output is written as follows:

cd \xampp\htdocs\portfolio
bower init

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: " Check the Source Map option for both style sheets to generate the source map files, which would help us when debugging."

Note

Warnings or important notes appear in a box like this.

Tip

Tips and tricks appear like this.

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Responsive Web Design by Example : Beginner's Guide - Second Edition

Search

Your notes and bookmarks