7. A Responsive Website for Business with Foundation | Responsive Web Design by Example : Beginner's Guide - Second Edition

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

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

In the htdocs folder, create a new folder, and name it startup. This is the folder in which the website will live.
Within the startup folder, create a folder named assets to contain all the assets like the style sheets, JavaScripts, images, and others.
Inside the assets folder create folders to group these assets:
- css for the style sheets.
- js to contain the JavaScripts.
- scss to contain SCSS style sheet (more about SCSS in the next chapter).
- img to contain the images.
- fonts to contain the font icons.
Add the images, including the website logo, header image, icons, and the avatar image, as shown in the following screenshot:
Now, we will download the project dependencies, which will include the Foundation framework, the icons, jQuery, and a couple of other libraries. Hence, let's open a terminal or command prompt if you are using Windows. Then, navigate to the project directory with the cd command:
- In Windows: cd \xampp...

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