Courses Courses Arts and Design Arts and Design Animation Graphic Arts Photography Web Design Other Business Business Accounting Administrative Communication Finance Marketing and Sales Operations Project Management Small Business Soft Skills Career Online High School Career Online High School Online High School Diploma Computer Applications Computer Applications AutoCAD Microsoft QuickBooks Windows Other Computer Programming Computer Programming Programming Classes Construction and Trades Construction and Trades Construction Environmental and Energy Trades Health and Fitness Health and Fitness Alternative Medicine Dental Fitness Medical Veterinary Wellness Hospitality Hospitality Hospitality Service Information Technology Information Technology Cloud Computing Networking Other Security Language Language Languages Legal Legal Legal Studies Math and Science Math and Science Mathematics and Science Teacher Professional Development Teacher Professional Development Child Development Classroom Technology Math and Science Reading and Writing Other Test Prep Test Prep Exam Prep Writing Writing Writing and Editing How It Works How It Works About ed2go Externship Programs Financial Assistance Find a School Military Virtual Career Center
Courses
Arts and Design
Animation
Graphic Arts
Photography
Web Design
Other
Business
Accounting
Administrative
Communication
Finance
Marketing and Sales
Operations
Project Management
Small Business
Soft Skills
Career Online High School
Online High School Diploma
Computer Applications
AutoCAD
Microsoft
QuickBooks
Windows
Other
Computer Programming
Programming Classes
Construction and Trades
Construction
Environmental and Energy
Trades
Health and Fitness
Alternative Medicine
Dental
Fitness
Medical
Veterinary
Wellness
Hospitality
Hospitality Service
Information Technology
Cloud Computing
Networking
Other
Security
Language
Languages
Legal
Legal Studies
Math and Science
Mathematics and Science
Teacher Professional Development
Child Development
Classroom Technology
Math and Science
Reading and Writing
Other
Test Prep
Exam Prep
Writing
Writing and Editing
How It Works
About ed2go Externship Programs Financial Assistance Find a School Military Virtual Career Center
ed2go Computer Programming Programming Classes Responsive Web Design
Return to Programming Classes
responsive-web-design

Responsive Web Design

In today’s online environment, Web designers must create websites that are responsive to provide a positive experience in every viewport---from small touch-screen environments to large-screen browsers where users interact using a mouse or pointing device. 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.

6 Weeks / 24 Course Hrs
Starting November 8, 2017

Offered in Partnership with your Preferred School

Anne Arundel Community College Why this school? It's been chosen based on your location or if you've visited this school's website.

Change School

Learning Method

Instructor-led Confirm your Start Date in Cart

Responsive Web Design

Learning Method

Instructor-led Confirm your Start Date in Cart

Responsive Web Design Reviews

Responsive Web Design Details + Objective

Course Code: crw

You Will Learn
  • Learn what a responsive Web site 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 crate 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 the course is taught
  • Instructor-led course
  • 6 weeks in duration
  • Courses begin each month
  • 2 lessons released each week
  • 24 course hours
How you will benefit
  • Be able to identify and address every aspect of responsive Web design
  • Build a Web site that is intuitive, inviting, accessible, and attractive in every possible device and environment.
Responsive Web Design Outline
Expand All
Week 1

In this first lesson, you will take a look at exactly what responsive Web design is, why it is necessary, and the basic concepts in building responsive websites. You will examine some models of responsive design and see what you can learn from them. Then you will learn how to apply relative units of measurement to optimize the display of images and text in different viewports and environments.

Week 2

In this lesson, you will investigate how menus function differently depending on the browsing environment, and you will find out how to design responsive menus that adapt to full-screen desktop or laptop environments as well as smartphones and tablets. You will learn to apply CSS3’s media feature. Then you will discover responsive color schemes and fonts that will ensure visibility and readability in a wide range of viewing environments. You will also learn how to test color schemes for contrast value, and you will explore Google Fonts as a source of downloadable Web fonts compatible with mobile devices.

Week 3

Explore a basic strategy of applying a 3-2-1 framework with stacked columns. You will learn how to use media queried, HTML5’s semantic elements, and logical operators to build pages that are user-friendly in devices of all sizes. Then you will learn a simple way to collapse content into expandable blocks for mobile users, but present an alternate page layout for full-sized viewports. You will use the HTML5 <details> and <summary> tags to make content that users can expand or collapse on a small screen. You will 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.

Week 4

This lesson will show you an array of strategies for making sure photos aren’t slowing down your responsive sites. You will learn to compress images to reduce file size while maintaining image quality, build a cache file to make photos download more quickly for users on return visits, and manage image downloads with jQueary widgets. You will also learn what video hosts work best when designing responsive sites. Then you will learn to create and embed SVG (Scalable Vector Graphics) images, and scale them responsively.

Week 5

Learn design forms that are inviting and accessible in any environment. You will discover how to use HTML5 input types to make forms easier to fill out in mobile environments, and you will use media queries to customize the look and feel of your form depending on the viewport. Then you will begin to understand how JavaScript-based framework, libraries, and widgets work, and how to implement them in your website. You will add custom buttons, navigation menus, and a carousel (automated slide show) using Bootstrap widgets, which are all responsive components.

Week 6

In this final lesson, you will expand your capacity to provide mobile users with an app-like experience. This means you will integrate more styling and interactive animation. You will do this by connecting with a set of widgets and animated elements from the jQuery Mobile framework. You will employ media queries to keep the full-sized viewport experience friendly. Then you will 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 will learn to 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. You will build a home page to show off all the projects you have created in this class.

View All Sections
Responsive Web Design Instructors
David Karlins

David Karlins is the author of more than a dozen books on Web design that have sold over a million copies worldwide, 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's Multimedia Studies Program and the University of California, Berkeley, Extension division. His Web design and consulting clients have ranged from Hewlett Packard to the Himalayan Fair.

Responsive Web Design Requirements / Prerequisites

There are no prerequisites for this course.

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

Responsive Web Design Frequently Asked Questions
Expand All
When can I get started?

A new session of each course opens each month, allowing you to enroll whenever your busy schedule permits!

How does it work?

Once a session starts, two lessons will be released each week, for the six-week duration of your course. You will have access to all previously released lessons until the course ends.

How long do I have to complete each lesson?

Keep in mind that the interactive discussion area for each lesson automatically closes 2 weeks after each lesson is released, so you’re encouraged to complete each lesson within two weeks of its release.

What if I need an extension?

The Final Exam will be released on the same day as the last lesson. Once the Final Exam has been released, you will have 2 weeks plus 10 days to complete the Final and finish any remaining lessons in your course. No further extensions can be provided beyond these 10 days.

Browse All