O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Learning Path: Real-World Web Design

Video Description

Brush up your front-end development skills with real-world examples

In Detail

The pressure to make every user experience unique and engaging is only going to rise as UX innovation raises the bar. Stay updated on the latest design tips and techniques and apply them to your own work straight away with this practical Learning Path.

Prerequisites: A core understanding of HTML and CSS syntax

Resources: Code downloads and errata:

  • Responsive Web Design – From Concept to Complete Site

  • Responsive Web Design: Advancing your Design to the Modern Web

  • UX Design for Web Developers

  • Building a Responsive Website with Bootstrap

  • This path navigates across the following products (in sequential order):

  • Responsive Web Design – From Concept to Complete Site (2h 04m)

  • Responsive Web Design: Advancing your Design to the Modern Web (2h 31m)

  • UX Design for Web Developers (3h 44m)

  • Building a Responsive Website with Bootstrap (1h 56m)

  • Photo Credit: ©iStockphoto.com/esolla

    Table of Contents

    1. Chapter 1 : Responsive Web Design - From Concept to Complete Site
      1. Exploring Responsive Web Design (RWD) 00:01:58
      2. Understanding the Use of RWD 00:02:11
      3. Examples of Adaptive Layouts 00:01:58
      4. Device Breakpoints 00:02:41
      5. Pros/Cons of RWD 00:02:18
      6. Course Overview 00:01:16
      7. Fluid Width Layouts 00:02:04
      8. Working with Percent Width Layouts 00:02:15
      9. Examples of Fluid Layouts 00:01:23
      10. Media Queries 00:02:23
      11. Media Query Code 00:01:41
      12. Testing a Simple Media Query 00:02:03
      13. Best Practices for Media Queries 00:02:50
      14. Testing Media Queries on Actual Mobile Devices 00:01:59
      15. Using RWD Demo Files 00:02:15
      16. Using Sample Files 00:01:57
      17. Overview of the HTML Structure for the Demo Site 00:01:30
      18. CSS Resets and HTML5 00:04:31
      19. HTML for Container, Header, and Navigation 00:04:52
      20. HTML for a four Column Content Area 00:02:17
      21. HTML for a two Column Footer 00:01:50
      22. Using Demo CSS for our Site 00:02:42
      23. Writing the CSS for the Navigation Bar and Logo 00:03:24
      24. Building the CSS for Navigation and its Elements 00:03:15
      25. Tweaking the Navigation Using the Inspect Element 00:02:38
      26. Formatting the Header 00:02:09
      27. Styling the Columns 00:02:50
      28. Formatting Headings and Images in the Columns 00:03:16
      29. Formatting the Footer 00:03:51
      30. Tweaks and Fixes to the Body Layout 00:03:00
      31. Planning for Media Queries 00:02:37
      32. Tablet Media Query for the Body 00:02:32
      33. Using Media Query for the Navigation Bar and Logo 00:03:19
      34. Using Media Query for the Navigation Bar and Logo for Devices Smaller Than the Tablet 00:02:44
      35. Using Media Query for Columns to Reorient Horizontally 00:01:56
      36. More on Column Queries and Footer 00:02:31
      37. Final Tweaks for Phone-Sized Devices 00:02:42
      38. Advanced Features/Considerations 00:02:04
      39. Dealing with Font Size EMs 00:04:17
      40. Using Percent-Based Fonts and Dealing with Problems with EMs and Percent 00:03:11
      41. Demo of EM and Percent-Based Font Sizes 00:02:07
      42. Solution to Issues with REMs 00:02:10
      43. Future Considerations: VM, VH, VMAX, and VMIN 00:03:12
      44. Current Solutions to Text Size Issues and Responsive Background Images 00:03:09
      45. Using Background Images, Adaptive Images, and Bandwidth 00:02:58
      46. Responsive Grids 00:03:13
      47. CSS Pre-processors 00:04:56
    2. Chapter 2 : Responsive Web Design: Advancing your Design to the Modern Web
      1. The Course Overview 00:01:59
      2. What Are Media Queries? 00:04:08
      3. Media Queries "Hello World" 00:06:56
      4. Media Queries Within a CSS File with the @media Rule 00:03:58
      5. Media Query Rule Combination 00:08:30
      6. What Is Responsive Design? 00:04:20
      7. Optimizing for a Specific Device 00:07:32
      8. Creating Responsive Designs with Size Ranges 00:07:23
      9. Mobile Responsiveness 00:06:28
      10. Backward Compatibility 00:03:40
      11. Thinking Fluid 00:12:28
      12. Creating a Site That Responds to Itself 00:07:57
      13. Optimizing Based on Device Resolution 00:07:58
      14. Designing by Aspect Ratio 00:05:38
      15. Talking about Color and Grids 00:04:39
      16. What Are Responsive Frameworks? 00:07:36
      17. The Twitter Bootstrap 00:03:58
      18. Understanding the Twitter Bootstrap CSS Rules 00:05:32
      19. Adding Components 00:06:02
      20. An Example of a Grid Layout 00:05:56
      21. Changing Themes with LESS 00:07:16
      22. The Future of Media Types 00:04:02
      23. Moving into Media Features 00:11:39
      24. Creating Custom Media Queries 00:02:23
      25. Media Query Operators 00:01:51
      26. Working with Media Query Ranges 00:02:04
    3. Chapter 3 : UX Design for Web Developers
      1. The Course Overview 00:02:09
      2. UX Design Fundamentals 00:07:41
      3. Fundamentals of Building a Website 00:12:46
      4. Essentials of Human-centered Design 00:03:12
      5. Empathy Mapping 00:07:48
      6. Problem Definition- User Flows, Decision Tress, and Screen Flows 00:14:57
      7. Intervention Planning 00:11:19
      8. Understanding the Need for Structure 00:02:24
      9. Structure and Information Architecture 00:05:34
      10. The Essential Elements 00:04:47
      11. Design Patterns – Don't Reinvent the Wheel 00:04:42
      12. SERPS as Home Pages and Location-free Browsing 00:05:37
      13. Landing Pages, Templates, and Page Clustering 00:06:48
      14. Responsive Web Design 00:03:07
      15. Wireframing 00:04:53
      16. Building Your Setup 00:03:19
      17. Home Page Wireframes 00:02:23
      18. Envisioning an Information Ecosystem 00:06:06
      19. Formatting Pages and Content Chunking 00:04:25
      20. Creating Interactions 00:06:40
      21. Media Types 00:04:58
      22. Media Annoyances 00:05:54
      23. Using Graphics 00:05:18
      24. Discuss Best Practices in UX Design 00:05:45
      25. Mobile Best Practices 00:04:41
      26. Desktop Best Practices 00:03:54
      27. Usability 00:06:12
      28. Applying Usability to the Home Page 00:04:26
      29. Wireframe Your Mobile Screen 00:08:49
      30. Wireframe Your Tablet Screen 00:06:45
      31. Wireframe Your Desktop Screen 00:07:24
      32. Wireframe Setup for Prototyping 00:04:23
      33. Flushing Out Your Wireframes 00:04:31
      34. Connecting and Building Your Clickable Prototype 00:10:04
      35. LEAN User Testing 00:05:11
      36. Test Your Prototype 00:03:44
      37. Validate and Iterate Your Prototype 00:06:30
      38. UX Course Review 00:05:13
    4. Chapter 4 : Building a Responsive Website with Bootstrap
      1. Introduction 00:04:51
      2. Downloading and Setting Up Files 00:04:47
      3. Integrating Twitter Bootstrap 00:05:26
      4. Getting Started with LESS 00:06:11
      5. The Home Page Part 1 – Building the Home Page 00:05:43
      6. The Home Page Part 2 – The Slider 00:04:51
      7. The Home Page Part 3 – The Grid 00:05:01
      8. The Home Page Part 4 – Call to Action and Features 00:06:19
      9. Completing the Home Page 00:11:48
      10. Adding Styles – Part 1 00:09:32
      11. Adding Styles – Part 2 00:10:51
      12. Additional Page Types and Styles 00:19:49
      13. Setting Up PHP Includes – Part 1 00:04:06
      14. Setting Up PHP Includes – Part 2 00:06:35
      15. Review our Website 00:04:50
      16. Deploy Our Project 00:05:26