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

The Bootstrap components

Unlike the Responsive.gs framework that we used in the first project, Bootstrap is shipped with extra components, which are commonly used in the Web. Hence, before we step further into developing the portfolio website, first let's explore these components, mainly those of which we will employ within the website, such as the responsive grid, the buttons, and the form elements.

Note

Frankly, the official Bootstrap website (http://getbootstrap.com/) is always the best source to be up-to-date with anything related to Bootstrap. So, herein, I would like to point out the key things that are straightforward.

The Bootstrap responsive grid

Bootstrap comes with a Responsive Grid System, along with the supporting classes that form the columns and the rows. In Bootstrap, we build the column using these prefix classes: col-xs-, col-sm-, col-md-, and col-lg-. This is then followed by the column number, ranging from 1 to 12, to define the column size as well as to aim the column...

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