Advanced CSS

Advanced CSS

Advanced CSS

Title: Advanced CSS
Location: MadLab
Date: 24-05-2014
Start Time: 10:00
End Time: 17:00
Booking: Grab a spot here, or drop us an email at

About the course

Modern browsers offer possibilities that were science fiction 5 years ago: designs that automatically adapt to screens from mobile-size to ultra-widescreen, simple declarative animation, advanced effects and eyecandy.

This course picks up where the introductory course leaves off, enriching your site with new possibilities including flexbox and other nu-school layout features, CSS sprites, responsive web design, CSS3 transitions, transforms and animation, and more.

You will receive an electronic copy of the teaching materials, as well as free web hosting courtesy of MadLab to test and refine your site. Lunch and refreshments are provided.

Who is the course for?

This course is for budding designers and developers who are comfortable with the basic techniques and syntax of CSS, and want to go to the new level. You don’t need to be Eric Meyer, but if you know who he is, that’s a pretty good start. If you are new to CSS, you should attend our Beginning CSS course first.

Learning outcomes

    After completing the class, you will have learned:

  • The ability to use CSS bling features such as gradients and drop shadows to achieve complex style effects.
  • Knowledge of nu-school CSS layout features such as Flexbox and familiarity with declarative animations with CSS, including transforms, transitions and animation.
  • Responsive web design skills, including CSS3 media queries, fluid layouts, view port, and sensible approach to responsive images.
  • The ability to create graceful fallbacks for non-supporting browsers and progressively enhance those that support cutting edge features.


Equipment required

A laptop (Mac, Windows or Linux) with:

  1. A decent text editor. We recommend:
    • Windows: Notepad++ (free), EditPad Lite (free)
    • Mac: Text Wrangler (free), Sublime Text (free), Coda (££)
    • Linux: Bluefish, KompoZer (all free, of course)
  2. A simple graphics package. We recommend:
    • Windows: IrfanView (free), GIMP (free), Photoshop (£££)
    • Mac: GIMP (free), Pixelmator(£), Photoshop (£££)
    • Linux: GIMP (free), ImageMagick (free)
  3. An up to date web browser. We recommend Firefox, Opera or Chrome, but Internet Explorer and Safari are fine.
  4. An FTP program (to upload your files up to the web). We recommend:
    • Windows: Filezilla (free)
    • Mac: Cyberduck (free)
    • Linux: Filezilla (free)


Your tutor: Chris Mills

Chris Mills is a Senior Tech Writer at Mozilla, where he writes docs and demos about open web apps, Firefox OS and related subjects. He loves tinkering around with HTML, CSS, JavaScript and other web technologies, and gives occasional tech talks at conferences and universities.

Chris used to work for Opera and W3C and currently enjoys playing heavy metal drums and drinking good beer. He lives near Manchester, UK, with his good lady and three beautiful children.