The Complete CSS course

In this lecture, we are going to talk about what is the use of the CSS and the syntax of the CSS

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.

In this lecture, we focus on talking about external stylesheet. Last time, we created a website that only use inline styling and internal styling.

In this lecture, we are going to talk about how to select the elements and add the styles.

In this video, we are going to talk about select the html with id or with classes.

In this article, we are going to talk about the CSS Cascade and Inheritance.

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.

In this lecture, we are going to talk about the CSS !important

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.

In this video, we are going to talking about descendant selector.

In this lecture, we are going to explain what is the difference between children and descendants, and how to style the children only.

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

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.

In this video, we are going to introduce pseudo classes and how to use the pseudo classes in CSS.

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.

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.

In this article, we are going to talk about nth-child, this is used to select the nth child of its parent.

In this video, we are going to talk about CSS nth-of-type selector.

In this lecture, we will talk about combining the selector to make a more specific selection.

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.

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.

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.

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.

Everything in css is made of boxes. It is important to learn box model. In this video, we will learn the box model.

In this lecture we are going to talk about the normal flow and the css position:float

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.

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

In this video, we are going to talk about position relative and position absolute.

In this video, we are going to demonstrate how to use position fixed to fix the navbar on the top of the page.

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.

In this lecture, we are going to create a simple web site that can fit into different screen size by using CSS media queries.

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.

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.

In this video, we are going to talk about what is flex-grow.

In this video, we are going to talk about what is flex-shrink

We cannot see the content when the screen size continue to reduce. This time we need the help of flex-wrap

We will use flexbox to create a navbar, here we also start talking about justify-content.

Using align items to justify the content along cross axis.

The order property defines the order of the items relative to the rest of the items inside the container according to the number.

In this lecture, we are going to talk about the CSS transform property. This allow us to do translate,skew, scale and rotate.

we will talk about CSS animation, including transition property, duration, timing function, and how can we do a series of transitions in one line.

In this lecture, we are going to talk about the animation keyframes. The animation change from current style to a new style.

In this lecture, we are going to talk about animation-fill-mode and why we need it.

To iterate tha animation more than one, we can use animation iteration count.

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.

In this video, we are going to use the animation shorthand and chaining animations.

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.

In this lecture, we are going to talk about grid lines. Grid lines are used to define the tracks in the layout.

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.

In this video, we are going to talk about align-items, justify-items, align-self and justify-self in CSS grid.

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.

In this video, we are going to make a responsive grid with the help of the media queries.