#37 CSS Grid Tutorial [Complete Guide] - CSS Full Tutorial

 

In this Complete Guide to CSS Grid we go through the entire CSS Grid layout system step by step, first we’ll go through all the grid container properties and then all the grid item properties with examples throughout, and make sure to watch right to the end because we’ll be building a dashboard layout using CSS Grid. Remember to Comment, Like, Share and Subscribe! Here’s a video of the dashboard design from scratch - https://youtu.be/f7ECiT4aAFg 👍 Dribbble shot - https://dribbble.com/shots/12915127-W... Chapters: 0:00 - Intro 0:40 - What is CSS Grid? 1:00 - CSS Grid vs CSS Flexbox 1:30 - Grid main concepts 2:23 - All CSS Grid Properties 2:40 - Grid Container Properties 3:20 - grid-template-columns and grid-template-rows 11:48 - grid-auto-columns and grid-auto-rows 12:17 - grid-auto-flow 15:00 - grid-columns gap and grid-row-gap 15:16 - grid-gap 15:44 - align-items, justify-items and place-items 17:23 - align-content, justify-content and place-content 19:05 - grid-template-areas 22:20 - grid-template 23:27 - grid 26:00 - Grid Item Properties 26:20 - grid-column-start and grid-column-end 28:02 - grid-row-start and grid-row-end 28:40 - grid-column and grid-row 29:13 - align-self, justify-self and place-self 30:31 - grid-area 32:46 - Building a dashboard layout with CSS Grid 42:40 - Like and Subscribe

Read more »

Posted in: CSS Tutorial

#36 CSS Flexbox Tutorial for Beginners [Complete Guide] - CSS Full Tutorial

 

In this CSS Flexbox Tutorial - The Complete Guide, we'll go through the entire CSS Flexbox layout module step by step with examples throughout. First we'll take a look at what CSS Flexbox actually is, as well as some key components to flexbox such as understanding the main and cross axis. Next, we take a deep dive into every single CSS Flexbox property, starting with the container properties and then moving on to the item properties. Finally, we'll put what we've learnt into practice by building two small projects: (1) A game card and (2) A nav bar menu. Chapters: 0:00 - Intro 0:29 - What is CSS Flexbox? 1:20 - What can it do? 2:12 - All CSS Flexbox Properties 2:38 - The Main/Cross Axis 4:21 - Flexbox Container Properties 5:00 - flex-direction 5:42 - flex-wrap 6:50 - flex-flow 7:20 - justify-content 9:11 - align-items 10:55 - align-content 12:12 - Flexbox Item Properties 12:33 - order 14:03 - flex-grow 16:05 - flex-shrink 17:38 - flex-basis 20:00 - flex 20:50 - align-self 21:27 - Building a Game Card with Flexbox 23:57 - Building a Nav Menu with Flexbox 26:14 - Like and Subscribe

Read more »

Posted in: CSS Tutorial

#35 CSS Variables Tutorial [ CSS Var ] - CSS Full Tutorial

 

In this lesson we’re going to learn all about CSS Variables or CSS Var for short, CSS Variables are used to declare a style once and then re-use that style throughout our entire website. So, we'll look at how to write and declare CSS Variables, some cool things you can do with variables and of course we'll do all that using examples throughout. Timestamps: 0:00 - Introduction to CSS Variables 0:27 - A visual example 2:55 - How to declare CSS Variables 7:48 - Case sensitive variables 8:31 - Using CSS Variables within other variables 9:30 - How to write inline variables 10:10 - How to make quick changes with CSS Variables 10:30 - How to make our code more readable with CSS Variables 11:18 - Using CSS Variables with Fallback values 12:30 - How to use scoped CSS Variables 14:20 - Like and Subscribe

Read more »

Posted in: CSS Tutorial

#34 CSS Background Clip - CSS Full Tutorial

 

In this video, we take a look at the background clip property and how to clip an image to text to pull off some really cool effects, we also take a look at how to add gradient colour to a paragraph text.

Read more »

Posted in: CSS Tutorial

#33 CSS Media Queries - CSS Full Tutorial

 

What are CSS Media Queries and how can we use them? In this lesson we’ll take a look at the different media types we can specify and the difference between min-width and max-width. The viewport meta tag: meta name="viewport" content="width=device-width, initial-scale=1.0"

Read more »

Posted in: CSS Tutorial

#32 CSS Animations - CSS Full Tutorial

 

In this video we look at CSS Animations, we’ll do this by looking at CSS animation examples. The CSS Animation property works hand in hand with keyframes, in this video we’ll take a look at and explain each of the following eight animation properties: animation-name animation-duration animation-delay animation-iteration-count animation-direction animation-timing-function animation-fill-mode Animation-play-state We’ll also look at the CSS Animation short hand property.

Read more »

Posted in: CSS Tutorial

#31 CSS Transition Tutorial - CSS Full Tutorial

 

In this CSS Transition tutorial, we take a look at the transition property in detail. By the end of this lesson you will know how to start using the CSS Transition property in your projects.

Read more »

Posted in: CSS Tutorial

#30 CSS Transform Property - CSS Full Tutorial

 

The CSS transform property is a rather powerful CSS property that can be used to change or transform elements by rotation, scale, skew and much more, and in this quick video we’re gonna take a look at how to use the CSS transform property in detail.

Read more »

Posted in: CSS Tutorial

#29 CSS Gradients - CSS Full Tutorial

 

In this CSS Gradient tutorial we take a look at the linear-gradient and radial-gradient properties in detail, by the end of this video you will know how to implement the CSS Gradient property into your projects.

Read more »

Posted in: CSS Tutorial

#28 CSS Shadow Property - CSS Full Tutorial

 

In this lesson we take a look at the CSS Shadow property, in CSS we have two main ways to add shadows to our elements, these are using the css box shadow property or the css text shadow property. In this video we tackle both of them in detail with some cool examples along the way. By the end of this lesson, you should be comfortable using the CSS Shadow property in your projects.

Read more »

Posted in: CSS Tutorial

#27 How to use the CSS Display property - CSS Full Tutorial

 

In this lesson we take a look at the CSS display property, which determines whether elements are displayed as inline or block level elements. We also look at showing and hiding elements with display none and visibility hidden, and the difference between the two.

Read more »

Posted in: CSS Tutorial

#26 CSS Backgrounds - CSS Full Tutorial

 

In this lesson we take a look at the CSS Background property in detail, with examples for each keyword. The shorthand CSS Background property order: background-image background-position / background-size background-repeat background-attachment background-origin background-clip background-color

Read more »

Posted in: CSS Tutorial

#25 CSS Positioning - CSS Full Tutorial

 

In this lesson we learn all about the CSS Position property, by taking a look at static, relative, absolute, fixed and sticky positioning and how they relate to on another.

Read more »

Posted in: CSS Tutorial

#24 - CSS Width, Height and Box-sizing - CSS Full Tutorial

 

In this lesson we take a look at the CSS width, height and box-sizing properties.

Read more »

Posted in: CSS Tutorial

#23 CSS Colors - CSS Full Tutorial

 

In this lesson we take a deep dive into learning all about CSS colors, including hex, rgb, rgba, hsl, and hsla.

Read more »

Posted in: CSS Tutorial

#22 CSS Fonts - CSS Full Tutorial

 In this lesson we learn all about how to use fonts in CSS. We also look at how to import and use fonts from Google fonts both online as well as offline.

Read more »

Posted in: CSS Tutorial

#21 - CSS Text Formatting - CSS Full Tutorial

 

In this lesson we take a look at some of the most common CSS Text Formatting properties such as: text-align, text-transform, text-shadow etc.

Read more »

Posted in: CSS Tutorial

#20 - CSS Units - CSS Full Tutorial

In this lesson we learn all about CSS Units. There are two types of CSS Numerical Units: 1. Absolute (fixed) Units 2. Relative (fluid) Units In this we'll take a look at the difference between the two with examples, and how to know which CSS Unit to use and when.
 

Read more »

Posted in: CSS Tutorial

#19 - CSS Box Model - CSS Full Tutorial

 

In this lesson we take a look at one of the most important aspects of CSS, the CSS Box Model. We cover the different parts that make up the box model such as: Content - The content of the box, where text and images appear Padding - Clears an area around the content. The padding is transparent Border - A border that goes around the padding and content Margin - Clears an area outside the border. The margin is transparent Learning about the Box Model will really help you gain a better overall understanding of CSS.

Read more »

Posted in: CSS Tutorial

#18 - CSS Borders - CSS Full Tutorial

 In this lesson we take a look at CSS borders, including all border properties such as border-width, border-style, border-color and we also look at border-radius.

Read more »

Posted in: CSS Tutorial