CSS Bootcamp: Master CSS (Including CSS Grid/Flexbox)

Video description

Work through real-world projects and learn how to create modern, responsive websites using CSS Grid and Flexbox

About This Video

  • Explore fundamental CSS and Bootstrap concepts
  • Understand CSS by building fully functional, real-world websites
  • Discover industry best practices and solutions to common roadblocks

In Detail

If you want to learn how to create modern real-world websites using pure CSS, then this is the right course for you.

The course starts by covering CSS essentials. You will then move on to advanced CSS concepts such as transform, backgrounds, transitions, animations, and shadows. After this, you'll learn how to create a layout of your web page using CSS Flexbox. In the next section, you will build your first project - Grand Hotel. It will be a real-world, intuitive web page about hotels created using CSS Flexbox. Later, you will move on to exploring CSS Grid, before finally building another project based on CSS Grid. Each project built throughout the course will be fully compatible across all screen devices.

By the end of this course, you will have developed the skills you need to confidently create responsive websites using CSS Grid and Flexbox.

Who this book is for

This course is for anyone who wants to create modern, responsive websites using CSS Grid and Flexbox. No prior CSS experience is required to get started with this course.

Publisher resources

Download Example Code

Table of contents

  1. Chapter 1 : Welcome
    1. Introduction
    2. Setup
  2. Chapter 2 : CSS Basics
    1. What is CSS?
    2. How to write CSS?
    3. HTML Elements Tree
    4. CSS Selectors
    5. CSS Combinators
    6. CSS Colors
    7. Inheritance
    8. Text Formatting - Part 1
    9. Text Formatting - Part 2
    10. Box Model
    11. Pseudo Classes - Part 1
    12. Pseudo Classes - Part 2
    13. Pseudo Elements
    14. Measurement Units - Part 1
    15. Measurement Units - Part 2
    16. Positions - Part 1
    17. Positions - Part 2
    18. Overflow
    19. Floats
  3. Chapter 3 : Advanced CSS
    1. Backgrounds - Part 1
    2. Backgrounds - Part 2
    3. Gradients
    4. Shadows
    5. Transitions
    6. Transforms - Part 1
    7. Transforms - Part 2
    8. Animations - Part 1
    9. Animations - Part 2
  4. Chapter 4 : Flexbox
    1. What Is Flexbox?
    2. Flex Container Properties
    3. Flex Items Properties
  5. Chapter 5 : Project 1 - Grand Hotel (Based on Flexbox)
    1. Grand Hotel - Project Preview
    2. Sidebar - Markup
    3. Sidebar - Style
    4. Navigation - Markup
    5. Navigation - Style - Part 1
    6. Navigation - Style - Part 2
    7. Create Click Event
    8. Create markup for Header
    9. Header - Style
    10. About Us Section - Markup
    11. About Us Section - Style - Part 1
    12. About Us Section - Style - Part 2
    13. Rooms Section - Markup
    14. Rooms Section - Style
    15. Customers Section - Markup
    16. Customers Section - Style
    17. Footer - Markup
    18. Footer - Style
  6. Chapter 6 : Responsive Web Design
    1. Make "Grand Hotel" Project Responsive - Part 1
    2. Make "Grand Hotel" Project Responsive - Part 2
    3. Make "Grand Hotel" Project Responsive - Part 3
  7. Chapter 7 : CSS Grid
    1. CSS Grid Introduction
    2. Setup
    3. How to Create Grid
    4. Fractional Units
    5. Positioning and Spanning Grid Items
    6. Naming Grid Items - Part 1
    7. Naming Grid Items - Part 2
    8. Naming Grid areas
    9. Explicit and Implicit Grid
    10. Aligning Grid items
    11. Aligning Grid tracks
    12. max-content, min-content, minmax()
    13. auto-fill, auto-fit
  8. Chapter 8 : Project 2 - Furniture Store (Based on CSS Grid)
    1. Furniture Store - Project Preview
    2. Navbar - Part 1 - Markup
    3. Navbar - Part 1 - Style
    4. Navbar - Search Form
    5. Navbar - Part 2 - Markup
    6. Navbar - Part 2 - Style
    7. Navbar - Part 2 - Dropdown
    8. Banner - Markup
    9. Banner - Style
    10. Banner Slideshow - Part 1
    11. Banner Slideshow - Part 2
    12. Day Offer Section
    13. Bestselling Furniture - Markup
    14. Bestselling Furniture - Style
    15. Gallery
    16. Contact Section and Footer
    17. Modal box - Markup
    18. Modal Box - Style - Part 1
    19. Modal Box - Style - Part 2
    20. Make Project Responsive

Product information

  • Title: CSS Bootcamp: Master CSS (Including CSS Grid/Flexbox)
  • Author(s): George Lomidze
  • Release date: March 2020
  • Publisher(s): Packt Publishing
  • ISBN: 9781800202801