Description

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

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. All resources can be found here: https://github.com/PacktPublishing/CSS-Bootcamp-Master-CSS-Including-CSS-Grid-Flexbox-

What You Will Learn

Understand how to create the layout of your web page using CSS Flexbox
Align elements using modern CSS Flexbox and CSS Grid modules
Build fully responsive websites that work across different screen devices

Audience

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.

Approach

This practical course is divided into organized sections so you can learn at your own pace and focus on building modern, responsive websites using pure CSS.

Key Features

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

Github Repo

https://github.com/PacktPublishing/CSS-Bootcamp-Master-CSS-Including-CSS-Grid-Flexbox-

About the Author

George Lomidze

George Lomidze is a full-stack web developer/designer, co-founder at 'Code and Create', and an author of several best-selling courses on Udemy. He is excited that he has a chance to help people learn one of the most interesting and hottest fields in the world. He specializes in the following technologies: HTML, CSS, SASS, Bootstrap, JavaScript, React, React Native, NodeJS, MongoDB, Express, and many more. He is looking forward to seeing you follow his courses and helping you become a professional web developer. He is also the founder of MicroGrinder Poker School, an online poker school dedicated to micro stakes poker players, where he provides a wide array of free and low-cost poker resources and poker training, including poker strategy articles and poker training videos series. He is also the Amazon #1 best-selling author of Essential Poker Math, Expanded Edition.

Course Outline

1. Welcome

1. Introduction

Welcome: Introduction

2. Setup

Welcome: Setup

2. CSS Basics

1. What is CSS?

CSS Basics: What is CSS?

2. How to write CSS?

CSS Basics: How to write CSS?

3. HTML Elements Tree

CSS Basics: HTML Elements Tree

4. CSS Selectors

CSS Basics: CSS Selectors

5. CSS Combinators

CSS Basics: CSS Combinators

6. CSS Colors

CSS Basics: CSS Colors

7. Inheritance

CSS Basics: Inheritance

8. Text Formatting - Part 1

CSS Basics: Text Formatting - Part 1

9. Text Formatting - Part 2

CSS Basics: Text Formatting - Part 2

10. Box Model

CSS Basics: Box Model

11. Pseudo Classes - Part 1

CSS Basics: Pseudo Classes - Part 1

12. Pseudo Classes - Part 2

CSS Basics: Pseudo Classes - Part 2

13. Pseudo Elements

CSS Basics: Pseudo Elements

14. Measurement Units - Part 1

CSS Basics: Measurement Units - Part 1

15. Measurement Units - Part 2

CSS Basics: Measurement Units - Part 2

16. Positions - Part 1

CSS Basics: Positions - Part 1

17. Positions - Part 2

CSS Basics: Positions - Part 2

18. Overflow

CSS Basics: Overflow

19. Floats

CSS Basics: Floats

3. Advanced CSS

1. Backgrounds - Part 1

Advanced CSS: Backgrounds - Part 1

2. Backgrounds - Part 2

Advanced CSS: Backgrounds - Part 2

3. Gradients

Advanced CSS: Gradients

4. Shadows

Advanced CSS: Shadows

5. Transitions

Advanced CSS: Transitions

6. Transforms - Part 1

Advanced CSS: Transforms - Part 1

7. Transforms - Part 2

Advanced CSS: Transforms - Part 2

8. Animations - Part 1

Advanced CSS: Animations - Part 1

9. Animations - Part 2

Advanced CSS: Animations - Part 2

4. Flexbox

1. What Is Flexbox?

Flexbox: What Is Flexbox?

2. Flex Container Properties

Flexbox: Flex Container Properties

3. Flex Items Properties

Flexbox: Flex Items Properties

5. Project 1 - Grand Hotel (Based on Flexbox)

1. Grand Hotel - Project Preview

Project 1 - Grand Hotel (Based on Flexbox): Grand Hotel - Project Preview

2. Sidebar - Markup

Project 1 - Grand Hotel (Based on Flexbox): Sidebar - Markup

3. Sidebar - Style

Project 1 - Grand Hotel (Based on Flexbox): Sidebar - Style

4. Navigation - Markup

Project 1 - Grand Hotel (Based on Flexbox): Navigation - Markup

5. Navigation - Style - Part 1

Project 1 - Grand Hotel (Based on Flexbox): Navigation - Style - Part 1

6. Navigation - Style - Part 2

Project 1 - Grand Hotel (Based on Flexbox): Navigation - Style - Part 2

7. Create Click Event

Project 1 - Grand Hotel (Based on Flexbox): Create Click Event

8. Create markup for Header

Project 1 - Grand Hotel (Based on Flexbox): Create markup for Header

9. Header - Style

Project 1 - Grand Hotel (Based on Flexbox): Header - Style

10. About Us Section - Markup

Project 1 - Grand Hotel (Based on Flexbox): About Us Section - Markup

11. About Us Section - Style - Part 1

Project 1 - Grand Hotel (Based on Flexbox): About Us Section - Style - Part 1

12. About Us Section - Style - Part 2

Project 1 - Grand Hotel (Based on Flexbox): About Us Section - Style - Part 2

13. Rooms Section - Markup

Project 1 - Grand Hotel (Based on Flexbox): Rooms Section - Markup

14. Rooms Section - Style

Project 1 - Grand Hotel (Based on Flexbox): Rooms Section - Style

15. Customers Section - Markup

Project 1 - Grand Hotel (Based on Flexbox): Customers Section - Markup

16. Customers Section - Style

Project 1 - Grand Hotel (Based on Flexbox): Customers Section - Style

17. Footer - Markup

Project 1 - Grand Hotel (Based on Flexbox): Footer - Markup

18. Footer - Style

Project 1 - Grand Hotel (Based on Flexbox): Footer - Style

6. Responsive Web Design

1. Make "Grand Hotel" Project Responsive - Part 1

Responsive Web Design: Make "Grand Hotel" Project Responsive - Part 1

2. Make "Grand Hotel" Project Responsive - Part 2

Responsive Web Design: Make "Grand Hotel" Project Responsive - Part 2

3. Make "Grand Hotel" Project Responsive - Part 3

Responsive Web Design: Make "Grand Hotel" Project Responsive - Part 3

7. CSS Grid

1. CSS Grid Introduction

CSS Grid: CSS Grid Introduction

2. Setup

CSS Grid: Setup

3. How to Create Grid

CSS Grid: How to Create Grid

4. Fractional Units

CSS Grid: Fractional Units

5. Positioning and Spanning Grid Items

CSS Grid: Positioning and Spanning Grid Items

6. Naming Grid Items - Part 1

CSS Grid: Naming Grid Items - Part 1

7. Naming Grid Items - Part 2

CSS Grid: Naming Grid Items - Part 2

8. Naming Grid areas

CSS Grid: Naming Grid areas

9. Explicit and Implicit Grid

CSS Grid: Explicit and Implicit Grid

10. Aligning Grid items

CSS Grid: Aligning Grid items

11. Aligning Grid tracks

CSS Grid: Aligning Grid tracks

12. max-content, min-content, minmax()

CSS Grid: max-content, min-content, minmax()

13. auto-fill, auto-fit

CSS Grid: auto-fill, auto-fit

8. Project 2 - Furniture Store (Based on CSS Grid)

1. Furniture Store - Project Preview

Project 2 - Furniture Store (Based on CSS Grid): Furniture Store - Project Preview

2. Navbar - Part 1 - Markup

Project 2 - Furniture Store (Based on CSS Grid): Navbar - Part 1 - Markup

3. Navbar - Part 1 - Style

Project 2 - Furniture Store (Based on CSS Grid): Navbar - Part 1 - Style

4. Navbar - Search Form

Project 2 - Furniture Store (Based on CSS Grid): Navbar - Search Form

5. Navbar - Part 2 - Markup

Project 2 - Furniture Store (Based on CSS Grid): Navbar - Part 2 - Markup

6. Navbar - Part 2 - Style

Project 2 - Furniture Store (Based on CSS Grid): Navbar - Part 2 - Style

7. Navbar - Part 2 - Dropdown

Project 2 - Furniture Store (Based on CSS Grid): Navbar - Part 2 - Dropdown

8. Banner - Markup

Project 2 - Furniture Store (Based on CSS Grid): Banner - Markup

9. Banner - Style

Project 2 - Furniture Store (Based on CSS Grid): Banner - Style

10. Banner Slideshow - Part 1

Project 2 - Furniture Store (Based on CSS Grid): Banner Slideshow - Part 1

11. Banner Slideshow - Part 2

Project 2 - Furniture Store (Based on CSS Grid): Banner Slideshow - Part 2

12. Day Offer Section

Project 2 - Furniture Store (Based on CSS Grid): Day Offer Section

13. Bestselling Furniture - Markup

Project 2 - Furniture Store (Based on CSS Grid): Bestselling Furniture - Markup

14. Bestselling Furniture - Style

Project 2 - Furniture Store (Based on CSS Grid): Bestselling Furniture - Style

15. Gallery

Project 2 - Furniture Store (Based on CSS Grid): Gallery

16. Contact Section and Footer

Project 2 - Furniture Store (Based on CSS Grid): Contact Section and Footer

17. Modal box - Markup

Project 2 - Furniture Store (Based on CSS Grid): Modal box - Markup

18. Modal Box - Style - Part 1

Project 2 - Furniture Store (Based on CSS Grid): Modal Box - Style - Part 1

19. Modal Box - Style - Part 2

Project 2 - Furniture Store (Based on CSS Grid): Modal Box - Style - Part 2

20. Make Project Responsive

Project 2 - Furniture Store (Based on CSS Grid): Make Project Responsive

Course Images

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

By Packt

Booking options

Highlights