Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Web Design Blueprints
  • Table Of Contents Toc
  • Feedback & Rating feedback
Web Design Blueprints

Web Design Blueprints

By : LaGrone
5 (1)
Buy this Book
close
close
Web Design Blueprints

Web Design Blueprints

5 (1)
By: LaGrone
Buy this Book

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 (7 chapters)
close
close
close
Preface
Icon
Preface
Icon
What this book covers
Icon
What you need for this book
Icon
Who this book is for
Icon
Conventions
Icon
Reader feedback
Icon
Customer support
Lock Free Chapter
1
1. Responsive Web Design
Icon
1. Responsive Web Design
Icon
Introduction to responsive web design
Icon
Getting familiar with the basics
Icon
Using media queries for responsive design
Icon
Working with responsive media
Icon
Building responsive layouts
Icon
Summary
2
2. Flat UI
Icon
2. Flat UI
Icon
A brief history of flat design
Icon
Flat UI color
Icon
Creating a flat UI layout
Icon
Summary
3
3. Parallax Scrolling
Icon
3. Parallax Scrolling
Icon
Starting off
Icon
Color classes
Icon
Using SVG font icons
Icon
Getting the fonts
Icon
That's no moon!
Icon
OMG, it's full of stars!
Icon
Clouds, birds, and airplanes
Icon
The rocket
Icon
Terra firma
Icon
Next up, the CSS
Icon
Styling the objects with CSS
Icon
Styling the ground objects
Icon
Writing the JavaScript effects
Icon
Setting the row height
Icon
Spreading the objects
Icon
Spreading the clouds
Icon
Loading the page functions
Icon
Smoothening the scroll
Icon
Updating elements on the scroller
Icon
Collecting the moving elements
Icon
Creating functions for the element types
Icon
Setting the left positions
Icon
Creating the rocket's movement function
Icon
Finally, moving the earth
Icon
Summary
4
4. Single Page Applications
Icon
4. Single Page Applications
Icon
What is an SPA?
Icon
Getting to work
Icon
Getting the old files
Icon
Object and function conventions
Icon
Creating utility functions
Icon
Working with the home structure
Icon
Setting up other sections
Icon
Performing housekeeping
Icon
Creating a callBack function for the API
Icon
Summary
5
5. The Death Star Chapter
chevron up
Icon
5. The Death Star Chapter
Icon
Where to begin?
Icon
Dropping in the parallax game
Icon
Loading elements from JSON
Icon
What can be done in the shared levels service
Icon
Editing the home JavaScript
Icon
Creating the other pages – credits and leaderboard
Icon
Creating the second level
Icon
Summary
6
Index
Icon
Index

Loading elements from JSON

The next big change is to improve the loading of the objects. The old way to load them is to have the HTML already in the template. We want to do it in this improved way that treats the objects like data and loads them as such. We will be removing all the stars, clouds, the rocket, and other objects. These objects will now be stored in the level1.json file we created earlier. Let's break the HTML so we have something to fix again. As you can probably tell, I like to break things and then fix them, but I'm not sure which I like more.

In your level1.html partial template, start by removing the i element for the moon inside the DIV element with the ID p0.

<i class = "fa fa-moon-o fa-5x yellow"></i>

In the next DIV element, with the ID p1, remove its child DIV element with the ID stars, and all of the children i elements. Next, there is the clouds in the p9, p10, p11, and p12 elements. In addition, remove the plane and Twitter elements. Keep going to remove...

Visually different images
CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Web Design Blueprints
End of Section 5
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon