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

Modern Web Development with HTML5 and CSS

Video Description

In this Modern Web Development with HTML5 and CSS training course, expert author Rachel Andrew will teach you about modern HTML5 and CSS, showing you how to style content and build simple, responsive layouts. This course is designed for the absolute beginner, meaning no prior experience with HTML or CSS is required.

You will start by learning the basics of developing for the web, then jump into HTML fundamentals, such as HTML Syntax, the Doctype, links, images, and validation. From there, Rachel teaches you about structural HTML, CSS fundamentals, text and typography, and color and images. This video tutorial also covers how to layout with CSS, forms in HTML and CSS, and HTML5 audio and video. Finally, you will learn about responsive design, as well as browser and device testing and how to fix problems and ensure accessibility.

Once you have completed this computer based training course, you will be fully capable of using HTML5 and CSS to develop your own responsive layouts. Working files are included, allowing you to follow along with the author throughout the lessons.

Table of Contents

  1. Introduction
    1. HTML5 And CSS - An Introduction To Modern Web Development 00:02:10
    2. About The Author 00:01:32
    3. Overview Of The Course 00:02:04
    4. How To Access Your Working Files 00:01:15
  2. The Basics Of Developing For The Web
    1. Setting Up Your Workspace 00:01:27
    2. A Simple HTML Document 00:01:53
    3. The Basic Structure Of A Website 00:01:33
    4. Moving Files From Your Computer To A Webserver 00:01:55
  3. HTML Fundamentals
    1. What Is HTML? 00:02:05
    2. HTML Syntax 00:02:22
    3. The Doctype 00:01:13
    4. The Document Head 00:02:50
    5. The Document Body 00:00:59
    6. Understanding Block And Inline Elements 00:02:11
    7. Paragraphs And Line Breaks 00:01:26
    8. Div And Span 00:01:49
    9. Links 00:02:29
    10. Images 00:02:33
    11. Basic Lists 00:01:50
    12. Lists Of Lists 00:01:17
    13. Tables 00:01:53
    14. Validation 00:03:05
  4. Structural HTML
    1. Understanding Document Structure In HTML 00:02:11
    2. Quotes 00:01:21
    3. Articles 00:01:34
    4. Navigation 00:01:03
    5. Figures 00:01:44
    6. Sections 00:01:43
    7. Headers And Footers 00:02:02
    8. Aside 00:01:31
  5. CSS Fundamentals
    1. What Is CSS? 00:01:54
    2. Adding CSS To An HTML Document 00:02:03
    3. Basic CSS Selectors 00:03:16
    4. Grouping CSS Selectors 00:01:09
    5. Using Shorthand 00:01:19
    6. CSS Units 00:03:25
    7. Color In CSS 00:01:47
    8. The Cascade 00:03:30
  6. Text And Typography
    1. Understanding Web Typography 00:03:19
    2. Text Size 00:05:31
    3. Text Weight And Style 00:02:12
    4. Using Fonts 00:03:54
    5. Pseudo-Class Selectors 00:01:45
    6. Styling Links 00:02:01
    7. Dynamic Pseudo-Class Selectors - The Hover State 00:01:28
  7. Color And Images
    1. Background Color In CSS 00:02:38
    2. Adding A Background Image To A Page 00:03:17
    3. Using Background Images On Other Elements 00:01:59
    4. Styling A Blockquote With Multiple Background Images 00:01:49
    5. Gradients With CSS 00:03:48
    6. Shadows In CSS 00:01:58
    7. Opacity And Transparency 00:01:40
  8. Layout With CSS
    1. The CSS Layout Model 00:02:23
    2. Margins And Padding 00:02:56
    3. Borders 00:02:49
    4. Absolute Positioning 00:03:10
    5. Relative Positioning 00:01:06
    6. The Basics Of Float 00:01:57
    7. Clearing Floats 00:03:09
    8. Building A Simple, Floated Layout 00:05:09
    9. Styling The Navigation Sidebar 00:02:32
    10. Styling The Page Header 00:03:39
    11. Styling The Page Footer 00:02:13
  9. Forms In HTML And CSS
    1. Understanding The Role Of Forms On The Web 00:01:52
    2. The Form Element 00:01:10
    3. The Input Element 00:03:20
    4. Form Labels 00:01:35
    5. Text Areas 00:01:30
    6. Buttons 00:01:19
    7. File Input Fields 00:01:57
    8. Hidden Fields 00:01:17
    9. Checkboxes And Radio Buttons 00:02:24
    10. Select Lists 00:02:44
    11. Fieldsets And Legends 00:01:57
    12. Laying Out A Simple Form 00:03:29
    13. Styling Our Form With CSS 00:02:48
    14. Advanced Form Styling Tips 00:04:13
  10. HTML5 Audio And Video
    1. The Audio Element 00:02:10
    2. The Video Element 00:02:51
    3. Providing Fallbacks For Older Browsers 00:03:54
  11. Understanding Responsive Design
    1. What Is Responsive Design? 00:02:04
    2. Media Queries 00:02:24
    3. Images In Responsive Design 00:01:35
    4. A Simple Layout With Three Breakpoints 00:04:33
  12. Browser And Device Testing - Fixing Problems And Ensuring Accessibility
    1. Testing Different Platforms 00:03:14
    2. Debugging CSS Problems 00:02:57
    3. Accessibility Tips 00:02:37
    4. Common Problems When Making Websites Live 00:02:02
    5. Resources And Where To Get Help 00:01:57