W3C logo
  • Home
  • Responsive Web Design

Responsive Web Design

banner Responsive Web Design course

The W3C “Responsive Web Design” course leads you step by step through an approach that focuses on HTML and CSS to make your Web site fit in all viewport sizes. These are the fundements you need to understand in the most logic and efficient way what responsive design is about and how to create responsive designs that work.

This course is structured as a logical flow. It starts with general best coding practices, what may be -according to our experience- often also of interest for advanced Web developers.

From there on, you will be working with viewport declarations and media-queries for responsive layout, responsive images, navigation, typography, tables, forms and video. Best practices, accessibility and optimization plays its role on the background of it all.

This course runs for 4 weeks. Each week, a new lecture will be revealed (usually together with an assignment), and you’ll have a chance to interact continuously with the teacher and fellow students about the course’s content via the course’s discussion forum.

Intel XDKDuring this course, you will be able to use, develop, emulate, test-on-device and build responsive Web sites and apps thanks to the Intel® XDK, developed by Intel®, the sponsor of this course. The Intel® XDK is a free, integrated, and front-to-back HTML5 app development environment for true cross-platform apps for multiple app stores, and form factor devices.

Use the Intel® XDK to create HTML5 applications with rich user interfaces and responsive design UIs. Then check the look and feel of your apps with on-screen simulation across a wide variety of devices.

Get the free Intel XDK A free packaging service allows you to create HTML5 and Apache Cordova* apps for Android*, Microsoft Windows*, Apple iOS*, Facebook*, Amazon Kindle*, and other App Stores.  Get started by downloading and installing the Intel® XDK on your Microsoft Windows* 7, 8, Apple OS X* or Linux* development system.

Please check out the sections “Who Should Attend?” and “What do I need?” below to find out about the target audience and pre-requisites for this course.

You will need to spend around 6-8 hours per week on the course. Some weeks are busier than others and may require more time but 7 hours should be the average.

Course Outline

Week 1: Coding for the Web

To give the opportunity for those who need more time on the subject of HTML, CSS and best practices, this material is available right from the moment you registered on the course so that you can make the most of it.

Once you are done with that information, you are ready to move over to the first assignment: “Picking up good habits”

Week 2: Viewport, media queries and responsive layout

We cover a lot of ground this week since we begin with the techniques that allow you 1) to set the viewport and 2) to add different styles for different conditions, followed by what this means for layout.

In the assignment you will be asked to create a responsive layout.

Week 3: Responsive images, navigation and typography

Small images that do well on small mobile viewports will remain unnoticed on wide desktop screens, while large images that are in good balance on a desktop screen won’t fit on small screens. And how to make the menu that does so well on desktop fit on a small screen? And how to find the right font size, line height and length to keep the user reading on different viewport widths?

The assignment continues on your earlier work from last week.

Week 4: Responsive tables, forms and video

Other possible parts of a responsive design are tables, forms and video. Tables will most probably need a certain width – regardless if that width is available. And then there are also forms and video to consider.

We have no practical assignment this week. Instead there’s a quiz, so although we have code and approaches to look at, we’re not asking you to create any of it.

How do I get a certificate of completion and a badge?

The course includes 2 practical tutor-marked assignments (TMAs) and one quiz that all need to be completed satisfactorily if you want to receive a certificate of completion and a badge*.

* What is a badge? A digital badge is an online representation of a skill you’ve earned. Using Mozilla’s Open Badges infrastructure, W3DevCampus issues badges backed by our own seal of approval. Learners can then collect badges from different W3C courses and display them across the Web — on their resumes, Web sites, social networking profiles, job sites and more. Create your backpack and start collecting badges from W3C Training.

Who should attend?

  • Web designers and frontend Web developers ready to update their skills;
  • Beginning to intermediate Web developers with basic Web knowledge who want to learn new skills.

Why Responsive Web Design is worth your time? Because:

  • Any Web site today is used on a big variety of viewport sizes;
  • The mobile first approach is powerful, easy to learn, and quick to write.

What do I need?

Ideally, as well as a desktop or laptop computer, you should have access to:

  • Your favorite text editor (for HTML, CSS and eventually Javascript).
  • Intel® XDK. W3C thanks Intel for their sponsorship, which enables students to participate in this course at no cost.
  • Facilities for putting documents online. You can use any kind of hosting service. You may consider using one of the many free web hosting services available such as x10hosting and Free Web Hosting Area (there are many others to choose from too). These are limited accounts (they’re free!) but they should allow you sufficient flexibility to complete the course. Or you can use the http://jsbin.com Web site,  an online HTML/CSS/JavaScript IDE. You can use this service for publishing most of the assignements you will be asked for in this course.  (Or you may use other online IDEs such as http://jsfiddle.net)

You also need to be familiar with:

  • HTML: just be comfortable putting together an HTML document, assigning IDs and classes, and other such basic tasks.
  • CSS: in this course, basic familiarity with CSS is asked – no need to be an able graphics designer.
  • JavaScript: actually you don’t really need to have JavaScript knowledge, the course mainly focuses on HTML and CSS, and can be done without any JavaScript added to your work if you like. So if you know how to embed some JavaScript code in a Web page you will be fine.

Terms and Conditions

  • W3C will deliver the course in line with the published description for the advertised fee.
  • Payment must be made, in full, at the time of registration.
  • Payment is processed using either a credit card or a PayPal account.
  • Refunds will only be made if the participant withdraws up until the end of the first week of the online course.
  • W3C intends to continue to make the course material available to registered participants for at least 2 months after the course has ended.
  • All material, including that produced by participants, in assignments and correspondence is copyrighted property and cannot be copied, duplicated, posted on another Web site, or otherwise used without the original author’s consent. Conversations and posted messages are private and cannot be copied, duplicated, forwarded, or conveyed to anyone else without the original author’s permission.