Front-End Web Development: The Big Nerd Ranch Guide

Front-End Web Development: The Big Nerd Ranch Guide

by Chris Aquino, Todd Gandee
Released July 2016
Publisher(s): Big Nerd Ranch Guides
ISBN: 9780134432595

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Front-end development targets the browser, putting your applications in front of the widest range of users regardless of device or operating system. This guide will give you a solid foundation for creating rich web experiences across platforms.


Focusing on JavaScript, CSS3, and HTML5, this book is for programmers with a background in other platforms and developers with previous web experience who need to get up to speed quickly on current tools and best practices.


Each chapter of this book will guide you through essential concepts and APIs as you build a series of applications. You will implement responsive UIs, access remote web services, build applications with Ember.js, and more. You will also debug and test your code with cutting-edge development tools and harness the power of Node.js and the wealth of open-source modules in the npm registry. After working through the step-by-step example projects, you will understand how to build modern websites and web applications.

Table of contents

  1. Title Page
  2. Acknowledgments
  3. Table of Contents
  4. Dedication
  5. Introduction
    1. Learning Front-End Web Development
    2. Prerequisites
    3. How This Book Is Organized
    4. How to Use This Book
    5. Challenges
    6. For the More Curious
    7. Using an eBook
  6. I. Core Browser Programming
    1. 1. Setting Up Your Development Environment
      1. Installing Google Chrome
      2. Installing and Configuring Atom
        1. Atom plug-ins
      3. Documentation and Reference Sources
      4. Crash Course in the Command Line
        1. Finding out what directory you are in
        2. Creating a directory
        3. Changing directories
        4. Listing files in a directory
        5. Getting administrator privileges
        6. Quitting a program
      5. Installing Node.js and browser-sync
      6. For the More Curious: Alternatives to Atom
    2. 2. Setting Up Your First Project
      1. Setting Up Ottergram
        1. Initial HTML
        2. Linking a stylesheet
        3. Adding content
        4. Adding images
      2. Viewing the Web Page in the Browser
      3. The Chrome Developer Tools
      4. For the More Curious: CSS Versions
      5. For the More Curious: The favicon.ico
      6. Silver Challenge: Adding a favicon.ico
    3. 3. Styles
      1. Creating a Styling Baseline
      2. Preparing the HTML for Styling
      3. Anatomy of a Style
      4. Your First Styling Rule
        1. The box model
      5. Style Inheritance
      6. Making Images Fit the Window
      7. Color
      8. Adjusting the Space Between Items
        1. Relationship selectors
      9. Adding a Font
      10. Bronze Challenge: Color Change
      11. For the More Curious: Specificity! When Selectors Collide…
    4. 4. Responsive Layouts with Flexbox
      1. Expanding the Interface
        1. Adding the detail image
        2. Horizontal layout for thumbnails
      2. Flexbox
        1. Creating a flex container
        2. Changing the flex-direction
        3. Grouping elements within a flex item
        4. The flex shorthand property
        5. Ordering, justifying, and aligning flex items
        6. Centering the detail image
      3. Absolute and Relative Positioning
    5. 5. Adaptive Layouts with Media Queries
      1. Resetting the Viewport
      2. Adding a Media Query
      3. Bronze Challenge: Portrait
      4. For the More Curious: Common Solutions (and Bugs) with Flexbox Layouts
      5. Gold Challenge: Holy Grail Layout
    6. 6. Handling Events with JavaScript
      1. Preparing the Anchor Tags for Duty
      2. Your First Script
      3. Overview of the JavaScript for Ottergram
      4. Declaring String Variables
      5. Working in the Console
      6. Accessing DOM Elements
      7. Writing the setDetails Function
        1. Accepting arguments by declaring parameters
      8. Returning Values from Functions
      9. Adding an Event Listener
      10. Accessing All the Thumbnails
      11. Iterating Through the Array of Thumbnails
      12. Silver Challenge: Link Hijack
      13. Gold Challenge: Random Otters
      14. For the More Curious: Strict Mode
      15. For the More Curious: Closures
      16. For the More Curious: NodeLists and HTMLCollections
      17. For the More Curious: JavaScript Types
    7. 7. Visual Effects with CSS
      1. Hiding and Showing the Detail Image
        1. Creating styles to hide the detail image
        2. Writing the JavaScript to hide the detail image
        3. Listening for the keypress event
        4. Showing the detail image again
      2. State Changes with CSS Transitions
        1. Working with the transform property
        2. Adding a CSS transition
        3. Using a timing function
        4. Transition on class change
        5. Triggering transitions with JavaScript
      3. Custom Timing Functions
      4. For the More Curious: Rules for Type Coercion
  7. II. Modules, Objects, and Forms
    1. 8. Modules, Objects, and Methods
      1. Modules
        1. The module pattern
        2. Modifying an object with an IIFE
      2. Setting Up CoffeeRun
      3. Creating the DataStore Module
      4. Adding Modules to a Namespace
      5. Constructors
        1. A constructor’s prototype
        2. Adding methods to the constructor
      6. Creating the Truck Module
        1. Adding orders
        2. Removing orders
      7. Debugging
        1. Locating bugs with the DevTools
        2. Setting the value of this with bind
      8. Initializing CoffeeRun on Page Load
        1. Creating the Truck instance
      9. Bronze Challenge: Truck ID for Non-Trekkies
      10. For the More Curious: Private Module Data
      11. Silver Challenge: Making data Private
      12. For the More Curious: Setting this in forEach’s Callback
    2. 9. Introduction to Bootstrap
      1. Adding Bootstrap
        1. How Bootstrap works
      2. Creating the Order Form
        1. Adding text input fields
          1. Linking a label and a form element
          2. Adding autofocus
          3. Adding an email input field
            1. Showing example input with placeholder text
        2. Offering choices with radio buttons
        3. Adding a dropdown menu
        4. Adding a range slider
        5. Adding Submit and Reset buttons
    3. 10. Processing Forms with JavaScript
      1. Creating the FormHandler Module
        1. Introduction to jQuery
        2. Importing jQuery
        3. Configuring instances of FormHandler with a selector
      2. Adding the submit Handler
        1. Extracting the data
        2. Accepting and calling a callback
      3. Using FormHandler
        1. Registering createOrder as a submit handler
      4. UI Enhancements
      5. Bronze Challenge: Supersize It
      6. Silver Challenge: Showing the Value as the Slider Changes
      7. Gold Challenge: Adding Achievements
    4. 11. From Data to DOM
      1. Setting Up the Checklist
      2. Creating the CheckList Module
      3. Creating the Row Constructor
        1. Creating DOM elements with jQuery
      4. Creating CheckList Rows on Submit
        1. Manipulating this with call
      5. Delivering an Order by Clicking a Row
        1. Creating the CheckList.prototype.removeRow method
        2. Removing overwritten entries
        3. Writing the addClickHandler method
        4. Calling addClickHandler
      6. Bronze Challenge: Adding the Strength to the Description
      7. Silver Challenge: Color Coding by Flavor Shot
      8. Gold Challenge: Allowing Order Editing
    5. 12. Validating Forms
      1. The required Attribute
      2. Validating with Regular Expressions
      3. Constraint Validation API
        1. Listening for the input event
        2. Associating the validation check with the input event
        3. Triggering the validity check
      4. Styling Valid and Invalid Elements
      5. Silver Challenge: Custom Validation for Decaf
      6. For the More Curious: The Webshims Library
    6. 13. Ajax
      1. XMLHttpRequest Objects
      2. RESTful Web Services
      3. The RemoteDataStore Module
      4. Sending Data to the Server
        1. Using jQuery’s $.post method
        2. Adding a callback
        3. Inspecting the Ajax request and response
      5. Retrieving Data from the Server
        1. Inspecting the response data
        2. Adding a callback argument
      6. Deleting Data from the Server
        1. Using jQuery’s $.ajax method
      7. Replacing DataStore with RemoteDataStore
      8. Silver Challenge: Validating Against the Remote Server
      9. For the More Curious: Postman
    7. 14. Deferreds and Promises
      1. Promises and Deferreds
      2. Returning Deferred
      3. Registering Callbacks with then
      4. Handling Failures with then
      5. Using Deferreds with Callback-Only APIs
      6. Giving DataStore a Promise
        1. Creating and returning Promises
        2. Resolving a Promise
        3. Promise-ifying the other DataStore methods
      7. Silver Challenge: Fallback to DataStore
  8. III. Real-Time Data
    1. 15. Introduction to Node.js
      1. Node and npm
        1. npm init
        2. npm scripts
      2. Hello, World
      3. Adding an npm Script
      4. Serving from Files
        1. Reading a file with the fs module
        2. Working with the request URL
        3. Using the path module
        4. Creating a custom module
        5. Using your custom module
      5. Error Handling
      6. For the More Curious: npm Module Registry
      7. Bronze Challenge: Creating a Custom Error Page
      8. For the More Curious: MIME Types
      9. Silver Challenge: Providing a MIME Type Dynamically
      10. Gold Challenge: Moving Error Handling to Its Own Module
    2. 16. Real-Time Communication with WebSockets
      1. Setting Up WebSockets
      2. Testing Your WebSockets Server
      3. Creating the Chat Server Functionality
      4. First Chat!
      5. For the More Curious: socket.io WebSockets Library
      6. For the More Curious: WebSockets as a Service
      7. Bronze Challenge: Am I Repeating Myself?
      8. Silver Challenge: Speakeasy
      9. Gold Challenge: Chat Bot
    3. 17. Using ES6 with Babel
      1. Tools for Compiling JavaScript
      2. The Chattrbox Client Application
      3. First Steps with Babel
        1. Class syntax
      4. Using Browserify for Packaging Modules
        1. Running the build process
      5. Adding the ChatMessage Class
      6. Creating the ws-client Module
        1. Connection handling
        2. Handling events and sending messages
        3. Sending and echoing a message
      7. For the More Curious: Compiling to JavaScript from Other Languages
      8. Bronze Challenge: Default Import Name
      9. Silver Challenge: Closed Connection Alert
      10. For the More Curious: Hoisting
      11. For the More Curious: Arrow Functions
    4. 18. ES6, the Adventure Continues
      1. Installing jQuery as a Node Module
      2. Creating the ChatForm Class
        1. Connecting ChatForm to the socket
      3. Creating the ChatList Class
      4. Using Gravatars
      5. Prompting for Username
      6. User Session Storage
      7. Formatting and Updating Message Timestamps
      8. Bronze Challenge: Adding Visual Effects to Messages
      9. Silver Challenge: Caching Messages
      10. Gold Challenge: Separate Chat Rooms
  9. IV. Application Architecture
    1. 19. Introduction to MVC and Ember
      1. Tracker
      2. Ember: An MVC Framework
        1. Installing Ember
        2. Creating an Ember application
        3. Starting up the server
      3. External Libraries and Addons
      4. Configuration
      5. For the More Curious: npm and Bower Install
      6. Bronze Challenge: Limiting Imports
      7. Silver Challenge: Adding Font Awesome
      8. Gold Challenge: Customizing the NavBar
    2. 20. Routing, Routes, and Models
      1. ember generate
      2. Nesting Routes
      3. Ember Inspector
      4. Assigning Models
      5. beforeModel
      6. For the More Curious: setupController and afterModel
    3. 21. Models and Data Binding
      1. Model Definitions
      2. createRecord
      3. get and set
      4. Computed Properties
      5. For the More Curious: Retrieving Data
      6. For the More Curious: Saving and Destroying Data
      7. Bronze Challenge: Changing the Computed Property
      8. Silver Challenge: Flagging New Sightings
      9. Gold Challenge: Adding Titles
    4. 22. Data – Adapters, Serializers, and Transforms
      1. Adapters
      2. Content Security Policy
      3. Serializers
      4. Transforms
      5. For the More Curious: Ember CLI Mirage
      6. Silver Challenge: Content Security
      7. Gold Challenge: Mirage
    5. 23. Views and Templates
      1. Handlebars
      2. Models
      3. Helpers
        1. Conditionals
        2. Loops with {{#each}}
        3. Binding element attributes
        4. Links
      4. Custom Helpers
      5. Bronze Challenge: Adding Link Rollovers
      6. Silver Challenge: Changing the Date Format
      7. Gold Challenge: Creating a Custom Thumbnail Helper
    6. 24. Controllers
      1. New Sightings
      2. Editing a Sighting
      3. Deleting a Sighting
      4. Route Actions
      5. Bronze Challenge: Sighting Detail Page
      6. Silver Challenge: Sighting Date
      7. Gold Challenge: Adding and Removing Witnesses
    7. 25. Components
      1. Iterator Items as Components
      2. Components for DRY Code
      3. Data Down, Actions Up
      4. Class Name Bindings
      5. Data Down
      6. Actions Up
      7. Bronze Challenge: Customizing the Alert Message
      8. Silver Challenge: Making the NavBar a Component
      9. Gold Challenge: Array of Alerts
  10. 26. Afterword
    1. The Final Challenge
    2. Shameless Plugs
    3. Thank You
  11. Index

Product information

  • Title: Front-End Web Development: The Big Nerd Ranch Guide
  • Author(s): Chris Aquino, Todd Gandee
  • Release date: July 2016
  • Publisher(s): Big Nerd Ranch Guides
  • ISBN: 9780134432595