Responsive Web Design

Create websites that are intuitive, inviting, accessible, and attractive. This course will teach you to design and build fully responsive websites optimized for smartphones, tablets, and laptop/desktop viewing environments.

6 Weeks / 24 Course Hrs
Starting  February 15, 2023
Offered in partnership with your preferred school


Change School
Learning method

Course code: crw

In today's online environment, web designers must create websites that are responsive to provide a positive experience in every viewport. These viewports range from small touch-screen environments to large-screen browsers where users interact using a mouse and keyboard. Modern web design requires building sites that are intuitive, inviting, accessible, and attractive in every possible device and environment.

In this course, you will learn to identify and address every aspect of responsive web design: from scaling elements and adjusting page layout, to adapting color schemes and implementing accessible forms. You will master the use of HTML5 linked to media queries in CSS3 to adapt content to fit your user's viewpoint, and see how jQuery Mobile can help you to mobile sites. This course will teach you to design and build fully responsive websites optimized for smartphones, tablets, and laptop/desktop viewing environments.

What you will learn

  • Learn what a responsive website is, identify the key elements of it, and use a basic testing environment to evaluate websites for responsive design
  • Define images, text, and layout elements using relative units of measurement
  • Learn to create alternative navigation menus for different viewports using media queries in conjunction with HTML lists
  • Create color schemes and fonts that adapt to different viewing environments
  • Design and implement responsive page designs using media queries, semantic tags, and logical operators
  • Learn to use HTML5 tags to create collapsible blocks that hide or show information interactively and display page content differently in different viewports
  • Learn to apply cutting edge solutions including image compression, cache files, and jQuery widgets
  • Design forms that are easy to fill out, attractive, and work well in both mobile and full-screen environments
  • Learn to integrate animated, interactive JavaScript-based content using widgets from the Bootstrap framework
  • Learn to build a web app interface for mobile users and an alternative entry page for laptop and desktop users

How you will benefit

  • Be able to identify and address every aspect of responsive web design
  • Build a website that is intuitive, inviting, accessible, and attractive in every possible device and environment.

How the course is taught

  • Instructor-led or self-paced online course
  • 6 Weeks or 3 Months access
  • 24 course hours

Responsive web design is about building websites that are accessible, functional, inviting, and fit well into the array of environments in which people view websites. In this lesson, you'll take a look at exactly what responsive web design is, why it's necessary, and the basic concepts in building responsive websites. You'll also examine some models of responsive design and see what you can learn from them.

How do you make a photo look good on the large viewport of a laptop and the small screen of a smartphone? How can you know whether your text that's readable on a normal computer screen appears microscopic on a phone screen? If you want to design responsive websites, these questions are central to your work. Luckily, there are answers in the form of relative units of measurement, such as percent, em, and multiples. In this lesson, you'll learn how to apply relative units of measurement to optimize the display of images and text in different viewports and environments.

Navigation menus are the road maps that help users navigate a website. They provide access to the site content and allow designers to lead users to engage with site content. So how can you make menus adapt to different browsing environments? Make them responsive, of course! In this lesson, you'll investigate how menus function differently depending on the browsing environment, and find out how to design responsive menus that adapt to full-screen desktop or laptop environments as well as smartphones and tablets. The key to creating responsive menus is applying CSS3's @media feature, which you'll learn how to do here.

As a web designer, you probably think consciously about the right color schemes and fonts for a project. After all, color schemes and fonts are critical to branding your site and for making your site more engaging and inviting. But do the rules you follow for full-size site design apply to mobile sites as well? Maybe not! This lesson will talk about responsive color schemes and fonts that will ensure visibility and readability in a wide range of viewing environments. You'll learn how to test color schemes for contrast values and explore Google Fonts as a source of downloadable web fonts compatible with mobile devices. No longer will you have to wonder whether visitors can read your site's text on different devices—you'll have tried-and-true solutions to that challenge!

What should a responsive page look like? If you said it should look different in a tablet or smartphone than it does on a laptop, you're onto something! But how can you make pages display optimally in different viewports? In this lesson, you'll explore a basic strategy of applying a 3-2-1 framework with stacked columns. You'll learn how to use media queries, HTML5's semantic elements, and logical operators to build pages that are user-friendly in devices of all sizes.

Mobile screens are tiny. So how can you fit all your website content onto them without making users scroll and pinch too much? In this lesson, you'll learn a simple way to collapse content into expandable blocks for mobile users, but present an alternate page layout for full-sized viewports. You'll use the HTML5 <details> and <summary> tags to make content that users can expand or collapse on a small screen. You'll also use media queries to present the content in full-size viewports in columns rather than the expandable and collapsible blocks that work in mobile devices.

Images and video present real challenges when you're designing responsive websites. Not only will you need to think about how these potentially large files display on small mobile devices, but you'll also need to consider how long users on slow connections will have to wait for multimedia to download. In this lesson, you'll learn an array of strategies for making sure photos aren't slowing down your responsive sites. The lesson will talk about compressing images to reduce file size while maintaining image quality, building a cache file to make photos download more quickly for users on return visits, and managing image downloads with jQuery widgets. You'll also learn what video hosts work best when designing responsive sites.

Wouldn't it be nice if you could create or acquire images for the web that were infinitely scalable, small in size, and showed no degradation in quality no matter what size they were viewed at? In fact, you can! The SVG (Scalable Vector Graphics) format allows images to be displayed at any size without loss of resolution. SVG is not an appropriate format for photos, but is perfect for icons, logos, backgrounds, maps, illustrations—pretty much any artwork other than photos. In this lesson, you will learn to create and embed SVG images, and scale them responsively.

When users visit your website, you often want to collect something from them, be it contact information, a location, or order details. To accomplish any of those things, you need forms. Mobile and laptop/desktop users have very different requirements when it comes to accessible, inviting forms. In this lesson, you'll learn to recognize and appreciate those highly differing needs, and to design forms that are inviting and accessible in any environment. You'll learn how to use HTML5 input types to make forms easier to fill out in mobile environments, and then once again use media queries to customize the look and feel of your form depending on the viewport. The best part is, you can do all of this without any complicated scripting!

You don't need to know any complicated coding languages to build responsive websites. But what if you want to add interactive, animated widgets based on JavaScript? You're in luck! Thanks to the Bootstrap framework, you can add these widgets and customize them within your pages even if you don't know JavaScript. In this lesson, you'll get an understanding of how JavaScript-based frameworks, libraries, and widgets work, and how to implement them on your website. You'll add custom buttons, navigation menus, and a carousel (automated slide show) using Bootstrap widgets—and yes, all of these components are responsive!

A running theme in this course is that providing a truly responsive experience for users involves much more than scaling content to fit different viewports. In the final two lessons of this course, you'll expand your capacity to provide mobile users with an app-like experience. That includes integrating more styling and interactive animation. You'll do that by connecting with a set of widgets and animated elements from the jQuery Mobile framework. You'll also employ media queries to keep the full-sized viewport experience friendly—and best of all, you won't need to work with any complicated programming language to achieve an app-like experience in mobile devices!

What are mobile users looking for in a site's welcome page? Essentially, they want a set of navigation links that look and feel like an app. As previously discussed, native apps (custom-coded for specific operating systems) and web apps look and feel very much the same to users, but web apps are much easier to create. In this lesson, you'll continue to work with the jQuery Mobile framework to build a web app welcome page that can serve as a mobile-friendly entryway into your site. You'll also define and apply a media query so that users coming from laptop- or desktop-sized viewports see a more traditional navigation bar that works well with large screens. As you go, you'll sum up what you've learned by building a home page to show off all the projects you've created in this class!

David Karlins

David Karlins is the bestselling author of more than a dozen books on web design, including "HTML5 for CSS3 for Dummies." His articles have appeared in publications ranging from Macworld to Business Week. He has taught web, graphic, and interactive design at San Francisco State University and in the Extension program at University of California, Berkeley.

Instructor Interaction: The instructor looks forward to interacting with learners in the online moderated discussion area to share their expertise and answer any questions you may have on the course content.


Some experience creating web pages with HTML and CSS is needed before enrolling in this course.


Hardware Requirements:

  • This course can be taken on either a PC or Mac.

Software Requirements:

  • PC: Windows 8 or later.
  • Mac: macOS 10.6 or later.
  • Browser: The latest version of Google Chrome or Mozilla Firefox are preferred. Microsoft Edge and Safari are also compatible.
  • Adobe Acrobat Reader.
  • Software must be installed and fully operational before the course begins.


  • Email capabilities and access to a personal email account.

Instructional Material Requirements:

The instructional materials required for this course are included in enrollment and will be available online.

Instructor-Led: A new session of each course begins each month. Please refer to the session start dates for scheduling.​

Self-Paced: Your course begins immediately after you enroll.​

Instructor-Led: Once a course session starts, two lessons will be released each week for the 6 week duration of your course. You will have access to all previously released lessons until the course ends. You will interact with the instructor through the online discussion area. There are no live sessions or online meetings with the instructor.

Self-Paced: You have 3 months of access to the course. After enrolling, you can learn and complete the course at your own pace, within the allotted access period. You will have the opportunity to interact with other students in the online discussion area.

Instructor-Led: The interactive discussion area for each lesson automatically closes two weeks after each lesson is released, so you're encouraged to complete each lesson within two weeks of its release. However, you will have access to all lessons from the time they are released until the course ends.​

Self-Paced: There is no time limit to complete each lesson, other than completing all lessons within the allotted access period. Discussion areas for each lesson are open for the entire duration of the course.

Instructor-Led: Students enrolled in a six-week online class benefit from a one-time, 10-day extension for each course. No further extensions can be provided beyond these 10 days.​

Self-Paced: Because this course is self-paced, no extensions will be granted after the start of your enrollment.