Learn How to Code Responsive Websites

Next Course Date: TBA
  • Phillip Peet
  • Phillip Peet

Given the rapid advancements in mobile technology and accessibility to the World Wide Web it is safe to say that fixed width websites are now a thing of the past. As a matter of fact, in 2014 mobile Internet browsing officially took over from desktop Internet browsing.

In this six hour workshop you will cover the theory behind designing mobile friendly websites. More specifically you will be shown the key HTML and CSS elements, practices and techniques required to integrate and support scalable design.

Takeaways

  • Considerations when designing for mobile
  • Media queries and viewport detection scripts
  • Retina optimised image techniques
  • Mobile navigation

Agenda

Morning Session
1000-1100: Introduction/Overview
1100-1200: Responsive Design Concepts [Presentation]
1200-1230: HTML/CSS Refresher
1230-1300: Creating a Flexible/Scalable Layout [Activity One]
Afternoon Session
1400-1500: Creating a Flexible/Scalable Layout [Activity Two]
1500-1530: Adding Viewport Detection and Media Queries
1530-1600: Implementing an Accordion Collapsible Mobile Menu
1600-1700: Inserting Images & Content

Enrolment Information

This workshop will be run at General Assembly in Sydney on Saturday 16 April 2016. It is the first day of a three day workshop series which also includes Turn a Photoshop User Interface into a HTML/CSS Responsive Website and Create a Dynamic WordPress Theme from Scratch.

To enrol or for more information please visit the official Learn How to Code Responsive Websites page. Lunch is included in your ticket price.

Prerequisites & Preparation

This is an intermediate level workshop so whilst prior exposure to HTML/CSS code is preferable it is not essential. Before attending this workshop please ensure that you have

  1. Brackets, an open source code editor installed
  2. Preferably Firefox web browser and Firebug extension

Download PDF Outline

Leave a Reply

Your email address will not be published. Required fields are marked *