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.
81 students enrolled
Instructed by Packt Publishing Design / Web Design
82% off
Take This Course
  • Lectures 47
  • Length 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


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


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.

Who 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.


Section 1: Getting Started with Responsive Web Design

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.


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

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

    Discussion of devices and resolutions.
    • Overview of device breakpoints


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


    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

    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


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


    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

    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


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


    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


    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


    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

    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


    Take an overview of the RWD sample files.

    ·Build a complete responsive layout

    Section 5: HTML5 Structure for Our Site

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


    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


    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


    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


    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

    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


    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


    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


    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


    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


    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


    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


    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


    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

    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


    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


    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


    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


    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


    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


    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

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


    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


    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


    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


    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


    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


    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


    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


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


    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

    Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

    With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

    From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

    Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.

    Ready to start learning?
    Take This Course