The Complete CSS course
- Description
- Curriculum
- FAQ
- Reviews
The Cascading Style Sheets, also known as CSS is one of the important technologies of the World Wide Web (WWW). CSS is used to represent an HTML document in a more beautiful way.
Learning CSS begins important again since the born of Tailwind CSS. Tailwind CSS is a fast way to do the CSS and it is more flexible than any framework like Bootstrap, MaterializeCSS or MaterialUI.
This course will start from CSS basics, then gradually moves to CSS positioning, responsive design, and flexbox.
If you are looking for an online course to learn CSS then there is no better place than this,
Learn CSS in this course for beginners. CSS, or Cascading Style Sheet, is responsible for the styling and looks of a website. In this course, you will learn CSS from the ground up. You will learn everything from basic skills, such as coloring and text.
We will cover:
- Box model
- Normal flow and float
- Clear float and pseudo-element
- Two columns
- Two columns without float
- Relative and absolute
- Fixed position
- z-index
- Overflow create a profile picture
- Media queries
- Responsive navbar
- Responsive image
- Flexbox introduction
- Flex grow
You will learn many aspects of styling web pages! You’ll be able to set up the correct file structure, edit text and colors, and create attractive layouts. With these skills, you’ll be able to customize the appearance of your web pages to suit your every need! You will also earn a certificate of completion.
-
1Basic CSS SyntaxVideo lesson
In this lecture, we are going to talk about what is the use of the CSS and the syntax of the CSS
-
2inline and internal stylingVideo lesson
In this lecture, we are going to talk about inline and internal CSS styling. We will learn what are the benefits of using these methods. Moreover, we will talk about the disadvantages and leads to why we need external styling.
-
3External stylingVideo lesson
In this lecture, we focus on talking about external stylesheet. Last time, we created a website that only use inline styling and internal styling.
-
4Select html elementsVideo lesson
In this lecture, we are going to talk about how to select the elements and add the styles.
-
5Select id and classesVideo lesson
In this video, we are going to talk about select the html with id or with classes.
-
6Cascade and InheritanceVideo lesson
In this article, we are going to talk about the CSS Cascade and Inheritance.
-
7SpecificityVideo lesson
In this lecture, we are going to talk about specificity . Specificity is a rank to determine which declaration should be ultimately applied to the element.
-
8!importantVideo lesson
In this lecture, we are going to talk about the CSS !important
-
9CSS multiple selectorVideo lesson
In this video, we are going to introduce the multiple selector to select multiple elements. Then we apply the same CSS rules to all these elements.
-
10CSS descendant selectorVideo lesson
In this video, we are going to talking about descendant selector.
-
11CSS select childVideo lesson
In this lecture, we are going to explain what is the difference between children and descendants, and how to style the children only.
-
12CSS adjacent selectorVideo lesson
In this video, we are going to talk about adjacent sibling combinator, and when is the best time to use this combinator to select the element
-
13CSS attribute selectorVideo lesson
In this video, we are going to talk about the attribute selector.
By using the attribute selector, we can select the elements base on the exist of the attribute or the value of the attribute.
-
14CSS Pseudo classesVideo lesson
In this video, we are going to introduce pseudo classes and how to use the pseudo classes in CSS.
-
15CSS first and last childVideo lesson
In this lecture, we are going to talk about how to select that specific element which is the first child and the last child of its parent.
-
16CSS first-of-type and last-of-typeVideo lesson
In the previous lecture, we already learnt how to the first-child and last-child to select the specific elements.
In this article, we are going to talk about in some situations, the first specific type of element is not the first child of its parent.
-
17CSS nth-childVideo lesson
In this article, we are going to talk about nth-child, this is used to select the nth child of its parent.
-
18CSS nth-of-typeVideo lesson
In this video, we are going to talk about CSS nth-of-type selector.
-
19CSS combining the selectorsVideo lesson
In this lecture, we will talk about combining the selector to make a more specific selection.
-
20CSS Universal selectorVideo lesson
In this lecture, we are going to demonstrate how to use universal selector *.
The universal selector * is used to select all the html tag directly and make change on the style.
-
21CSS font sizeVideo lesson
In this lecture, we are going to talk about the CSS font family. By using the font family, it will hold a group of font names. If the first not work, then it will go to next one and so on.
-
22CSS font familyVideo lesson
In this lecture, we are going to talk about the CSS font family. By using the font family, it will hold a group of font names. If the first not work, then it will go to next one and so on.
-
23CSS text decorationVideo lesson
In this lecture, we are going to talk about the text decoration, so we can change the line type, style and also the color of the text.
-
24Box modelVideo lesson
Everything in css is made of boxes. It is important to learn box model. In this video, we will learn the box model.
-
25Normal flow and FloatVideo lesson
In this lecture we are going to talk about the normal flow and the css position:float
-
26Clear float and pseudo elementVideo lesson
In the previous lecture, we already learnt how to use the float. Since all the boxes has already been taken out from the normal flow, the wrapper div only has the padding. The boxes no longer occupies the height of the div.
If we want to make boxes still look like inside the wrapper div, we need to use the clear float.
-
27Two columnsVideo lesson
-
28Two columns without floatVideo lesson
We already created columns with using CSS Float. This time, we will create columns without using float.
First, we create columns2 div. Inside the div, we create a paragraph and put some text inside it
-
29Relative and absoluteVideo lesson
In this video, we are going to talk about position relative and position absolute.
-
30Fixed positionVideo lesson
In this video, we are going to demonstrate how to use position fixed to fix the navbar on the top of the page.
-
31Z - indexVideo lesson
-
32Overflow create profile pictureVideo lesson
In this lecture, we are going to create profile picture with CSS property overflow. We will deal with three different types of images, square, landscape and portrait.
-
33Media queriesVideo lesson
In this lecture, we are going to create a simple web site that can fit into different screen size by using CSS media queries.
-
34Responsive navbarVideo lesson
In this lecture, we are going to make the desktop website navbar turn to a mobile friendly navbar with hamburger menu, when the screen size is small.
-
35Responsive imageVideo lesson
In this lecture, we are going to talk about how to use picture tag to display a proper image for different screen sizes. This is nice for responsive design webpage.
-
36Flexbox introductionVideo lesson
-
37Flex growVideo lesson
In this video, we are going to talk about what is flex-grow.
-
38Flex shrinkVideo lesson
In this video, we are going to talk about what is flex-shrink
-
39Flex wrapVideo lesson
We cannot see the content when the screen size continue to reduce. This time we need the help of flex-wrap
-
40Flex basisVideo lesson
-
41Using flexbox to create a navbarVideo lesson
We will use flexbox to create a navbar, here we also start talking about justify-content.
-
42Using align items to justify the content along cross axisVideo lesson
Using align items to justify the content along cross axis.
-
43Flex box orderVideo lesson
The order property defines the order of the items relative to the rest of the items inside the container according to the number.
-
44TransformVideo lesson
In this lecture, we are going to talk about the CSS transform property. This allow us to do translate,skew, scale and rotate.
-
45TransitionVideo lesson
we will talk about CSS animation, including transition property, duration, timing function, and how can we do a series of transitions in one line.
-
46KeyframesVideo lesson
In this lecture, we are going to talk about the animation keyframes. The animation change from current style to a new style.
-
47Animation fill modeVideo lesson
In this lecture, we are going to talk about animation-fill-mode and why we need it.
-
48Animation iteration countVideo lesson
To iterate tha animation more than one, we can use animation iteration count.
-
49Animation directionVideo lesson
In this video, we are going to talk about Animation direction, we will demonstrate different types of animation direction like reverse, alternate and alternate-reverse.
-
50Multiple AnimationVideo lesson
In this video, we are going to use the animation shorthand and chaining animations.
-
51CSS Grid and columnsVideo lesson
In this lecture, we are going to talk about what is CSS grid and columns. Flexbox is to layout the items in one dimension (row or column). Grid is to layout the items in two dimension, rows AND columns.
-
52CSS grid rowsVideo lesson
-
53CSS gridlinesVideo lesson
In this lecture, we are going to talk about grid lines. Grid lines are used to define the tracks in the layout.
-
54CSS subgridVideo lesson
In this lecture, we are going to talk about the nested gridline. To nest a grid, we can make one of the grids as a grid container.
-
55CSS align and justifyVideo lesson
In this video, we are going to talk about align-items, justify-items, align-self and justify-self in CSS grid.
-
56CSS grid areaVideo lesson
In this video, we are going to talk about grid area. Here, we are not going to use grid-column:1/3 or grid-row:2/4.
-
57CSS responsive grid areaVideo lesson
In this video, we are going to make a responsive grid with the help of the media queries.
External Links May Contain Affiliate Links read more