CSS - The Complete CSS Course - Flexbox / CSS Grid

George Lomidze, Developer / Designer / Online Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
88 Lessons (11h 32m)
    • 1. Promo

      1:33
    • 2. Introduction

      3:31
    • 3. Setup

      5:29
    • 4. What is CSS

      3:17
    • 5. How to write CSS

      9:32
    • 6. HTML Element Tree

      2:03
    • 7. CSS Selectors

      9:00
    • 8. CSS Combinators

      5:09
    • 9. Colors

      5:34
    • 10. Inheritance

      3:18
    • 11. Text Formatting - Part 1

      6:05
    • 12. Text Formatting - Part 2

      9:37
    • 13. Box Model

      12:54
    • 14. Pseudo Clsses - Part 1

      7:28
    • 15. Pseudo Clsses Part 2

      4:00
    • 16. Pseudo Elements

      4:03
    • 17. Measurement Units - Part 1

      6:39
    • 18. Measurement Units - Part 2

      6:24
    • 19. Positions - Part 1

      6:12
    • 20. Positions - Part 2

      8:50
    • 21. Overflow

      3:37
    • 22. Floats

      5:54
    • 23. Backgrounds - Part 1

      12:00
    • 24. Backgrounds - Part 2

      8:20
    • 25. Gradients

      6:33
    • 26. Shadows

      7:56
    • 27. Transitions

      10:14
    • 28. Transforms - Part 1

      7:14
    • 29. Transforms - Part 2

      4:38
    • 30. Animations - Part 1

      7:29
    • 31. Animations - Part 2

      8:24
    • 32. Introduction

      6:18
    • 33. Flex Container Properties

      14:55
    • 34. Flex Item Properties

      9:35
    • 35. Project - Grand Hotel - Overview

      10:19
    • 36. Create HTML Markup for Sidebar

      5:51
    • 37. Add CSS to Sidebar

      11:51
    • 38. Create HTML Markup for Navigation

      6:01
    • 39. Add CSS to Navigation - Part 1

      12:44
    • 40. Add CSS to Navigation - Part 2

      9:52
    • 41. Create Click Event

      10:48
    • 42. Create HTML Markup for Header

      4:02
    • 43. Add CSS to Header

      14:10
    • 44. Create HTML Markup for About US Section

      4:31
    • 45. Add CSS to About Us Section - Part 1

      12:45
    • 46. Add CSS to About Us Section - Part 2

      5:53
    • 47. Create HTML Markup for Rooms Section

      6:33
    • 48. Add CSS to Rooms Section

      12:40
    • 49. Create HTML Markup for Customers Section

      4:16
    • 50. Add CSS to Customers Section

      7:07
    • 51. Create HTML Markup for Footer

      8:45
    • 52. Add CSS to Footer

      14:50
    • 53. Make Project Responsive - Part 1

      7:31
    • 54. Make Grand Hotel Web page Responsive - Part 2

      9:36
    • 55. Make Grand Hotel Web page Responsive Part 3

      12:14
    • 56. CSS Grid Introduction

      4:46
    • 57. Setup

      5:29
    • 58. How to Create Grid

      6:19
    • 59. Fractional Unit

      6:08
    • 60. How to Position Grid Items

      9:27
    • 61. Naming Grid Items - Part 1

      9:28
    • 62. Naming Grid Items - Part 2

      10:02
    • 63. Naming Grid Areas

      5:07
    • 64. Explicit and Implicit Grid

      6:00
    • 65. Aligning Grid Items

      6:20
    • 66. Aligning Grid Tracks

      4:06
    • 67. max-content, min-content, minmax()

      5:06
    • 68. auto-fill and auto-fit

      4:39
    • 69. Project - Furniture Store - Overview

      2:45
    • 70. Create HTML Markup for Navigation(1)

      5:06
    • 71. Add CSS to Navigation(1)

      16:38
    • 72. Navbar Search Input

      6:05
    • 73. Create HTML Markup for Navigation(2)

      5:37
    • 74. Add CSS to Navigation(2)

      10:26
    • 75. Create the Navigation Dropdown

      8:08
    • 76. Create HTML Markup for Banner

      4:26
    • 77. Add CSS to Banner

      11:06
    • 78. Slideshow - Part 1

      6:50
    • 79. Slideshow - Part 2

      6:43
    • 80. Create and Customize the Day Offer Section

      13:00
    • 81. Create HTML Markup for Bestselling Furniture Section

      4:41
    • 82. Add CSS to Bestselling Furniture Section

      9:51
    • 83. Gallery

      10:28
    • 84. Contact and Footer

      9:56
    • 85. Create HTML Markup for Modal Box

      8:15
    • 86. Add CSS to Modal Box - Part 1

      11:52
    • 87. Add CSS to Modal Box - Part 2

      9:45
    • 88. Make Project Responsive

      21:48
23 students are watching this class

About This Class

The Complete CSS Guide on Skillshare

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

INCLUDED:

1. CSS Basics

2. Advanced CSS

3. Flexbox

4. Project 1 - "Grand Hotel" (Based on Flexbox)

5. CSS Grid

6. Project 2 - "Furniture Website" (Based on CSSĀ Grid)

The course consists of several sections. You will start with CSS essentials, in which you will meet some basic topics. Then after finishing the basic part, you will move on to advanced CSS, where you will be able to learn advanced things in CSS, such as backgrounds, transitions, transforms, animations, shadows and much more.

Advanced CSS section will be followed by the CSS Flexbox part, in which you will learn about how to create the layout of your web page using CSS Flexbox. After the Flexbox section, we will build our first project - "Grand Hotel". It will be a real-world, modern-looking and beautiful web page about the hotel. The layout of this project will be fully created using CSS Flexbox.

Next, you will move on to CSS Grid. In which you will learn about this new powerful layout module. And lastly, we will build another big project based on CSS Grid.

Each project built throughout the course will be fully responsive to all screen devices.

Throughout the course, you will meet detailed explanations about how bootstrap works, also, you will introduce to modern practices and solutions.

Get fast and friendly support from the instructor 24/7.

JOIN US!!!