CSS - The Complete CSS Course - Flexbox / CSS Grid | George Lomidze | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

CSS - The Complete CSS Course - Flexbox / CSS Grid

teacher avatar George Lomidze, Developer / Designer / Online Teacher

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

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
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

947

Students

3

Projects

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!!!

Meet Your Teacher

Teacher Profile Image

George Lomidze

Developer / Designer / Online Teacher

Teacher

Hi,

I'm George, a full-stack Web Developer / Designer, Co-Founder of 'Code And Create' and an author of several classes on Skillshare.

I'm excited that I'm here and have a chance to help people to learn one of the most interesting and powerful fields today.

I decided to share my knowledge and experience with the world and that's the main reason why I'm here at Skillshare.

I'm specialized in the following technologies: HTML, CSS, SASS, Bootstrap, JavaScript, jQuery, React, React Native, NodeJS, Git, and more...

Looking forward to seeing you inside my classes and help you to become a professional web developer.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Promo : 2. Introduction: if you want to learn how to create real world, modern and beautiful websites that you've come to right place. Welcome to CSS. Put Come master in CSS Hi, I'm George and this is Russia, where the creators and designers of this course with several years of experience in web development, Web design and teaching as well courses project based because we think that creating projects is the best way to learn CSS, which is one of the most popular and widely used technology today. So if it's your first steps in the development of design or give you all of the have some experience in it, then I think this course will make even fatter front and about because we will cover all the things from basic to advanced. Level course consists of several sections school start from CSS essentials. So if you already have some knowledge about basics of CSS, then you can go straight to advanced C s, a section in which you will make things like backgrounds, transitions, transports, animations and much more after completing advanced. Yes, a section will move forward and learn about one dimensional CSS layoff module, which is flax books. Once you will be confident in advance CSS and Flax books. Then we will start building our first project, which is going to be website about Hotel called Hotel Project will consist of several sections will have nice navigation with 100 menu header, followed by about a section. Then we will have nice carts describing different types of rooms and pulled out after room section will build section about customers of hotel and lastly, we'll have a nice looking foot layout off. Entire project will be created using flax books and also all of these things that you have to see will be done using pure CSS. After completing, first project will move on to next section, which will be dedicated to two dimensional CSS layout model called CSS Great. It's getting more and more popular today and for now it's almost fully supported by all modern eyebrows. So you will get deep understanding regarding CSS great and after that you'll be able to build your second project, which will be furniture store. It will consist of several sections as well. We will build nice and kind of complex Melbourne with model box and also with nice drop down menu. Next will have slideshow with controls. Slideshow would be followed by a couple of interesting sections with nice images, cards that we will have gallery, simple form and food. Lay out of this project will be created mostly by CSS quit, but we will use flex books for a couple of times as well. Each build project will be full of responsive for all devices, so you will get your hands dirty and responsive Web design. Throughout the course. You'll make detailed explanations about how CSS works. Also, you will introduce to modern practices and solutions during watching lectures. If they haven't questioned, you can feel free and rich of any time you need. You will get fussed and helpful support from instructs. All right, let's get started. 3. Setup: all right, it's time to start creating our first greed. But before we actually do that, at first I'm going to note that in this section, instead of Google Chrome, we will use different browser, which is Mozilla far folks. I'm going to use it because this browser has the best developer tools for CS is great. It will L. A wants to explain how CSS good works in much better and simpler way. Actually, Muslim Far folks is not good for only since is great, but it also is one of the best browsers for developers and not on the for developers. I think you may have already installed it, but if not, let's go ahead and carrot. That's type here. Mozilla Fire folks, then go to the first link. So here we have a website called Mozilla dot or in order to get this brother unity click on download now and then instant. Actually, I have already insult this brother, and also it's very simple process, so I'm not going to go through it all right. Once we're done with installing Muslim far folks, I'm going to launch our HTML file with Life Server, actually, in previous sections we used Google Chrome as a default browser. So if you run file with life several than it might be opened in Google Chrome again in order to avoid it. Unit either to change default browser from PC settings. If you use Mark, then you have to change the full product from its settings as well. All you can just launch file in Google Chrome, then simply copy he Worrell and Paste 18 Muslim Firefox, and then you'll be able to use light sever. If you don't use like several, then you don't have to change default browser. You can simply click on open in other brothers and then choose Mozilla Firefox. All right, I hope you already run filing Muslim far folks. And now the next thing that I want to do is to create markup in HTML. For that, I'm going to use Amit. So at first, let's create container than inside container. We're going to have six boxes, so each off them will have common class item and also for individual styles. I'm going to assign to it second class with proper number. And for that as remember, we need to use a dollar sign as I contents. I want to use item with proper number. So for that we need to open curly braces, then right, item with space and again use your dollar sign. Actually, we will have six items, so we need to use your star and then six. So here we have six items with proper classes and proper content. All right, let's go ahead and give some stuffs for container. And for each item, let's select at first container. I'm going to define its with, Let's say, as 800 pixels as a background color. I'm going to use light gray so right D D d also creates on space of the top and bottom and place container in the center off page. For that, we have to use margin with the values on top and bottom fourth fixes and left and right arrow. All right. As for container were done next, I want to give themselves for items. I mean, I want to use some common styles for each item. Therefore, let's select item. First of all, I want to make some parting on all four sites. Let's say 30 pixels that increased phone size make it 30 peaks. This as well and also change color of text. Make it white All right. After that I want to assign to each individual item different background color. So let's go ahead and select item one. Then use background color property. And before I choose here color. Let's duplicate it five times for the first item, I'm going to use orange red. Therefore 2nd 1 right all the drab that for next one. Let's use Royal Blue for Fort Item. I'm going to use pale violet red. Then 50 Item will be, let's say, golden rot. And for loss item. Let's use Blue Violet. All right, so with markup, we're done. Actually, for now, everything is ready to start creating. CS is great, So let's do it in the next lecture. 4. What is CSS: before we actually start writing our first CSS code, we need to answer on the very first question, which is following what is CSS. The abbreviation itself stands for cascading style sheets, which means that CSS al ot to create rules that specify how the content often element should appear. In other words, it's tell shit language to describe how elements which are written by HTML should be presented on the Web page. Let me explain eating a simple weight so the content of each webpage is created using HTML . And actually it's required because without HTML, browser cannot physically display the webpage. As for CSS, it's not require its optional. But if you want your webpage to be looking nice, beautiful and user friendly, then you need to use CSS. All right, let's see in practice what CSS actually can do with a simple example. Here we have basic HTML structure inside body elements. I have inserted several elements like Dave, which is container image, having elements and bottom. So you see on the right side and problems their how they look. It's a simple external page without any style, and you agree that it doesn't look nice. I have here another file with some CSS code. For now, you probably do not know what it means. Or maybe, you know, actually, it's not problem because I used them just for demonstration proposes. All right, let's use this style for that. We have your inside had Element Link tug, which actually connects HTML and CSS files. Let's uncommon it, then safe, and you see that he would have nicely designed card, which you agree that looks much more better than the previous one. It's a simple example. We have just use several elements, but it proves that CSS has huge power installing ELN's. It's actually the only way to make your website looking nice and beautiful. Okay, let's talk about history and versions off CSS. Actually, I'm not going to go through in details, but I want you to know several important facts. So the first CSS version, which Waas sees this one, was released in 1996. Then, after two years in 1998 its second version was introduced. I mean CSS to and then in 1999 1st drafts off seasons. Three version has appeared since then. It has bean developing and today, as the car version of CSS. Actually, it's still in development developers, and not working on the next version of CS is like, let's say, CS is four. Instead of that, CIA says it's played in several models like colors, backgrounds, animations, flax books, great and many others. And CSS creators and developers are working on developing those modules instead of creating . It's another version. That's why there is a huge difference between old. CS is three and the current one. All right, that's it. What I wanted to say about what CSS is and where it comes from, its for how to write, seizes code. Let's move on to the next election. 5. How to write CSS: in the last lecture. We have talked about what CSS is, and now it's time to move on to the next topic and this lecture. I'm going to show you how to write ceases coat. I mean to demonstrate how to style HTML elements using different styling methods. Actually, we have three methods. 1st 1 that I want to show you is called in line method using in line method we assigned to each HTML element individually style attribute, which then will contain styles that we want to use. All right, so here I have index dot html file, which includes basic structure off HTML document for no, it's empty. So let's go ahead and create, Let's say, H one heading element with some content, right in line styling. So, as we said, in order to change the style of this element, we need to assign to it attributes called style and then inside quotes. We need to specify needed property with its value. Suppose that we want to change background color off this element for that, we need to write your name off property background color with Desh that it should be followed by carbon and then we need to write your one of the colors. Let's say red. So if we save, then background color off H one will be changed into red. Actually, background color is one of the properties in CS says we have tons of different properties, which will be discussed by step throughout the course. If we want to use several properties with one HTML element, then we can simply place your semi column and then used another property that say Cover. I'm going to change color of heading element into white. So you see both properties work, having elements background color is red and also color of taxes c