Creating a React Component

About this course: Up and Running with React.js

A new JavaScript framework has arrived: React.js. React.js is designed to make the process of building modular, reusable user interface components simple and intuitive. Here Eve Porcello will help you learn React.js while guiding you through the process of building the interface for a bulletin board app. She reviews components, properties, and states, as well as the foundational parent/child relationships within React.js. Eve also describes the life cycle of components and how developers can trigger creation, lifetime, and teardown events. The course wraps with a chapter dedicated to building a more complete app with React.js and companion tools CommonJS, Browserify, and Reactify. See more: Up and Running with React.js

Topics include:

  • What is React.js?
  • Introducing JSX
  • Creating a React component
  • Handling events
  • Using states
  • Defining parent/child relationships
  • Adding child elements
  • Mounting and updating components
  • Creating a React.js app


React: a JavaScript library

React, sometimes styled React.js or ReactJS, is an open-source JavaScript library for creating user interfaces that aims to address challenges encountered in developing single-page applications. It is maintained by Facebook, Instagram and a community of individual developers and corporations.

React is intended to help developers build large applications that use data that changes over time. Its goal is to be simple, declarative and composable. React only handles the user interface in an app; it is considered to only be the view in the model–view–controller (MVC) software pattern, and can be used in conjunction with other JavaScript libraries or larger MVC frameworks such as AngularJS. It can also be used with React-based add-ons that take care of the non-UI parts of building a web application.

According to JavaScript analytics service, Libscore, React is currently being used on the homepages of Imgur, Bleacher Report, Feedly, Airbnb, SeatGeek, HelloSign, and others.

How to define a component, rendering, events, properties and state

1. var BreadcrumbsDemo = React.createClass({
2.  getContent: function(path) {
3. return path[path.length - 1];
4. },
5. getInitialState: function() {
6.   return {
7.    path: this.props.path
8.    };
9.  },
10.  onPathChange: function(value) {
11.    this.setState({
12.      path: value
13.    });
14.  },
15.  reset: function() {
16.   this.setState({
17.      path: this.props.path
18.    });
19.  },
20.  render: function() {
21.    return (
22.      <div>
23.        <div id="breadcrumb-container">
24.          <Breadcrumbs path={this.state.path} maxEntries="5" 
25.            onChange={this.onPathChange}/>
26.        </div>
27.        <div id="content">{this.getContent(this.state.path)}</div>
28.        <button id="resetButton" onClick=   {this.reset}>Reset</button>
29.      </div>
30.    )
31.  }
32.  });
34. var fullPath = ['element1', 'element2', 'element3',     'element4',
35. 'element5', 'element6', 'element7'];
37. React.render(
38.  <BreadcrumbsDemo path={fullPath}/>,
39.  document.querySelector('#container')
40.  );

The most important part of a component definition is method render in lines 20-31 where the component declaratibely defines how it should be rendered. This can include other components like Breadcrumbs in line 24 and familiar HTML elements like div in line 27.

We can also parameterize the rendition with the component data which can come from two sources: component state and component properties. See more: Web Components and Friends: React.js, Angular.js, Polymer

See more resources:

The React.js Way: Getting Started Tutorial
React.js: Super-fast Single Page Web Applications
React.js Tutorial Part 3

Build My Site

Responsive SVG Images: Adding classes and styles for symbols

When you need more control over the imagery in your websites and interactive projects, scalable vector graphics are a great place to turn. SVG images are resolution-independent, which means they look great at any size, and they can be manipulated with CSS. This installment of Design the Web with Chris Converse explores the design possibilities offered by combining SVG graphics with CSS media queries. Start watching to learn how to create your own responsive SVG images. See more: Design the Web: Responsive SVG Images.


Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999.

SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted, and compressed. As XML files, SVG images can be created and edited with any text editor, but are more often created with drawing software.

All major modern web browsers—including Mozilla Firefox, Internet Explorer, Google Chrome, Opera, and Safari—have at least some degree of SVG rendering support.



Simple or compound shape outlines are drawn with curved or straight lines that can be filled in, outlined, or used as a clipping path. Paths have a compact coding. For example M (for ‘move to’) precedes initial numeric x and ycoordinates and L (line to) precedes a point to which a line should be drawn. Further command letters (C, S, Q, T and A) precede data that is used to draw various Bézier and elliptical curves. Z is used to close a path. In all cases, absolute coordinates follow capital letter commands and relative coordinates are used after the equivalent lower-case letters.

Basic shapes

Straight-line paths and paths made up of a series of connected straight-line segments (polylines), as well as closed polygons, circles and ellipses can be drawn. Rectangles and round-cornered rectangles are also standard elements.


SVG shapes can be filled and/or outlined (painted with a color, a gradient, or a pattern). Fills can be opaque or have any degree of transparency. “Markers” are line-end features, such as arrowheads, or symbols that can appear at the vertices of a polygon.


Colors can be applied to all visible SVG elements, either directly or via ‘fill’, ‘stroke,’ and other properties. Colors are specified in the same way as in CSS2, i.e. using names like black or blue, in hexadecimal such as #2f0 or #22ff00, in decimal like rgb(255,255,127), or as percentages of the form rgb(100%,100%,50%).

Clipping, masking and compositing

Graphic elements, including text, paths, basic shapes and combinations of these, can be used as outlines to define both inside and outside regions that can be painted (with colors, gradients and patterns) independently. Fully opaque clipping paths and semi-transparent masks are composited together to calculate the color and opacity of every pixel of the final image, using alpha blending.


SVG images can interact with users in many ways. In addition to hyperlinks as mentioned below, any part of an SVG image can be made receptive to user interface events such as changes in focus, mouse clicks, scrolling or zooming the image and other pointer, keyboard and document events. Event handlers may start, stop or alter animations as well as trigger scripts in response to such events.


SVG images can contain hyperlinks to other documents, using XLink. Through the use of the <view> element or a fragment identifier, URLs can link to SVG files that change the visible area of the document. This allows for creating specific view states that are used to zoom in/out of a specific area or to limit the view to a specific element. This is helpful when creating sprites. XLink support in combination with the <use> element also allow linking to and re-using internal and external elements. This allows to do more with less markup and makes for cleaner code.











This code will produce the shapes shown in the image (excluding the grid):

<svg xmlns="" version="1.1">
  <rect x="25" y="25" width="200" height="200" fill="lime" stroke-width="4" stroke="pink" />
  <circle cx="125" cy="125" r="75" fill="orange" />
  <polyline points="50,150 50,200 200,200 200,100" stroke="red" stroke-width="4" fill="none" />
  <line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" />

See more resources:

How to Use SVG Patterns
Create an SVG Animation using CSS and JavaScript

Build My Site

CSS: Selectors | Targeting links

This course is a resource guide, covering the best practices for writing different types of CSS selectors and choosing the best selectors for targeting different HTML elements. Senior staff author James Williamson covers basic selectors, attribute selectors, pseudo-class and pseudo-element selectors, and structural selectors, as well as combinators and pattern-matching selectors. Then he offers tips to write more efficient and maintainable code, and a look at what’s next for CSS selectors. See more: CSS: Selectors

Topics include:

  • Targeting classes and IDs
  • Working with group selectors
  • Targeting element attributes
  • String matching
  • Targeting links with pseudo-class selectors
  • Targeting child elements and empty elements
  • Targeting parent, child, and sibling elements
  • Matching patterns
  • Writing efficient selectors


In CSS, selectors are used to declare which part of the markup a style applies to by matching tags and attributes in the markup itself. Selectors may apply to:

  • all elements of a specific type, e.g. the second level headers h2
  • elements specified by attribute, in particular:
    • id: an identifier unique to the document
    • class: an identifier that groups multiple elements in a document
  • elements depending on how they are placed relative to others in the document tree.

Classes and IDs are case-sensitive, start with letters, and can include alphanumeric characters and underscores. Any number of instances of any number of elements may have the same class. Conventionally, IDs only apply to one instance of one element.

Pseudo-classes are used in CSS selectors to permit formatting based on information that is not contained in the document tree. One example of a widely used pseudo-class is :hover, which identifies content only when the user ‘points to’ the visible element, usually by holding the mouse cursor over it. It is appended to a selector as in a:hover or #elementid:hover. A pseudo-class classifies document elements, such as :link or :visited, whereas a pseudo-element makes a selection that may consist of partial elements, such as :first-line or :first-letter.

Selectors may be combined in many ways to achieve great specificity and flexibility. Multiple selectors may be joined in a spaced list to specify elements by location, element type, id, class, or any combination thereof. The order of the selectors is important. For example, div .myClass {color:red;} applies to all elements of class myClass that are inside div elements, whereas .myClass div{color:red;} applies to all div elements that are in elements of class myClass.


Specificity describes the relative weights of various rules. It determines which styles are applied to an element when more than one rule could apply. Based on specification, a simple selector (e.g., H1) has a specificity of 1, class selectors have a specificity of 1,0, and ID selectors a specificity of 1,0,0. Because the specificity values do not carry over as in the decimal system, commas are used to separate the “digits” (a CSS rule having 11 elements and 11 classes would have a specificity of 11,11, not 121).

Thus the following rules selectors result in the indicated specificity:

Selectors Specificity
H1 {color: white;} 1
P EM {color: green;} 2
.grape {color: red;} 1,0
P.bright {color: blue;} 1,1
P.bright EM.dark {color: yellow;} 2,2
#id218 {color: brown;} 1,0,0
style=” “ 1,0,0,0

Example of Specificity

Consider this HTML fragment:

<!DOCTYPE html>
    <meta charset="utf-8">
    #xyz { color: red }
    <p id="xyz" style="color: blue"> To demonstrate specificity </p>

In the above example, the declaration in the “style” attribute will override the one in the style element since it has a higher specificity.

See more resources:

Selectors Level 4
Cascading Style Sheets – home page
Welcome to the WHATWG community

Build My Site

Understanding Basic Ionic CSS Components

Creating hybrid mobile applications is a great way to leverage your knowledge of web languages like HTML5, CSS, and JavaScript. Modern frameworks such as AngularJS and Ionic make it easier with pre-built templates and components. In this course, staff author Ray Villalobos shows how to install the Ionic framework and set up a development environment suitable for building web-based apps. He reviews the core Ionic components: pre-built, easy-to-use features such as buttons, lists, tabs, and forms. Then Ray shows how to combine these components with Angular.js models, views, and controllers to build a single page app with sliders, pull-to-refresh functionality, and search. The training culminates in building a multi-page app, which you’ll learn how to customize with CSS. See more: Building a Mobile App with AngularJS and Ionic.

Topics include:

  • Installing the development environment on Mac or PC
  • Understanding the Ionic templates and CSS components
  • Adding IonicIcons to a layout
  • Adding tabs, cards, and lists
  • Using form elements
  • Building a single view app
  • Implementing Pull to Refresh
  • Creating a multi-tab app
  • Styling the applications
  • Deploying applications


Ionic (mobile app framework)

Ionic is a complete open-source SDK for hybrid mobile app development. Built on top of AngularJS and Cordova, Ionic provides tools and services for developing hybrid mobile apps using web technologies like HTML5, CSS, and Sass. Apps can be built with these web technologies and then distributed through native app stores to be installed on devices by leveraging Apache Cordova. Ionic was created by Max Lynch, Ben Sperry, and Adam Bradley of Drifty Co. in 2013, and is used by software developers around the world.

Ionic provides all the functionality that can be found in native mobile development SDKs. Users can build their apps, customize them for iOS or Android, and deploy through Cordova. Ionic includes mobile components, typography, interactive paradigms, and an extensible base theme.

Using Angular, Ionic provides custom components and methods for interacting with them. One such component, collection repeat, allows users to scroll through a list of thousands of items without any performance hits. Another component, scroll-view, creates a scrollable container with which users can interact using a native-influenced delegate system.

Developers can programmatically control the scroll-view to get the scroll position, scroll to bottom/top, zoom, or get information about the current scroll-view instances.


Besides the SDK, Ionic also provides services that developers can use to enable features, such as push notifications, A/B testing, analytics, code deploys, and automated builds.

Ionic also provides a powerful CLI, so developers can get started and create a project with a simple command. The CLI also allows developers to add Cordova plugins and additional front-end packages, enable push notifications, generate app Icons and Splash screens, and build native binaries. It is also managed through Github.

Supported Platforms

Ionic is focused on building for modern web standards and for modern mobile devices. For iOS, Ionic supports iOS 7 and up. For Android, Ionic supports Android 4.1 and up.

See more resources:

How To Handle User Authentication With AngularJS Inside Your Ionic App
Simple login example with ionic and AngularJS

Build My Site

Building a Data-Driven App with AngularJS | Creating Your First Controller

Want to create web applications that can handle multiple users, registration, and real-time data? With these AngularJS tutorials, you’ll be quickly building apps with advanced features like these. Ray Villalobos starts the course with a Git, Node.js, and GitHub setup that will get you off on the right foot. Next, learn how to create your first controller, connect a Firebase database, and read, push, and delete data from that database. Ray then shows you how to set up user registration with Firebase’s simpleLogin service, so you can log users in and out and pass registration data back and forth from the app. With a few finishing touches, like custom directives, your Angular app will be ready to publish. Watch more: Building a Data-Driven App with AngularJS.

Note: This course was revised in March 2015 to reflect changes to Firebase’s database and simpleLogin services.

Topics include:

  • Installing Git and Node.js on Mac or Windows
  • Installing AngularJS and its models
  • Creating modules and routes
  • Working with controllers
  • Connecting to Firebase data
  • Adding user registration
  • Searching, filtering, and deleting records
  • Creating custom directives



Controllers are the middleman between the Model and the View, they drive the Model and View changes. Imagine that the controller is given some html from the route and a Javascript object from the dependency injection; with these two things, the controller will tell the view (the html) what it can do by giving it scope variables and maybe a few functions.


Let’s take a peek at what a Controller looks like.

A good Controller will have as little logic in it as possible, and should only be used for two things: Binding the Model to the View (initializing the View) and adding helper functions to the View.

app.controller('InboxCtrl', function () {
              // Model and View bindings
	     // Small helper function not needed anywhere else

If you go through the Angular documentation examples (available at you’ll notice Model data being declared in the Controller. While this is okay for examples, the Controller easily becomes the Model as well – which is very bad for many reasons:

  • All the pieces start to get more coupled together
  • More difficult to share business logic
  • Makes things difficult to test

Remember: A good Controller will have as little logic in it as possible.

Each controller has access to a $scope and some html. $scope is the most documented way of adding properties and methods to our view. Remember how we said each ‘ng-controller’ attribute specifies a scope of HTML to manage? Well, that scope has access to the same $scope as the Controller function.

Note: $scope isn’t the only way to pass data to the front end. Many developers use a combination of the “Controller As” configuration options along with the this keyword. For the purpose of this tutorial, we will stick with $scope as it’s been around for much longer than ‘Controller As’.

app.controller('InboxCtrl', function ($scope) {
	// initialize the title property to an array for the view to use
	$scope.title = "This is a title";

Note: Notice we’re injecting $scope inside the function.

We can then use this like so:

<div ng-controller="InboxCtrl">
	{{ title }}

Note: Here we’re accessing the title directly, however it is encouraged to always have at least one dot (.) in our view expression properties. Using the “controller as” with this syntax would solve this giving us the . like so . More info here.

In order to keep our controllers more reusable, we would hook up data in our controller via a Factory or Service.

See more resources:

Understanding Backbone and other Model-View-Controller (MVC) Libraries
Installing AngularJS, plus modules
Realtime AngularJS Pub/Sub Messaging using PubNub

Build My Site

Developing for the MEAN Stack and MongoDB – Using the Cloud9 Platform

The MEAN stack is a collection of tools for building robust web applications with JavaScript. It includes four main ingredients: MongoDB, ExpressJS, AngularJS, and Node.js. In this course, Michael Sullivan shows you what it “means” to develop on the MEAN stack, walking through setup, user authentication and security, routing, controller and view creation, data storage, and more—all the way up to app deployment. By the end of the course, you’ll have a clear picture of the MEAN stack workflow and its many advantages, including enhanced performance and the convenience of using a single programming language across every layer of your application. See more: Developing for the MEAN Stack and MongoDB

Topics include:

  • Getting your Node.js development environment set up
  • Creating an Express application
  • Configuring user authentication and strong password hashing
  • Accessing MongoDB collections in the shell and with Mongoose
  • Building a mini SPA (single-page application) with AngularJS
  • Adding custom form validation with AngularJS
  • Deploying an app to Heroku


Cloud9 IDE

Cloud9 IDE is a freeware online integrated development environment. It supports more than 40 programming languages, including PHP, Ruby, Python, JavaScript with Node.js, and Go. It enables developers to get started with coding immediately with pre-setup workspaces, collaborate with their peers with collaborative coding features, and web development features like live preview and browser compatibility testing.

It is written almost entirely in JavaScript, and uses Node.js on the back-end. The editor component uses Ace. As of July 2014, it uses Docker containers for its workspaces, and is hosted on Google Compute Engine.


The MEAN Stack:

MongoDB is a cross-platform document-oriented database. Classified as a NoSQL database, MongoDB eschews the traditional table-based relational database structure in favor of JSON-like documents with dynamic schemas (MongoDB calls the format BSON), making the integration of data in certain types of applications easier and faster. Released under a combination of the GNU Affero General Public License and the Apache License, MongoDB is free and open-source software.

Express.js is a Node.js web application framework, designed for building single-page, multi-page, and hybrid web applications.

AngularJS, commonly referred to as Angular, is an open-source web application framework maintained by Google and a community of individual developers and corporations to address many of the challenges encountered in developing single-page applications. Its goal is to simplify both development and testing of such applications by providing a framework for client-side model–view–controller (MVC) architecture, along with components commonly used in rich internet applications.

Node.js is an open source, cross-platform runtime environment for server-side and networking applications. Node.js applications are written in JavaScript, and can be run within the Node.js runtime on OS X, Microsoft Windows, Linux, FreeBSD, and IBM i. Node.js provides an event-driven architecture and a non-blocking I/O API that optimizes an application’s throughput and scalability. These technologies are commonly used for real-time web applications.

See more resources:

Creating controllers and views in AngularJS
Single page Application with Angularjs, Minimalweb Node MVC and MongoDB
Delving into Node.js and Express web framework

Build My Site

Understanding Backbone and other Model-View-Controller (MVC) Libraries

Backbone.js is the key to keeping your JavaScript code neat, and separating your markup from the data powering your web applications. Although it has fantastic server-side capabilities, this course focuses on the most relevant features for front-end developers and web designers that want to learn how to build out their web pages and keep their code organized, move away from the DOM, and use Backbone’s useful JavaScript library. Start here and learn how to use models and collections to manage your data, and display it on your web page with views. Then use events and routers to create navigational logic in your web app. Author Kai Gittens shows you just what you need to get up and running with Backbone.js and get the job done. See more: Up and Running with Backbone.js.

Topics include:

  • What is Backbone.js?
  • Understanding how MVC libraries work
  • Adding properties to a model
  • Creating a collection of models
  • Adding properties to a model view
  • Loading model data on a web page
  • Configuring routes
  • Finding Backbone resources

Backbone.js is a JavaScript library with a RESTful JSON interface and is based on the model–view–presenter (MVP) and Actor model application design paradigm. Backbone is known for being lightweight, as its only dependency is on one JavaScript library, Underscore.js. It is designed for developing single-page web applications,(SPA) and for keeping various parts of web applications (e.g. multiple clients and the server) synchronized. Backbone was created by Jeremy Ashkenas, who is also known for CoffeeScript.

Model View Controller (MVC)

Model–view–controller (MVC) is a software architectural pattern for implementing user interfaces. It divides a given software application into three interconnected parts, so as to separate internal representations of information from the ways that information is presented to or accepted from the user.



The central component of MVC, the model, captures the behavior of the application in terms of its problem domain, independent of the user interface. The model directly manages the data, logic and rules of the application. A view can be any output representation of information, such as a chart or a diagram; multiple views of the same information are possible, such as a bar chart for management and a tabular view for accountants. The third part, the controller, accepts input and converts it to commands for the model or view.


In addition to dividing the application into three kinds of components, the model–view–controller design defines the interactions between them.

  • A controller can send commands to the model to update the model’s state (e.g., editing a document). It can also send commands to its associated view to change the view’s presentation of the model (e.g., by scrolling through a document).
  • A model notifies its associated views and controllers when there has been a change in its state. This notification allows the views to produce updated output, and the controllers to change the available set of commands. In some cases an MVC implementation may instead be ‘passive’ and other components must poll the model for updates rather than being notified.
  • A view requests information from the model that it uses to generate an output representation to the user.

Use in web applications

Although originally developed for desktop computing, model–view–controller has been widely adopted as an architecture for World Wide Web applications in major programming languages. Several commercial and noncommercial web application frameworks have been created that enforce the pattern. These frameworks vary in their interpretations, mainly in the way that the MVC responsibilities are divided between the client and server.

Early web MVC frameworks took a thin client approach that placed almost the entire model, view and controller logic on the server. In this approach, the client sends either hyperlink requests or form input to the controller and then receives a complete and updated web page (or other document) from the view; the model exists entirely on the server. As client technologies have matured, frameworks such as AngularJS, Ember.js, JavaScriptMVC and Backbone have been created that allow the MVC components to execute partly on the client (also see Ajax).

Build My Site

Tracking our navigation with ScrollSpy and jQuery

Find out how Bootstrap can transform your standard HTML websites into inspired single-page designs. This course is a project-based approach to learning how to manipulate website layouts with the Bootstrap framework. Staff author Ray Villalobos tackles Bootstrap’s layout classes, like containers, rows, and columns, and shows what it takes to customize Bootstrap’s CSS and address layout challenges like multiple grids and columns. Plus, learn how to track navigation as users scroll, with the ScrollSpy plugin, and create a full-screen, responsive image carousel. See more at: Bootstrap Layouts: Responsive Single-Page Design.

Topics include:

  • Analyzing your markup
  • Creating simple column layouts
  • Creating basic navigation and a simple carousel
  • Modifying Bootstrap styles
  • Working with branding and toggle styles
  • Adding interactivity

Uses for Bootstrap

To use Bootstrap in an HTML page, the developer downloads the Bootstrap CSS stylesheet and includes a link in the HTML file.

(The developer can also compile the CSS file from the downloaded Less or Sass stylesheets, with a special compiler.)

If the developer wants to use the JavaScript components, they must be referenced along with the jQuery library in the HTML document.

The following example illustrates how this works. The HTML code defines a simple search form and a list of results in tabular form. The page consists of HTML 5 elements and CSS information according to the Bootstrap documentation.

A view of the example using Bootstrap, rendered in Google Chrome
<!DOCTYPE html>
    <title>Example of Twitter Bootstrap</title>
    <!-- Include the bootstrap stylesheets -->
    <link href="" rel="stylesheet">
    <div class="container">
      <label>Example for a simple search form.</label>
      <!-- Search form with input field and button -->
      <form class="well form-search">
        <input type="text" class="input-medium search-query">
        <button type="submit" class="btn btn-primary">Search</button>
      <!-- Table with alternating cell background color and outer frame -->
      <table class="table table-striped table-bordered">
            <td>Lorem ipsum dolor ...</td>
            <td>Ut enim ad minim veniam, ...</td>
            <td>Duis aute irure dolor ...</td>
    <!-- JavaScript placed at the end of the document so the pages load faster -->
    <!-- Optional: Include the jQuery library -->
    <script src=""></script>
    <!-- Optional: Incorporate the Bootstrap JavaScript plugins -->
    <script src=""></script>
Example of a webpage using Bootstrap framework rendered in Mozilla Firefox

Creating a simple fluid layout grid

    <div class="row">
       <div class="col-md-4">Text for column 1</div>
       <div class="col-md-4">Text for column 2</div>
       <div class="col-md-4">Text for column 3</div>

This will create three columns of equal width. This is a fluid layout: If the columns are too wide to fit on the screen, they will be stacked automatically.

See more resources:

Creating a Responsive Menu in WordPress for Mobile Devices
Flat UI Pro – Bootstrap Design Framework
Bootstrap grid examples
jQuery ScrollSpy

Build My Site

Try jQuery (Level 1) at Code School

Learn the basic building blocks of jQuery 2.0 and enjoy new video tutorials for beginners with related programming challenges. “Learn by Doing”, at Code School. Play the entire course: Try jQuery at Code School


Usage styles

jQuery has two usage styles:

  • Via the $ function, which is a factory method for the jQuery object. These functions, often called commands, are chainable as they all return jQuery objects.
  • Via $. -prefixed functions. These are utility functions, which do not act upon the jQuery object directly.

Access to and manipulation of multiple DOM nodes in jQuery typically begins with calling the $ function with a CSS selector string. This returns a jQuery object referencing all the matching elements in the HTML page. $(“div.test”), for example, returns a jQuery object with all the div elements of class test. This node set can be manipulated by calling methods on the returned jQuery object or on the nodes themselves.

No-Conflict Mode

jQuery also includes .noConflict() mode, which relinquishes control of $. This can be helpful if jQuery is used with other libraries that also use $ as an identifier. In no-conflict mode, developers can use jQuery as a replacement for $ without losing functionality.

Typical start-point

The typical jQuery usage is to put initialization code and event handling functions in .ready(). This is triggered when the browser has constructed the DOM and sends a load event.

<script type="text/javascript">
        // jQuery code, event handling callbacks here

Callback functions for event handling are also included inside .ready() as anonymous functions but called when the event for the callback is triggered. For example, the following jQuery code adds an event handler for a mouse click on an img image element.

        $('img').click ( function() { 
              // handle the click event on any img element in the page

The following syntaxes are equivalent:

  • $(document).ready(handler)
  • $(handler)


Each jQuery command returns a jQuery object, so commands can be chained:


This line finds the union of all div tags with class attribute test and all p tags with class attribute quote, adds the class attribute blue to each matched element, and then increases their height with an animation. The $ and add functions affect the matched set, while the addClass and slideDown affect the referenced nodes.

Creating new DOM elements

Besides accessing DOM nodes through jQuery object hierarchy, it is also possible to create new DOM elements if a string passed as the argument to $() looks like HTML. For example, this line finds an HTML select element with ID carmakes, and adds an option element with value “VAG” and text “Volkswagen”:

$('select#carmakes').append($('<option />').attr({value:"VAG"}).append("Volkswagen"));

See more resources:

Your first jQuery-enabled page
Up and Running with jQuery UI

Build My Site

CSS: Animation Basics

This course presents a short series of CSS animation techniques, such as looping, playing, and pausing, and puts them together in a small project: an animated infographic. Author Val Head also addresses using CSS preprocessors, adding transitions, handling vendor prefixes, and understanding the best uses for CSS animations. Plus, discover how to measure the performance and current level of browser support for CSS animations and how we can expect the technology to change. See more: CSS Video Courses and Tutorials from

Topics include:

  • Understanding delay and fill-mode
  • Dictating an animation’s direction
  • Using easing
  • Adding keyframes
  • Looping an animation
  • Chaining multiple animations on one element
  • Setting up the HTML structure
  • Adding interactivity with JavaScript

CSS Animations

CSS Animations affect computed property values. During the execution of an animation, the computed value for a property is controlled by the animation. This overrides the value specified in the normal styling system. Animations override all normal rules, but are overriden by !important rules.

If at one point in time there are multiple animations specifying behavior for the same property, the animation whose name occurs last in the value of ‘animation-name’ will override the other animations at that point.

An animation does not affect the computed value before the application of the animation, before the animation delay has expired, and after the end of the animation.


Computation of animated property values

The diagram above shows how property values are computed. The intrinsic style is shown at the top of the diagram. The computed value is derived from intrinsic style at the times when an animation is not running and also when an animation is delayed (see below for specification of animation delay). During an animation, the computed style is derived from the animated value.

An animation applies to an element if the element has a value for ‘animation-name’ that references a valid keyframes rule. Once an animation has started it continues until it ends or the ‘animation-name’ is removed. The values used for the keyframes and animation properties are snapshotted at the time the animation starts. Changing them during the execution of the animation has no effect. Note also that changing the value of ‘animation-name’ does not necessarily restart an animation (e.g., if a list of animations are applied and one is removed from the list, only that animation will stop; The other animations will continue). In order to restart an animation, it must be removed then reapplied.

The end of the animation is defined by the combination of the ‘animation-duration’, ‘animation-iteration-count’ and ‘animation-fill-mode’ properties.

Some Examples of CSS Transitions and Animations

I have seen some remarkable work done purely with CSS, no additional graphics. Developers and designers are doing some amazing things with CSS. CSS is a powerful language. Below, I have compiled some of the most intriguing and inspirational projects using only CSS. They are all really good but the first one is truly my favorite!

The Simpsons in Pure CSS by Chris Pattle

See the Pen azBbEL by Darlene Tate (@D-Pens) on CodePen.

CSS Animated Gallery With Persistent Images By Dudley Storey

See the Pen CSS Animated Gallery With Persistent Images by Dudley Storey (@dudleystorey) on CodePen.

3D Solar System by Julian Garnier

See the Pen CSS 3D Solar System by Julian Garnier (@juliangarnier) on CodePen.

CSS Animate By Kevin Bourke (changing animation and colour using keyframes)

See the Pen CSS Animations by Kevin Bourke (@bourkekev) on CodePen.

See more resources:

The guide to CSS animations for the web
CSS 3D Folding Animation
CSS Animation Tricks: State Jumping, Negative Delays, Animating Origin, and More

Build My Site