Web Design Blueprints

Benjamin LaGrone

• Publisher: Packt Publishing
• Year: 2016
• ISBN:
  9781783552115
• Edition: 1
• Topic: Design
• Subtopic: Web design

Build websites and applications using the latest techniques in modern web development

About This Book

• Create amazing modern day applications that run seamlessly across multiple platforms
• Implement multiple methodologies by creating different apps with dynamic features
• This unique project-based guide will help you build your own websites efficiently

Who This Book Is For

This book is a must-have for web developers who want to stay on top of the latest trends in web app and site development. If you are a web developer who is already familiar with HTML, CSS, and functional JavaScript, and you want to learn the latest trends in web development, this is the book for you.

What You Will Learn

• Find out how to create responsive websites
• Create websites using the principals of Flat design
• Create deep-dive sites using parallax scrolling
• Discover how to use Ajax in single-page applications
• Create responsive navigation with CSS and JavaScript
• Create responsive padding with the box model property

In Detail

The book delivers simple instructions on how to design and build modern Web using the latest trends in web development. You will learn how to design responsive websites, created with modern Flat User Interface design patterns, build deep-scrolling websites with parallax 3D effects, and roll-your-own single-page applications. Finally, you'll work through an awesome chapter that combines them all.

Each chapter features actual lines of code that you can apply right away.

Style and Approach

Using real-world examples, Web Design Blueprints presents practical how-to projects for site enhancements, with a light-hearted, easy-to-understand tone. This book has individual projects that cumulate until you finally build a super-project at the end, using all the skills learned

Web Design Blueprints

---

Table of Contents

Web Design Blueprints

Credits

About the Author

About the Reviewer

www.PacktPub.com

eBooks, discount offers, and more

Why subscribe?

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

1. Responsive Web Design

Introduction to responsive web design

Getting familiar with the basics

Using the inspector

Understanding the viewport meta tag

Learning about the viewport meta tag by example

Viewing your work on the tag

Fixing the problem by adding the proper meta tag

Further explanation of the viewport meta tag

Understanding and changing the user agent string

Using the user agent string for testing

How to change the user agent string in Chrome

What next?

Using media queries for responsive design

Some background information

A small example

A better example

Adding style

Viewing your example

Adding complexity to your stylesheet

Adding more media queries

More complicated examples

Working with responsive media

Creating responsive images with srcset

How things have changed

A brand-new solution

Enough theory, let's do something

Layout basics

Making the img element responsive

Viewing your responsive image

Creating responsive images with CSS

Getting started coding

Responsive style

Above and beyond

Calculating the responsive image size

Adding responsive video to your site

Working with two use cases

Use case #1 – self-hosted video

Use case #2 – embedded through the iframe element

Responsive video CSS

Modifying the layout

Viewing the example

Communicating with responsive typography

A good solution for responsive typography

Working with an example

Create the typography's CSS

Finished!

Building responsive layouts

Creating responsive padding with the box model property

A real-world example

Applying the box model property

Finished!

Going further

Viewing your example

Adding more complexity

Finished! Now view your work

Creating responsive navigation with CSS and JavaScript

Jump into an example

Creating the responsive CSS with media queries

Your first version is complete

Going further

Adding interaction

Finally, the interaction function

Viewing your interactive responsive navigation

Summary

2. Flat UI

A brief history of flat design

Flat UI color

Sample color swatches for flat UI

The vivid color swatch

The retro color swatch

The monotone color swatch

Creating a color swatch for your project

Creating a flat UI layout

Adding content

Creating a working JavaScript clock

Adding textual content

Let's talk about the weather, travel, and the stock market

Flat UI typography

Adding webfonts

Adding flat UI elements

Flat UI CSS cleanup

Creating universal classes

Fixing time

Fixing the news and tasks elements CSS

Adding CSS for the weather section

Creating more universal classes

Final cleanup of the landscape orientation

Final cleanup of the portrait orientation

Summary

3. Parallax Scrolling

Starting off

The HTML markup

Color classes

Using SVG font icons

Getting the fonts

That's no moon!

OMG, it's full of stars!

Clouds, birds, and airplanes

The rocket

Terra firma

Next up, the CSS

Styling the objects with CSS

Styling the ground objects

Writing the JavaScript effects

Setting the row height

Spreading the objects

Spreading the clouds

Loading the page functions

Smoothening the scroll

Updating elements on the scroller

Collecting the moving elements

Creating functions for the element types

Setting the left positions

Creating the rocket's movement function

Finally, moving the earth

Summary

4. Single Page Applications

What is an SPA?

The SPA's relevance

Getting to work

Getting the old files

Getting the project set up

Object and function conventions

Creating utility functions

Creating a services layer for AJAX

Creating and using the file structure

Working with the home structure

Putting the content in the new file structure for the home

Modifying index.html and CSS

Modifying the JavaScript to use the structure

Finish the home to make it work

Setting up other sections

Breaking out the content into directories

Separating concerns and making objects

Making the routing registry tables

Using routing registry tables to load home content

Loading all sections in the structure

Making #hashes

Using #hash for routing

Performing housekeeping

Creating a callBack function for the API

Using the callBack function

Using the callBack function

Adding links that use hashes

Using APIs

Summary

5. The Death Star Chapter

Where to begin?

Deleting unnecessary features

Adding new routes

Adding the directories

Adding levels to JavaScript

Editing home.html

Dropping in the parallax game

Fixing the broken level

Moving the load functions to levels.js

Fixing the namespacing in Level1.js

Loading elements from JSON

Using the data requests

Parsing the AJAX

Moving the spreadObjects function to a general pattern

What can be done in the shared levels service

Updating elements on the scroll

Modifying the CSS

Adding message objects

Creating a clickable object

Creating a moving object

Editing the home JavaScript

Adding more to make the home interesting

Creating the other pages – credits and leaderboard

Replicating credits for the leaderboard

Creating the second level

Getting SVG objects

Creating the directory structure and routes

Creating the new JSON for each level

Creating the level 2 HTML

Creating the level2 JS

Parsing the AJAX

Updating the elements

Moving the elements

Adding some CSS

Creating the home page version

Adding final touches

Creating explosive final touches

Summary

Index

Web Design Blueprints

Copyright © 2016 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: April 2016

Production reference: 1270416

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-78355-211-5

www.packtpub.com

Credits

Author

Benjamin LaGrone

Reviewer

Kryštof Doležal

Commissioning Editor

Edward Gordon

Acquisition Editor

Reshma Raman

Content Development Editor

Sumeet Sawant

Technical Editor

Mohit Hassija

Copy Editor

Madhusudan Uchil

Project Co...