Training Courses

HTML : Responsive Website Design

  6 reviews

Two Day Course

Overview

According to comscore 60% of web users now view websites with a mobile or tablet rather than on laptops or desktops. Google search now downgrades page rank for websites that do not meet it's requirements of “mobile friendly”. As mobile devices come in many different forms so web designers and developers must now create sites that work across a wide range of devices.

This two day practical hands-on course will introduce you to the ideas and concepts of responsive web design (RWD). It will show you how to use the latest ideas in HTML5, CSS, and JavaScript to make your website responsive so that it adapts to the devises that your audience uses.

By the end of this course you will be able to convert and existing website from fixed to responsive or create a new responsive website from scratch.

You will need to have attended an Introduction to HTML AND the Introduction to CSS courses at Media Training or have an equivalent working knowledge.

Public Course Dates & Pricing

Course DatesLocationPriceStatus
SOLD  OUT SOLD  OUT

  • Public Courses

    Small class sizes so you get the maximum amount of trainer time possible. You attend with delegates from other companies.

    A great, cost efficient way to learn, discounts are also available for group bookings.

     

    Discount Info
  • Private Courses

    One to one tuition or a private group with just your colleagues. Your choice of duration, content and location. We can train at one of our centres or onsite with you wherever you are located.

    We offer a free consultation service to help work out every detail and build the perfect course for you.

    From £499 + VAT

    Free Consultation

Course Outline

  • Day One

    Designing for desktop, mobile and tablet
    • Responsive web design vs mobile design
    • Understanding different platforms and mobile browsers
    • About Screen resolutions
    • The role of HTML, CSS and Javascript in Responsive design
    • Planning a responsive site

    HTML5 and CSS3
    • Upgrading from HTML4 to HTML5
    • The semantic HTML5 elements
    • Review of current CSS skills
    • About CSS3
    • CSS Vendor prefixes

    Supporting older browsers
    • Using browser developer tools
    • Online testing resources
    • Using browser add-ons and extensions
    • Physical device testing

    Testing tools for responsive design
    • Upgrading from HTML4 to HTML5
    • The semantic HTML5 elements
    • Review of current CSS skills
    • About CSS3
    • CSS Vendor prefixes

    Building responsive type
    • Different strategies for sizing type
    • Working with fluid responsive type
    • Using web fonts from font libraries
    • Serving your own fonts
    • Rotating text with CSS transform
    • Adding shadows and effects to type

    Responsive assets
    • Making images liquid
    • Adding audio and video with HTML5
    • Adding cover images for video
    • Making video liquid
    • Autoplaying background video
    • Scalable buttons
  • Day Two

    Converting layout to a fluid grid
    • Mobile or desktop first
    • Planning a fluid grid
    • Converting from fixed to liquid layout
    • Conversion calculations for containers
    • Converting spaces to liquidity
    • Unit measures for responsive design – px, em, rem, %

    Understanding CSS media queries
    • What is a media query
    • Setting up media queries
    • What we can test for
    • Defining breakpoints for your page
    • Changing typography based on screen size
    • Changing layout based on screen size
    • Showing and hiding page elements
    • Implementing the viewport meta tag

    Strategies for responsive images
    • When to use images and when not to
    • Picking the best image formats
    • Serving different images to different devices
    • How to deal with retina displays

    Building responsive navigation
    • Forming navigation with HTML
    • Styling nav bars and buttons]
    • Making a drop navigation
    • Using a form control for navigation
    • Switching navigation layout with a media query
    • Making a toggle button based navigation

    Questions and Answers
Experience + Flexibility

We know training inside out. We can advise you on all the options to make sure you get the best possible course.

Tell us you need to cancel 5 working days before your course and there’s no charge. Great for your peace of mind.

Our trainers bring their years of industry experience into the classroom. You'll leave confident and prepared.

The smallest class size in the industry. More one on one time with the trainer and a less intimidating group size.

Tell us which you use and it'll be booted up and waiting with the latest software when you arrive.

We provide a lovely onsite lunch so you can relax. We can cater for any dietary requirement with no fuss.

Comfort + Location
Reputation + Feedback

Our Clients


We've worked very hard over the last 20 years to grow our business through personal recommendations.

When you attend a course we ask you to tell us how it went. We use your feedback to help us improve our courses.

We publish all our customer satisfaction stats live on our site (good or bad) because we want everyone to know just how highly you rate us every day, every week and every year.

We know that choosing the best course can be difficult, maybe the thoughts of the 5996 other clients we've asked will give you the inspiration to join us too.

The most recent comments from attendees of our courses are shown below. We reckon they will give you a pretty good indication of how they think we perform.

  Client Ratings

Attendees surveyed5996
  Trainer Knowledge9.8 / 10
  Trainer Materials9.6 / 10
  Trainer Preparation9.8 / 10
  Overall Trainer Score9.7 / 10
  Centre Lunch9.6 / 10
  Centre Staff9.9 / 10
  Overall Centre Score9.7 / 10
  Overall Experience9.6 / 10
  % Who Would Recommend Us99.7%

  Recent Feedback




"Simon was a polite and well mannered instructor. He was able to answer any queries and any questions I had. He was very friendly and an enjoyable teacher. I was very happy with the coverage of all aspects to be able to implement into day to day activities. I would happily be taught by Simon again as his teaching methods are thorough and efficient. "



"Great trainer, food and environment. "



"The course was well delivered! It was very enjoyable going over all the various little CSS tricks. Also, biscuits. Yay for biscuits."