HTML5 & CSS3 Basics: Build a Beautiful Photo Gallery

ChunLin Wu, Web Front-End Developer | HTML5 | CSS |

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
23 Lessons (1h 23m)
    • 1. Course Introduction

      1:01
    • 2. Environment Setup

      2:10
    • 3. HTML5 Indroduction

      1:00
    • 4. HTML Elements- html / head / title / body

      3:00
    • 5. HTML Elements - Heading / Bold

      4:05
    • 6. HTML Elements - Lists

      2:21
    • 7. HTML Elements - Button / Anchor

      3:00
    • 8. HTML Elements - Image

      1:56
    • 9. HTML Elements - div

      1:44
    • 10. CSS3 Introduction

      1:04
    • 11. CSS - Syntax

      3:46
    • 12. CSS - Selectors

      3:25
    • 13. CSS Property - width / height

      1:58
    • 14. CSS Property - Display

      6:25
    • 15. CSS Property - Position

      9:20
    • 16. CSS - Box Model

      5:46
    • 17. CSS Property - Object-fit

      4:17
    • 18. CSS - Center HTML Elements

      4:24
    • 19. Photo Gallery Project - HTML Structure

      4:23
    • 20. Photo Gallery Project - Hero Image

      7:33
    • 21. Photo Gallery Project - Quote

      2:05
    • 22. Photo Gallery Project - Photo Gallery

      8:01
    • 23. Wrap Up

      0:33

About This Class

In this course, you will learn the basic HTML5 elements and CSS3 properties. 

Basic HTML elements? We got it. Style HTML elements? You will learn it. Center HTML elements? Sure!

Start from the basic HTML5 elements by making a simple version of Wikipedia, and then learning basic CSS3 properties after building the Wikipedia. At the end of this course, you will create a beautiful photo gallery website using those HTML5 & CSS3 skills in this course.

You'll learn:

  • Build the structure of the HTML document
  • Redirect to another website
  • Add images to the webpage
  • Shape the HTML elements
  • Position the HTML elements
  • Shape the images
  • Center the HTML elements

Requirements

  • Any computer can run browsers
  • No coding or design experience necessary
  • Any Text editor or IDE, we’ll use VSCode throughout this course