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
chevron up
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
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

What is an SPA?

Single Page Application is a new and very useful web trend. Using them allows you to build fast and efficient applications and reusable components that are great for mobile and responsive web applications.

Part of the popularity of the Single Page Application is due to its efficiency in front-loading all of the used libraries on the initial load into the DOM and then loading new content as needed. This way, when you want to load a new page, you do not require your user to pull down your CSS or JavaScript file over and over for any new page. You can instead just load the new content, templates, scripts, or data, as you need it. This is a very useful way to build web applications and it makes sense that people want to build them.

The SPA's relevance

The popularity of the Single Page Application has driven the rise of numerous helper libraries for making it. Frameworks are providing routing, loading, and require features that help include scripts, templates, and content, and...

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 4
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