Responsive Web Design – From Concept to Complete Site

Easily design responsive websites that can adapt to any device regardless of screen size using HTML 5 and CSS3
4.0 (1 rating) 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.
78 students enrolled
Instructed by Packt Publishing Design / Web Design
$85
Take This Course
  • Lectures 47
  • Contents Video: 2 hours
  • Skill Level All Levels
  • 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 7/2014 English

Course Description

By following this structured video course, you will learn how to convert fix-width layouts to responsive layouts, contain a fluid layout with maximum or minimum properties, write syntax for a media query, select breakpoints, write HTML to embed all the saved elements into a page, and add CSS to your site ensuring that you have the skills to create your very own responsive website quickly and efficiently.

Responsive Web Design – From Concept to Complete Site starts with an overview of the technology, the best practices to follow, and then moves on to a complete implementation of a responsive site using HTML5 and CSS3 media queries. After learning the essentials of responsive web design in the introductory section, you will walk through splitting a mockup into images and content areas, defining a fluid grid using those divisions, creating a percentage-based layout for the fluid grid with CSS, and then begin creating a full-functional responsive page. The latter section contains hands-on exercises that will walk you through all the HTML5 and CSS3 code required to build your sample page.

This course ends with an overview on the future of web design, the features you can use today, and tips on how to remain current in the field.

About the Author

Joshua Miller is a freelance web designer, college professor, and interactive artist living in eastern Pennsylvania. Josh has taught courses in animation, web/graphic design, video game design, and programming at a variety of schools, including Lehigh University, Northampton Community College, Drexel University, Lafayette College, Montgomery County Community College, and Lehigh Valley College. Josh currently holds a tenure-track position at Kutztown University, where he teaches web design, graphic design, and interactivity. He also teaches part time at Lehigh University, and runs a successful freelance design business in his downtime. Josh’s true interests lie in the intersection between design and programming, specifically with the creation of digital interactive work.

What are the requirements?

  • Basic knowledge of HTML and CSS will prove helpful for jumping into this video series.

What am I going to get from this course?

  • Responsive Web Design - from Concept to Complete Site will lead you, step by step, through the process of making your website responsive and appear at its best, no matter the device it is viewed on.

What is the target audience?

  • Have you been writing two websites – one for mobile and one for larger displays? If so, this course will show you how to make your website responsive, in order to be fluid enough to adapt to any and all the different devices available

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: Getting Started with Responsive Web Design
01:57

This video briefly introduces you to the topic of the video course.

    ·Understand what RWD is

    ·Get to know what will be covered in this section.

02:11

Here you’ll understand why Responsive Web Design is important for devices and also see an example of responsive designs.

    ·Know why RWD matters

    ·Get an overview of the devices on which RWD can be used

    ·Analyze its use on Mobile versus Desktop

01:57
  • Get to grips with tips on the use of Responsive Web Design
  • 02:41

    Discussion of devices and resolutions.
    • Overview of device breakpoints

    02:18

    When you should and shouldn't use RWD.
    • Know the alternatives to RWD
    • Get to know the pros/cons of RWD

    01:15

    In this video, you’ll get to know what you can expect from this video course.
    • An overview of what will be covered in the video course

    Section 2: Building a Fluid Layout
    02:03

    Learn how to create a percentage-based layout for fluid width CSS.
    • Start with a pixel width layout and convert to percent percent
    • Use the equation width = target/context

    02:15

    Learn the best practices while working with percentages.
    • Learn how to deal with large decimals
    • Work with the target/context formula

    01:22

    Learn how to take a mock-up and create percent percent widths.
    • Start with a sample mock-up and learn how to calculate widths
    • Work through sample layout

    Section 3: Media Queries
    02:22

    Fluid width layouts can only take you so far. You need media queries to adapt your layout to different device sizes. Here you will learn how to do this.
    • Determine a breakpoint
    • Program a breakpoint in CSS
    • Determine how the content will move at breakpoint

    01:40

    Learn how to write the CSS for a media query.
    • Code the breakpoints in CSS
    • Learn the syntax of media query CSS

    02:02

    Finding out how to test a simple media query in the browser.
    • Write your first media query
    • Implement the code from previous video in the browser

    02:50

    Learn how to write media query code efficiently.
    • Keep in mind that you should never duplicate the code
    • Learn how to override the settings for media queries

    01:59

    Testing in the browser is not comparable to testing on actual mobile devices.Learn how to do this.
    • Find out the render resolution of your mobile phone
    • Learn how to use viewport meta tags

    Section 4: Building Our First Responsive Page
    02:15

    Take an overview of the demo files and process.
    • Plan and create mock-ups for a traditional layout
    • Translate that layout to fluid width and media queries

    01:56

    Take an overview of the RWD sample files.

    ·Build a complete responsive layout

    Section 5: HTML5 Structure for Our Site
    01:29

    Understand the use of HTML for the demo site.
    • Start the HTML code for our site
    • Build an HTML layout for our demo site

    04:31

    Learn how to deal with some technicalities of responsive web design.
    • Analyzing CSS reset options
    • HTML5 Shiv & Boilerplate as a starting point for a responsive design
    • Make a consistent layout for all modern browsers

    04:51

    Learn how to write the HTML for the container, header and navigation.
    • Add the div logo
    • Add UL and LI's for navigation
    • Add the header element

    02:16

    Learn how to write the LI's for the 4 column content area by writing the HTML for columns.
    • Add UL and LI's for the 4 column layout
    • Add the filler text and headline tags
    • Add images

    01:49

    Learn how to write the HTML for the footer.
    • Add text in the left column of the footer
    • Add the right column with images

    Section 6: CSS for Our Site
    02:42

    This video shows you how to plan and then build the CSS for our sample site.
    • Briefly cover the use of CSS
    • Build CSS for container

    03:24

    Here you’ll learn how to create a fluid width layout that will allow the logo and navigation bar to grow and remain aligned.
    • Calculate the percent width for logo
    • Calculate the percent width for navigation
    • Write the CSS

    03:15

    In this video, you’ll learn how to build list items and align them in the navigation.
    • Build a framework for navigation LI's
    • Format navigation styles

    02:37

    By using the debug tools to help find and correct errors in the page, we can use it to align the elements in the navigation bar.
    • Style the navigation list items
    • Make live adjustments with Inspect Element/Debug tools

    02:09

    Here you’ll learn how to align the header and the image inside it to fill the width of the body.
    • Write styles for the header
    • Scale the header image to fill the width of the element

    02:49

    This video shows you how to build a layout that fits the content of all the four columns
    • Calculate the width for column styles
    • Write the styles for the list item

    03:16

    Here you’ll understand how to format the headings and images in the fluid column.
    • Write the style for image tag in the list item
    • Create styles for h2

    03:50

    Learn how to create a layout that fills half the column and clears the content areas above it.
    • Format the paragraphs in the columns
    • Build the footer styles
    • Format the right and left columns in the footer

    03:00

    Some elements in the body are still not aligned perfectly; final tweaking will fix that.
    • Remove pixel width from the container
    • Bind the scaling of the page with max-width

    Section 7: Adding Media Queries to Our Fluid Layout
    02:37

    In this video, we’ll plan how to build the media queries and breakpoints for our site.
    • Review the mock-ups
    • Scale the layout and determine the breakpoints

    02:32

    Learn how to create the first breakpoint for tablet devices and a layout that adapts to tablet size.
    • Write the media query CSS
    • Modify the body style in the breakpoint

    03:18

    Learn how to reorient and resize the navigation bar and logo content on a tablet.
    • Modify the width of the navigation bar and adjust alignment
    • Make the logo and fill the logo div

    02:43

    Existing layout works great for standard tablet-sized devices, but we need to correct it for smaller devices.
    • Build a media query for 600 px width
    • Make the navigation bar fill the width of the device
    • Center and shrink the logo

    01:55

    Vertical layout will not work on a mobile device. Learn how to switch the orientation for column and content.
    • Adjust column width to fill 100percent
    • Adjust the size and position of the image in the columns

    02:30

    Header needs to align appropriately in the tablet layout and the footer content needs to stack horizontally. In this video, you will learn how to do this.
    • Adjust the text alignment of the header
    • Adjust the footer content to fill the width, which will cause the content to stack

    02:42

    Our layout works great on large and small tablets, but it still needs a few more tweaks for phones.
    • Write media query CSS for 480 px (and smaller) devices
    • Hide the paragraph content in the four columns
    • Adjust the navigation content to make it more visible on a small device

    Section 8: Advanced Features/Considerations for the Future
    02:04

    This video gives you an overview of advanced features and why they will be useful

    03:10

    Fonts don't scale like other elements. Know what are the options to deal with the issue.
    • What is an EM and how do you use it
    • Scaling EMs

    02:06

    An EM is a percent-based width, so you can also use percent for font size. EM's aren't ideal, and percent-based widths have limitations, which we will cover in this video.
    • Working with percent-based font width
    • Understand the problem of cascading/compounding sizes in percent or EM layouts

    02:10

    Here, we’ll take a look at the code in action where the EM and percent fail.
    • Demonstrating the cascading/compounding problem with EM and percent
    • Test the code

    03:12

    EM's and percent's compound properties, REMs are a good solution for modern browsers.
    • Learn what is an REM
    • Test our code using REMs

    03:09

    Some new CSS features that will make font scaling more user friendly. EM, percent, and REMs aren't ideal. In the future VM and VH will help.
    • Learn about VM,VH,VMAX, and VMIN
    • Check the browser compatibility
    • Discuss how they will be used in the future

    02:58

    VM and VH aren't widely supported. There some JavaScript solutions for this. Also, background images don't scale by default Learn the code to fix this.
    • Learn about FitText to scale the headline text
    • Discuss background-size properties that allow background images to scale
    • While using background-size, consider the background-position

    03:13

    While working with images in RWD, bandwidth is a concern. Using large images on small devices causes unnecessary bandwidth usage. Learn what other good options are available.
    • Hide/show content
    • Use adaptive images as a JavaScript solution
    • Learn how images will work in the future of RWD

    04:55

    Starting a site from scratch: generate your own grid or using a premade solution.
    • Analyze Bootstrap, Amazium and Unsemantic

    04:17

    RWD leads to a large code base, and pre-processors help with repetition and complex code. Here you’ll get to learn how this is done.
    • Understand what a CSS Pre-processor is, along with examples
    • Learn how Pre-processors provide variables, nesting, repeated code, and more
    • Use links to other resources for programming and testing

    Students Who Viewed This Course Also Viewed

    • Loading
    • Loading
    • Loading

    Instructor Biography

    Packt Publishing, Tech Knowledge in Motion

    Over the past ten years Packt Publishing has developed an extensive catalogue of over 2000 books, e-books and video courses aimed at keeping IT professionals ahead of the technology curve. From new takes on established technologies through to the latest guides on emerging platforms, topics and trends – Packt's focus has always been on giving our customers the working knowledge they need to get the job done. Our Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.

    Ready to start learning?
    Take This Course