Code Fitness

In order to maximise the chances that participants can throw away Visio and Omnigraffle and, instead, layout their wireframes in HTML and CSS, it’s necessary that we have an assumed level of basic HTML and CSS as a starting point. If, however, you’re not confident with your basic HTML and CSS skills, then you are able to attend our additional preparation day of ‘Code Fitness’*.

If you’re wondering whether or not you should attend this day, here is an outline of the material we will be covering. If there’s a lot in this list you’re not confident with, you should consider attending this day OR getting yourself up to speed on these concepts prior to attending bootcamp.

If you’re thinking of getting yourself up to speed (or giving yourself a refresher course) we recommend the Opera curriculum Basics of HTML and CSS Basics.

Remember, bootcamp is a self paced learning experience – the more prepared you are in advance, the more you’ll be able to benefit from the amazing trainers we’ll have to guide us through the bootcamp program.

Code Fitness Program

Introduction to HTML

  • What HTML, CSS and Javascript do
  • The basic HTML structure template including <head>, <script>, <link> and <body> tags
  • How to write comments in HTML and CSS
  • Opening and closing tags
  • Indenting code
  • Basic text elements including paragraphs, lists and headings

Navigation

  • Linking to an external site
  • Linking to an internal page in a site
  • Linking to a section on the same page

Images

  • Adding an external image
  • Adding an internal image
  • Using placeholder images

Introduction to CSS

  • Introduction to writing CSS
  • The cascade
  • Specificity
  • Grouping elements
  • Basic browser reset
  • Changing font size and color
  • The font-stack
  • Background colors
  • Difference between a class and an ID
  • Appling styles to nested elements

Getting started with layout

  • divs and spans
  • Difference between block and inline elements
  • Introduction to section, article, header, nav, footer, aside, figure and figcaption
  • Widths, heights and floats
  • The box model
  • Introduction to margin, padding and border.
  • Positions (fixed, relative and absolute)

Interactions

  • Simple hover interactions

Background Images

  • Adding icons next to text
  • Background repeat
  • Background position

Tables

  • Introduction to tables
  • Adding headings, rows and columns
  • Using CSS to zebra stripe tables

Forms

  • Adding fields to a form
  • Adding placeholder text

* yes, yes. We’ll also cover ‘why HTML is not actually code’