Building Responsive Websites
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.
223 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Building Responsive Websites to your Wishlist.

Add to Wishlist

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.
223 students enrolled
Last updated 10/2014
English
Current price: $10 Original price: $50 Discount: 80% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 4.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 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.
View Curriculum
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.
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.

Who 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.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 29 Lectures Collapse All 29 Lectures 04:31:48
+
Understanding Responsive Design
3 Lectures 27:32
In this video you will learn about what Responsive design is and how its brief history has made quite an impact on website design.
Preview 09:55

In this video you will learn how to determine whether or not you should be creating a responsive website.
Preview 09:55

In this video you will learn about some of the software available which can help with designing responsive websites.
What technology is involved in responsive design?
07:42
+
Preparing Your Content
2 Lectures 13:27
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.
Organize your content
07:23

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.
Analyze your page views
06:04
+
Defining Your Content Structure
3 Lectures 27:22
In this video you will learn what "Mobile first" means and how it will impact the way you begin creating your responsive website.
What is “mobile first”
11:17

In this video you will learn how to use the mulitple artboards feature in Adobe Illustrator to design a layout for your various devices.
Using Illustrator artboards to create layouts
08:06

In this video you will learn how to use the layer comps feature in Adobe Photoshop to design layouts for your responsive website.
Using Photoshop Layer comps to create layouts
07:59
+
Working With Responsive Grids
3 Lectures 32: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.
What is desinging on a grid
09:03

In this video you will learn different wasy a grid layout has been used when creating pages for web sites.
How grids are used in web site design
11:16

In this video you will learn about different types of responsive grid layouts and how to incorporate them into your workflow.
Responsive grid templates
11:44
+
Media Queries
3 Lectures 30:01
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.
CSS media queries – external vs. internal
09:03

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.
Adding media queries for different device types
11:26

In this video you will learn what a breakpoint is and how to determine where to include them in your responsive web design.
Setting breakpoints
09:32
+
Responsive Test
3 Lectures 32:31
In this video you will learn what web based fonts are, why they are beneficial and how to incorporate them into your design.
Using Web based fonts
16:34

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.
Explaining the difference between pixels, percentages, and ems
09:13

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
Adding a root font to your document - Rems
06:44
+
Responsive Layout
5 Lectures 47:54
In this video you will learn how to use ems and percentages instead of pixels to layout your responsive we page.
Responsive Layouts using percentages
08:20

In this video you will learn how to hide elements on your mobile pages and show these elements on your tablet and screen pages.
Showing and hiding elements
08:40

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.
Single to multiple column layout
13:13

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.
Single column to three columns
08:48

In this video you will learn what the flex box rule in css is an how it willl change responsive design.
Flex box
08:53
+
Responsive Media
3 Lectures 23:13
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.
Working with background images
07:57

In this video you will learn how to insert and define images so that they will work in a responsive design.
Inserting images
07:09

In this video you will learn strategies to help you incorporate high resolution images into your design.
Addressing high resolution issues
08:07
+
Responsive Navigation
3 Lectures 30:08
In this video you will learn how to set up a navigation list that will be used as starting point for your responsive navigation.
Setting up horizontal lists
09:23

In this video you will learn how to convert your horizontal navigation to a vertical navigation.
Conuverting horizontal menu to verticla men
10:29

In this video you will learn how to create a toggle navigation for your mobile devices.
Creating a toggle navigation
10:16
+
Testing your responsive layout
1 Lecture 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.
Testing on different devices
07:37
About the Instructor
John Wiley & Sons, Inc.
4.2 Average rating
1,031 Reviews
28,535 Students
35 Courses

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.