Real-World Web Design

Real-World Web Design
Real-World Web Design
English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 10h 17m | 2.47 GB

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

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.

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)
Table of Contents

Responsive Web Design – From Concept to Complete Site
1.Exploring Responsive Web Design (RWD)
2.Understanding the Use of RWD
3.Examples of Adaptive Layouts
4.Device Breakpoints
5.Pros-Cons of RWD
6.Course Overview
7.Fluid Width Layouts
8.Working with Percent Width Layouts
9.Examples of Fluid Layouts
10.Media Queries
11.Media Query Code
12.Testing a Simple Media Query
13.Best Practices for Media Queries
14.Testing Media Queries on Actual Mobile Devices
15.Using RWD Demo Files
16.Using Sample Files
17.Overview of the HTML Structure for the Demo Site
18.CSS Resets and HTML5
19.HTML for Container, Header, and Navigation
20.HTML for a four Column Content Area
21.HTML for a two Column Footer
22.Using Demo CSS for our Site
23.Writing the CSS for the Navigation Bar and Logo
24.Building the CSS for Navigation and its Elements
25.Tweaking the Navigation Using the Inspect Element
26.Formatting the Header
27.Styling the Columns
28.Formatting Headings and Images in the Columns
29.Formatting the Footer
30.Tweaks and Fixes to the Body Layout
31.Planning for Media Queries
32.Tablet Media Query for the Body
33.Using Media Query for the Navigation Bar and Logo
34.Using Media Query for the Navigation Bar and Logo for Devices Smaller Than the Tablet
35.Using Media Query for Columns to Reorient Horizontally
36.More on Column Queries and Footer
37.Final Tweaks for Phone-Sized Devices
38.Advanced Features-Considerations
39.Dealing with Font Size EMs
40.Using Percent-Based Fonts and Dealing with Problems with EMs and Percent
41.Demo of EM and Percent-Based Font Sizes
42.Solution to Issues with REMs
43.Future Considerations- VM, VH, VMAX, and VMIN
44.Current Solutions to Text Size Issues and Responsive Background Images
45.Using Background Images, Adaptive Images, and Bandwidth
46.Responsive Grids
47.CSS Pre-processors

Responsive Web Design: Advancing your Design to the Modern Web
48.The Course Overview
49.What Are Media Queries
50.Media Queries -Hello World-
51.Media Queries Within a CSS File with the @media Rule
52.Media Query Rule Combination
53.What Is Responsive Design
54.Optimizing for a Specific Device
55.Creating Responsive Designs with Size Ranges
56.Mobile Responsiveness
57.Backward Compatibility
58.Thinking Fluid
59.Creating a Site That Responds to Itself
60.Optimizing Based on Device Resolution
61.Designing by Aspect Ratio
62.Talking about Color and Grids
63.What Are Responsive Frameworks
64.The Twitter Bootstrap
65.Understanding the Twitter Bootstrap CSS Rules
66.Adding Components
67.An Example of a Grid Layout
68.Changing Themes with LESS
69.The Future of Media Types
70.Moving into Media Features
71.Creating Custom Media Queries
72.Media Query Operators
73.Working with Media Query Ranges

UX Design for Web Developers
75.UX Design Fundamentals
76.Fundamentals of Building a Website
77.Essentials of Human-centered Design
78.Empathy Mapping
79.Problem Definition- User Flows, Decision Tress, and Screen Flows
80.Intervention Planning
81.Understanding the Need for Structure
82.Structure and Information Architecture
83.The Essential Elements
84.Design Patterns – Don-t Reinvent the Wheel
85.SERPS as Home Pages and Location-free Browsing
86.Landing Pages, Templates, and Page Clustering
87.Responsive Web Design
88.Wireframing
89.Building Your Setup
90.Home Page Wireframes
91.Envisioning an Information Ecosystem
92.Formatting Pages and Content Chunking
93.Creating Interactions
94.Media Types
95.Media Annoyances
96.Using Graphics
97.Discuss Best Practices in UX Design
98.Mobile Best Practices
99.Desktop Best Practices
100.Usability
101.Applying Usability to the Home Page
102.Wireframe Your Mobile Screen
103.Wireframe Your Tablet Screen
104.Wireframe Your Desktop Screen
105.Wireframe Setup for Prototyping
106.Flushing Out Your Wireframes
107.Connecting and Building Your Clickable Prototype
108.LEAN User Testing
109.Test Your Prototype
110.Validate and Iterate Your Prototype
111.UX Course Review

Building a Responsive Website with Bootstrap
112.Introduction
113.Downloading and Setting Up Files
114.Integrating Twitter Bootstrap
115.Getting Started with LESS
116.The Home Page Part 1 – Building the Home Page
117.The Home Page Part 2 – The Slider
118.The Home Page Part 3 – The Grid
119.The Home Page Part 4 – Call to Action and Features
120.Completing the Home Page
121.Adding Styles – Part 1
122.Adding Styles – Part 2
123.Additional Page Types and Styles
124.Setting Up PHP Includes – Part 1
125.Setting Up PHP Includes – Part 2
126.Review our Website
127.Deploy Our Project

part 1 files 1-50
part 2 files 51-68
part 3 files 69-92
part 4 files 93-115
part 5 files 116-126