Code


This is a collection of resources, best practices and other stuff about HTML, CSS and JS.

§HTML

HTML5 Tags

These are the HTML5 tags I think are most frequently used. A complete list of elements can be found at:

Mozilla's HTML element reference

<header>Defines the header of the page or section. Often contains the logo, the title or the navigation.
<footer>Defines the footer of a page or section.
<nav>A section with navigation links.
<article>Represents content, which is intended to be used independently. Each <article> should be identified (using a heading).
<section>Represents a generic section of a document. Each <section> should be identified (using a heading).
<aside>Respresents content, which is not necessary to understand the rest of the content.
<main>Defines the main content of the page. It must be unique for this page and can be used only once per page.
<figure>An image, a diagram or a code snippet, many times with a <figcaption>. It's position is independent of the main flow.
<svg>Defines included vector graphics.

Tutorials

Here are some great beginner level tutorials to get started with HTML:

Getting to know HTML

HTML - Learning the Web

Dive Into HTML5

§CSS

Selectors

The following list shows some very useful CSS selectors. An extensive list can be found here:

CSS Selectors

x + yThe adjacent selector will select only the element that is immediately prededed by the former element.
x ~ yThis symbol targets every following sibling of an element.
x[attr]The attribute selector targets every element having a specific attribute.
x:not(selector)The negation pseudo class selects every element except for the one specified.
x:nth-child(n)This selector is used to target specific elements in a stack.

Tutorials

Codrops CSS Reference

This is a great CSS Reference, including all properties, pseudo-classes and functions.

Getting to know CSS

A tutorial explaining the basic principles of CSS.

CSS - Learning the Web

A great CSS explanation resource and reference by Mozilla.

CSS Animation

An article about CSS animation for beginners.

A Visual Guide to CSS3 Flexbox Properties

This is an in-depth article about CSS flexbox.

Using Flexbox Today

This article shows what CSS flexbox can be used for.

§JavaScript

Libraries

jQuery

A quick and easy way of event handling and manipulating the DOM.

Bounce.js

Bounce.js lets you create beautiful CSS3 powered animations.

Floatlabels.js

This library will improve the User Experience of your form input fields.

Dynamics.js

Dynamics.js is another great animation library.

Pace.js

Pace.js lets you create automatic page load progress bars.

Tutorials

JavaScript The Right Way

This is a guide to learn about JavaScript's best practices and a collection of articles and tricks from top developers.

A re-introduction to JavaScript

This is an introduction to JavaScript by Mozilla.

Tutorialspoint

Another JavaScript tutorial, very clearly structured.

JavaScript Design Patterns

This is a book by Addi Osmani targeted at professional developers.

Top