Responsive Web Design Fundamentals is a hands-on, code-intensive course on how to build high-performance, responsive websites that look great across multiple screen sizes and devices.
Responsive Web Design Fundamentals
Lesson 1: Setting the Stage
You’ll start by looking at the objectives and structure of the course and what you’ll be learning. Then you’ll begin to explore the technical, conceptual, and design considerations involved with Responsive Web Design. Concepts covered include understanding how mobile web browsing influences our design and development, why design patterns are becoming increasingly important and how to identify challenges when responsively designing for content management systems.
Lesson 2: Basic Mechanics and Leveling Up
In this lesson, you’ll dive into the core concepts of fluid layouts, flexible media, and CSS media queries. You’ll learn strategies for converting a static layout into a flexible layout, how to best use media query breakpoints to make layouts look great, and when to use the right unit of measure for the job (pixels versus percentages versus ems). You’ll also get a chance to learn about new units of measure that are gaining traction on the web and decide whether they make sense for your upcoming projects.
Lesson 3: Typography and Layout
You’ll learn best practices for adding web fonts to your projects. In the typography section, you’ll learn how to effectively use web fonts to improve the readability and aesthetics of your design. In addition you’ll learn the latest methods of how to mitigate the performance hit your users face when loading fonts. In the layout section, you’ll implement enhancements to your design using CSS Columns and Flexbox. You’ll also get a preview of CSS Grid Layout, a new technology with the potential to revolutionize the way we design for the web.
Lesson 4: Navigation Patterns
This lesson focuses on how to determine the appropriate context for responsive navigation and how to tailor your user interface for touch screens as well as for smartphones versus desktop. You’ll take a tour of a number of desktop and mobile navigation patterns and learn the pros and cons of each. Finally, you’ll walk through a detailed tutorial on how to build an “off-canvas” navigation that works well on mobile and translates effectively to desktop screens.
Lesson 5: Advanced Enhancement
Discover how to integrate responsive images into your websites through a series of hands-on exercises using the picture element and other techniques. You’ll acknowledge the past by looking at how to support older browsers with polyfills and look toward the future with a discussion of the potential of Element Queries.
Lesson 6: Performance
- Familiarity with the concepts covered in our Modern Web Design course (or the equivalent).
- Basic understanding of how to use browser developer tools.
- Mac or Windows desktop or laptop
- Permissions to download lesson files from GitHub
- A text editor (We suggest Visual Code Studio, it’s free, and available for Mac, Windows, and Linux)