Training Courses

HTML : Responsive Website Design

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

  • 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 £545 + 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
Value + Choice
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 4960 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 surveyed4960
  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.7 / 10
  % Who Would Recommend Us99.7%

"Efficiently run, good style of teaching and good pace. Felt I could ask questions if needed. "

"Knowledge sharing and explaining - excellent. Thank you"

"Very knowledgeable tutor/company with what seems like loads of experience, nice vibe in the office, GREAT lunch for both days and a great tutor that was very good at explaining things when you got it wrong and congratulating you when you got it right. Would come back again to do different courses etc when I need to in the future"

"Teaching the relevant information in relation to the course in good time and being able to relay the information so it is remembered. Great environment, staff and software."

"Great trainer, food and environment. "

"Tutor explained everything in very detail and that makes my not afraid to ask questions."

"Very informative and a very steep learning curve. Very well taught"

"Great location, great little office, everyone is super nice. It's not an intimidating environment at all, which is great when you're here to learn something new."

"well structured journey through the training days"

"Tutor described every points as detail as possible and willing to answer every single questions."

"I really enjoyed the course and I learned what I expected to. Would definitely return to further my education on this."

"I've completely understood the course. I'm leaving with so much to work on but definitely have the right foundations now. Iwan has explained it perfectly."

"Trainer was excellent, great pace, plenty of time for questions and felt comfortable asking questions. Good examples and time for us to put knowledge into practice. Really great! "

"Brillianrt course, learnt a lot and like the idea that I can take the files home with me. Staff and trainers are also very friendly and food options were great. "

"Well paced. Lots of information that was clearly explained and demonstrated. Took the time to tailor information to my specific work needs (i.e. coding differences between email and web)"

"The staff were all very friendly and the trainer, Simon was very good at explaining everything in a very understandable manner. "

"Trainer's enthusiasm, knowledge and patience were outstanding. Course was easy to follow, well balanced, targeted towards individual's objective sheets and audience aware. As with previous course I attended, the overall service was completely faultless. Will hopefully be planning my next course soon!"

"Providing supporting notes and additional materials. Responding to the specific learning goals I'd set."

"As said previously, it was superb! I think you offer a great range of courses and the teachers are brilliant. I could not have had more help or been guided through the course easier and think it is amazing how well you teach in order to get us to learn so much in a couple of days. I will be coming back for more courses no doubt!!!! "

"Really good at starting with the basics and going at a good pace. I liked that a topic was explained and then we could put it into practice at the computer. Also the lunch was amazing! "

"Communicating! Everything was clearly signposted and set out in a straight forward manner. Everyone has been welcoming and the venue is very comfortable. I'd highly recommend the course, the Iwan (our trainer) and Media Training Ltd. "

"the whole course was great."

"Fantastic Course, loved the small class sizes and the environment. "

"Very good at communication, gained a good understanding easily. Good knowledge . "

"The overall atmosphere was great, trainer was great also and i've gained a lot from the course."

"Patient and flexible approach to learning. Helped put learned concepts into a day-to-day context"

"Tutor was very knowledgable, helped and solved all of our queries. "

"Making something that was very complicated easy to understand and ensuring that everyone had the foundations to allow us to progress with HTML and CSS i.e. ensuring the fundamentals were there and reminding us of those fundamentals throughout the course."

"Really good at breaking down the context and why we were doing things which is what will help make it stick."

"Knowledge and expertise. Extremely friendly and welcoming. Great location and facilities. Thank you."

"Everything - my fourth time at Media Training and I have a great experience each time I visit. "

"Food was lovely every day and plenty of it! Friendly tutors and very helpful, feel like I learnt a lot! Will be looking at some of your other courses and will be back very soon hopefully! "

"All staff made me feel welcome. Dele enthused with his knowledge and delivery such that I am looking forward to getting back to work and having a go."

"Very friendly environment, interesting course with examples"

"Trainer was excellent and always a pleasure to come here"

"Very clear explaining of what needs to be done. Course was very engaging with interesting facts. Went at a good pace that was easy to follow. Good that there are only 3 people in the group, got a good amount of support. Location was convenient. Set up was good. Good amount of breaks"

"Trainor was very good and knew how to adjust his lessons to fit individual classes. Food was great. I like the style of the training, ie, you hold several training courses at the same time in different small rooms. Fee was reasonable, given the quality of the training. I really enjoyed this training and it more than lived up to my expectations."

"Lunch was great, the training rooms were great and Iwan was great. Good location and really enjoyed the training here. Iwan was very encouraging and I learnt such a lot"

"The trainer for the course used excellent analogies and it was very easy to understand. Will definitely be using this knowledge in my job role. "

"Very clear and easy to follow! It is a nice small class and you get great support if you get lost or don't follow. "

"Ivan was great at explaining the concepts and incredibly patient. He was a joy to learn with. He covered quite a lot in a short span of time but it didnt feel rushed which was great."

"Keeping things clear and easy to understand, without being condescending. I have taken html courses before but this one made more sense to me."

"Beside the amazing course lead by Ivan, the lunch was awesome!"

"I liked when we were given tasks and the teacher would walk around and help us if needed. This reinforced where we were perhaps going wrong and could be rectified quickly. I enjoyed the mix of being taught and having the small tasks to do independently."

"- Great examples -Trainer's explanation was very clear and easy to understand -Software super easy to use and available for free to use after course -Staff very helpful, friendly and welcoming"

"Everyone was really friendly and made me feel really comfortable. The course was really hands on, and feel I've taken a lot away... and the small class size was good. "

"Small classes meant more effective and relevant learning"

"perfect timing with breaks good intensity of theory and practise amazing atmosphere, very friendly"

"Friendly staff, experienced teacher, small group size, nice atmosphere"

"I would just like to say how impressed I was with every aspect of this course. I didn't expect to get as much from the two days as I did. Simon was an excellent tutor who delivered the course at a suitable pace & allowed us sufficient time to practice. The centre, it's facilities and staff were also of a very high standard. I would certainly recommend this course to others and hope to return in future. Thank you "