# data[].attributes.attachment_link.description
Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, and XML.

# data[].attributes.body
A menu is simply a list for hyperlinks (to either other pages on your website, or other websites) use list items, but format them to remove the 'bullet' points'

# data[].attributes.headline
Part of instructions for a basic horizontal menu

# data[].attributes.subject
Part of instructions for a basic horizontal menu

# data[].attributes.body
Fairly simple, but build up your understanding little by little with the models

# data[].attributes.attachment_link.readable_text
Website Layout

A website is often divided into headers, menus, content and a footer:

There are tons of different layout designs to choose from. However, the structure above, is one of the most common, and we will take a closer look at it in this tutorial.

Header

A header is usually located at the top of the website (or right below a top navigation menu). It often contains a logo or the website name:

Example

.header {
background-color: #F1F1F1;
text-align: center;
padding: 20px;
}

Result

Try it Yourself "

Navigation Bar

A navigation bar contains a list of links to help visitors navigating through your website:

Example

/* The navbar container */
.topnav {
overflow: hidden;
background-color: #333;
}

/* Navbar links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/* Links - change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}

Result

Try it Yourself "

Content

The layout in this section, often depends on the target users. The most common layout is one (or combining them) of the following:

1-column (often used for mobile browsers)

2-column (often used for tablets and laptops)

3-column layout (only used for desktops)

We will create a 3-column layout, and change it to a 1-column layout on smaller screens:

Example

/* Create three equal columns that float next to each other */
.column {
float: left;
width: 33.33%;
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other on smaller screens (600px wide or less) */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}

Result

Try it Yourself "

Tip: To create a 2-column layout, change the width to 50%. To create a 4-column layout, use 25%, etc.

Tip: Do you wonder how the @media rule works? Read more about it in our CSS Media Queries chapter.

Tip: A more modern way of creating column layouts, is to use CSS Flexbox. However, it is not supported in Internet Explorer 10 and earlier versions. If you require IE6-10 support, use floats (as shown above).

To learn more about the Flexible Box Layout Module, read our CSS Flexbox chapter.

Unequal Columns

The main content is the biggest and the most important part of your site.

It is common with unequal column widths, so that most of the space is reserved for the main content. The side content (if any) is often used as an alternative navigation or to specify information relevant to the main content. Change the widths as you like, only remember that it should add up to 100% in total:

Example

/* Left and right column */
.column.side {
width: 25%;
}

/* Middle column */
.column.middle {
width: 50%;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}

Result

Try it Yourself "

Footer

The footer is placed at the bottom of your page. It often contains information like copyright and contact info:

Example

.footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;
}

Result

Try it Yourself "

Responsive Website Layout

By using some of the CSS code above, we have created a responsive website layout, which varies between two columns and full-width columns depending on screen width:
Try it Yourself "
Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a template, and host it for free.

Get started for free ❯
* no credit card required

# data[].attributes.attachment_link.description
A website is often divided into headers, menus, content and a footer: There are tons of different layout designs to choose from. However, the structure above, is one of the most common, and we will take a closer look at it in this tutorial.

# data[].attributes.body
Pseuocode is a middle step between human language, and programming language. It is a way to flatten out your thoughts to think through step by step what a program will do. You do not need to use the precise programming language, but something that gives a good idea of the program structure.

# data[].attributes.body
This is a beautiful example of a side menu with dropdown

# data[].attributes.attachment_link.readable_text
Learn how to create an animated, closable side navigation menu.

Sidenav overlay
Sidenav overlay without animation
Sidenav push (off-canvas)
Sidenav push w/opacity
Sidenav full-width
Try it Yourself "

Create an Animated Side Navigation

Step 1) Add HTML:

Step 2) Add CSS:

Step 3) Add JavaScript:

The example below slides in the side navigation, and makes it 250px wide:

Sidenav Overlay Example

Try it Yourself "

The example below slides in the side navigation, and pushes the page content to the right (the value used to set the width of the sidenav is also used to set the left margin of the "page content"):

Sidenav Push Content

Try it Yourself "

The example below also slides in the side navigation, and pushes the page content to the right, only this time, we add a black background color with a 40% opacity to the body element, to "highlight" the side navigation:

The example below slides in the side navigation from the left and covers the whole page (100% width):

Sidenav Full-width:

Try it Yourself "

The example below opens and close the side navigation menu without animations:

Sidenav without Animation

Try it Yourself "

The example below shows how to create a right-sided navigation menu:

The example below shows how to create a side navigation menu that is always shown (fixed):

Tip: Go to our CSS Navbar Tutorial to learn more about navigation bars.

# data[].attributes.attachment_link.description
Learn how to create an animated, closable side navigation menu.

# data[].attributes.attachment_link.title
BBC - My Web My Way - What is accessibility?

# data[].attributes.attachment_link.description
My Web My Way explains the many ways you can change your browser, computer, keyboard and mouse settings to make the web more accessible to you

# data[].attributes.body
Box model - Traditional, works well, but requires some fiddling around
Flex box - New, only works in newer browsers. Easier.

# data[].attributes.headline
This will give you a basic page with columns, header and footer

# data[].attributes.subject
This will give you a basic page with columns, header and footer

# data[].attributes.body
Fairly simple, but build up your understanding little by little with the models

# data[].attributes.attachment_link.readable_text
Website Layout

A website is often divided into headers, menus, content and a footer:

There are tons of different layout designs to choose from. However, the structure above, is one of the most common, and we will take a closer look at it in this tutorial.

Header

A header is usually located at the top of the website (or right below a top navigation menu). It often contains a logo or the website name:

Example

.header {
background-color: #F1F1F1;
text-align: center;
padding: 20px;
}

Result

Try it Yourself "

Navigation Bar

A navigation bar contains a list of links to help visitors navigating through your website:

Example

/* The navbar container */
.topnav {
overflow: hidden;
background-color: #333;
}

/* Navbar links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/* Links - change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}

Result

Try it Yourself "

Content

The layout in this section, often depends on the target users. The most common layout is one (or combining them) of the following:

1-column (often used for mobile browsers)

2-column (often used for tablets and laptops)

3-column layout (only used for desktops)

We will create a 3-column layout, and change it to a 1-column layout on smaller screens:

Example

/* Create three equal columns that float next to each other */
.column {
float: left;
width: 33.33%;
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other on smaller screens (600px wide or less) */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}

Result

Try it Yourself "

Tip: To create a 2-column layout, change the width to 50%. To create a 4-column layout, use 25%, etc.

Tip: Do you wonder how the @media rule works? Read more about it in our CSS Media Queries chapter.

Tip: A more modern way of creating column layouts, is to use CSS Flexbox. However, it is not supported in Internet Explorer 10 and earlier versions. If you require IE6-10 support, use floats (as shown above).

To learn more about the Flexible Box Layout Module, read our CSS Flexbox chapter.

Unequal Columns

The main content is the biggest and the most important part of your site.

It is common with unequal column widths, so that most of the space is reserved for the main content. The side content (if any) is often used as an alternative navigation or to specify information relevant to the main content. Change the widths as you like, only remember that it should add up to 100% in total:

Example

/* Left and right column */
.column.side {
width: 25%;
}

/* Middle column */
.column.middle {
width: 50%;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}

Result

Try it Yourself "

Footer

The footer is placed at the bottom of your page. It often contains information like copyright and contact info:

Example

.footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;
}

Result

Try it Yourself "

Responsive Website Layout

By using some of the CSS code above, we have created a responsive website layout, which varies between two columns and full-width columns depending on screen width:
Try it Yourself "
Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a template, and host it for free.

Get started for free ❯
* no credit card required

# data[].attributes.attachment_link.description
A website is often divided into headers, menus, content and a footer: There are tons of different layout designs to choose from. However, the structure above, is one of the most common, and we will take a closer look at it in this tutorial.

# data[].attributes.attachment_link.description
I assume you already know what selectors, properties, and values are. And you probably know a thing or two about layout, though it may still be a rage-provoking activity for you. If you want to learn HTML and CSS from the beginning, you should check out this tutorial.

# data[].attributes.body
Standard lesson from w3schools

# data[].attributes.attachment_link.readable_text
Try it Yourself "

CSS Flexbox Layout Module

Before the Flexbox Layout module, there were four layout modes:

Block, for sections in a webpage

Inline, for text

Table, for two-dimensional table data

Positioned, for explicit position of an element

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

Browser Support

The flexbox properties are supported in all modern browsers.

Flexbox Elements

To start using the Flexbox model, you need to first define a flex container.

The element above represents a flex container (the blue area) with three flex items.

Parent Element (Container)

The flex container becomes flexible by setting the display property to flex:

Example

.flex-container {
display: flex;
}

The flex container properties are:

The flex-direction Property

The flex-direction property defines in which direction the container wants to stack the flex items.

The flex-wrap Property

The flex-wrap property specifies whether the flex items should wrap or not.

The examples below have 12 flex items, to better demonstrate the flex-wrap property.

The flex-flow Property

The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties.

The justify-content Property

The justify-content property is used to align the flex items:

The align-items Property

The align-items property is used to align the flex items.

In these examples we use a 200 pixels high container, to better demonstrate the align-items property.

Example

The baseline value aligns the flex items such as their baselines aligns:

Note: the example uses different font-size to demonstrate that the items gets aligned by the text baseline:

Try it Yourself "

The align-content Property

The align-content property is used to align the flex lines.

In these examples we use a 600 pixels high container, with the flex-wrap property set to wrap, to better demonstrate the align-content property.

Perfect Centering

In the following example we will solve a very common style problem: perfect centering.

SOLUTION: Set both the justify-content and align-items properties to center, and the flex item will be perfectly centered:

Example

Try it Yourself "

Child Elements (Items)

The direct child elements of a flex container automatically becomes flexible (flex) items.

The element above represents four blue flex items inside a grey flex container.

The flex item properties are:

The order Property

The order property specifies the order of the flex items.

The first flex item in the code does not have to appear as the first item in the layout.

The order value must be a number, default value is 0.

The flex-grow Property

The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items.

The value must be a number, default value is 0.

Example

Make the third flex item grow eight times faster than the other flex items:

Try it Yourself "

The flex-shrink Property

The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items.

The value must be a number, default value is 1.

Example

Do not let the third flex item shrink as much as the other flex items:

Try it Yourself "

The flex-basis Property

The flex-basis property specifies the initial length of a flex item.

The flex Property

The flex property is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties.

The align-self Property

The align-self property specifies the alignment for the selected item inside the flexible container.

The align-self property overrides the default alignment set by the container's align-items property.

In these examples we use a 200 pixels high container, to better demonstrate the align-self property:

Responsive Image Gallery using Flexbox

Use flexbox to create a responsive image gallery that varies between four, two or full-width images, depending on screen size:

Try it Yourself "

Responsive Website using Flexbox

Use flexbox to create a responsive website, containing a flexible navigation bar and flexible content:

Try it Yourself "

CSS Flexbox Properties

The following table lists the CSS properties used with flexbox:

# data[].attributes.attachment_link.description
Try it Yourself " Before the Flexbox Layout module, there were four layout modes: Block, for sections in a webpage Inline, for text Table, for two-dimensional table data Positioned, for explicit position of an element The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

# data[].attributes.headline
Another - take it easy flexbox explanation

# data[].attributes.subject
Another - take it easy flexbox explanation

# data[].attributes.attachment_link.readable_text
Four years ago I posted "Don't Overthink it Grids" and it resonated with quite a few people. Even back then, I thought we might have been at Peak Grid. Someone was promoting a new grid framework practically every week.

That article was my way of saying: " Fear not! You can make a grid yourself! You don't need a complicated framework." It might not have been quite as fancy, but that's how I rolled. You float a couple of elements with some percentage widths and call it a day.

These days, if you are ready to jump to flexbox for layout, DIY grids are even easier.

This is how I normally do it:

.flex-grid { display: flex; } .col { flex: 1; }

That supports any number of columns and they are automatically equal width and flexible!

Wanna have them break into a column for small screens? Easy:

@media (max-width: 400px) { .flex-grid { display: block; } }

Need gutters? You could add margins to the columns. You could add padding to the columns. I like the idea of using justification to create the columns, like:

.flex-grid-thirds { display: flex; justify-content: space-between; } .flex-grid-thirds .col { width: 32%; }

If you go the flexbox route, you also now have the ability to change the order of columns as needed, which can be great for keeping more important content higher in the source as well as responsive design reshuffling.

See the Pen Easy Flexbox Grid by Chris Coyier (@chriscoyier) on CodePen.

My point, again: it's not required that you reach for a grid framework to build a grid. You can do it! This is also not to say that flexbox is trivially easy and you'll never have any problems. There are plenty of edge cases and weird browser support things that you may run into if you start using more niche flexbox features. The stuff we looked at here is pretty vanilla though and I'd be surprised if you had problems.

More

Philip Walton has written more on the glory of flexbox grid systems.

To be fair, grid frameworks tend to be fairly robust, and plenty of teams find success in having predefined classes and recipes for building any type of grid they need. If you're interested in leaning on a grid framework that is flexbox specific, here's a few I know about: Frow, Flexbox Grid, and Gridlex.

# data[].attributes.attachment_link.title
Don't Overthink It (Flexbox) Grids | CSS-Tricks

# data[].attributes.attachment_link.description
Four years ago I posted "Don't Overthink it Grids" and it resonated with quite a few people. Even back then, I thought we might have been at Peak Grid. Someone was promoting a new grid framework practically every week. That article was my way of saying: " Fear not!

# data[].attributes.headline
Taking it further: Full explanation with more detail

# data[].attributes.subject
Taking it further: Full explanation with more detail

# data[].attributes.body
This page explains standard layout, menu offers flexbox explanation too

# data[].attributes.attachment_link.readable_text
This article will recap some of the CSS layout features we've already touched upon in previous modules - such as different values - and introduce some of the concepts we'll be covering throughout this module.

Prerequisites:

The basics of HTML (study Introduction to HTML), and an idea of How CSS works (study Introduction to CSS.)

Objective:

To give you an overview of CSS page layout techniques. Each technique can be learned in greater detail in subsequent tutorials.

CSS page layout techniques allow us to take elements contained in a web page and control where they are positioned relative to their default position in normal layout flow, the other elements around them, their parent container, or the main viewport/window. The page layout techniques we'll be covering in more detail in this module are

Each technique has its uses, advantages, and disadvantages, and no technique is designed to be used in isolation. By understanding what each method is designed for you will be in a good place to understand which is the best layout tool for each task.

Normal flow

Normal flow is how the browser lays out HTML pages by default when you do nothing to control page layout. Let's look at a quick HTML example:

<p>I love my cat.</p>

<ul>
  <li>Buy cat food</li>
  <li>Exercise</li>
  <li>Cheer up friend</li>
</ul>

<p>The end!</p>

By default, the browser will display this code as follows:

Note here how the HTML is displayed in the exact order in which it appears in the source code, with elements stacked up on top of one another - the first paragraph, followed by the unordered list, followed by the second paragraph.

The elements that appear one below the other are described as block elements, in contrast to inline elements, which appear one beside the other, like the individual words in a paragraph.

Note: The direction in which block element contents are laid out is described as the Block Direction. The Block Direction runs vertically in a language such as English, which has a horizontal writing mode. It would run horizontally in any language with a Vertical Writing Mode, such as Japanese. The corresponding Inline Direction is the direction in which inline contents (such as a sentence) would run.

When you use CSS to create a layout, you are moving the elements away from the normal flow, but for many of the elements on your page the normal flow will create exactly the layout you need. This is why starting with a well-structured HTML document is so important, as you can then work with the way things are laid out by default rather than fighting against it.

The methods that can change how elements are laid out in CSS are as follows:

- Standard values such as block, inline or inline-block can change how elements behave in normal flow (see Types of CSS boxes for more information). We then have entire layout methods that are switched on via a value of display, for example CSS Grid and Flexbox.

Floats - Applying a value such as left can cause block level elements to wrap alongside one side of an element, like the way images sometimes have text floating around them in magazine layouts.

- Allows you to precisely control the placement of boxes inside other boxes. static positioning is the default in normal flow, but you can cause elements to be laid out differently using other values, for example always fixed to the top left of the browser viewport.

Table layout - features designed for styling the parts of an HTML table can be used on non-table elements using display: table and associated properties..

Multi-column layout - The Multi-column layout properties can cause the content of a block to layout in columns, as you might see in a newspaper.

The display property

The main methods of achieving page layout in CSS are all values of the display property. This property allows us to change the default way something displays. Everything in normal flow has a value of display, used as the default way that elements they are set on behave. For example, the fact that paragraphs in English display one below the other is due to the fact that they are styled with display: block. If you create a link around some text inside a paragraph, that link remains inline with the rest of the text, and doesn't break onto a new line. This is because the element is display: inline by default.

You can change this default display behaviour. For example, the element is display: block by default, meaning that list items display one below the other in our English document. If we change the display value to inline they now display next to each other, as words would do in a sentence. The fact that you can change the value of display for any element means that you can pick HTML elements for their semantic meaning, without being concerned about how they will look. The way they look is something that you can change.

In addition to being able to change the default presentation by turning an item from block to inline and vice versa, there are some bigger layout methods that start out as a value of display. However, when using these, you will generally need to invoke additional properties. The two values most important for our purposes when discussing layout are display: flex and display: grid.

Flexbox

Flexbox is the short name for the Flexible Box Layout Module, designed to make it easy for us to lay things out in one dimension - either as a row or as a column. To use flexbox, you apply display: flex to the parent element of the elements you want to lay out; all its direct children then become flex items. We can see this in a simple example.

The HTML markup below gives us a containing element, with a class of wrapper, inside which are three elements. By default these would display as block elements, below one another, in our English language document.

However, if we add display: flex to the parent, the three items now arrange themselves into columns. This is due to them becoming flex items and using some initial values that flexbox gives them. They are displayed as a row, because the initial value of flex-direction is row. They all appear to stretch to the height of the tallest item, because the initial value of the align-items property is stretch. This means that the items stretch to the height of the flex container, which in this case is defined by the tallest item. The items all line up at the start of the container, leaving any extra space at the end of the row.

In addition to the above properties that can be applied to the flex container, there are properties that can be applied to the flex items. These properties, among other things, can change the way that the items flex, enabling them to expand and contract to fit into the available space.

As a simple example of this, we can add the property to all of our child items, with a value of 1. This will cause all of the items to grow and fill the container, rather than leaving space at the end. If there is more space then the items will become wider; if there is less space they will become narrower. In addition, if you add another element to the markup the items will all become smaller to make space for it - they will adjust size to take up the same amount of space, whatever that is.

Note: This has been a very short introduction to what is possible in Flexbox, to find out more, see our Flexbox article.

Grid Layout

While flexbox is designed for one-dimensional layout, Grid Layout is designed for two dimensions - lining things up in rows and columns.

Once again, you can switch on Grid Layout with a specific value of display - display: grid. The below example uses similar markup to the flex example, with a container and some child elements. In addition to using display: grid, we are also defining some row and column tracks on the parent using the grid-template-rows and grid-template-columns properties respectively. We've defined three columns each of 1fr and two rows of 100px. I don't need to put any rules on the child elements; they are automatically placed into the cells our grid has created.

Once you have a grid, you can explicitly place your items on it, rather than relying on the auto-placement behavior seen above. In the second example below we have defined the same grid, but this time with three child items. We've set the start and end line of each item using the grid-column and properties. This causes the items to span multiple tracks.

Note: These two examples are just a small part of the power of Grid layout; to find out more see our Grid Layout article.

The rest of this guide covers other layout methods, which are less important for the main layout structures of your page but can still help you achieve specific tasks. By understanding the nature of each layout task, you will soon find that when you look at a particular component of your design the type of layout best suited to it will often be clear.

Floats

Floating an element changes the behavior of that element and the block level elements that follow it in normal flow. The element is moved to the left or right and removed from normal flow, and the surrounding content floats around the floated item.

The property has four possible values:

left - Floats the element to the left.

right - Floats the element to the right.

none - Specifies no floating at all. This is the default value.

inherit - Specifies that the value of the float property should be inherited from the element's parent element.

In the example below we float a <div> left, and give it a on the right to push the text away from the element. This gives us the effect of text wrapped around that box, and is most of what you need to know about floats as used in modern web design.

Note: Floats are fully explained in our lesson on the float and clear properties. Prior to techniques such as Flexbox and Grid Layout floats were used as a method of creating column layouts. You may still come across these methods on the web; we will cover these in the lesson on legacy layout methods.

Positioning techniques

Positioning allows you to move an element from where it would be placed when in normal flow to another location. Positioning isn't a method for creating your main page layouts, it is more about managing and fine-tuning the position of specific items on the page.

There are however useful techniques for certain layout patterns that rely on the property. Understanding positioning also helps in understanding normal flow, and what it is to move an item out of normal flow.

There are five types of positioning you should know about:

Static positioning is the default that every element gets - it just means "put the element into its normal position in the document layout flow - nothing special to see here".

Relative positioning allows you to modify an element's position on the page, moving it relative to its position in normal flow - including making it overlap other elements on the page.

Absolute positioning moves an element completely out of the page's normal layout flow, like it is sitting on its own separate layer. From there, you can fix it in a position relative to the edges of the page's <html> element (or its nearest positioned ancestor element). This is useful for creating complex layout effects such as tabbed boxes where different content panels sit on top of one another and are shown and hidden as desired, or information panels that sit off screen by default, but can be made to slide on screen using a control button.

Fixed positioning is very similar to absolute positioning, except that it fixes an element relative to the browser viewport, not another element. This is useful for creating effects such as a persistent navigation menu that always stays in the same place on the screen as the rest of the content scrolls.

Sticky positioning is a newer positioning method which makes an element act like position: static until it hits a defined offset from the viewport, at which point it acts like position: fixed.

Simple positioning example

To provide familiarity with these page layout techniques, we'll show you a couple of quick examples. Our examples will all feature the same HTML, which is as follows:

<h1>Positioning</h1>

<p>I am a basic block level element.</p>
<p class="positioned">I am a basic block level element.</p>
<p>I am a basic block level element.</p>

This HTML will be styled by default using the following CSS:

body {
  width: 500px;
  margin: 0 auto;
}

p {
    background-color: rgb(207,232,220);
    border: 2px solid rgb(79,185,227);
    padding: 10px;
    margin: 10px;
    border-radius: 5px;
}

The rendered output is as follows:

Relative positioning

Relative positioning allows you to offset an item from the position in normal flow it would have by default. This means you could achieve a task such as moving an icon down a bit so it lines up with a text label. To do this, we could add the following rule to add relative positioning:

.positioned {
  position: relative;
  top: 30px;
  left: 30px;
}

Here we give our middle paragraph a value of relative - this doesn't do anything on its own, so we also add and properties. These serve to move the affected element down and to the right - this might seem like the opposite of what you were expecting, but you need to think of it as the element being pushed on its left and top sides, which result in it moving right and down.

Adding this code will give the following result:

Absolute positioning

Absolute positioning is used to completely remove an element from normal flow, and place it using offsets from the edges of a containing block.

Going back to our original non-positioned example, we could add the following CSS rule to implement absolute positioning:

.positioned {
  position: absolute;
  top: 30px;
  left: 30px;
}

Here we give our middle paragraph a value of absolute, and the same and properties as before. Adding this code, however, will give the following result:

This is very different! The positioned element has now been completely separated from the rest of the page layout and sits over the top of it. The other two paragraphs now sit together as if their positioned sibling doesn't exist. The and properties have a different effect on absolutely positioned elements than they do on relatively positioned elements. In this case the offsets have been calculated from the top and left of the page. It is possible to change the parent element that becomes this container and we will take a look at that in the lesson on positioning.

Fixed positioning

Fixed positioning removes our element from document flow in the same way as absolute positioning. However, instead of the offsets being applied from the container, they are applied from the viewport. As the item remains fixed in relation to the viewport we can create effects such as a menu which remains fixed as the page scrolls beneath it.

For this example our HTML is three paragraphs of text, in order that we can cause the page to scroll, and a box to which we will give position: fixed.

<h1>Fixed positioning</h1>

<div class="positioned">Fixed</div>

<p>Paragraph 1.</p>
<p>Paragraph 2.</p>
<p>Paragraph 3.</p>

Sticky positioning

Sticky positioning is the final positioning method that we have at our disposal. It mixes the default static positioning with fixed positioning. When an item has position: sticky it will scroll in normal flow until it hits offsets from the viewport that we have defined. At that point it becomes "stuck" as if it had position: fixed applied.

Note: to find more out about positioning, see our Positioning article.

Table layout

HTML tables are fine for displaying tabular data, but many years ago - before even basic CSS was supported reliably across browsers - web developers used to also use tables for entire web page layouts - putting their headers, footers, different columns, etc. in various table rows and columns. This worked at the time, but it has many problems - table layouts are inflexible, very heavy on markup, difficult to debug, and semantically wrong (e.g., screen reader users have problems navigating table layouts).

The way that a table looks on a webpage when you use table markup is due to a set of CSS properties that define table layout. These properties can be used to lay out elements that are not tables, a use which is sometimes described as "using CSS tables".

The example below shows one such use; using CSS tables for layout should be considered a legacy method at this point, for those situations where you have very old browsers without support for Flexbox or Grid.

Let's look at an example. First, some simple markup that creates an HTML form. Each input element has a label, and we've also included a caption inside a paragraph. Each label/input pair is wrapped in a , for layout purposes.

<form>
  <p>First of all, tell us your name and age.</p>
  <div>
    <label for="fname">First name:</label>
    <input type="text" id="fname">
  </div>
  <div>
    <label for="lname">Last name:</label>
    <input type="text" id="lname">
  </div>
  <div>
    <label for="age">Age:</label>
    <input type="text" id="age">
  </div>
</form>

Now, the CSS for our example. Most of the CSS is fairly ordinary, except for the uses of the property. The , s, and s and s have been told to display like a table, table rows, and table cells respectively - basically, they'll act like HTML table markup, causing the labels and inputs to line up nicely by default. All we then have to do is add a bit of sizing, margin, etc. to make everything look a bit nicer and we're done.

You'll notice that the caption paragraph has been given display: table-caption; - which makes it act like a table - and caption-side: bottom; to tell the caption to sit on the bottom of the table for styling purposes, even though the markup is before the <input> elements in the source. This allows for a nice bit of flexibility.

html {
  font-family: sans-serif;
}

form {
  display: table;
  margin: 0 auto;
}

form div {
  display: table-row;
}

form label, form input {
  display: table-cell;
  margin-bottom: 10px;
}

form label {
  width: 200px;
  padding-right: 5%;
  text-align: right;
}

form input {
  width: 300px;
}

form p {
  display: table-caption;
  caption-side: bottom;
  width: 300px;
  color: #999;
  font-style: italic;
}

This gives us the following result:

You can also see this example live at css-tables-example.html (see the source code too.)

Multi-column layout

The multi-column layout module gives us a way to lay out content in columns, similar to how text flows in a newspaper. While reading up and down columns is less useful in a web context as you don't want to force users to scroll up and down, arranging content into columns can be a useful technique.

To turn a block into a multicol container we use either the column-count property, which tells the browser how many columns we would like to have, or the column-width property, which tells the browser to fill the container with as many columns of at least that width.

In the below example we start with a block of HTML inside a containing <div> element with a class of container.

<div class="container">
    <h1>Multi-column layout</h1>

    <p>Paragraph 1.</p>
    <p>Paragraph 2.</p>

</div>

We are using a column-width of 200 pixels on that container, causing the browser to create as many 200-pixel columns as will fit in the container and then share the remaining space between the created columns.

Summary

This article has provided a brief summary of all the layout technologies you should know about. Read on for more information on each individual technology!

In this module

# data[].attributes.attachment_link.description
This article will recap some of the CSS layout features we've already touched upon in previous modules - such as different values - and introduce some of the concepts we'll be covering throughout this module. Prerequisites: The basics of HTML (study Introduction to HTML), and an idea of How CSS works (study Introduction to CSS.)

# data[].attributes.attachment_link.readable_text
CSS3 has introduced countless possibilities for UX designers, and the best thing about them is that the coolest parts are really simple to implement.

Just a couple of lines of code will give you an awesome transition effect that will excite your users, increase engagement and ultimately, when used well, increase your conversions. What's more, these effects are hardware accelerated, and a progressive enhancement that you can use right now.

Here are 8 really simple effects that will add life to your UI and smiles to your users' faces.

All of these effects (bar one) are controlled with the transition property. So we can see these effects working, we'll set up a div in an HTML page:

Having done so, set its width and height (so it has dimensions), its background color (so we can see it) and its transition property.

<style type="text/css"> body > div { width:483px; height:298px; background:#676470; transition:all 0.3s ease; } </style>

The transition property has three values: the properties to transition (in our case all of them) the speed of the transition (in our case 0.3 seconds) and a third value which lets you change how the acceleration and deceleration is calculated, but we'll stick with the default by leaving this blank.

Now all we need to do is change properties, and they'll animate for us...

If you'd like to follow along you can download the demo files here.

1. Fade in

Having things fade in is a fairly common request from clients. It's a great way to emphasize functionality or draw attention to a call to action.

Fade in effects are coded in two steps: first, you set the initial state; next, you set the change, for example on hover:

.fade {         opacity:0.5; } .fade:hover {         opacity:1; }

(Make sure you set the class of your div to "fade" to see this working.)

2. Change color

Animating a change of color used to be unbelievably complex, with all kinds of math involved in calculating separate RGB values and then recombining them. Now, we just set the div's class to "color" and specify the color we want in our CSS:

.color:hover {         background:#53a7ea; }

3. Grow & Shrink

To grow an element, you used to have to use its width and height, or its padding. But now we can use CSS3's transform to enlarge.

Set your div's class to "grow" and then add this code to your style block:

.grow:hover { -webkit-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); }

Shrinking an element is as simple as growing it. To enlarge an element we specify a value greater than 1, to shrink it, we specify a value less than 1:

.shrink:hover { -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); }

4. Rotate elements

CSS transforms have a number of different uses, and one of the best is transforming the rotation of an element. Give your div the class "rotate" and add the following to your CSS:

.rotate:hover { -webkit-transform: rotateZ(-30deg); -ms-transform: rotateZ(-30deg); transform: rotateZ(-30deg); }

5. Square to circle

A really popular effect at the moment is transitioning a square element into a round one, and vice versa. With CSS, it's a simple effect to achieve, we just transition the border-radius property.

Give your div the class "circle" and add this CSS to your styles:

.circle:hover {         border-radius:50%; }

6. 3D shadow

3D shadows were frowned upon for a year or so, because they weren't seen as compatible with flat design, which is of course nonsense, they work fantastically well to give a user feedback on their interactions and work with flat, or fake 3D interfaces.

This effect is achieved by adding a box shadow, and then moving the element on the x axis using the transform and translate properties so that it appears to grow out of the screen.

Give your div the class "threed" and then add the following code to your CSS:

.threed:hover {         box-shadow:                 1px 1px #53a7ea,                 2px 2px #53a7ea,                 3px 3px #53a7ea;         -webkit-transform: translateX(-3px);         transform: translateX(-3px); }

7. Swing

Not all elements use the transition property. We can also create highly complex animations using @keyframes, animation and animation-iteration.

In this case, we'll first define a CSS animation in your styles. You'll notice that due to implementation issues, we need to use @-webkit-keyframes as well as @keyframes (yes, Internet Explorer really is better than Chrome, in this respect at least).

@-webkit-keyframes swing {     15%     {         -webkit-transform: translateX(5px);         transform: translateX(5px);     }     30%     {         -webkit-transform: translateX(-5px);        transform: translateX(-5px);     }      50%     {         -webkit-transform: translateX(3px);         transform: translateX(3px);     }     65%     {         -webkit-transform: translateX(-3px);         transform: translateX(-3px);     }     80%     {         -webkit-transform: translateX(2px);         transform: translateX(2px);     }     100%     {         -webkit-transform: translateX(0);         transform: translateX(0);     } } @keyframes swing {     15%     {         -webkit-transform: translateX(5px);         transform: translateX(5px);     }     30%     {         -webkit-transform: translateX(-5px);         transform: translateX(-5px);     }     50%     {         -webkit-transform: translateX(3px);         transform: translateX(3px);     }     65%     {         -webkit-transform: translateX(-3px);         transform: translateX(-3px);     }     80%     {         -webkit-transform: translateX(2px);         transform: translateX(2px);     }     100%     {         -webkit-transform: translateX(0);         transform: translateX(0);     } }

This animation simply moves the element left and right, now all we need to do is apply it:

.swing:hover {         -webkit-animation: swing 1s ease;         animation: swing 1s ease;         -webkit-animation-iteration-count: 1;         animation-iteration-count: 1; }

8. Inset border

One of the hottest button styles right now is the ghost button; a button with no background and a heavy border. We can of course add a border to an element simply, but that will change the element's position. We could fix that problem using box sizing, but a far simpler solution is the transition in a border using an inset box shadow.

Give your div the class "border" and add the following CSS to your styles:

.border:hover {         box-shadow: inset 0 0 0 25px #53a7ea; }
Featured image/thumbnail, animation image via Shutterstock.

# data[].attributes.attachment_link.title
8 simple CSS3 transitions that will wow your users | Webdesigner Depot

# data[].attributes.attachment_link.description
CSS3 has introduced countless possibilities for UX designers, and the best thing about them is that the coolest parts are really simple to implement. Just a couple of lines of code will give you an awesome transition effect that will excite your users, increase engagement and ultimately, when used well, increase your conversions.

# data[].attributes.attachment_link.description
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

# data[].attributes.attachment_link.description
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

# data[].attributes.attachment_link.description
Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, and XML.

# data[].attributes.attachment_link.description
Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, and XML.

# data[].attributes.attachment_link.readable_text
JavaScript makes HTML pages more dynamic and interactive.

The HTML <script> Tag

The HTML <script> tag is used to define a client-side script (JavaScript).

The <script> element either contains script statements, or it points to an external script file through the src attribute.

Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.

To select an HTML element, JavaScript most often uses the document.getElementById() method.

This JavaScript example writes "Hello JavaScript!" into an HTML element with id="demo":

Example

Try it Yourself "

A Taste of JavaScript

Here are some examples of what JavaScript can do:

Example

JavaScript can change content:

Try it Yourself "

Example

JavaScript can change styles:

Try it Yourself "

Example

JavaScript can change attributes:

Try it Yourself "

The HTML <noscript> Tag

The HTML <noscript> tag defines an alternate content to be displayed to users that have disabled scripts in their browser or have a browser that doesn't support scripts:

Example

Try it Yourself "

HTML Exercises

HTML Script Tags

# data[].attributes.attachment_link.description
Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

# data[].attributes.headline
This example uses clickable dropdowns - mixing CSS and Javascript. Fairly advanced, but good use of Javascript

# data[].attributes.subject
This example uses clickable dropdowns - mixing CSS and Javascript. Fairly advanced, but good use of Javascript

# data[].attributes.attachment_link.title
How To Create a Dropdown Menu With CSS and JavaScript

# data[].attributes.attachment_link.description
Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, and XML.

# data[].attributes.headline
Tutorials for funky menus - don't get bogged down...

# data[].attributes.subject
Tutorials for funky menus - don't get bogged down...

# data[].attributes.attachment_link.description
There are a lot of great tutorials out there that walk you through how to add a clean and professional looking CSS menu to your website.

# data[].attributes.attachment_link.title
BBC Bitesize - KS3 Computer Science - Designing an algorithm - Revision 2

# data[].attributes.attachment_link.description
Learn how to design an algorithm and how they can be represented with Bitesize KS3 Computer Science.

# data[].attributes.attachment_link.description
Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

# data[].attributes.attachment_link.description
For the sake of illustrating methods of using Javascript to refer to different forms that appear on a page, the examples presents the information in 3 forms. It could have also been combined into one form.

# data[].attributes.attachment_link.title
Introduction to Computer Programming - Pseudocode

# data[].attributes.attachment_link.description
Her first step: figure out how many turtle steps each side of the square should be. Since it will be split in half and into thirds, she wants a length that is a multiple of two and three. She likes nice round numbers so she makes each side of the square 120 turtle steps (120/2=60; 120/3=40).

# data[].attributes.attachment_link.readable_text
Defining Pseudocode

Pseudocode is a simple way of writing programming code in English. Pseudocode is not actual programming language. It uses short phrases to write code for programs before you actually create it in a specific language. Once you know what the program is about and how it will function, then you can use pseudocode to create statements to achieve the required results for your program.

Understanding Pseudocode

Pseudocode makes creating programs easier. Programs can be complex and long; preparation is the key. For years, flowcharts were used to map out programs before writing one line of code in a language. However, they were difficult to modify and with the advancement of programming languages, it was difficult to display all parts of a program with a flowchart. It is challenging to find a mistake without understanding the complete flow of a program. That is where pseudocode becomes more appealing.

To use pseudocode, all you do is write what you want your program to say in English. Pseudocode allows you to translate your statements into any language because there are no special commands and it is not standardized. Writing out programs before you code can enable you to better organize and see where you may have left out needed parts in your programs. All you have to do is write it out in your own words in short statements. Let's look at some examples.

Examples of Pseudocode

Let's review an example of pseudocode to create a program to add 2 numbers together and then display the result.

Start Program
Enter two numbers, A, B
Add the numbers together
Print Sum
End Program

Compare that pseudocode to an example of a flowchart to add two numbers

Now, let's look at a few more simple examples of pseudocode. Here is a pseudocode to compute the area of a rectangle:

Get the length, l, and width, w
Compute the area = l*w
Display the area

Now, let's look at an example of pseudocode to compute the perimeter of a rectangle:

Enter length, l
Enter width, w
Compute Perimeter = 2*l + 2*w
Display Perimeter of a rectangle

Remember, writing basic pseudocode is not like writing an actual coding language. It cannot be compiled or run like a regular program. Pseudocode can be written how you want. But some companies use specific pseudocode syntax to keep everyone in the company on the same page. Syntax is a set of rules on how to use and organize statements in a programming language. By adhering to specific syntax, everyone in the company can read and understand the flow of a program. This becomes cost effective and there is less time spent finding and correcting errors.

Basic Guidelines

If you would like a format for using pseudocode to create your program, here are some basic guidelines:

First, do not use language-specific commands in your statements. Pseudocode should be universal. So when creating the task list, you would not include commands that are for any specific language like C++, Java, C#, or Perl. The point of pseudocode is to design a program that can be translated into any language.

Second, remember to write only one task or statement per line. Make sure you put only one task on each line. Including too much information on one line can be confusing and increases the possibility of errors.

Third, make sure to capitalize keywords. Capitalizing keywords like 'Read,' 'Write,' or 'Display' helps to show when an action is occurring or when a specific command or process will be necessary when coding in your specific language.

Lastly, indent statements in a loop to better see the flow of your program. Indenting can become your friend. It makes things easier to read and keeps information together, especially when creating loops. For example:

Create a program to check if a student is passing. A grade of 70 is passing.

Enter the grade
If grade <70
Display 'Failing'
Else
Display 'Passing'

If you adhere to these four simple guidelines, using pseudocode will be very helpful.

# data[].attributes.attachment_link.keywords[]
pseudocode: definition & examples - video & lesson transcript | study.com

# data[].attributes.attachment_link.title
Pseudocode: Definition & Examples - Video & Lesson Transcript | Study.com

# data[].attributes.attachment_link.description
Pseudocode is a simple way of writing programming code in English. Pseudocode is not actual programming language. It uses short phrases to write code for programs before you actually create it in a specific language. Once you know what the program is about and how it will function, then you can use pseudocode to create statements to achieve the required results for your program.

# data[].attributes.attachment_link.description
W3C's easy-to-use markup validation service, based on SGML and XML parsers.

# data[].attributes.attachment_link.description
Check Cascading Style Sheets (CSS) and (X)HTML documents with style sheets

# data[].attributes.attachment_link.readable_text
The power of the web

The Web is fundamentally designed to work for all people, whatever their hardware, software, language, location, or ability. When the web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.

Including everyone

Web accessibility is about designing web sites, applications, technologies, tools, products and services in an inclusive manner, and thus lifting barriers to communication and interaction that many people face in the physical world.

The mission of the Web Accessibility Initiative (WAI) is to develop strategies, standards, and supporting resources to help you make the web accessible to people with disabilities, thus enabling everyone to participate equally on the web.

About the Web Accessibility Initiative (WAI)

WAI develops its work through W3C's consensus-based process, involving different stakeholders in web accessibility. These include industry, disability organizations, government, accessibility research organizations, and more, and in partnership with organizations around the world, pursues accessibility of the web through these primary activities:

ensuring that W3C standards support accessibility

developing accessibility guidelines for web content and applications, browsers, and authoring tools

developing resources to improve web accessibility evaluation processes and tools

supporting education and outreach on web accessibility

coordinating with research and development that may impact future accessibility of the web

promoting harmonized international uptake of web accessibility standards

Shape an accessible Web as a W3C Member

W3C Members play a significant role in shaping the Web.

Contact W3C to learn more about the benefits of W3C Membership to play a significant role yourself!

# data[].attributes.attachment_link.description
This page gives a high-level introduction to web accessibility and what the W3C Web Accessibility Initiative (WAI) does.

# data[].attributes.attachment_link.title
About Web Accessibility for Disabled People

# data[].attributes.attachment_link.description
What is web accessibility and how to make websites friendly for disabled people.

# data[].attributes.attachment_link.readable_text
Ideally, accessibility should be considered as part of every web project in order to increase availability to the widest possible audience. In the real world however, it can be easily overlooked. In this article we will look at easy ways that you can improve the accessibility of your site without having to make drastic or time consuming changes.

Introduction

"Unfortunately, the power and adaptability of the Web is not always fully utilised"

The World Wide Web is an incredible resource and it has opened up exciting new possibilities. Many more people are now able to access information and entertainment previously unavailable to them through traditional forms of media. The World Wide Web is especially significant for those with disabilities as the vast amount of digital information stored can be manipulated to meet differing requirements. Unfortunately, the power and adaptability of the Web is not always fully utilised and those with disabilities can find it difficult to navigate websites and have a negative experience with the Web in general.

There are numerous reasons why you should aim to improve the accessibility of your site, one of which is that it is the law in many countries. In the UK for example, web accessibility falls under the Disability Discrimination Act and if your website fails to comply, legal action could be brought against you. Legal issues aside however, why would you not want to open your site to the widest possible audience by making it accessible to everyone?

The Web Accessibility Initiative (WAI) was set up by the W3C to promote accessibility on the Web. The WAI attempts to educate people on how those with disabilities use the Web and has created guidelines for web designers and developers to follow. You will find that many of the guidelines are easy to follow and implement. Below we will discuss some easy methods that will help you meet these guidelines and improve the accessibility of your site.

Tip 01: Consider Your Colors

It is estimated that around ten million men suffer from some form of color-blindness in the U.S. The most common types are Protanopia and Deuteranopia; and those who suffer from these have trouble distinguishing between red, green and similar colours. With such a high prevalence of this condition, it really is worth considering when designing and coding your website.

For the most part, there are no radical measures that need to be taken when designing with color-blindness in mind - as is the case with the majority of the suggestions within this article. A well designed website will generally not cause any major problems for color-blind users. It is worth taking extra consideration however, when designing interactive or call-to-action elements. For example; a simple text link, styled red with no other decoration may be impossible to see if it is within a block of grey or black text. No one is suggesting that you need to stick with default link styling, but it is helpful to use more than one type of decoration such as an underline or background-color.

A useful tool for designers can be found at colorfilter.wickline.org which provides several different filters that mimic how different types of color-blind users would perceive a website. Simply type in the URL of a website and select the filter you wish to use - it does take a bit of time to load however so you will have to be patient.

It is also worth taking into account the level of contrast between foreground and background elements of your website. A high level of contrast will benefit everyone, not just those who are visually impaired. The Web Accessibility Guidelines suggest a minimum contrast ratio of 4.5:1 and an ideal ratio of 7:1 for standard sized body text. Obviously the safest option is always black text on a white background or vice versa.

You can check the contrast ratio of multiple elements on a site using Juicy Studio's Color Contrast Analyser Firefox extension. It will analyse each element on the page and provide a report on whether or not it conforms to the WAI's guidelines.

Tip 02: Contextual Links

Those who use screen readers will often have the option to navigate a web page by skipping through the links to find something of interest. In the case of text links, the user would simply hear the word in isolation, regardless of the content that surrounds it. It is therefore extremely unhelpful when all that the user hears is 'click here' or 'more' - these types of links provide no information of where they direct the user or to what they are referring to.

A much better option is to provide a more descriptive link. A link that takes the user to the complete article on a blog could read 'learn more about S.E.O' or 'click here for the full article on S.E.O'.

Tip 03: Alternative Content

One of the core principles of the Web Accessibility Initiative is to make content on the web available to all regardless of any disability they may have. There are a number of techniques, such as the ones discussed in this article, which will help towards the WAI's goal. There will always be some types of content however, that cannot be made accessible to some users, such as audio to those who are deaf. In this scenario, you should always provide alternative content where possible.

Web Content Accessibility Guideline 1.1:
Provide text alternatives for any non-text content so that it can be changed into other forms people need such as large print, Braille, symbols or simpler language.
For example, if you have a video of an interview on your site, you could consider including a transcript of the conversation for users to download or read on the site. Another method is to add captioning to the video - a method that YouTube is experimenting with using speech recognition software.

An even more complete approach is to provide a link to a text-only version of your website. This method will also make your site a lot more accessible to those with slow internet connections such as those still using a dial-up connection or browsing for a mobile device.

Tip 04: Tab Indexes

The Tab Index basically establishes the order of elements that a user will cycle through when using the 'Tab' key. In the majority of cases, if a page design follows a logical order and establishes a strong hierarchy using headings, sub-headings etc. then you need not worry about this too much. It is with the use of forms however that this function is really valuable.

Forms can incorporate many small elements such as checkboxes and radio buttons that can require precise movement and clicks of the mouse. Someone with a motor disability may not have the control needed to perform such precise actions. With a correct Tab Index established a user will be able to cycle through and interact with each form element using simple presses on the keyboard. A Tab Index will also benefit those who do not have access to a mouse and rely solely on the user of a keyboard to navigate a website.

Tip 05: Proper Use of the Alt Attribute

We all know about alt text. It's that text that we need to add to images in order for our site to validate. Everyone uses them right? Actually there are plenty of websites that don't and those that do often use them incorrectly. In fact, there is much debate about the correct use of the alt attribute.

The alt attribute serves three main purposes:

Assistive technologies such as screen readers use alt text and read it aloud to the user.

Alt text is displayed instead of the image when images have been disabled by those with a slow internet connection or those using a text-only browser.

Search engines also use alt text to store information about the page as they cannot read the content of images.

"The truth is that alternative text for images depends on the context in which it is placed"

So essentially alt text is the text equivalent of an image or other media source and it is used when the image cannot be accessed for various reasons. So what information exactly do we use for the alt attribute? Some people place detailed descriptions of the image while others load it up with keywords in an effort to help their search rankings. The truth is that alternative text for images depends on the context in which it is placed.

For example, it is common for a relevant image to accompany a blog post, such as a typewriter for an article about freelance writing. The article itself makes no reference to the image so therefore it is pretty superfluous. Some people may give the alt attribute the value of 'typewriter' or 'image of a typewriter' or perhaps they would give the value of the title of the article. All of these methods are wrong however. Let us see why.

Firstly we need to imagine that we cannot see the image. So if the value of the alt attribute was 'typewriter' we would see the title of the blog post, the word 'typewriter' on its own then the main text of the article - this makes no sense when viewed as text and it would be even more confusing if you were using a screen reader and randomly heard 'typewriter'.

As a general rule, it is best that you do not use phrases such as 'an image of' or 'a picture of' when providing alt attribute values. The alt attribute will only benefit those who cannot see the image for various reasons so therefore telling these users that there is an image there offers no real value other than clearing up some of confusion caused by the above method.

Lastly, giving the alt attribute the value of the title of the blog post would only result in the title being displayed twice as text or repeated twice when using screen readers. Alt text should not repeat any information that is already provided as text, it is simply unnecessary and potentially confusing.

The best option in this scenario is simply to provide a blank alt attribute value. A blank value ensures no potentially confusing or irrelevant information is communicated and there is no detriment to the understanding of the article as the image is not essential to this. Some may argue that since the image is purely aesthetic, then it is not content and therefore does not belong in the HTML and should be displayed using CSS, there are differing views on this however.

As you can see, providing correct alt attribute values can be tricky and very much depends on the situation. The best advice is to asses each scenario individually, deciding on whether the image is required for understanding and use your best judgement.

Tip 06: Access Keys

Like Tab Indexes, Access Keys are a valuable feature for those users who rely on a keyboard to navigate a website. Unfortunately, Access Keys are one of the least used HTML elements, primarily because a lot of people are not aware of them and those who are choose not to implement them despite it being extremely simple.

Access Keys are basically keyboard shortcuts that help a keyboard user navigate to certain sections of a website quickly. Access Keys can be used by holding down a function key (usually Alt on Windows or Ctrl on Macs) and pressing a specific letter or number key that corresponds to a section of the site.

As I mentioned earlier, Access Keys are incredibly simple to implement. All it involves is a simple piece of HTML code added to the navigation anchor tags of your site -

<a href="index.html" accesskey="1">Home</a>

Simple.

A problem with Access Keys is that there is no universal set of assigned keys that users can expect to be utilised and combined with no real standard of informing users of the ones that have actually been used results in Access Keys being pretty ineffective.

The UK government does however have a set of recommended Access Keys to assign, they are as follows:

S - Skip navigation

1 - Home Page

2 - News/Updates

3 - Site Map

4 - Search

5 - Frequently Asked Questions (F.A.Q)

6 - Help

7 - Complaints Procedure

8 - Terms and Conditions

9 - Feedback Form

10 - Access Key Information

Final Thoughts

As you can see, many of the above methods are very easy to implement and only require a basic knowledge of HTML. Making your website more accessible need not be time consuming, require massive modification or be detrimental to the appeal of a website.

I believe it is important for designers as well as developers to be knowledgeable about accessibility and consider it within the various stages of building a website. The earlier in the design process that attention and thought are paid to accessibility, the easier it will be to incorporate these methods and achieve better results.

It is also important to remember that the majority of the methods detailed above will not only help those with disabilities, but will benefit all users of your website. Some of the tips may even improve your rankings with search engines.

We have discussed just a few tips that will make your website more accessible, but if you are really committed, you may want to check out how you can conform to the full list of Web Content Accessibility Guidelines.

# data[].attributes.attachment_link.title
6 Tips for Improving Website Accessibility

# data[].attributes.attachment_link.description
Ideally, accessibility should be considered as part of every web project in order to increase availability to the widest possible audience. In the real world however, it can be easily overlooked. In this article we will look at easy ways that you can improve the accessibility of your site without having to make drastic or time consuming changes.

# data[].attributes.attachment_link.description
An interactive tool to create, share, and apply color palettes to your UI, as well as measure the accessibility level of any color combination.

# data[].attributes.attachment_link.description
Color scheme picker for web designers. See all the web-safe colors on the left. Pick by clicking. See your choices on the right with hex and decimal codes and all text / background combinations. Click on the little 'X's to delete a choice.

# data[].attributes.attachment_link.description
If your web site is actively growing, the proper balance of menus and content pages is a moving target. Feedback from users (and analyzing your own use of the site) can help you decide if your menu scheme has outlived its usefulness or has weak areas.

# data[].attributes.attachment_link.readable_text
Streamlined UI Design and other tools for Product Design Process

Go beyond UI design with 20+ powerups

Streamline your product design process with MockFlow as it provides tools from UI research and all the way to design validation.

Brainstorm anywhere

In slack or MS teams, communicate your ideas visually without leaving the app

# data[].attributes.attachment_link.title
MockFlow - Wireframe Tools, Prototyping Tools, UI Mockups, UX Suite, Remote designing

# data[].attributes.attachment_link.description
MockFlow is an intuitive web app to simplify your product design process. A quick way to create and collaborate on wireframes for web, mobile, and desktop apps.

# data[].attributes.attachment_link.readable_text
In short, they make it easier for search engines to determine what your content is about, and thus are vital for SEO.

Meta tags are placed in the <head> section of a HTML document, and so they need to be coded in your CMS. This can be easier or harder depending on the platform that powers your website: an "out of the box" solution like WordPress will have a dedicated section for meta tags like canonical links or meta descriptions.

However, before we get into the nitty-gritty of which meta tags to add to your site, let's talk about why they're so important.

Why do meta tags matter?

As previously mentioned, meta tags offer more details about your site to search engines and website visitors who encounter your site in the SERP. They can be optimized to highlight the most important elements of your content and make your website stand out in search results.

Search engines increasingly value a good user experience, and that includes making sure that your site satisfies a user's query as best as it possibly can. Meta tags help with this by making sure that the information searchers need to know about your site is displayed upfront in a concise and useful fashion.

Some types of meta tag relate to page structure and will ensure that your site is easy to navigate, while others tell search engines which parts of your page are important and which to overlook.

There are numerous different types of meta tags which fulfill different roles, and not all of them are relevant to SEO. You can find a full list in our complete guide to meta tags.

However, for the purposes of this quick guide, we've picked out the six most important meta tags that you need to know about for search optimization.

Six meta tags to improve the optimization of your site

The title tag is one of the first things that users notice in the SERPs. It's the title of your page that offers a preview of what your content is about.

It's important as it shows up in the search results, but it's also pulled out to show up as anchor text and a title in social shares.

This means that your title tag should be clear, descriptive and usually not more than 55 characters.

If you can include a keyword in these 55 characters, you can enhance your SEO, but what's even more important is to remember to add value. A title that has the right keyword without being clear won't necessarily lead to improved results.

Your title tag is not just for your visitors, but also the search engines that discover your content. Thus, you need to blend clarity with context to ensure that your title makes sense to everyone.

If you're using a plugin like Yoast SEO in WordPress, it becomes easier to add your title tag in the SEO section to see a preview of your page and how it can look at the search results.

Another way to add the title tag is through the site's HTML, which should look something like this example:

: Pay attention to your title tags, be clear and descriptive.

The meta description is of equal importance to the title tag. If the title tag is the title that appears at the top of a search result, the meta description is the snippet that displays underneath.

The meta description should provide an accurate description of the content of your page. It is usually the element that determines whether users will click on your page, which makes it important to spend time on its optimization.

Previously, the optimum length for meta descriptions was 150-165 characters, but a recent update to the way Google displays search results has resulted in longer snippets being shown on occasion. For more on what this means for SEO and how to adapt, have a read of David Portney's comprehensive piece, ' Google's updated SERP snippet length: What should be your SEO strategy now? '.

As with title tags, you can add a meta description via a plugin like Yoast SEO, or code it manually in your website's HTML, as in this example:

: Use your meta description wisely and take advantage of the opportunity to provide more details about your content. Make it appealing, concise and relevant.

The robots meta tag informs search engines which pages on your site should be indexed. This meta tag serves a similar purpose to robots.txt; it is generally used to prevent a search engine from indexing individual pages, while robots.txt will prevent it from indexing a whole site or section of a site.

A robots meta tag which instructs the search engine crawler not to index a page, or follow any links on it, would be written like this:

However, if you want to tell the crawler to index and also follow your page, you would replace the robots tag with this:

The robots meta tag is placed in the <head> section of your page, and the result might look like this:

If you don't add a robots meta tag, the default for crawlers is to index and follow your page.

Why would you need to use this meta tag? It might be that you have some pages on your site which are necessary, but quite thin content-wise. You don't necessarily want them to be indexed in search, but they're still important to the site, so you can use a noindex tag to prevent them from appearing in the SERPs.

Google also requires links to be nofollowed under certain circumstances. For example, in 2016, it issued a directive to bloggers to nofollow any links that they included as part of a product review, as "these links don't come about organically". If you want to nofollow an individual link, you can achieve this by adding rel="nofollow" to the link HTML.

However, if you wanted to simply nofollow all links on a particular page, you can achieve this with the robots meta tag.

: Manage the pages that search engine crawlers access on your site by guiding them through the robots meta tag. Use the robots meta tag to ensure that search crawlers process each page the way you want them to.

Image optimization has become a very important element of modern SEO, as it offers an additional opportunity to rank in the search results, this time with your visual content.

Your images should be accessible to both search engines and people. Alt text can ensure both of these things: it provides a text alternative to images which will be displayed if the image doesn't load, or will be read out by a screenreader; it also tells search engines what that image is meant to represent.

You can include keywords in your image alt text, but only if it makes sense to do so - don't keyword-stuff this tag, as it will only end up harming the user experience for your visitors with accessibility needs.

Takeaway : Use alt text in your images to describe your visual content. This is a great opportunity to improve your SEO while helping both search engines and people to learn more about your images.

If you have pages on your site that are almost identical, then you may need to inform search engines which one to prioritize. Or you might have syndicated content on your site which was republished elsewhere. You can do both of these things without incurring a duplicate content penalty - as long as you use a canonical tag.

Instead of confusing Google and missing your ranking on the SERPs, you are guiding the crawlers as to which URL counts as the "main" one. This places the emphasis on the right URL and prevents the others from cannibalizing your SEO.

A canonical tag can look like this in HTML:

Takeaway : Use canonical tags to avoid having problems with duplicate content that may affect your rankings.

Header tags are part of your content; in short, they are the headings that you use to structure your page.

As well as improving user experience and ease of reading, header tags can also help search engines in understanding what your content is about.

The order of your header tags (from h1 to h6) highlights the importance of each section. A h1 tag typically denotes the page title or article headline, while h2 and below serve as subheadings to break up your content.

As important as header tags are, you shouldn't overuse them - think quality, not quantity. Having five different types of heading on your page won't help your SEO. Instead, use them tactically to break up your content and introduce the main point of each section.

Here's an example of how header tags can be arranged, taken from this article:
<h1>A quick and easy guide to meta tags in SEO</h1>
<p>Paragraph of content</p>

<p>Another paragraph of content</p>
<h2>Why do meta tags matter?<h2>
<p>Paragraph of content</p>
<h2>Six meta tags to improve the optimization of your site<h2> <h3>1. Title tag</h3>
It's usually suggested to use only one h1, while you can use more than one h2 or h3.

Takeaway : Use header tags to help search engines understand your main topic on each page. Use them wisely and find a balance between the reading experience and the SEO value.

How to optimize your meta tags: A checklist

Meta tags can help both search engines and searchers. They can help you improve the user experience and the display of your business information.

This can contribute to an improved authority, an enhanced search presence and thus, a higher ranking.

If you're ready to check your performance with meta tags, here's a quick checklist to start with:

Check whether all your pages and your content have title tags and meta descriptions

Start paying more attention to your headings and how you structure your content

Don't forget to mark up your images with alt text

Use robot meta tags to guide search engines on how they should access your content

Search for duplicate pages, and use canonical tags to avoid cannibalizing your own content with duplicate or similar content

Create a checklist of the steps that you need to repeat when you create new content, and turn meta tags into a part of your routine.

Tereza Litsa is a Writer at Search Engine Watch.

Related reading

# data[].attributes.attachment_link.title
A quick and easy guide to meta tags in SEO

# data[].attributes.attachment_link.description
In short, they make it easier for search engines to determine what your content is about, and thus are vital for SEO.

# data[].attributes.headline
Here's some information about our Parliamentary System

# data[].attributes.subject
Here's some information about our Parliamentary System

# data[].attributes.attachment_link.readable_text
Try it Yourself "

CSS Flexbox Layout Module

Before the Flexbox Layout module, there were four layout modes:

Block, for sections in a webpage

Inline, for text

Table, for two-dimensional table data

Positioned, for explicit position of an element

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

Browser Support

The flexbox properties are supported in all modern browsers.

Flexbox Elements

To start using the Flexbox model, you need to first define a flex container.

The element above represents a flex container (the blue area) with three flex items.

Parent Element (Container)

The flex container becomes flexible by setting the display property to flex:

Example

.flex-container {
display: flex;
}

The flex container properties are:

The flex-direction Property

The flex-direction property defines in which direction the container wants to stack the flex items.

The flex-wrap Property

The flex-wrap property specifies whether the flex items should wrap or not.

The examples below have 12 flex items, to better demonstrate the flex-wrap property.

The flex-flow Property

The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties.

The justify-content Property

The justify-content property is used to align the flex items:

The align-items Property

The align-items property is used to align the flex items.

In these examples we use a 200 pixels high container, to better demonstrate the align-items property.

Example

The baseline value aligns the flex items such as their baselines aligns:

Note: the example uses different font-size to demonstrate that the items gets aligned by the text baseline:

Try it Yourself "

The align-content Property

The align-content property is used to align the flex lines.

In these examples we use a 600 pixels high container, with the flex-wrap property set to wrap, to better demonstrate the align-content property.

Perfect Centering

In the following example we will solve a very common style problem: perfect centering.

SOLUTION: Set both the justify-content and align-items properties to center, and the flex item will be perfectly centered:

Example

Try it Yourself "

Child Elements (Items)

The direct child elements of a flex container automatically becomes flexible (flex) items.

The element above represents four blue flex items inside a grey flex container.

The flex item properties are:

The order Property

The order property specifies the order of the flex items.

The first flex item in the code does not have to appear as the first item in the layout.

The order value must be a number, default value is 0.

The flex-grow Property

The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items.

The value must be a number, default value is 0.

Example

Make the third flex item grow eight times faster than the other flex items:

Try it Yourself "

The flex-shrink Property

The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items.

The value must be a number, default value is 1.

Example

Do not let the third flex item shrink as much as the other flex items:

Try it Yourself "

The flex-basis Property

The flex-basis property specifies the initial length of a flex item.

The flex Property

The flex property is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties.

The align-self Property

The align-self property specifies the alignment for the selected item inside the flexible container.

The align-self property overrides the default alignment set by the container's align-items property.

In these examples we use a 200 pixels high container, to better demonstrate the align-self property:

Responsive Image Gallery using Flexbox

Use flexbox to create a responsive image gallery that varies between four, two or full-width images, depending on screen size:

Try it Yourself "

Responsive Website using Flexbox

Use flexbox to create a responsive website, containing a flexible navigation bar and flexible content:

Try it Yourself "

CSS Flexbox Properties

The following table lists the CSS properties used with flexbox:

# data[].attributes.attachment_link.description
Try it Yourself " Before the Flexbox Layout module, there were four layout modes: Block, for sections in a webpage Inline, for text Table, for two-dimensional table data Positioned, for explicit position of an element The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

# data[].attributes.attachment_link.description
Loads of CSS flexbox examples that you can use as a basis for your own projects.

# data[].attributes.attachment_link.title
A Complete Guide to Flexbox | CSS-Tricks

# data[].attributes.attachment_link.description
Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser suppor…

# data[].attributes.attachment_link.title
Animatable: One property, two values, endless possibilities

# data[].attributes.attachment_link.description
Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

# data[].attributes.attachment_link.readable_text
As you might know already, I'm not a big fan of animations that are added in CSS3. Yet, several people on Twitter told me why they really like the feature. At that point, I wanted to play around with it too.

At the same time, I wanted to see if those animations with CSS3 could be created with jQuery too (especially for those browser that don't support CSS3 animations yet). So today, I present you Five examples of CSS3 animations and their jQuery equivalents.

This tutorial/these examples will show the use of the same HTML, with different classes for CSS3 and jQuery. You can compare both the codes and see which one you like more. Don't forget to check the demo/download the source code to view how everything is working under the hood.

IMPORTANT NOTE:
Sadly, CSS3 and HTML5 aren't the standards (yet) these days (when will it ever be?). Since this demo is using CSS3 animations, not all (modern) browsers will be able to show off the full effects. Because of this, it only works on Apples Safari and Google Chrome as they are the only browsers supporting the CSS3 animations via the -webkit- prefix. So, for now, this is just for fun and learning more about CSS3 and jQuery. The jQuery effects will work on other browsers though.

With that said, check out how you can re-create these and learn some more about CSS3 animations and jQuery.

Video

Here's a small example video showing both the CSS3 and jQuery animations inside the latest version of Safari.

Of course, if you're running Safari or Chrome, you can view all examples yourself.

Fade

For our first effect, we'll do a simple fade. When hovering an element, it fades to a given opacity. Let's see how you can create this effect using both CSS3 and jQuery.

HTML

<img src="images/fadeimg.png" alt="Fade Image" class="css3_fadeimg" />

As you can see, I'm simply using an image which has class applied. As you can imagine, you can apply this class to other elements.

CSS3

@-webkit-keyframes fade {
   0% {
      opacity: 1.0;
   }
   100% {
      opacity: 0.5;
   }
}

.css3_fadeimg:hover {
   -webkit-animation-name: fade;
   -webkit-animation-duration: 1s;
}

With the animation-name and animation-duration, we can set the effect. Using the keyframes (and the name of the effect), we can tell the element how to act. Set the 0% and 100% properties, and the browser will calculate how to animate the effects. Great and easy!

jQuery

The jQuery example is just as elegant as the CSS3 one. Simply apply an hover event to the element and animate it over a given timespan.

Bounce

Now that we know how to create a simple fade, we'll create an example which is a little bit harder: A bounce effect. We'll apply the effect to an image that'll bounce to the right (and back).

HTML

<div class="css3_bounce bounce">
   <img src="images/bounceimg.png" class="bounceimg" />
</div>

As you can see, there is a surrounding container that holds one image. We'll need the container to capture the hover effect, and the image will bounce inside the container.

CSS3

@-webkit-keyframes bounce {
   from {
      margin-left: 0px;
   }
   to {
      margin-left: 250px;
   }
}

.css3_bounce:hover img {
   -webkit-animation-name: bounce;
   -webkit-animation-duration: 1s;
   -webkit-animation-iteration-count : 2; -webkit-animation-direction: alternate; }

Just like with the previous effect, the name and duration are needed in this effect. By setting the iteration-count to 2, it'll only bounce from left to right, to left and stop. Inside the keyframes, we can use the from and to properties too instead of the percentages.

jQuery

With the help of the jQuery Easing Plugin we can recreate this beautiful effect in the exact same way as with CSS3. We'll simply change the marginLeft properties from the CSS (just like with CSS3). That's how you create a bounce!

Pulsate and Colorize

On to the next step, an even more advanced animation. We'll pulsate and colorize a given division. Let's see how to create this effect.

HTML

<div class="css3_pulsate pulsate"></div>

As you can see, just a simply div is what we're going to use for this effect. Check out the other CSS properties (like width, hight and background-color) in the demo/download.

CSS3

I was pretty happy to see that the CSS3 implementation looks very good! By setting a value for each percentage of the animation, we can make it look like a pulsating box. We'll also change the colour of the box.

jQuery

The jQuery equilavent of this effect, isn't as pretty. We'll use the callback to animate each time and make it look like the pulsate. By using the jQuery Color Plugin, we can smoothly animate the background colour. Still, I really prefer the CSS3 animation way on this one.

Link nudge

Let's move on to a more practical example - link nudging. I'm doing it at Marcofolio too - simply hover over the elements in the main menu and you'll see the effect. Let's see how you can create this effect with CSS3 animations too!

HTML

<div class="css3_nudge nudge">
   <ul>
      <li><a href="#" title="Home">Home</a></li>
      <li><a href="#" title="Blog">Blog</a></li>
      <li><a href="#" title="About">About</a></li>
      <li><a href="#" title="Register">Register</a></li>
      <li><a href="#" title="Contact">Contact</a></li>
   </ul>
</div>

Just a simple unordered list with list items that contains anchor tags (links). How simple can it get? On to the nudge effect.

CSS3

.css3_nudge ul li a {
   -webkit-transition-property: color, background-color, padding-left;
   -webkit-transition-duration: 500ms, 500ms, 500ms;
}

.css3_nudge ul li a:hover {
   background-color: #efefef;
   color: #333;
   padding-left: 50px;
}

We're going to animate the anchor tags inside the list. By using the transition-property (shorthand version), we can animate more properties at the same time (given a certain duration). In the :hover state, we'll animate those properties. When the hover stops, it automatically changes back to the original state. Pretty clean and simple code.

jQuery

The jQuery equivalent is just as elegant. By using the jQuery Color Plugin again, we can also colorize the backgroundColor and color properties with a smooth animation. Nice!

Accordion

I have to admit - this is a little cheat by using a different HTML code for this effect. This is also the reason why, by default, the accorion (also on the example page) are different. The CSS3 version hasn't expanded, while the jQuery version does. Let's see why.

HTML - CSS3

<div class="css3_accordion accordion">
<a href="#firstacc" title="Expand">First accordion</a>
   <div id="firstacc"><p>First content</p></div>
   <a href="#secondacc" title="Expand">Second accordion</a>
   <div id="secondacc"><p>Second content</p></div>
   <a href="#thirdacc" title="Expand">Third accordion</a>
   <div id="thirdacc"><p>Third content</p></div>
</div>

As you can see, the anchor links, have the same text as the ID from the hidden divisions. This means, the links will append a # to the URL, making the div with the same ID active for the CSS3 :target property.

CSS3

.css3_accordion div {
  height: 0;
  overflow: hidden;
  -webkit-transition: height 500ms ease; }
.css3_accordion div:target {
  height: 105px;
}

As you can see, once a div is a target, it'll change the height, showing the accordion effect. By default it's hidden ( height: 0 and overflow: hidden, but we'll do a transition to show it. Pretty easy, isn't it?

HTML - jQuery

<div class="jquery_accordion accordion">
   <a href="#" title="Expand">First accordion</a>
   <div><p>First content</p></div>
   <a href="#" title="Expand">Second accordion</a>
   <div><p>Second content</p></div>
   <a href="#" title="Expand">Third accordion</a>
   <div><p>Third content</p></div>
</div>

The HTML for the jQuery version is slightly different. I needed to remove the ID's which were applied to the CSS3 menu. All other things are the same!

jQuery

$( ".jquery_accordion" ).accordion( {header : 'a' } );

The jQuery is, as you can see, really really short. But that only is the case, since I'm using the jQuery UI plugin. But this plugin doesn't allow to close the first tab, which is the reason why it's opened by default.

Conclusion and Download

There we go: 5 different CSS3 animations with their jQuery equivalents. CSS3 animation does have it elegancy in it's own way, but jQuery will have to do for now since that one is only cross-browser usable. The downside from the jQuery versions is that it generates loads of data, since you'll need to download jQuery and the needed plugins.

What do you think of these examples? Do you hope that animations will be added to the CSS standard soon? On do you prefer the jQuery way? Feel free to share your opinion.

Tags: CSS3 animations jquery webdevelopment CSS

Interested in this topic? You might enjoy another article I've written called

# data[].attributes.attachment_link.title
CSS3 animations and their jQuery equivalents

# data[].attributes.attachment_link.description
As you might know already, I'm not a big fan of animations that are added in CSS3. Yet, several people on Twitter told me why they really like the feature. At that point, I wanted to play around with it too.

# data[].attributes.attachment_link.title
CSS3 animations and their jQuery equivalents

# data[].attributes.attachment_link.description
Below, you'll find two columns. The left column shows five kind of CSS3 animations, the right column shows the same kind of animations, but done with jQuery. Hover the elements (or click in the accordion) to activate the animation. Click on the "Gear" icon to view the code behind it.

# data[].attributes.headline
These videos, based on a basic w3schools template, will talk you through making an empty website with multiple pages.

# data[].attributes.subject
These videos, based on a basic w3schools template, will talk you through making an empty website with multiple pages.

# data[].attributes.attachment_link.description
Use these if you want more control over your page. It takes a bit more to get into, but then it's easy to find the parts to personalise. All the videos after this are shown using Notepad++