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