4. Single Page Applications | Web Design Blueprints

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents
Feedback & Rating

Web Design Blueprints

By : LaGrone

5 (1)

Web Design Blueprints

5 (1)

By: LaGrone

Overview of this book

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.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

1. Responsive Web Design

1. Responsive Web Design

Introduction to responsive web design

Getting familiar with the basics

Using media queries for responsive design

Working with responsive media

Building responsive layouts

Summary

2. Flat UI

2. Flat UI

A brief history of flat design

Flat UI color

Creating a flat UI layout

Summary

3. Parallax Scrolling

3. Parallax Scrolling

Starting off

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

4. Single Page Applications

What is an SPA?

Getting to work

Getting the old files

Object and function conventions

Creating utility functions

Working with the home structure

Setting up other sections

Performing housekeeping

Creating a callBack function for the API

Summary

5. The Death Star Chapter

5. The Death Star Chapter

Where to begin?

Dropping in the parallax game

Loading elements from JSON

What can be done in the shared levels service

Editing the home JavaScript

Creating the other pages – credits and leaderboard

Creating the second level

Summary

Index

Index

Customer Reviews

5 (1)

5 star

100%

4 star

0%

3 star

0%

2 star

0%

1 star

0%

Getting to work

In this section, we will get the project started and the filesystem established. For this project, let's take an overview of the task at hand. Developing it is not so straightforward; there are a number of steps that we would have to go through before it works. So our development should have some specific milestones of understanding at each step. We will take a UI template we have already build and build it into a Single Page Application Framework. First we will get the template, and break it into the main template and a component loaded through an AJAX function. Then we will break the home page content into sections that are loaded in a loop from an array containing route information, a routing table. Finally we will create pages that we can navigate through using the routing table to load the content from links. We will also learn how to use the hash for Single Page Application navigation.

Visually different images

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.

Web Design Blueprints

Search

Your notes and bookmarks