Building Websites

HTML

Using progressive HTML5 techniques can not only save you time developing, but also can enrich performance. For example, rather than writing a long chunk of code to validate a form input, use the new HTML5 form elements which automatically validate (input="email"). Of the many HTML5 features the most important are:

Semantics

Better Forms

  • autofocus
  • placeholder text
  • new input types (email, date-picker, etc.)
  • required fields
  • automatic validation (may some day replace client side validation)

Canvas element

Audio/Video Support

There are several commonly associated but technically separate/experimental features with individual specifications:

HTML DOM Objects - Methods and Properties

Some commonly used HTML DOM methods:

  • getElementById(id) - get the node (element) with a specified id
  • appendChild(node) - insert a new child node (element)
  • removeChild(node) - remove a child node (element)

Some commonly used HTML DOM properties:

  • innerHTML - the text value of a node (element)
  • parentNode - the parent node of a node (element)
  • childNodes - the child nodes of a node (element)
  • attributes - the attributes nodes of a node (element)

Some commonly used HTML DOM events

  • onclick
  • onresize
  • onload
  • onblur
  • onfocus
  • onscroll

CSS

Pre-processors: SASS v. LESS v. Stylus v. Compass

I personally prefer compass which is built on SASS because it is an excellent tool, with a great community. That being said there are many great options available.

Box Model

Box Model

Precision is the key when aligning content with CSS. A deep understanding of the properties related to the box model and display is crucial for creating responsive designs and finely tuned layouts.

  • overflow
  • clearfix
  • display
    • inline (default): The element is displayed as an inline-level element (e.g. span)
    • block: element is displayed as a block-level element with width &height (e.g. div, p)
    • inline-block

flexbox

object-fill

Padding

padding:25px 50px 75px 100px;
  • top padding is 25px
  • right padding is 50px
  • bottom padding is 75px
  • left padding is 100px

Background

body {background:#ffffff url('img_tree.png') no-repeat right top;}
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Also important:

  • background-size
  • background-origin

Borders

  • border-radius
  • box-shadow
  • border-image

Typography

Typography is quickly becoming the calling card of good web design. No longer limited to a small collection of "web-safe" fonts. With the introduction of the @font-face rule and the text-shadow to CSS3 the possibilities are getting very exciting.

Font Shorthand Typography

2D/3D Transformations

Animations

Transitions

Multiple Column Layout

User Interface

Selectors

Understanding CSS selectors is the most critical concept to grasp if you are going to become a guru of front end design. A detailed understanding of every CSS property is useless if you don't understand how to apply them to what you want. Here [source 6] is a guide to complex selectors, and most of the recommended books have great chapters on the subject.

  • child selectors:
    • descendant selector ( div p)
    • direct child selector (div > p) selects only those directly within the parent
  • sibling selectors (div ~ p) selects the specified elements that shares a parent and follows
  • adjacent sibling selector (div +p)
  • attribute selector (a[target], a[href="http://drake.fm"])
  • pseudo classes (a:visited, a:focus, li:first-child, :nth-child)

Selector Specificity

I would suggest following the link for a more detailed explanation of specificity. In a nutshell, different selectors have different specificity values. As a result, those CSS rules with the highest specificity value will override those with lower values. It is calculated as such:

Specificity

Javascript

Javascript is the predicate of the sentence and needs to be discussed in depth. I am drafting this overview.
Javascript

High Performance Websites

Building a high performance website is a remarkably challenging feat, but there are very clear steps to follow to maximize the performance of your site or app. How you build your structure and build your applications matters immensely in regards to performance. A major consideration: running scripts blocks parallel downloads, which can slow down your site download times.

Basic Rule: the most basic technologies (HTML/CSS) should be used in lieu of writing complicated scripts or using javascript plugins whenever possible.

  • Understand the critical rendering path
  • Make fewer HTTP requests
  • Use a CDN
  • Add an Expires header
  • Gzip components
  • Put stylesheets at the top
  • Move scripts to the bottom
  • Caching
  • CSS image sprites
  • Avoid CSS expressions
  • Make JS and CSS external
  • Reduce DNS lookups
  • Minify JS
  • Avoid redirects
  • Remove duplicate scripts
  • Configure ETags
  • Make AJAX cacheable

Reference

  • High Performance Web Sites - Steve Souders
  • CSS The Definite Guide - Eric A Meyer
  • CSS Pocket Reference - Eric A Meyer
  • Responsive Design - Ethan Marcotte

For Absolute Beginners

Standards & Specifications

Medium CSS Styleguide

Very thorough and described in detail.

Github CSS Styleguide

Written By: Cameron Drake

Tagged: