Index

B

• box model property
  • responsive padding, creating with / Applying the box model property

C

• callBack function
  • creating, for API / Creating a callBack function for the API
  • using / Using the callBack function, Using the callBack function
  • links using hashes, adding / Adding links that use hashes
  • APIs, using / Using APIs
• Cards function / Adding content
• color swatches, for flat UI
  • about / Sample color swatches for flat UI
  • vivid color swatch / The vivid color swatch
  • retro color swatch / The retro color swatch
  • monotone color swatch / The monotone color swatch
• content
  • breaking out into directories / Breaking out the content into directories
• credits page
  • creating / Creating the other pages – credits and leaderboard
• CSS
  • about / Next up, the CSS
  • objects, styling with / Styling the objects with CSS
  • ground objects, styling / Styling the ground objects

D

• Death Star Chapter
  • creating / Where to begin?
  • unnecessary features, deleting / Deleting unnecessary features
  • new routes, adding / Adding new routes
  • directories, adding / Adding the directories
  • levels JavaScript, adding / Adding levels to JavaScript
  • home.html, editing / Editing home.html

E

• elements, loading from JSON
  • about / Loading elements from JSON
  • data request, using / Using the data requests
  • AJAX, parsing / Parsing the AJAX
  • spreadObjects function, moving to general pattern / Moving the spreadObjects function to a general pattern

F

• flat UI
  • brief history / A brief history of flat design
  • color / Flat UI color
  • sample color swatches / Sample color swatches for flat UI
  • color swatch, creating / Creating a color swatch for your project
• flat UI color
  • reference / Flat UI color
• flat UI layout
  • creating / Creating a flat UI layout
  • content, adding / Adding content
  • working JavaScript clock, creating / Creating a working JavaScript clock
  • textual content, adding / Adding textual content
  • weather information, displaying / Let's talk about the weather, travel, and the stock market
  • flat UI typography / Flat UI typography
  • webfonts, adding / Adding webfonts
  • flat UI elements, adding / Adding flat UI elements
  • CSS cleanup / Flat UI CSS cleanup
  • universal classes, creating / Creating universal classes, Creating more universal classes
  • time, fixing / Fixing time
  • news and tasks elements CSS, fixing / Fixing the news and tasks elements CSS
  • CSS, adding for weather section / Adding CSS for the weather section
  • final cleanup, of landscape orientation / Final cleanup of the landscape orientation
  • final cleanup, of portrait orientation / Final cleanup of the portrait orientation
• Font Awesome / Adding flat UI elements

H

• #hashes
  • creating / Making #hashes
  • used, for routing / Using #hash for routing
• home JavaScript
  • editing / Editing the home JavaScript
  • content, adding / Adding more to make the home interesting
• home structure
  • working with / Working with the home structure
  • content, adding / Putting the content in the new file structure for the home
  • index.html, modifying / Modifying index.html and CSS
  • CSS, modifying / Modifying index.html and CSS
  • JavaScript, modifying / Modifying the JavaScript to use the structure
  • implementing / Finish the home to make it work
• housekeeping
  • performing / Performing housekeeping

I

• inspector
  • using / Using the inspector
• ipsum tex
  • URL / Learning about the viewport meta tag by example

J

• JavaScript effects
  • writing / Writing the JavaScript effects
  • row height, setting / Setting the row height
  • objects, spreading / Spreading the objects
  • clouds, spreading / Spreading the clouds
  • page functions, loading / Loading the page functions

L

• leaderboard page
  • creating / Creating the other pages – credits and leaderboard
  • credits, replicating for / Replicating credits for the leaderboard

M

• media queries
  • using, for responsive design / Using media queries for responsive design
• media queries, for responsive design
  • media queries, using / Using media queries for responsive design
  • background information / Some background information
  • small example / A small example
  • example / A better example
  • styles, adding / Adding style
  • example, viewing / Viewing your example
  • complexity, adding to stylesheet / Adding complexity to your stylesheet
  • adding / Adding more media queries
  • examples / More complicated examples
• monotone color swatch
  • about / The monotone color swatch

N

• Nikola Tesla
  • URL / Using the user agent string for testing

O

• objects
  • creating / Separating concerns and making objects

P

• parallax game, dropping in
  • about / Dropping in the parallax game
  • broken level, fixing / Fixing the broken level
  • load functions, moving to levels.js / Moving the load functions to levels.js
  • namespacing, fixing in Level1.js / Fixing the namespacing in Level1.js
• parallax scrolling
  • about / Starting off
  • HTML markup / The HTML markup
  • color classes / Color classes
• pipes
  • about / What next?

R

• responsive images
  • about / Working with responsive media
  • creating, srcset used / Creating responsive images with srcset
  • modifications / How things have changed
  • solutions / A brand-new solution
  • using / Enough theory, let's do something
  • with CSS / Creating responsive images with CSS
  • coding / Getting started coding
  • responsive style / Responsive style
  • above and beyond / Above and beyond
  • size, calculating / Calculating the responsive image size
• responsive layouts
  • building / Building responsive layouts
  • responsive padding, creating with box model property / Creating responsive padding with the box model property
  • real-world example / A real-world example
  • box model property, applying / Applying the box model property
  • finishing / Finished!, Finished! Now view your work
  • example, viewing / Viewing your example
  • complexity, adding / Adding more complexity
• responsive media
  • responsive images, creating with srcset / Creating responsive images with srcset
  • responsive images, creating with CSS / Creating responsive images with CSS
  • responsive image size, creating / Calculating the responsive image size
  • responsive video, adding to site / Adding responsive video to your site
  • responsive typography / Communicating with responsive typography
• responsive navigation
  • creating, with CSS / Creating responsive navigation with CSS and JavaScript
  • creating, with JavaScript / Creating responsive navigation with CSS and JavaScript
  • with CSS / Creating responsive navigation with CSS and JavaScript
  • with JavaScript / Creating responsive navigation with CSS and JavaScript
  • example / Jump into an example
  • responsive CSS, with media queries / Creating the responsive CSS with media queries
  • final version, finishing / Your first version is complete
  • further / Going further
  • interaction, adding / Adding interaction
  • interaction function, finally / Finally, the interaction function
  • viewing / Viewing your interactive responsive navigation
• responsive padding
  • creating, with box model property / Creating responsive padding with the box model property
• responsive typography
  • about / Communicating with responsive typography
  • solution / A good solution for responsive typography
  • example, working with / Working with an example
  • CSS, creating / Create the typography's CSS
  • finishing / Finished!
• responsive video
  • adding, to site / Adding responsive video to your site
  • two use cases, working with / Working with two use cases
  • self-hosted video, use case / Use case #1 – self-hosted video
  • iframe element, use case / Use case #2 – embedded through the iframe element
  • CSS / Responsive video CSS
  • layout, modifying / Modifying the layout
  • example, viewing / Viewing the example
• responsive web design
  • about / Introduction to responsive web design
• retro color swatch
  • about / The retro color swatch
• routing registry tables
  • creating / Making the routing registry tables
  • used, for loading home content / Using routing registry tables to load home content

S

• scroll, smoothening
  • about / Smoothening the scroll
  • elements, updating on scroller / Updating elements on the scroller
  • moving elements, collecting / Collecting the moving elements
  • functions, creating for element types / Creating functions for the element types
  • left positions, setting / Setting the left positions
  • rocket's movement function, creating / Creating the rocket's movement function
  • earth movement / Finally, moving the earth
• second level
  • creating / Creating the second level
  • SVG objects / Getting SVG objects
  • directory structure, creating / Creating the directory structure and routes
  • routes, creating / Creating the directory structure and routes
  • JSON, creating / Creating the new JSON for each level
  • level2 HTML, creating / Creating the level 2 HTML
  • level2 JS, creating / Creating the level2 JS
  • AJAX, parsing / Parsing the AJAX
  • elements, updating / Updating the elements
  • elements, moving / Moving the elements
  • CSS, adding / Adding some CSS
  • home page version, creating / Creating the home page version
  • final touches, adding / Adding final touches
  • explosive final touches, creating / Creating explosive final touches
• sections
  • setting up / Setting up other sections
  • loading, in structure / Loading all sections in the structure
• shared levels service
  • about / What can be done in the shared levels service
  • element, updating on scroll / Updating elements on the scroll
  • CSS, modifying / Modifying the CSS
  • message objects, adding / Adding message objects
  • clickable object, creating / Creating a clickable object
  • moving object, creating / Creating a moving object
• smoothScrollTo function
  • about / Smoothening the scroll
• SPA
  • about / What is an SPA?, The SPA's relevance
  • working with / Getting to work
  • project, setting up / Getting the project set up
  • object convention / Object and function conventions
  • function convention / Object and function conventions
• SVG font icons
  • using / Using SVG font icons
  • obtaining / Getting the fonts
  • moon, adding / That's no moon!
  • stars, adding / OMG, it's full of stars!
  • clouds, adding / Clouds, birds, and airplanes
  • birds, adding / Clouds, birds, and airplanes
  • airplanes, adding / Clouds, birds, and airplanes
  • rocket, adding / The rocket
  • terra SECTION element, adding / Terra firma

U

• user agent string
  • about / Understanding and changing the user agent string
  • using, for testing / Using the user agent string for testing
  • in Chrome, changing / How to change the user agent string in Chrome
• utility functions
  • creating / Creating utility functions
  • services layer, creating for AJAX / Creating a services layer for AJAX
  • file structure, creating / Creating and using the file structure
  • file structure, using / Creating and using the file structure

V

• viewport meta tag
  • about / Understanding the viewport meta tag, Further explanation of the viewport meta tag
  • by example / Learning about the viewport meta tag by example
  • work, viewing / Viewing your work on the tag
  • issues, fixing / Fixing the problem by adding the proper meta tag
• vivid color swatch
  • about / The vivid color swatch

W

• W3C
  • URL / Some background information