Building Responsive Websites

Learn how to build a responsive website that will look great and work well across a number of devices
2.2 (3 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
215 students enrolled
$19
$50
62% off
Take This Course
  • Lectures 29
  • Length 4.5 hours
  • Skill Level Beginner Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 12/2014 English

Course Description

In this one-of-a-kind video training course, you will learn how to build a responsive website that will look great and work well across a number of devices including phones, tablets, and PCs.

Our instructors provide expert, straight-forward, user-friendly training to help you tackle the steps and strategies needed to design and build a responsive website. From choosing among available software to design your responsive website to understanding how to test your responsive layouts before making your site live, this course covers it all.

Find out about the software options that are available to analyze your page views. Learn about different types of responsive grid layouts and how to incorporate them into your workflow. Discover how to go from a one column layout for mobile to a multi-column layout for tablet and screen, and understand how to insert and define images so that they will work in a responsive design.

If you’re looking for comprehensive beginning-intermediate video instruction on building a responsive website, you’ll find it here.

What are the requirements?

  • From choosing among available software to design your responsive website to understanding how to test your responsive layouts before making your site live, this course covers it all.

What am I going to get from this course?

  • Build a website that works well across a number of devices including phones, tablets, and PCs.
  • Tackle the steps and strategies needed to design and build a responsive website.
  • Understand how to test your responsive layouts before going live.
  • Learn out about the software options that are available to analyze page views.
  • Incorporate responsive grid layouts into your workflow.
  • Discover how to go from a one column layout for mobile to a multi-column layout for tablet and screen.

What is the target audience?

  • Perfect for those who want to build a website that responds to their customers needs.
  • A great course for the do-it-yourself entrepreneur or anyone interested in breaking into the website design business.
  • Website design instruction for the Beginner to Intermediate requiring a user-friendly website that include user analytics allowing for feedback on the sites performance and user optimization.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Understanding Responsive Design
09:55
In this video you will learn about what Responsive design is and how its brief history has made quite an impact on website design.
09:55
In this video you will learn how to determine whether or not you should be creating a responsive website.
07:42
In this video you will learn about some of the software available which can help with designing responsive websites.
Section 2: Preparing Your Content
07:23
In this video you will learn why it is important to have a site plan and organize your content prior to creating a responsive website.
06:04
In this video you will learn about a few of the software options in which to anyalyze your page views so that you can make the best decision as to what pages you will include in your mobile site.
Section 3: Defining Your Content Structure
11:17
In this video you will learn what "Mobile first" means and how it will impact the way you begin creating your responsive website.
08:06
In this video you will learn how to use the mulitple artboards feature in Adobe Illustrator to design a layout for your various devices.
07:59
In this video you will learn how to use the layer comps feature in Adobe Photoshop to design layouts for your responsive website.
Section 4: Working With Responsive Grids
09:03
In this video you will learn how designers have been using a grid structure to organize their information for print and how using one will help you layout your information in a more cohesive manner.
11:16
In this video you will learn different wasy a grid layout has been used when creating pages for web sites.
11:44
In this video you will learn about different types of responsive grid layouts and how to incorporate them into your workflow.
Section 5: Media Queries
09:03
In this video you will learn what a css media query is and how to define your css rules using media queries within one style sheet.
11:26
In this video you will learn how to add media queries based on different device sizes. You will do this using separate css files for each media query.
09:32
In this video you will learn what a breakpoint is and how to determine where to include them in your responsive web design.
Section 6: Responsive Test
16:34
In this video you will learn what web based fonts are, why they are beneficial and how to incorporate them into your design.
09:13
In this video you will learn how to define the unit of measure associated with type. You will learn the difference between a fixed size type using pixels and a fluid sized type using percentages and ems.
06:44
In this video you will learn how to add a root font to your code to incorporate rems as a unit of measure for your responsive text
Section 7: Responsive Layout
08:20
In this video you will learn how to use ems and percentages instead of pixels to layout your responsive we page.
08:40
In this video you will learn how to hide elements on your mobile pages and show these elements on your tablet and screen pages.
13:13
In this video you will learn how to go from a one column layout for mobile to a multi column layout for tablet and screen.
08:48
In this video you will learn how to go from a one column layout to a three column layout. You will incorporate the foat and padding properties to make your three columns.
08:53
In this video you will learn what the flex box rule in css is an how it willl change responsive design.
Section 8: Responsive Media
07:57
In this video you will learn how to incorporate responsive background images into your layouts and also how to adjust the transparency of elements so as to see the backgound images.
07:09
In this video you will learn how to insert and define images so that they will work in a responsive design.
08:07
In this video you will learn strategies to help you incorporate high resolution images into your design.
Section 9: Responsive Navigation
09:23
In this video you will learn how to set up a navigation list that will be used as starting point for your responsive navigation.
10:29
In this video you will learn how to convert your horizontal navigation to a vertical navigation.
10:16
In this video you will learn how to create a toggle navigation for your mobile devices.
Section 10: Testing your responsive layout
07:37
In this video you will learn about different strategies to aid you in testing your responsive layouts prior to making your site live.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Founded in 1807, John Wiley & Sons, Inc. has been a valued source of information and understanding for more than 200 years, helping people around the world meet their needs and fulfill their aspirations. Wiley and its acquired companies have published the works of more than 450 Nobel laureates in all categories: Literature, Economics, Physiology or Medicine, Physics, Chemistry, and Peace.

Wiley is a global provider of content and content-enabled workflow solutions in areas of scientific, technical, medical, and scholarly research; professional development; and education. Our core businesses produce scientific, technical, medical, and scholarly journals, reference works, books, database services, and advertising; professional books, subscription products, certification and training services and online applications; and education content and services including integrated online teaching and learning resources for undergraduate and graduate students and lifelong learners. Wiley's global headquarters are located in Hoboken, New Jersey, with operations in the U.S., Europe, Asia, Canada, and Australia. The Company is listed on the New York Stock Exchange under the symbols JWa and JWb.

Ready to start learning?
Take This Course