Build Real-World Websites Using HTML5, CSS3, Flexbox, Grid, and Sass

Build Real-World Websites Using HTML5, CSS3, Flexbox, Grid, and Sass

by Development Island
Released October 2022
Publisher(s): Packt Publishing
ISBN: 9781789343632

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Video description

HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript to build responsive websites and become a professional web developer.

First, you are going to understand the structure of a web page. Then you will set up 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: paragraphs, links, forms, iframes, and so on. Then, you will move on to CSS3 and learn how to add professional decoration and styling to your websites; you will also be introduced to advanced skills such as CSS3 transitions and animations.

You will also be building a professional website using HTML and CSS, which will help you understand how to create a menu and header for the website. You will wrap up the course by exploring advanced CSS with Flexbox, Grid, and Sass and learning the features and functions used in Sass. Understand concepts such as how to align and resize Flex items and Flex lines toward the end.

By the end of the course, you will be able to design, code, and publish a real-world website.

What You Will Learn

  • Understand the structure of a website
  • Learn the process of embedding an external video into a website
  • Create a simple login form using HTML
  • Explore the various types of CSS positioning
  • Learn how to align items inside Flexbox
  • Create a fully responsive photo gallery using CSS

Audience

This course is for people with no development knowledge or experience. This course is also for people with some knowledge of HTML and CSS who want to learn new advanced skills and enrich their portfolio with full professional projects.

About The Author

Development Island (UK): Issam Baou is the founder and director of Development Island based in Bedford, United Kingdom, and is specialized in providing the best technology courses on the Internet. He has two master’s degrees in engineering and management from Cranfield University (UK) and Ecole Centrale Paris. He has worked for many world-class companies in the past, including Amadeus, Ford, and Airbus, in different roles including web development, consulting, simulation, and teaching. He has a solid and successful track record of teaching mathematics and web development.

Table of contents

  1. Chapter 1 : Introduction - Get Your Free Unlimited Web Hosting - HTML
    1. Introduction
    2. Structure of a Website
    3. Your First Website
    4. Get Your Free Unlimited Web Hosting
    5. Share Your Website with the World
    6. Share Your Website with the World - Cyberduck Version
    7. Share Your Website with the World - FileZilla Version
    8. Headings
    9. Paragraphs
    10. Links
    11. Images
    12. Inline Versus Block Elements
    13. iframes - Activity: Embed a Nice Relaxing YouTube Video to Your Website
    14. Unordered Lists
    15. Ordered Lists
    16. Description Lists
    17. Tables
    18. Entities
    19. Forms Part 1 - Activity: Create a Simple Login Form
    20. Forms Part 2 - Activity: Create a Marketplace Checkout Form
    21. Text Decoration
    22. Comments
  2. Chapter 2 : CSS
    1. Introduction
    2. Inline CSS
    3. Internal CSS
    4. External CSS
    5. Classes and IDs
    6. Div and Span
    7. Box Model
    8. Box Model Padding
    9. Box Model: Border
    10. Box Model: Outline
    11. Box Model: Margin
    12. Background
    13. Floating
    14. Positioning
    15. Display
    16. Text Decoration
    17. Text Align
    18. Text Font
    19. Text Effects
    20. Image Sprites
    21. Image Opacity
    22. Styling Lists
    23. Styling Links
    24. Gradients
    25. 2D Transforms
    26. 3D Transforms
    27. Transitions
    28. Animations
  3. Chapter 3 : Professional Project: Mathematics Tutorials Website (HTML and CSS)
    1. Introduction
    2. Header – Part 1
    3. Header – Part 2
    4. Menu
    5. Introduction Box
    6. Sidebars – Part 1
    7. Sidebars – Part 2
    8. Footer and Congratulations
  4. Chapter 4 : Advanced CSS with Flexbox, Grid, and Sass
    1. Flexbox: Introduction
    2. Flexbox: Basic Flexbox
    3. Flexbox: Align Flex Items
    4. Flexbox: Align Flex Lines
    5. Flexbox: Resize Flex Items – Part 1
    6. Flexbox: Resize Flex Items – Part 2
    7. Flexbox Application: Photo Gallery – Part 1
    8. Flexbox Application: Photo Gallery – Part 2
    9. Flexbox Application: Amazon Checkout – Part 1
    10. Flexbox Application: Amazon Checkout – Part 2
    11. Flexbox Application: Amazon Checkout – Part 3
    12. Flexbox Application: Math Website – Part 1
    13. Flexbox Application: Math Website – Part 2
    14. Flexbox Application: Math Website – Part 3
    15. CSS Grid: Introduction and Basic Grid Template
    16. CSS Grid: Implicit Versus Explicit Grid
    17. CSS Grid: Grid Areas and Responsive Design
    18. CSS Grid: Master the "grid-column" Property
    19. CSS Grid: Grid Coordinates
    20. CSS Grid: Align Grid Items
    21. CSS Grid Application: Photo Gallery
    22. CSS Grid Application: Picture Grid
    23. Sass: Introduction - Installation - Nesting Syntax
    24. Sass: .scss Versus .sass - Variables
    25. Sass: @import and @extend Directives
    26. Sass: Mixins - Operators - Functions

Product information

  • Title: Build Real-World Websites Using HTML5, CSS3, Flexbox, Grid, and Sass
  • Author(s): Development Island
  • Release date: October 2022
  • Publisher(s): Packt Publishing
  • ISBN: 9781789343632