Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

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

Chapter 5. The Death Star Chapter

Hi, and welcome back. This is the final chapter. This chapter is a special challenge as I was asked to create a project that integrated all of the previous chapters into one final exciting project. I've come up with a project that is a framework for creating a scrolling game with multiple levels that builds on previous code projects from this book. The editorial team liked the concept enough to call this chapter "The Death Star Chapter."

So with that, let's move forward with creating our Death Star Chapter. This chapter will pick up what we built with the Single Page Application and then shove our parallax scroller into it, and make it a responsive, flat UI, multi-level, single page, parallax scrolling game. We are going to modify the structure and add some new stuff to our stack.

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