Learn it fast with expert-taught software and skills training at lynda.com. See what you can learn

By Chris Converse | Wednesday, January 08, 2014

Using High-Definition (Retina) Graphics with CSS

Responsive web design techniques aren’t just for changing the layout and composition of your web designs; they can also optimize your project’s imagery for high-resolution screens. CSS3 media queries include properties for detecting the pixel ratio of a device’s screen—and when the pixel density value is two or greater, we know the device has a high-density display, and can use high-definition graphics.

Standard definition graphics can appear soft or blurry

Standard definition graphics can appear soft or blurry when viewed on a high-density display.

By Chris Converse | Wednesday, December 18, 2013

Creating a Responsive Web Experience

Simply rearranging your web design across screen sizes isn’t enough to assure a smooth, natural experience for all the devices that will view it. In order to truly optimize the user experience, we must alter the content and behavior as well. This means loading alternate HTML content, suppressing animations, and collapsing navigation for small screens.

FIgure 1Navigation on small screens is collapsed into a single button, which expands into the global navigation when clicked or tapped, providing an optimal experience for small screens.

In this course, we’ll explore altering the user experience based on screen size. This approach will allow us to increase the user experience and download speed for larger screens, while delivering smaller-sized files and targeted experiences for smaller screens. Learn how to combine jQuery with your HTML and CSS to alter experiences across screen sizes.

By Morten Rand-Hendriksen | Thursday, March 21, 2013

Responsive design for all screens

Is your audience getting the whole picture?

Is your audience getting the whole picture?

Responsive design has long been on the minds of web designers and developers, and over the last couple of years, it has become a focal topic among industry insiders and clients alike. Is the site responsive? Should it be responsive? Is responsive web design a good idea, or are we focusing on it as an exclusive solution to a much broader set of problems? Going to web design conferences these days you hear as many takes on the topic as there are people, and a common theme among them is that responsive design is profoundly confusing and complicated.

But does it have to be?

By Chris Converse | Tuesday, December 11, 2012

Converting Photoshop designs to HTML

For many designers, the process of designing a website ends with a series of mock-ups that represent how the website should look in a browser. While this is a necessary aspect to web design, it is only part of the design process. Translating the web design to HTML and CSS is as much an art form as it is a technical achievement.

It is my belief that web designers should be responsible for getting their design to the browser. Imagine hiring a print designer to sketch out a design, then provide Adobe Photoshop and Illustrator files to a printer, and expecting the pressmen to do the layout in InDesign. This print workflow is unthinkable. Just as a print designer is responsible for getting the design to the plate, a web designer should be responsible for getting the design to the browser.

While I’m not suggesting designers need to code every page of an entire website on their own, translating the design into HTML and CSS ensures the integrity of the design. Once the design works in a browser, web developers can use that HTML and CSS as a starting point as they implement their responsibilities to the project.

Creating the containers When evaluating your desired layout, one can imagine the structure, or “containers,” that will be needed to replicate the layout in HTML.

Responsive design strategy illustration

Once the HTML structure is in place, CSS is used to assign style and layout to the structure. The combination of HTML and CSS provides the presentation experience of your website. This process is not too far removed from other design methods, and can be mastered by designers in a few months.

Creating your web graphics The process for cutting up small graphics from your Photoshop, Illustrator, or Fireworks document is referred to as slicing. Many web graphic tools have a slicing tool, or something similar, which allows you to specify a portion of your canvas as a slice.

Slicing a Photoshop document for the web

Once portions of your design are specified inside of slice regions, exporting your main canvas results in individual web-ready graphics being created based on the pixels contained within the slice regions.

Assigning layout and style with CSS Cascading Style Sheets (CSS) allow us to give dimension, position, and style to HTML elements on our webpage. CSS is unique in that it accounts for the layout of our page, in addition to typographic style. Another great feature of CSS is the ability to assign images to the background of HTML elements. This gives us a unique opportunity to drive imagery in our design with CSS, instead of HTML. Combine this with CSS3 media queries, and we can change our images, as well as layout, based on the user’s screen size. For more on responsive download and design, see the blog post “Responsive download, not just responsive design”.

If you learn best by doing, my Creating a Responsive Web Design course shows you how to take a design mock-up into HTML and CSS. Learn a start-to-finish process for creating a responsive, CSS-based, backward-compatible HTML5 webpage… all in 91 minutes!

Suggested courses to watch next: • More courses by Chris ConverseCSS: Core ConceptsCSS: Page Layouts

By Chris Converse | Monday, November 19, 2012

Responsive download, not just responsive design

When considering a responsive design for a website, many web designers and developers only consider the layout. While it is key to ensure the layout and composition make use of the user’s screen size, the download time should also be considered as part of the user experience.

To really understand the concept of designing for responsive download, we first need to take into account that CSS can be used to add imagery to HTML elements of webpages. From there it becomes more apparent that CSS3 media queries can be used to alter imagery, as well as layout, based on a user’s screen size.

With this in mind, the <header> is one HTML5 element to focus on when planning a web layout. Typically the header area of a website is used for corporate branding, navigation, and imagery that sets the tone of the design. When creating a responsive web design, three or more sets of CSS rules will need to be specified based on the user’s screen size. These CSS rules will then in turn make adjustments to the sizing- and layout-based properties of the header elements based on available screen real estate. If we use CSS to specify imagery to be used in the header area, we can also drive more of the design tone with CSS.

Example of CSS driven imagery

Now, with CSS driving the imagery for the header element, combining CSS3 media queries with image assignments allows the imagery to adjust based on screen size. This allows designers to use larger, less compressed images for larger screens, while smaller screens reference smaller, more compressed images.

The ability to call on CSS referenced images that have varying dimensions and compression settings results in reduced download sizes and times for devices with smaller screens. This means the same HTML and CSS files will call on files for small- and large-screen devices, but the files called on for small-screen devices will be up to one-fifth the size of those called on for large-screen devices.

Three different images sizes created for a responsive web design with responsive download

This technique can be used in many elements of a responsive website, including photography galleries, graphics and diagrams, and even navigation or promotional elements. The amount of compression you apply to smaller images can be greater due to the higher pixel density of modern tablet and phone screens. That being said, compression versus quality has always been a trade-off on the web, so experiment with settings that will decrease file size while still maintaining the integrity of the original image. Also, make sure to always test your work on multiple devices if you get the chance.

If you’re interested in learning more about responsive web design in the lynda.com library, consider checking out Creating a Responsive Web Design from Chris Converse, or Responsive Design Fundamentals from James Williamson.

Interested in more? • All web design courses on lynda.com • All courses from Chris Converse on lynda.com

Suggested courses to watch next:• CSS: Core ConceptsCSS3 First LookHTML Essential Training

By Ray Villalobos | Friday, September 21, 2012

Exploring browser animation options: Part two, jQuery

Animation can be accomplished in many ways with modern browsers. I’m currently working on a series of blog articles that explore some of the browser animation options available. In my last article, I looked at creating animations with CSS3 using keyframes and transitions. In this article, I’ll look at how to use jQuery to animate objects.

jQuery is a JavaScript library for building interactivity into web applications. One feature of jQuery is its ability to animate elements in HTML. This is quite powerful and useful because another feature of jQuery is its focus on remaining as backward compatible with older browsers as possible. This is significant because these two elements together make jQuery one of the most compatible of the animation options.

A good example of how to use jQuery animations can be found on my MexSantos MexSantos project, which is part of a creating Adaptive Website for Multiple Screens course I prepared for lynda.com.

The MexSantos website

If you click on one of the small thumbnails on the MexSantos website, you’ll see an overlay appear into view and then a copy of the photo in a larger view. The overlay animates subtly, but this is typical of the type of animation that jQuery is ideal for. Interface animations are its specialty and it handles them better than many other methods. jQuery uses JavaScript but one of its goals is to write JavaScript that is compatible with older browsers, so compatibility isn’t the problem with jQuery animations. The main issue is that jQuery animations require JavaScript, so unlike CSS they’re useless if the user has turned JavaScript off. This caveat can sometimes create usability concerns.

jQuery performs animations by modifying aspects of items on the page. For example, it can change the opacity of an image over time to make it look like it’s animated. Let’s take a look at the line of JavaScript code that adds the overlay in the MexSantos website:

#overlay {
    background: #000;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

One of the great things about jQuery is how commands can be chained together to create a sequence of events. In the JavaScript code above, we’ve managed to quickly create a div then assign it an ID of ‘overlay’ and append it to our body tag. To write the code that actually performs the animation, first we hide the element (otherwise animations show up immediately), and then we add a fadein() command. The fadein() method takes whatever the object is normally supposed to look like (based on CSS style sheets) and performs an opacity fade-in.

The CSS for the overlay ID is pretty simple: A black background with a fixed position that takes on the width and height of the entire window.

#overlay { background: #000; position: fixed; width: 100%; height: 100%; top: 0; left: 0; } 

To really understand what jQuery is doing, you need to look at the code as it animates. If you’re using a browser like Google Chrome with a dynamic code view, you should be able to right click on the background of the page and choose inspect element. Once you have inspect element open, make sure you’re in the elements tab and click on one of the thumbnails. Quickly look at the line before the closing tag. It should show the div being added dynamically and an opacity attribute with rapidly changing values.

jQuery rapidly animates the opacity value of our overflow element

The animate() method

There are a lot of other animation methods that can be used in addition to fadeIn(). Of course, where there is a fadeIn(), there logically is a fadeOut() method, but there are also others like slideDown(), and slideToggle(). Once you learn how to use one, the rest are pretty easy to pick up. There is also a generic method called animate() that allows more granular control over how animations are performed. These animation methods usually take parameters and callbacks as well. I’ve created an example that extracts the overlay functionality of the MexSantos website and shows how the generic animate() method can be used to control the CSS in objects.

jQuery Overlay

Here, we start off with an image that has a click event bound to it:

$('img.fooditem').click(function(e){
});

When someone clicks on the image, the fun starts. First, animate this element out of view with the animate() method, which allows you to change any CSS properties you want. For example, rather than just changing the fade, you can change the opacity as well as the position of the object.

//default animation for element
$(this).animate({
opacity: 0,
top: '+=200'
}, 500);

As part of the process, the animate() method takes in a JSON object that lets you modify CSS settings like the opacity and position of the element. You can also set the amount of time (for example, 500) you’d like the animation to take. jQuery has some predefined constants for animations such as fast and slow. Just like with the MexSantos example, we can add the overlay:

$('<div></div>').attr('id', 'overlay').appendTo('body').delay(300).hide().fadeIn(500);

We’re adding some delays because we want the animation of the image moving out of view to play before our overlay starts showing up. Now we can load the large version of the image:

$('<img>').attr('src',largeimage).attr('id', 'overlayimg').appendTo('#overlay').load();

With the large version of the image added, we need to know what to do once someone has finished looking at the overlay and clicks to return to the menu. We need to bind a click event to the overlay just like we did with the image, use the fadeOut() method to hide the overlay, and remove it from the page:

$('#overlay').click(function(e){
    $('#overlay').fadeOut('slow', function() {
        $(this).remove();   
    }); //fadeOut
}); //overlayclick

Finally, we’ll animate the image back into its original position.

$('img.fooditem').animate({
    opacity: 1,
    top: '0'
}, 500);

Conclusion

Animating with jQuery is like buying a car that is a “mechanic’s dream.” You really need to know your way around JavaScript, but there’s a real benefit in the backward compatibility with older browsers you gain. Using jQuery for browser animations is a strong route to take when working with complex interface interaction. Once you learn a few key concepts like binding methods and chaining commands, this type of animation actually becomes quite fun.

If you’re interested in writing code with jQuery, make sure you check out some of our offerings on jQuery animation in the lynda.com training library.

By Ray Villalobos | Friday, September 07, 2012

Exploring browser animation options: Part one, CSS3

There are lots of ways to get animations to play in modern browsers. With so many options, it can be tough to determine the best way to tackle a specific project. Should you use CSS3? Is it better to use jQuery? What about Canvas or Canvas based libraries like Easel.js? In this series of articles, I’ll compare and contrast some of the different technologies behind web animations, show how to code sample animations, and note advantages and disadvantages behind each. We’ll get started with CSS3 animations.

CSS3 Animations

First and by far the easiest way to move things in a browser is to animate DOM (Document Object Model) elements using CSS3. On some platforms the animations are GPU (Graphics Processing Unit) accelerated, which makes then faster, especially when animating 3D transitions on mobile devices. Because the animations are done with CSS, no JavaScript is required, although you can still use it to add interactivity to your animations.

Demo

CSS3 Animation Example

Note: I added a button and a bit of jQuery to the example above so you can start and stop the animation in the JSBin example above. I’m just discussing the essentials of the animation without those elements below. I’m using -webkit prefixes here for brevity, so this example is only going to work in WebKit browsers like Safari or Chrome. . If you want to be compatible with more browsers, make sure you add the other prefixes. Check out CSS3 Please for more info.

Let’s take a look at how these are done. We’ll start off by creating an IMG tag and pointing that to a small photo. We’ll add the startspin class so we can target it with CSS later.

<img id="startspin" src="http://i.imgur.com/n3Uvf.png" />

Then, it’s time to add some CSS to animate this. CSS animations are done in two parts, first of which is creating a series of keyframes, much like what you would do with any timeline-based program like Adobe Edge or After Effects. Let’s create the keyframes:

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(-360deg) scale(1.5);
        opacity: 0;
    }
    50% {
        -webkit-transform: rotate(30deg) scale(.8);
    }
}

We can use a percentage with different values to indicate at what point in the time our elements (in this case the IMG) should transform (0% and 50%). Inside curly brackets, we then we can use transform attributes to modify our element. In the example above, I rotate the object and scale it. I’m also adjusting the opacity as a separate property/value pair. You can use different transformations like this.

Notice that you don’t need to include a keyframe for 100%. The object will animate from the transformation at 50% to whatever the image is supposed to look like when it has no transformations.

Once you have a series of keyframes, it’s time to assign these to a CSS class or an ID. So you can attach the animation to an element in the DOM (in our case, an image), plus control how the animation plays.

.startspin {
        -webkit-animation: spin 2000ms ease-in-out;
}

This adds the animation to the startspin class, which we attached to the image tag already, so the animation will execute when the image loads.

The animation property is a shorthand for six of CSS3′s animation properties: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, and animation-direction. You can pass a number of options to the property, and in my example, I’ve specified that this animation will be using our spin keyframes, that the animation will last 2000 milliseconds (you can use s instead if you want to specify seconds) and that it will be using an easing function called ease-in-out that will make it animate slowly at the beginning and at the end. If you’ve worked with animation in other software, these should be pretty easy to pick up. Otherwise, check the CSS3 animation documentation.

Another example

CSS3 Animation Example

In this example, I’m using JavaScript to control what happens when someone clicks on the image, which causes a second set of keyframes named pulse to take over the animation. You can use the keyword infinite to have an animation play repeatedly forever (which might get obnoxious quickly, so use with caution), or simply specify a number of times you want the animation to play.

Limited primitives

Unfortunately for CSS3, there are very few graphic primitives (native ways to draw shapes) in the language. You can create a box, or if you make a box have 50% borders a simple ellipse, but that’s pretty much it, so you wouldn’t want to build a game with CSS animations. However, you can bring in any type of graphic your browser will accept like SVG, JPG, and PNG files and they will animate fine with CSS.

Vendor prefixes

One of the huge disadvantages, and, frankly, the Achilles heel to working with CSS3 animations, is that in order to get CSS to work with as many browsers as possible, we should include vendor prefixes like -webkit (safari and chrome), -moz (Firefox), -o (Opera) and of course the property without the prefix. This is a huge problem because animations use a large number of property combinations that all need prefixes. If you take a look at just transforming an object by 30 degrees, here’s the code you’d need for that.

-webkit-transform: rotate(30deg);  /* Safari 3.1+, Chrome 
-moz-transform: rotate(30deg);  /* Firefox 3.5-15 
-ms-transform: rotate(30deg);  /* IE9+ 
-o-transform: rotate(30deg);  /* Opera 10.5-12.00 
transform: rotate(30deg);  /* Firefox 16+, Opera 12.50+

And that’s just one property. Not taking into account what you have to do to create your keyfames, which for a simple fade would look something like this:

@-webkit-keyframes fade {
    0%   { opacity: 0.0; }
    50%  { opacity: 0.3; }
    100% { opacity: 1.0; }
}
@-moz-keyframes fade {
    0%   { opacity: 0.0; }
    50%  { opacity: 0.3; }
    100% { opacity: 1.0; }
}
@-o-keyframes fade {
    0%   { opacity: 0.0; }
    50%  { opacity: 0.3; }
    100% { opacity: 1.0; }
}
@keyframes fade {
    0%   { opacity: 0.0; }
    50%  { opacity: 0.3; }
    100% { opacity: 1.0; }
}

To expect someone to do a complex animation using all of the prefixes is unreasonable, and that’s why most of the examples you’ll see online use -webkit prefixes, target a specific browser or are done by super hardcore coders. There are some JavaScript frameworks Like Lea Verou’s Prefix Free that can help with this, but I don’t foresee a lot of people using CSS3 animations as their primary animation method until years from now—if ever. There are just easier and better ways.

Progressive Degradation & Compatibility

Whenever you work with any CSS3 properties, you should check browser compatibility and make sure that whatever code you end up using isn’t essential to the functionality of your website. Users with older browsers shouldn’t still be able to use and view your site even though they might not get all of the animation sugar.

Here’s a compatibility table from Can I Use:

If you want to learn more about CSS animations, I’d suggest watching my course IOS Web Applications with HTML5 and CSS3.

By Ray Villalobos | Monday, August 27, 2012

CSS pre-processors part two: Mixins and nesting

In my last article, An Introduction to LESS and Sass pre-processed CSS languages, I wrote about using variables with CSS pre-processors. Having the ability to use variables will save you enough time to justify learning pre-processors, but there are two other features in Sass and LESS that will save you even more time: nesting and mixins.

Sass versus LESS

Pre-processors allow you to code in a language that’s similar to CSS, but with additional features. Most people are on the fence about adding them to their repertoire because there are two competing high-profile standards: LESS and Sass.

I remember having a similar problem a few years ago trying to decide between jQuery mobile and other JavaScript libraries. Sass and LESS are so similar that it almost doesn’t really matter which one you learn. Switching in between them is pretty easy, so ultimately it’s learning about the concepts that matters. Yes, there are some features specific to each language like guarded mixins in LESS and conditionals in Sass, but I imagine that as the languages develop further, they will each keep up with the other.

Pick one

The important thing is what you plan to do with the languages. If you’re planning to use a framework like BootStrap, from Twitter, then it’s a good idea to go with LESS because Boostrap was written with LESS. If you want a nearly identical framework that uses Sass, check out Foundation. Although Sass requires you to install Ruby, you’ll want to use something like CodeKit to manage your pre-processors.

My advice: Pick one framework and get good with it.

Before we start coding, keep in mind that when I’m talking about Sass, I’m speaking of the newer version with an .scss extension. It’s easier to learn for CSS users because it lets you use CSS syntax and style you may already know.

Nesting

Besides variables, another awesome thing you can do with pre-processors is nesting. Let’s say you’ve developed a simple horizontal nav bar for your site.

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Info</a></li>
</ul>

Here’s a typical way to write CSS to make this into a nav bar:

ul {
   margin: 0;
   padding: 0;
   font: bold 1em/1.2em Helvetica, Arial;
}
ul li {
   list-style: none;
}
ul li a {
   float: left;
   background: #BA0436;
   text-decoration: none;
   color: white;
   display: block;
   padding: 10px;
}
ul li a:hover {
   background: #EEC25C;
   color: black;
}
A simple nav bar written with CSS

A simple nav bar written with CSS

As your CSS file gets bigger, the number of styles that are children of other styles increases. In either Sass or LESS, you can do the same thing, like this:

ul {
   margin: 0;
   padding: 0;
   font: bold 1em/1.2em Helvetica, Arial;
   li {
      list-style: none;
      }
   a {
      float: left;
      background: #BA0436;
      text-decoration: none;
      color: white;
      display: block;
      padding: 10px;
      }
   &:hover {
      background: #EEC25C;
      color: black;
      }
}

This way, the <li></li> selector is written inside the <ul></ul> selector and the a selector is inside the <li></li> selector as if they were another rule. Notice that because we are using a pseudo-class, I have to add the ampersand (&) before the :hover selector.

Nesting doesn’t necessarily save you a ton of time, but it makes your code cleaner. When coding CSS, designers can sometimes add new rules where they don’t belong: nesting helps you keep everything tidy.

Both Sass and LESS implement mixins the same way, so there’s no need to show you the difference between the two.

Mixins

If you liked variables, you’re going to love mixins. They are snippets of code you can reuse over and over in your CSS. You can use them with variables to make coding in CSS easier. Let’s take a look at how you would code a simple top-to-bottom gradient using regular CSS.

.mybox {
  background-color: #333745;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#DAEDE2), to(#77C4D3));
  background-image: -webkit-linear-gradient(top, #DAEDE2, #77C4D3);
  background-image: -moz-linear-gradient(top, #DAEDE2, #77C4D3);
  background-image: -o-linear-gradient(top, #DAEDE2, #77C4D3);
  background-image: linear-gradient(to bottom, #DAEDE2, #77C4D3);
}

To make sure the gradient displays in as many older browsers as possible, we have to include code for different versions of Safari, Google Chrome, Firefox and Opera. It almost makes you want to stop doing gradients in your CSS. We can use variables to simplify this. Let’s try that with a Sass example.

First, we’ll create two variables for the colors somewhere in our .scss file:

$from: #333745;
$to:   #77C4D3;
.mybox {
  background-color: $from;
  background-image: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
  background-image: -webkit-linear-gradient(top, $from, $to);
  background-image: -moz-linear-gradient(top, $from, $to);
  background-image: -o-linear-gradient(top, $from, $to);
  background-image: linear-gradient(to bottom, $from, $to);
}

Modifying the gradients to use variables works great and it will save you a lot of time. But what if you wanted to reuse this for other declarations? That’s where mixins come in. You can create snippets of code and reuse them. Let’s create a mixin for linear gradients using the code above as a base.

$from: #333745;
$to:   #77C4D3;
@mixin lgradient {
  background-color: $from;
  background-image: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
  background-image: -webkit-linear-gradient(top, $from, $to);
  background-image: -moz-linear-gradient(top, $from, $to);
  background-image: -o-linear-gradient(top, $from, $to);
  background-image: linear-gradient(to bottom, $from, $to);
}

This makes working with gradients more manageable, but it will only work with one set of from/to colors. We can easily improve on this by putting these variables within our mixin. If you know JavaScript, this is like writing a function. Here’s the syntax in Sass.

@mixin lgradient($from: #333745, $to: #77C4D3) {
background-color: $from;
background-image: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
background-image: -webkit-linear-gradient(top, $from, $to);
background-image: -moz-linear-gradient(top, $from, $to);
background-image: -o-linear-gradient(top, $from, $to);
background-image:  linear-gradient(to bottom, $from, $to);
}

Now, when we want to use our gradient in our box, we can just type the following:

.mybox {
   @include lgradient;
}

Adding this line of code will create the gradient with the default colors, but since they’re variables, you can create any top-to-bottom linear gradient and specify the colors in your .scss file.

.mybox {
   @include lgradient(#FCC,#FEE);
}

Now you have an easier way to create gradients. Let’s check out the code in LESS:

.lgradient(@from, @to) {
  background-color: @from;
  background-image: -webkit-gradient(linear, left top, left bottom, from(@from),
  to(@to));
  background-image: -webkit-linear-gradient(top, @from, @to);
  background-image: -moz-linear-gradient(top, @from, @to);
  background-image: -o-linear-gradient(top, @from, @to);
  background-image: linear-gradient(to bottom, @from, @to);
}
.mybox {
  .lgradient(#CCC,#DDD);
}

Pretty similar, except that the dollar signs ($) are replaced by @ symbols and there is no mixin keyword. You can see how pre-processors will help you write CSS more efficiently. If you haven’t already taken the plunge, what are you waiting for?

Interested in more?

Suggested courses to watch next:

Get the latest news

  •   New course releases
  •   Pro tips and tricks
  •   News and updates
  
New releases submit clicked

You can change your email preferences at any time. We will never sell your email. More info

Featured articles

A lynda.com membership includes:

Unlimited access to thousands of courses in our library
Certificates of completion
New courses added every week (almost every day!)
Course history to track your progress
Downloadable practice files
Playlists and bookmarks to organize your learning
Become a member

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.