Beginning Responsive Web Development with HTML and CSS

This video gives an overview of the entire lesson.

CSS3 media queries enable us to target particular CSS styles to particular device capabilities or situations.

It's also possible to string multiple expressions together. In this video, we will learn how to extend one of our prior examples and also limit the file to devices that have a viewport greater than 800 pixels.

Styles further down a cascading style sheet override equivalent styles higher up. We can therefore set base styles at the beginning of a style sheet, applicable to all versions of our design (or at least providing our "base" experience), and then override relevant sections with media queries further on in the document.

We will go off on a brief tangent at this point to consider some of the different approaches that you can take when writing and organizing your media queries. Each approach offers some benefits and some trade-offs, so it's worth at least knowing about these factors, even if you decide that these are largely irrelevant for your needs.

To get the most out of media queries, you will want smaller screen devices to display web pages at their native size (and not render them in a 980px window that you then have to zoom in and out of).

While CSS media queries level 4 enjoy a draft specification, the features in the draft don't enjoy many browser implementations. This means that, while we will take a brief look at the highlights of this specification, they're highly volatile. Ensure you check browser support and double-check for syntax changes before using any of these features. For now, while there are other features in the level 4 specification, we will concern ourselves only with interaction, point and hover, and luminosity.

This video summarizes your learning.

This video gives an overview of the entire lesson.

Graphic composites made in a program such as Photoshop, Illustrator, or Sketch all have fixed pixel dimensions. At some point, designs need to be converted to proportional dimensions by a developer when recreating the design as a fluid layout in a browser.

We are now going to get into the details of using CSS Flexible Box layouts, or Flexbox as it is more commonly known. However, before we do that, let's first consider the shortfalls of existing layout techniques such as inline-block, floats, and tables.

It's as easy as adding flex-direction: row-reverse to the wrapping element and changing margin-left: auto to margin-right: auto on the offset item:

As the name suggests, Flexbox is inherently flexible, so how about we go for a column list of items in smaller viewports and a row style layout when space allows. It's a piece of cake with Flexbox.

The important thing to understand with Flexbox alignment is the concept of axes. There are two axes to consider: the main axis and the cross axis. What each of these represents depends upon the direction of the Flexbox. For example, if the direction of your Flexbox is set to row, the main axis will be the horizontal axis and the cross axis will be the vertical axis. Conversely, if your Flexbox direction is set to column, the main axis will be the vertical axis and the cross axis will be the horizontal one.

Alignment in the main axis is controlled with justify-content. For non-Flexbox/block-level items, the justify-self property has also been proposed. The justify-self property currently works in at least Chrome and Firefox's latest builds.

One method is to wrap elements in something set to display: table and then switch the display property on the items within: between display: table-caption, display: table-footer-group, and display: table-header-group. However, as robust as this technique is, this was a happy accident, rather than the true intention of these settings. However, Flexbox has visual source reordering built in. Let's have a look at how it works.

Let’s move to the next topic, Responsive Images. Serving the appropriate image to users based upon the particulars of their device and environment has always been a tricky problem. This problem was highlighted with the advent of responsive web design, the very nature of which is to serve a single code base to each and every device.

This video summarizes your learning.

This video gives an overview of the entire lesson.

Nowadays, the majority of websites are written using HTML5, rather than the older HTML 4.01 standard. All modern browsers understand the new semantic elements of HTML5 (the new structural elements, and video and audio tags), and even older versions of Internet Explorer (versions before Internet Explorer 9) can be served a tiny polyfill to allow it to render these new elements. With that in mind, let's consider the start of an HTML5 page. Let's get a handle on all the opening tags and what they do.

Most websites follow fairly standard structural conventions; typical areas include a header, a footer, a sidebar, a navigation bar, and so on. We will often name the div elements we use to more clearly designate these areas. However, as far as the code itself goes, any user agent looking at it wouldn't be able to say for sure what the purpose of each of these div elements is. Users of assistive technology would also find it difficult to differentiate one div from another.

HTML5 aims to solve that problem with new semantic elements.

For many, HTML5 first entered their vocabulary when Apple refused to add support for Flash to their iOS devices. Flash had gained market dominance as the plugin of choice to serve video through a web browser. However, rather than using Adobe's proprietary technology, Apple decided to rely on HTML5 to handle rich media rendering instead. While HTML5 was making good headway in this area anyway, Apple's public support of HTML5 gave it a major leg up and helped its media tools gain greater traction in the wider community. As you might imagine, Internet Explorer 8 and older versions don't support HTML5 video and audio. Most other modern browsers handled it just fine.

This video summarizes your learning.

This video gives an overview of the entire lesson.

Before exploring what CSS3 has to o?er, to prevent confusion, let's establish the terminology we use to describe a CSS rule.

How many times have you had to add a long URL into a tiny space? The answer would be multiple times, and it is very time consuming. It's easy to fix this issue with a simple CSS3 declaration, which also works in older versions of Internet Explorer, as far back as 5.5!

When you're building a responsive web design, attempting to provide a single design that works everywhere, on every device, it's a simple fact that you'll frequently encounter situations when features or techniques are not supported on certain devices. In those instances, you'll likely want to create a fork in your CSS: if the browser supports a feature, provide one chunk of code; if it doesn't, it gets different code. It's the kind of situation that gets handled by if…else or switch statements in JavaScript. We currently have two possible approaches. One is entirely CSS-based but with fewer browser implementations, and the other is only made possible with the help of a JavaScript library but enjoys far broader support. Let's consider each in turn.

CSS3 gives incredible power for selecting elements within a page. You may not think this sounds very glitzy, but it will definitely make your life easier and you'll love CSS3 for it!

CSS3 gives us more power to select elements based upon where they sit in the structure of the DOM.

For the uninitiated, nth-based selectors can look pretty intimidating. However, once you've mastered the logic and syntax, you'll be amazed at what you can do with them. Let's take a look.

Thanks to the popularity of CSS preprocessors, CSS is starting to gain some more programmatic features. Let's look at them in detail.

So far in this lesson, we have looked at how CSS3 has given us new powers of selection and the ability to add custom typography to our designs. Now, we'll look at ways that CSS3 allows us to work with color that were simply not possible before. Firstly, CSS3 provides two new ways to declare color: RGB and HSL. In addition, these two formats enable us to use an alpha channel alongside them (RGBA and HSLA respectively).

This video summarizes your learning.

This video gives an overview of the entire lesson.

One of the most widely implemented CSS3 features is text-shadow. Like @fontface, it had a previous life but was dropped in CSS 2.1. Thankfully, it's back in CSS3 and is widely supported by all modern browsers and Internet Explorer 9 onwards.

In the past, to achieve a background gradient on an element, it was necessary to tile a thin graphical slice of the gradient. As graphics resources go, this is quite an economical trade-o?. An image only a pixel or two wide isn't going to break the bandwidth bank, and on a single site it can be used on multiple elements.

As a simple fallback for older browsers that don't support background gradients, just define a solid background color first. That way, older browsers will at least render a solid background if they don't understand the gradient that's defined afterwards.

Although a little out of fashion at the moment, it used to be a fairly common design requirement to build a page with a di?erent background image at the top of the page than at the bottom, or perhaps to use di?erent background images for the top and bottom of a content section within a page. Back in the day, with CSS2.1, achieving this e?ect typically required additional. With CSS3, you can stack as many background images as you need on an element.

There is a glaring problem with box-shadow. As the name implies, it is limited to the rectangular CSS box shape of the element it is applied to. Thankfully, we can overcome this issue with CSS filters, part of the filter effects module level 1. They are not as widely supported as box-shadow, but work great with a progressive enhancement approach. If a browser doesn't understand what to do with the filter, it simply ignores it. In supported browsers, the fancy effects are rendered.

This video summarizes your learning.

This video gives an overview of the entire lesson.

Transitions are the simplest way to create a visual effect between one state and another with CSS.

Despite sounding similar, CSS transforms are entirely different to CSS transitions. Think of it like this, transitions makes the change smooth from one state to another, while transforms define what the element will actually become.

Let's look at our first example: an element that flips when we hover over it. We've used hover here to invoke the change, as it's simple for the sake of illustration. However, the ?ipping action could just as easily be initiated with a class change or when an element receives focus.

If you've worked with applications such as Flash, Final Cut Pro, or After Effects, you'll have an instant advantage when working with CSS3 animations. CSS3 employs animation key framing conventions found in timeline-based applications.

This video summarizes your learning.

This video gives an overview of the entire lesson.

The easiest way to get to grips with HTML5 forms is to work our way through an example form.

HTML5 adds a number of extra input types, which, amongst other things, enable us to limit the data that users input without the need for extraneous JavaScript code. The most comforting thing about these new input types is that, by default, where browsers don't support the feature, they degrade to a standard text input box. Let's look at these new HTML5 input types and the benefits they provide.

Our form is now fully functional across browsers, so now we need to make it a little more appealing across different viewport sizes. Now, by applying some of the techniques we've learned throughout the previous lessons, we can improve the aesthetics of our form.

This video summarizes your learning.

This video gives an overview of the entire lesson.

SVG is a language for describing two-dimensional graphics in XML 10. SVG allows for three types of graphic objects: vector graphic shapes (for example, paths consisting of straight lines and curves), images, and text. As the name implies, SVGs allow two-dimensional images to be described in code as vector points. This makes them a great candidate for icons, line drawings, and charts. As vectors describe relative points, they can scale to any size, without loss of fidelity. Furthermore, in terms of data, as SVGs are described as vector points, it tends to make them tiny, compared to a similarly sized JPEG, GIF, or PNG file.

There are a number of things that you can do with SVG images that you can't do with normal image formats. The range of what's possible is largely dependent upon the way that the SVG is inserted into the page. So, before we get to what we can actually do with SVGs, we'll consider the various ways we can actually get them on the page in the first place.

Let's put aside the foibles of browsers for a moment and consider what some of those features in the table actually allow and why you may or may not want to make use of them. SVGs will always render as sharp as the viewing device will allow, and regardless of the manner of insertion. For most practical situations, resolution independence is usually reason enough to use SVG. It's then just a question of choosing whichever insertion method suits your workflow and the task at hand. There are other capabilities and oddities that are worth knowing about, such as SMIL animation, different ways to link to external style sheets, marking internal styles with character data delimiters, amending an SVG with JavaScript, and making use of media queries within an SVG. Let's see those now.

This video summarizes your learning.