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

Build Real World Websites from Scratch using HTML5 and CSS3

Video Description

Learn HTML5 and CSS3 from scratch. Learn both the basics and advanced concepts and confidently build real-life projects

About This Video

  • At the end of the course, you will use your web development skills to build a mathematics tutorial website to a highly professional degree.
  • You will design it, code it, validate it, and ultimately launch it online and share it with the whole world.
  • This course is perfect for anyone with no coding experience, or who knows some HTML and CSS but would like to learn advanced concepts and confidently build full websites from scratch.

In Detail

This an engaging course, that makes your learning experience fun and exciting while you are acquiring precious skills that will prepare you to become one of the most sought after professionals in the web development market. First of all, you are going to understand the structure of a web page. Then you will setup your free web hosting which comes as a bonus with this course. After that, you will move to HTML5 and learn the components that build up the skeleton of a web page; you will cover various concepts to a detailed level: paragraph, links, forms, iframes, and so on. Then, you will move to CSS3 and learn how to add professional decoration and styling to your websites, you will also be introduced to advanced skills like CSS3 transitions and animations.

Table of Contents

  1. Chapter 1 : Introduction - Get your free Web Hosting – HTML
    1. Introduction 00:01:55
    2. Structure of a website 00:09:23
    3. Your first website 00:05:40
    4. Get your free web hosting 00:06:33
    5. Set up FireFTP 00:08:23
    6. Headings 00:04:56
    7. Paragraphs 00:02:31
    8. Links 00:07:49
    9. Images 00:04:41
    10. Inline vs Block Elements 00:05:54
    11. Iframes - Activity: Embed a nice relaxing YouTube video to your website 00:05:42
    12. Unordered Lists 00:03:02
    13. Ordered Lists 00:02:09
    14. Description Lists 00:02:19
    15. Tables 00:03:55
    16. Entities 00:05:07
    17. Forms (1) - Activity: Create a simple Login Form 00:08:02
    18. Forms (2) - Activity: Create a Marketplace Checkout Form 00:20:00
    19. Text Decoration 00:03:59
    20. Comments 00:02:25
  2. Chapter 2 : CSS
    1. Introduction 00:01:11
    2. Inline CSS 00:02:26
    3. Internal CSS 00:02:26
    4. External CSS 00:02:33
    5. Classes and IDs 00:02:45
    6. Div and Span 00:07:26
    7. Box Model 00:02:57
    8. Box Model Padding 00:04:26
    9. Box Model: Border 00:05:49
    10. Box Model: Outline 00:01:52
    11. Box Model: Margin 00:02:28
    12. Background 00:07:48
    13. Floating 00:04:37
    14. Positioning 00:06:21
    15. Display 00:03:00
    16. Text Decoration 00:05:01
    17. Text Align 00:01:58
    18. Text Font 00:03:50
    19. Text Effects 00:07:53
    20. Image Sprites 00:05:30
    21. Image Opacity 00:02:57
    22. Styling Lists 00:07:43
    23. Styling Links 00:07:08
    24. Gradients 00:10:07
    25. 2D Transforms 00:06:22
    26. 3D Transforms 00:04:53
    27. Transitions 00:04:54
    28. Animations 00:08:57
  3. Chapter 3 : Professional Project: Mathematics Tutorials Website (HTML & CSS)
    1. Introduction 00:02:23
    2. Header (1) 00:17:47
    3. Header (2) 00:16:42
    4. Menu 00:18:22
    5. Introduction Box 00:07:04
    6. Sidebars (1) 00:19:46
    7. Sidebars (2) 00:08:38
    8. Footer & Congratulations 00:10:04