Responsive Web Design
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.
During this course, you will 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.
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.
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.
Week 1: Coding for the WebTo 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 layoutWe 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 typographySmall 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 videoOther 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.
- 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:
- Intel® XDK. W3C thanks Intel for their sponsorship, which enables students to participate in this course at no cost.
- 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.
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.