Responsive Web Design – From Concept to Complete Site
4.3 (2 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.
88 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Responsive Web Design – From Concept to Complete Site to your Wishlist.

Add to Wishlist

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.3 (2 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.
88 students enrolled
Created by Packt Publishing
Last updated 7/2014
Current price: $10 Original price: $85 Discount: 88% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 2 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 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.
View Curriculum
  • Basic knowledge of HTML and CSS will prove helpful for jumping into this video series.

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.

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
Students Who Viewed This Course Also Viewed
Curriculum For This Course
47 Lectures
Getting Started with Responsive Web Design
6 Lectures 12:19

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.

Exploring Responsive Web Design (RWD)

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

Understanding the Use of RWD

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

    Discussion of devices and resolutions.
    • Overview of device breakpoints

    Device Breakpoints

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

    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

    Course Overview
    Building a Fluid Layout
    3 Lectures 05:40

    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

    Fluid Width Layouts

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

    Working with Percent Width Layouts

    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

    Examples of Fluid Layouts
    Media Queries
    5 Lectures 10:53

    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

    Media Queries

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

    Media Query Code

    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

    Testing a Simple Media Query

    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

    Best Practices 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

    Testing Media Queries on Actual Mobile Devices
    Building Our First Responsive Page
    2 Lectures 04:11

    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

    Preview 02:15

    Take an overview of the RWD sample files.

    ·Build a complete responsive layout

    Using Sample Files
    HTML5 Structure for Our Site
    5 Lectures 14:56

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

    Preview 01:29

    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

    CSS Resets and HTML5

    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

    HTML for Container, Header, and Navigation

    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

    HTML for a four Column Content Area

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

    HTML for a two Column Footer
    CSS for Our Site
    9 Lectures 27:02

    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

    Using Demo CSS for our Site

    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

    Writing the CSS for the Navigation Bar and Logo

    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

    Preview 03:15

    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

    Tweaking the Navigation Using the Inspect Element

    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

    Formatting the Header

    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

    Styling the Columns

    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

    Formatting Headings and Images in the Columns

    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

    Formatting 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

    Tweaks and Fixes to the Body Layout
    Adding Media Queries to Our Fluid Layout
    7 Lectures 18:17

    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

    Planning for Media Queries

    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

    Tablet Media Query for the Body

    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

    Using Media Query for the Navigation Bar and Logo

    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

    Using Media Query for Navigation Bar and Logo for Devices Smaller Than Tablet

    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

    Using Media Query for Columns to Reorient Horizontally

    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

    More on Column Queries and Footer

    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

    Final Tweaks for Phone-Sized Devices
    Advanced Features/Considerations for the Future
    10 Lectures 31:14

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

    Preview 02:04

    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

    Dealing with Font Size 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

    Using Percent-Based Fonts and Dealing with Problems with EMs and Percent

    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

    Demo of EM and Percent-Based Font Sizes

    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

    Solution to Issues with 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

    Future Considerations: VM, VH, VMAX, and VMIN

    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

    Current Solutions to Text Size Issues and Responsive Background Images

    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

    Using Background Images, Adaptive Images, and Bandwidth

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

    Responsive Grids

    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

    CSS Pre-processors
    About the Instructor
    Packt Publishing
    3.9 Average rating
    8,109 Reviews
    58,486 Students
    686 Courses
    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.