Beginning Responsive Web Development with HTML and CSS

Beginning Responsive Web Development with HTML and CSS

English | MP4 | AVC 1920×1080 | AAC 48KHz 2ch | 6h 53m | 1.47 GB

Create websites that provide the best user experience for today’s and tomorrow’s devices

With this course, you can build websites that will transform the user experience. This course begins with the latest techniques provided by HTML5 and CSS3. Along the way, you’ll discover tips and tricks that make your future designs and development workflow leaner and more maintainable than ever before. By the time you reach the end, you’ll be equipped with the latest cutting edge front- end development skills, ready to develop your very own modern, responsive websites that are pixel-perfect across a wide range of devices.

This course perfectly balances theory and exercises. Each module is designed to build on the learnings of the previous lesson. The course contains multiple demos that use real-life business scenarios for you to practice and apply your new skills in a highly relevant context.

What You Will Learn

  • Learn what is a responsive design and its importance in modern web development
  • Fully utilize cleaner, faster, and semantically rich HTML markup
  • Integrate CSS media queries into designs to serve unique styles to audiences
  • Create web forms with built-in validation and interface elements using only HTML
  • Use latest stylistic flourishes with custom fonts, properties, and selectors
  • Use SVGs for resolution independence
Table of Contents

The Essentials of Responsive Web Design
1 Course Overview
2 The Essentials of Responsive Web Design
3 Defining Responsive Web Design
4 Tools and Text Editors
5 First Responsive Example Building a Simple Fluid Layout
6 Taming Images
7 Amending the Example for a Larger Screen
8 Lesson Summary

Media Queries – Supporting Different Viewports
9 Lesson Overview
10 Media Query Syntax
11 Combining Media Queries
12 Using Media Queries to Alter a Design
13 Media Queries Best Practices
14 The Viewport Meta Tag
15 Media Queries Level 4
16 Lesson Summary

Fluid Layouts and Responsive Images
17 Lesson Overview
18 Converting a Fixed Pixel Design to a Fluid Proportional Layout
19 Flexbox
20 Direction Part 1
21 Direction Part 2
22 Alignment
23 Flex Property
24 Changing Source Order
25 Responsive Images
26 Lesson Summary

HTML5 for Responsive Web Designs
27 Lesson Overview
28 HTML5 Markup
29 Semantic HTML5
30 HTML5 Media Elements
31 Lesson Summary

CSS3 – Selectors, Typography, and Color Modes
32 Lesson Overview
33 Introduction to CSS
34 Word Wrapping
35 Facilitating Feature Forks in CSS
36 New CSS3 Selectors and Their Use
37 CSS3 Structural Pseudo-Classes
38 nth Rules
39 More about CSS
40 New CSS3 Color Formats and Alpha Transparency
41 Lesson Summary

Stunning Aesthetics with CSS3
42 Lesson Overview
43 Shadows with CSS3
44 Gradients
45 Adding Fallback for Older Browsers
46 Background Images
47 CSS Filters
48 Lesson Summary

Transitions, Transformations, and Animations
49 Lesson Overview
50 CSS3 Transitions
51 CSS3 2D Transforms
52 CSS3 3D Transformations
53 CSS Animations
54 Lesson Summary

Conquer Forms with HTML5 and CSS3
55 Lesson Overview
56 HTML5 Forms
57 The HTML5 Input Element
58 Styling forms with CSS
59 Lesson Summary

Using SVGs for Resolution Independence
60 Lesson Overview
61 Introducing SVGs
62 Inserting SVGs
63 Extra SVG Capabilities and Oddities
64 Lesson Summary