Book Image

Web Design Blueprints

Book Image

Web Design Blueprints

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.
Table of Contents (12 chapters)
Web Design Blueprints
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface
Index

Getting the old files


For this application, let's take the Flat UI project we created and turn it into a real working Single Page Application. So go back to the project you built for that project and copy the index.html file you created and paste it into the root directory of the Single Page Application project. If you do not have it, you can get it from the GitHub project page, or from the Packt Publishing book page.

Getting the project set up

To get started, create a new project in your IDE, and we will build the app from there. Let's go over the structure. Inside the base directory, create the folders app, css, images, and lib. The css and images directories will contain the media files for CSS and images. The lib directory will contain any libraries you choose to download and use in your project. Finally, the app directory will contain the JavaScript and templates file structures you make when you build the application:

The first thing we can do is create a new CSS file, style.css, inside...