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

Beginning Responsive Web Development with HTML and CSS

Video Description

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

About This Video

  • Covers essential aspects of RWD and front-end development best practices
  • Uses real-world examples to teach HTML5 and CSS3 techniques
  • Perfectly blends theory, hands-on exercises and assessments

In Detail

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. The code files are available at: https://github.com/TrainingByPackt/Beginning-Responsive-Web-Development-with-HTML-and-CSS

Table of Contents

  1. Chapter 1 : The Essentials of Responsive Web Design
    1. Course Overview 00:03:02
    2. The Essentials of Responsive Web Design 00:02:21
    3. Defining Responsive Web Design 00:04:37
    4. Tools and Text Editors 00:06:16
    5. First Responsive Example Building a Simple Fluid Layout 00:04:11
    6. Taming Images 00:08:59
    7. Amending the Example for a Larger Screen 00:07:30
    8. Lesson Summary 00:00:34
  2. Chapter 2 : Media Queries – Supporting Different Viewports
    1. Lesson Overview 00:03:16
    2. Media Query Syntax 00:12:38
    3. Combining Media Queries 00:10:29
    4. Using Media Queries to Alter a Design 00:06:28
    5. Media Queries Best Practices 00:10:22
    6. The Viewport Meta Tag 00:02:36
    7. Media Queries Level 4 00:05:52
    8. Lesson Summary 00:00:26
  3. Chapter 3 : Fluid Layouts and Responsive Images
    1. Lesson Overview 00:03:07
    2. Converting a Fixed Pixel Design to a Fluid Proportional Layout 00:06:23
    3. Flexbox 00:11:24
    4. Direction Part 1 00:04:14
    5. Direction Part 2 00:04:46
    6. Alignment 00:05:26
    7. Flex Property 00:09:38
    8. Changing Source Order 00:03:25
    9. Responsive Images 00:12:43
    10. Lesson Summary 00:00:43
  4. Chapter 4 : HTML5 for Responsive Web Designs
    1. Lesson Overview 00:02:00
    2. HTML5 Markup 00:07:41
    3. Semantic HTML5 00:14:03
    4. HTML5 Media Elements 00:07:56
    5. Lesson Summary 00:00:20
  5. Chapter 5 : CSS3 – Selectors, Typography, and Color Modes
    1. Lesson Overview 00:03:04
    2. Introduction to CSS 00:06:31
    3. Word Wrapping 00:07:24
    4. Facilitating Feature Forks in CSS 00:10:03
    5. New CSS3 Selectors and Their Use 00:07:24
    6. CSS3 Structural Pseudo-Classes 00:07:03
    7. nth Rules 00:10:30
    8. More about CSS 00:13:51
    9. New CSS3 Color Formats and Alpha Transparency 00:08:38
    10. Lesson Summary 00:00:53
  6. Chapter 6 : Stunning Aesthetics with CSS3
    1. Lesson Overview 00:02:38
    2. Shadows with CSS3 00:06:16
    3. Gradients 00:06:18
    4. Adding Fallback for Older Browsers 00:10:18
    5. Background Images 00:08:15
    6. CSS Filters 00:06:41
    7. Lesson Summary 00:00:32
  7. Chapter 7 : Transitions, Transformations, and Animations
    1. Lesson Overview 00:02:58
    2. CSS3 Transitions 00:12:04
    3. CSS3 2D Transforms 00:11:17
    4. CSS3 3D Transformations 00:02:20
    5. CSS Animations 00:10:35
    6. Lesson Summary 00:00:40
  8. Chapter 8 : Conquer Forms with HTML5 and CSS3
    1. Lesson Overview 00:01:41
    2. HTML5 Forms 00:11:06
    3. The HTML5 Input Element 00:16:45
    4. Styling forms with CSS 00:05:16
    5. Lesson Summary 00:00:24
  9. Chapter 9 : Using SVGs for Resolution Independence
    1. Lesson Overview 00:03:11
    2. Introducing SVGs 00:10:50
    3. Inserting SVGs 00:13:33
    4. Extra SVG Capabilities and Oddities 00:10:30
    5. Lesson Summary 00:00:56