Training Courses

HTML : Responsive Website Design

  15 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

Weekday SOLD  OUT SOLD  OUT
Weekday
Weekday
Weekday
Weekday
Weekday
Weekday
Weekday
Weekday
Weekday
  • 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 11863 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 surveyed11863
  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




"Relevant useful and friendly course delivery. Creating a good environment to deliver the training, Very good food and coffee. "



"Nice location and generally a nice happy feel around the place, great staff make you feel welcome."



"The atmosphere, the team and the environment were just great"



"The training and venue were all great, especially the food, keep up the good work!"



"Friendly environment and welcoming staff."



"Time flew, so the course was engaging and the environment was superb."



"A very informative course in a short amount of time. Friendly staff and Iwan was a great tutor."



"Iwan was amazing! I was the only one on the course and Iwan made everything really easy to understand and used real life examples that would be relevant to my line of work. Iwan made the course fun and interesting and the practical work really helped me to understand everything. Thank you so much Iwan! "



"Venue was great, easy to get to and fitted out really well. Trainer was really friendly and helpful, great to work with. Refreshment were spot on!"



"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."