Certificate in Responsive Web Design Online Course

Learn to build fully responsive websites

Certificate in Responsive Web Design Online Course

NOW ONLY

CFA74549

Save CFA125500 (63%)
OFF RRP CFA200049
Get Info Pack

Learn to build fully responsive websites

In today's online environment, designers must create websites that are responsive. Their sites must reshape and morph 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. This is the heart of responsive Web design (RWD).

In this course, you'll 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'll master how to use HTML5 linked to media queries in CSS3 to adapt content to fit your user's viewport, and see how jQuery Mobile can help you to mobile sites.

Today's world of Web design requires building sites that are intuitive, inviting, accessible, and attractive in every possible device and environment. In this course, you'll learn to design and build fully responsive websites optimized for smartphones, tablets, and laptop/desktop viewing environments.

Course Fast Facts:

  • Only 6 weeks to complete this course
  • Approximately only 2 to 4 hours per week of study is required
  • This course is delivered 100% on-line and is accessible 24/7 from any computer or smartphone
  • Instructors lead each course and you will be able to interact with them and ask questions
  • You can study from home or at work at your own pace in your own time
  • You can download printer friendly course material or save for viewing off line
  • You will be awarded a certificate at completion of this course

 How to study online course?

Upon enrolment an automated welcome email will be sent to you (please check your junk email inbox if not received as this is an automated email), in order for you to access your online course, which is Available 24/7 on any computer or smart mobile device. New courses start every month to ensure that we have the correct ratio of students to tutors available, please ensure you select a starting date when you go through our shopping cart, at checkout. The course is easy to follow and understand.

Recognition & Accreditation

All students who complete the course receive a certificate of completion with a passing score (for the online assessment) and will be issued a certificate via email.

Other HTML Training Courses

Do you want to learn more about the world of HTML? Courses For Success offer a wide range of HTML training courses suitable for all levels.

There are 12 units of study

Lesson 01 - What Is Responsive Web Design?
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 first lesson, we'll take a look at exactly what responsive Web design is, why it's necessary, and the basic concepts in building responsive websites. We'll also examine some models of responsive design and see what we can learn from them.

Lesson 02 - Relative Units of Measurement
How do you make a photo look good on the large viewport of a laptop and the small screen of a smartphone? And will text readable on a normal computer screen appear 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.

Lesson 03 - Creating Responsive Menus With Media Queries
Navigation menus are the road maps that help users navigate a website. They provide access to the site content, and they 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, we'll investigate how menus function differently depending on the browsing environment, and you'll 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.

Lesson 04 - Responsive Color Schemes and Custom Web Fonts
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 they're important if you want your site to be engaging and inviting. But do the rules you follow for full-size site design apply to mobile sites as well? Maybe not! In this lesson, we'll 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 value, and we'll 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 in different devices and lighting environments —you'll have tried-and-true solutions to that challenge!

Lesson 05 - Responsive Page Layout
What should a responsive page look like? If you said it should look different in a tablet or smartphone than it does in a laptop, you're onto something! But how can we make pages display optimally in different viewports? In this lesson, we'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.

Lesson 06 - Providing Collapsible Content for Mobile
Mobile screens are tiny. So how can we fit all our 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. We'll use the HTML5 and 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.

Lesson 07 - Making Images and Videos Responsive
Images and video present real challenges when we're designing responsive websites. Not only do we need to think about how these potentially large files display on small mobile devices, but we 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. We'll 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.

Lesson 08 - Using SVG Artwork in Responsive Design
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 (that's why we cover how to work with JPEG photos in Lesson 7). But SVG format 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.

Lesson 09 - Designing Responsive Forms
When users visit our websites, we often want to collect something from them, be it contact information, a location, or order details. To accomplish any of those things, we 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. I'll show you how to use HTML5 input types to make forms easier to fill out in mobile environments, and we'll once again use media queries to customize the look and feel of our form depending on the viewport. The best part is, we can do all of this without any complicated scripting!

Lesson 10 - Adding Widgets With Bootstrap
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 in your website. We'll add custom buttons, navigation menus, and a carousel (automated slide show) using Bootstrap widgets—and yes, all of these components are responsive!

Lesson 11 - Providing an App-Like Experience With jQuery Mobile
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, we'll expand our capacity to provide mobile users with an app-like experience. By that I mean integrating more styling and interactive animation. We'll do that by connecting with a set of widgets and animated elements from the jQuery Mobile framework. We'll also employ media queries to keep the full-sized viewport experience friendly—and best of all, we won't need to work with any complicated programming language to achieve an app-like experience in mobile devices!

Lesson 12 - Creating a Web App Interface for Mobile Users
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 we discussed in Lesson 11, 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, we'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 our site. We'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 we go, we'll sum up what you've learned by building a home page to show off all the projects you've created in this class!

Entry requirements

Students must have basic literacy and numeracy skills.

Minimum education

Open entry. Previous schooling and academic achievements are not required for entry into this course.

Computer requirements

Students will need access to a computer and the internet.

Minimum specifications for the computer are:

Windows:

  • Microsoft Windows XP, or later
  • Modern and up to date Browser (Internet Explorer 8 or later, Firefox, Chrome, Safari)

MAC/iOS

  • OSX/iOS 6 or later
  • Modern and up to date Browser (Firefox, Chrome, Safari)

All systems

  • Internet bandwidth of 1Mb or faster
  • Flash player or a browser with HTML5 video capabilities(Currently Internet Explorer 9, Firefox, Chrome, Safari)

Students will also need access the following applications:

Adobe Acrobat Reader

Customer Reviews


"I think the instructor was simple and clear in presenting some very complex material. Can't ask for more than that.

I really enjoyed this course and especially liked the instructor. Please get him to teach more of these classes. Thanks!

I found the course material very informative and useful at my stage of development. Thank you very much.

I have enjoyed this class a lot and learned much. I really wanted 3 things from this class, creating working forms, embedding videos, and what HTML5 is all about. Embedding videos was pretty straight forward and Vimeo was easy to use. HTML5 worked in the newest gadgets and I guess that is the future. Image maps was totally new to me and fun to learn...Again, I have really had fun with this class. It has improved my skills and for an old lady (84), that is a great accomplishment.

Thanks for being our instructor for the past 12 lessons. Even though I've been designing websites for about as long as you have, this course contained a lot of material that was new to me. I've also been too lazy to create my own forms -- but no more. You've cured me. Thanks most of all for the exposure to HTML5!

I enjoyed the course, the relaxed writing style and pace. Keep pushing the envelope!

Thank you. This was the first time I have taken an online class. I liked the pace and convenience. My absolute favorite chapter was on the mobile-media, using the 2 style sheets. Very cool.

I found this course to be a great introduction to designing with CSS and HTML5. I will be looking for other courses to take me to the next level in each of these…We had a great instructor. He really knows his business first hand and does a tremendous job of guiding us from the most basic tasks to the pro level of design.

This is the second course I have taken and I plan on taking a few more…The instructor is great, information is up to date and useful…I have spent hours trying to research the things taught in this course via Google and other means…The way these courses are laid out and presented make them an unbeatable value. Also, doing them in your own time is huge for people like myself with hectic schedules.

This course was written well and the instructor was knowledgable and friendly. This helped me better understand the new advances in web design as well as solidify some of the basics. Thank you!

Through well-crafted lessons, expert online instruction and interaction with your tutor, participants in these courses gain valuable knowledge at their convenience. They have the flexibility to study at their own pace combined with enough structure and support to complete the course. And they can access the classroom 24/7 from anywhere with an Internet connection.

New sessions of each course run every month. They last six weeks, with two new lessons being released weekly (for a total of 12). The courses are entirely Web-based with comprehensive lessons, quizzes, and assignments. A dedicated professional instructor facilitates every course; pacing learners, answering questions, giving feedback, and facilitating discussions.

About this Course

Learn to build fully responsive websites

In today's online environment, designers must create websites that are responsive. Their sites must reshape and morph 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. This is the heart of responsive Web design (RWD).

In this course, you'll 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'll master how to use HTML5 linked to media queries in CSS3 to adapt content to fit your user's viewport, and see how jQuery Mobile can help you to mobile sites.

Today's world of Web design requires building sites that are intuitive, inviting, accessible, and attractive in every possible device and environment. In this course, you'll learn to design and build fully responsive websites optimized for smartphones, tablets, and laptop/desktop viewing environments.

Course Fast Facts:

  • Only 6 weeks to complete this course
  • Approximately only 2 to 4 hours per week of study is required
  • This course is delivered 100% on-line and is accessible 24/7 from any computer or smartphone
  • Instructors lead each course and you will be able to interact with them and ask questions
  • You can study from home or at work at your own pace in your own time
  • You can download printer friendly course material or save for viewing off line
  • You will be awarded a certificate at completion of this course

 How to study online course?

Upon enrolment an automated welcome email will be sent to you (please check your junk email inbox if not received as this is an automated email), in order for you to access your online course, which is Available 24/7 on any computer or smart mobile device. New courses start every month to ensure that we have the correct ratio of students to tutors available, please ensure you select a starting date when you go through our shopping cart, at checkout. The course is easy to follow and understand.

Recognition & Accreditation

All students who complete the course receive a certificate of completion with a passing score (for the online assessment) and will be issued a certificate via email.

Other HTML Training Courses

Do you want to learn more about the world of HTML? Courses For Success offer a wide range of HTML training courses suitable for all levels.

There are 12 units of study

Lesson 01 - What Is Responsive Web Design?
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 first lesson, we'll take a look at exactly what responsive Web design is, why it's necessary, and the basic concepts in building responsive websites. We'll also examine some models of responsive design and see what we can learn from them.

Lesson 02 - Relative Units of Measurement
How do you make a photo look good on the large viewport of a laptop and the small screen of a smartphone? And will text readable on a normal computer screen appear 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.

Lesson 03 - Creating Responsive Menus With Media Queries
Navigation menus are the road maps that help users navigate a website. They provide access to the site content, and they 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, we'll investigate how menus function differently depending on the browsing environment, and you'll 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.

Lesson 04 - Responsive Color Schemes and Custom Web Fonts
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 they're important if you want your site to be engaging and inviting. But do the rules you follow for full-size site design apply to mobile sites as well? Maybe not! In this lesson, we'll 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 value, and we'll 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 in different devices and lighting environments —you'll have tried-and-true solutions to that challenge!

Lesson 05 - Responsive Page Layout
What should a responsive page look like? If you said it should look different in a tablet or smartphone than it does in a laptop, you're onto something! But how can we make pages display optimally in different viewports? In this lesson, we'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.

Lesson 06 - Providing Collapsible Content for Mobile
Mobile screens are tiny. So how can we fit all our 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. We'll use the HTML5 and 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.

Lesson 07 - Making Images and Videos Responsive
Images and video present real challenges when we're designing responsive websites. Not only do we need to think about how these potentially large files display on small mobile devices, but we 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. We'll 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.

Lesson 08 - Using SVG Artwork in Responsive Design
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 (that's why we cover how to work with JPEG photos in Lesson 7). But SVG format 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.

Lesson 09 - Designing Responsive Forms
When users visit our websites, we often want to collect something from them, be it contact information, a location, or order details. To accomplish any of those things, we 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. I'll show you how to use HTML5 input types to make forms easier to fill out in mobile environments, and we'll once again use media queries to customize the look and feel of our form depending on the viewport. The best part is, we can do all of this without any complicated scripting!

Lesson 10 - Adding Widgets With Bootstrap
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 in your website. We'll add custom buttons, navigation menus, and a carousel (automated slide show) using Bootstrap widgets—and yes, all of these components are responsive!

Lesson 11 - Providing an App-Like Experience With jQuery Mobile
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, we'll expand our capacity to provide mobile users with an app-like experience. By that I mean integrating more styling and interactive animation. We'll do that by connecting with a set of widgets and animated elements from the jQuery Mobile framework. We'll also employ media queries to keep the full-sized viewport experience friendly—and best of all, we won't need to work with any complicated programming language to achieve an app-like experience in mobile devices!

Lesson 12 - Creating a Web App Interface for Mobile Users
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 we discussed in Lesson 11, 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, we'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 our site. We'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 we go, we'll sum up what you've learned by building a home page to show off all the projects you've created in this class!

Entry requirements

Students must have basic literacy and numeracy skills.

Minimum education

Open entry. Previous schooling and academic achievements are not required for entry into this course.

Computer requirements

Students will need access to a computer and the internet.

Minimum specifications for the computer are:

Windows:

  • Microsoft Windows XP, or later
  • Modern and up to date Browser (Internet Explorer 8 or later, Firefox, Chrome, Safari)

MAC/iOS

  • OSX/iOS 6 or later
  • Modern and up to date Browser (Firefox, Chrome, Safari)

All systems

  • Internet bandwidth of 1Mb or faster
  • Flash player or a browser with HTML5 video capabilities(Currently Internet Explorer 9, Firefox, Chrome, Safari)

Students will also need access the following applications:

Adobe Acrobat Reader

"I think the instructor was simple and clear in presenting some very complex material. Can't ask for more than that.

I really enjoyed this course and especially liked the instructor. Please get him to teach more of these classes. Thanks!

I found the course material very informative and useful at my stage of development. Thank you very much.

I have enjoyed this class a lot and learned much. I really wanted 3 things from this class, creating working forms, embedding videos, and what HTML5 is all about. Embedding videos was pretty straight forward and Vimeo was easy to use. HTML5 worked in the newest gadgets and I guess that is the future. Image maps was totally new to me and fun to learn...Again, I have really had fun with this class. It has improved my skills and for an old lady (84), that is a great accomplishment.

Thanks for being our instructor for the past 12 lessons. Even though I've been designing websites for about as long as you have, this course contained a lot of material that was new to me. I've also been too lazy to create my own forms -- but no more. You've cured me. Thanks most of all for the exposure to HTML5!

I enjoyed the course, the relaxed writing style and pace. Keep pushing the envelope!

Thank you. This was the first time I have taken an online class. I liked the pace and convenience. My absolute favorite chapter was on the mobile-media, using the 2 style sheets. Very cool.

I found this course to be a great introduction to designing with CSS and HTML5. I will be looking for other courses to take me to the next level in each of these…We had a great instructor. He really knows his business first hand and does a tremendous job of guiding us from the most basic tasks to the pro level of design.

This is the second course I have taken and I plan on taking a few more…The instructor is great, information is up to date and useful…I have spent hours trying to research the things taught in this course via Google and other means…The way these courses are laid out and presented make them an unbeatable value. Also, doing them in your own time is huge for people like myself with hectic schedules.

This course was written well and the instructor was knowledgable and friendly. This helped me better understand the new advances in web design as well as solidify some of the basics. Thank you!

Through well-crafted lessons, expert online instruction and interaction with your tutor, participants in these courses gain valuable knowledge at their convenience. They have the flexibility to study at their own pace combined with enough structure and support to complete the course. And they can access the classroom 24/7 from anywhere with an Internet connection.

New sessions of each course run every month. They last six weeks, with two new lessons being released weekly (for a total of 12). The courses are entirely Web-based with comprehensive lessons, quizzes, and assignments. A dedicated professional instructor facilitates every course; pacing learners, answering questions, giving feedback, and facilitating discussions.

We provide a 7 Day Money Back Refund on all Courses

Now Only CFA74549 Save CFA125500 (63%)
OFF RRP CFA200049
Delivery Method Online
Get Info Pack

Special Offer

 

Receive The Personal Success Training Program FREE, When You Purchase This Course - Limited Time Remaining!  (Value CFA241100)

 

The Personal Success Training Program Helps You Stay Focused To Achieve Your Goals!
Benefits:
  • How to layout a Success Plan.
  • Get where you want to be in life.
  • How to unclutter your mind to succeed.
  • Achieve your dreams using your imagination.
  • How to have faith in yourself.
Features:
  • 12 month online access,  24/7 anywhere.
  • Complement your individual course purchase.
  • Internationally recognized by the IAOTS.
  • Thousands of positive reviews.
  • Limited Time Offer - Ends Soon.
 

Share this course

Course Summary

Course ID No.: 007RWDOC
Delivery Mode: Online
Course Access: 6 Weeks
Tutor Support: Yes
Time required: 24 Hours
Assessments: Yes
Qualification: Certificate of Completion

Start Dates

This course is available to begin on the following dates

  • 14 August
  • 11 September
  • 16 October
  • 13 November

Popular Courses and Bundles

Get a FREE Career Planner