W3C logo

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 5 weeks total. 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. The last week includes a quiz, a feedback form and the link to your certificate of completion and badge!

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

To give the opportunity for those who need more time on the subject of HTML, CSS and best practices, the first part of the 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 1: Viewport, media queries and responsive layout

We cover a lot of ground this week since we begin with the techniques that allow you to 1) set the viewport and 2) 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 2: Flexbox and grid layout

You will extend your responsive layout with the options of flexbox and grid layout.

Week 3: Responsive images 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 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 week 1 and week 2.

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.

You will continue with the assignment and add a responsive table, form and video.

Week 5: Optimization and quiz

This week we will look at techniques for minimizing network load and processor time, and thereby maximizing battery life.
You will optimize your assignment with the techniques that you learn this week. We will end the course with a quiz.

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).
  • 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.

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.