Online real-time interactive courses now available! Take advantage of our current special discounts.
Online real-time interactive courses now available! Learn More

Building Responsive Websites

This course will teach you how to combine HTML and CSS to begin building modern, responsive websites. This is where your journey begins: HTML provides the structure for all web pages, and is the essential foundation skill for learning about web design. CSS will be your next step – CSS is all about design: typography, colour, page layouts, responsive design and much more.

You’ll learn how to edit and write your own HTML and CSS code from scratch, but there’s more to building websites than coding; we’ll teach you how to structure and manage a website, upload files to a server, work with different types of web graphics, optimise for search engines and accessibility, add maps and fonts, integrate social networks and much more.

The course is designed as a direct follow-on from our HTML5 Essentials course. You’ll need to have completed that course or have equivalent knowledge.

  • Training Modules (Overview only)

    • Introducing Responsive Design
    • Deeper into CSS: Page Layouts and Menus
    • Multi-Column Design, Fonts and Social Menus
    • Forms, Site Management and Web Hosting
  • What You Get

    • Free Course Resit (9 months)*
    • 12 Months Access to Help Desk
    • No Risk! Money Back Guarantee
    • Choice of Mac or PC
    • Professional Training Environment
    • Small Classes (average 4 to 8)

Select your dates

Price: 990 +GST
$891 +GST
2 Days | 9am - 4:30pm

  • Location
  • Date

Credit Card or Pay later


Need to get approval or a formal quote - Get a Quote

Course Outline

Deeper into CSS: Page Layouts and Menus

In this session, we begin looking at how pages are designed using HTML and CSS, and how to create great looking navigation. We learn how to avoid repetition and use shorthand for faster workflow.

  • HTML5 Semantic Markup
  • Planning a Web Page Layout
  • Using DIV Tags for Page Layouts
  • Using Classes, IDs and Descendant Selectors to Style Specific Elements
  • Using Vertical Margins to Control Spacing
  • Using Background Colours and Images
  • Centering a Layout using Auto Margins
  • Working with Borders
  • Working with Margins and Padding
  • Building Menus using Unordered Lists and CSS
  • Designing Horizontal Menus
  • Creating a ‘Button’ Style using Background Colour, Hover Effects and Transitions

Introducing Responsive Design

In this session, we introduce responsive design techniques. We take a first look at CSS Media Queries, and learn about breakpoints and how to use them.

  • What can be done with Responsive Design?
  • About Mobile-First Design
  • Introducing Media Queries
  • Choosing Breakpoints
  • Allowing the Page to Adapt to the Browser Width
  • Setting a Maximum Page Width
  • Allowing Images to Scale Proportionally
  • Meta Rags for Responsive Scaling

Multi-Column Design, Fonts and Social Menus

In this session we’ll learn how to create more complex layouts, work with basic multi-column layouts, and how to incorporate downloadable webfonts.

  • Creating Side-by-Side Columns using Floats
  • The CSS Box Model – Calculating Padding, Borders and Margins
  • Clearing Floats – Using the Clearfix Solution
  • Using Google Fonts – How Downloadable Fonts work and How to Optimise for File Size
  • Creating a Social Menu
  • Vertical and Horizontal Menus

Forms, Site Management and Web Hosting

In the final session, we’ll learn all about contact forms and finally, site management. We’ll see how web servers work, and how to upload/download files to and from a server. We’ll look at how to purchase your own web hosting, and how websites can be maintained and edited by developers and their clients.

  • Forms – Building a Form in HTML, Validating Fields, Using HTML5 Form Elements, about Form Processors
  • Styling Forms – Tips and Tricks for Great Looking Forms
  • Adding Metadata to your Pages
  • About Domain Names
  • About Web Hosting
  • How to use FTP to Upload your Website
  • Solutions for Allowing Clients to Edit their Own Content