Code  Camp

Code Camp


CSS Full Course - Includes Flexbox and CSS Grid Tutorials

Learn CSS in this complete tutorial course. Cascading Style Sheets (CSS) tell the browser how to display the text and other content that you write in HTML.

This course will teach you everything you need to know to get started with CSS3, including flexbox and CSS grid.

⭐️Course Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:01:25) Change the Color of Text
⌨️ (0:02:33) Use CSS Selectors to Style Elements
⌨️ (0:04:33) Use a CSS Class to Style an Element
⌨️ (0:06:10) Style Multiple Elements with a CSS Class
⌨️ (0:06:59) Change the Font Size of an Element
⌨️ (0:08:10) Set the Font Family of an Element
⌨️ (0:08:52) Import a Google Font
⌨️ (0:10:11) Specify How Fonts Should Degrade
⌨️ (0:11:55) Size Your Images
⌨️ (0:13:19) Add Borders Around Your Elements
⌨️ (0:14:55) Add Rounded Corners with border-radius
⌨️ (0:15:24) Make Circular Images with a border-radius
⌨️ (0:15:55) Give a Background Color to a div Element
⌨️ (0:16:58) Set the id of an Element
⌨️ (0:17:47) Use an id Attribute to Style an Element
⌨️ (0:19:34) Adjust the Padding of an Element
⌨️ (0:20:36) Adjust the Margin of an Element
⌨️ (0:21:11) Add a Negative Margin to an Element
⌨️ (0:21:40) Add Different Padding to Each Side of an Element
⌨️ (0:22:26) Add Different Margins to Each Side of an Element
⌨️ (0:23:01) Use Clockwise Notation to Specify the Padding of an Element
⌨️ (0:24:15) Use Clockwise Notation to Specify the Margin of an Element
⌨️ (0:25:08) Use Attribute Selectors to Style Elements
⌨️ (0:27:29) Understand Absolute versus Relative Units
⌨️ (0:28:53) Style the HTML Body Element
⌨️ (0:29:34) Inherit Styles from the Body Element
⌨️ (0:30:54) Prioritize One Style Over Another
⌨️ (0:32:11) Override Styles in Subsequent CSS
⌨️ (0:33:24) Override Class Declarations by Styling ID Attributes
⌨️ (0:34:59) Override Class Declarations with Inline Styles
⌨️ (0:35:35) Override All Other Styles by using Important
⌨️ (0:36:28) Use Hex Code for Specific Colors
⌨️ (0:37:19) Use Hex Code to Mix Colors
⌨️ (0:38:20) Use Abbreviated Hex Code
⌨️ (0:39:22) Use RGB values to Color Elements
⌨️ (0:40:05) Use RGB to Mix Colors
⌨️ (0:41:38) Use CSS Variables to change several elements at once
⌨️ (0:42:54) Create a custom CSS Variable
⌨️ (0:43:33) Use a custom CSS Variable
⌨️ (0:44:39) Attach a Fallback value to a CSS Variable
⌨️ (0:45:25) Cascading CSS variables
⌨️ (0:46:44) Change a variable for a specific area
⌨️ (0:47:08) Use a media query to change a variable
⌨️ (0:48:06) Create Your First CSS Grid
⌨️ (0:48:49) Add Columns with grid-template-columns
⌨️ (0:49:43) Add Rows with grid-template-rows
⌨️ (0:50:41) Use CSS Grid units to Change the Size of Columns and Rows
⌨️ (0:52:34) Create a Column Gap Using grid-column-gap
⌨️ (0:53:11) Create a Row Gap using grid-row-gap
⌨️ (0:53:38) Add Gaps Faster with grid-gap
⌨️ (0:54:26) Use grid-column to Control Spacing
⌨️ (0:55:59) Use grid-row to Control Spacing
⌨️ (0:56:43) Align an Item Horizontally using justify-self
⌨️ (0:57:33) Align an Item Vertically using align-self
⌨️ (0:58:04) Align All Items Horizontally using justify-items
⌨️ (0:58:31) Align All Items Vertically using align-items
⌨️ (0:58:58) Divide the Grid Into an Area Template
⌨️ (0:59:59) Place Items in Grid Areas Using the grid-area Property
⌨️ (1:01:00) Use grid-area Without Creating an Areas Template
⌨️ (1:02:43) Reduce Repetition Using the repeat Function
⌨️ (1:04:51) Limit Item Size Using the minmax Function
⌨️ (1:05:47) Create Flexible Layouts Using auto-fill
⌨️ (1:06:39) Create Flexible Layouts Using auto-fit
⌨️ (1:07:32) Use Media Queries to Create Responsive Layouts
⌨️ (1:09:05) Create Grids within Grids
⌨️ (1:09:49) Use display: flex to Position Two Boxes
⌨️ (1:10:20) Add Flex Superpowers to the Tweet Embed
⌨️ (1:11:04) Use the flex-direction Property to Make a Row
⌨️ (1:11:54) Apply the flex-direction Property to Create Rows in the Tweet Embed
⌨️ (1:12:39) Use the flex-direction Property to Make a Column
⌨️ (1:13:06) Apply the flex-direction Property to Create a Column in the Tweet Embed
⌨️ (1:13:44) Align Elements Using the justify-content Property
⌨️ (1:15:49) Use the justify-content Property in the Tweet Embed
⌨️ (1:16:33) Align Elements Using the align-items Property
⌨️ (1:18:00) Use the align-items Property in the Tweet Embed
⌨️ (1:18:42) Use the flex-wrap Property to Wrap a Row or Column
⌨️ (1:19:21) Use the flex-shrink Property to Shrink Items
⌨️ (1:20:14) Use the flex-grow Property to Expand Items
⌨️ (1:21:14) Use the flex-basis Property to Set the Initial Size of an Item
⌨️ (1:22:02) Use the flex Shorthand Property
⌨️ (1:23:40) Use the order Property to Rearrange Items
⌨️ (1:24:15) Use the align-self Property

#css #webdev

What is GEEK

Buddha Community

CSS Full Course - Includes Flexbox and CSS Grid Tutorials

13 Cool Simple CSS Grid layout examples

Collection of free hand-picked simple CSS grid examples. Also, it includes a bunch of front-end techniques, tips, and tricks for your future reference. Hope you will like these freebies and find them useful. Happy coding!

  • Styling the last row of a grid with CSS selectors
  • Grid Animation Effects
  • Simple grid mixin
  • Simple Grid CSS Grid
  • Simple CSS Grid Hover
  • Simple css Grid – Responsive
  • Simple css grid system using scss
  • CSS variables simple CSS grid
  • Super Simple CSS Grid
  • 3D Grid UI
  • Aspect ratio Grid boxes with CSS Variables
  • Simple grid system
  • Simple Grid template

#layouts #css grid #grid #layouts #css #css grid layout

Jennie  Hane

Jennie Hane


flexbox tutorial in Hindi | css flexbox tutorial in Hindi ( in 2020 )

flexbox tutorial in Hindi
css flexbox tutorial in Hindi
Why Flexbox? We all know that in the past how difficult it was to build layouts using positions and floats. but now with the help of FLEXBOX every thing became so easy.
In this video i will show you how to use flexbox to build a website layout or a grid.

Ps.In this video i am going to give you a MAGIC formula to make a grid system.

Please like and subscribe for more quality contents and don’t forget to press the bell icon so you will not miss any notification.

Here is the link for the HTML 5 Quick course ➡️
Here is the link for the CSS Quick course ➡️

Please Like, Share and Subscribe for the new amazing contents or videos.

You can follow me on Facebook ➡️

#cssFlexbox #cssFlexboxHindi #webDevelopmentHindi #learnFlexbox #flexboxTutorialInHindi #flexboxTutorials

#flexbox #css #css flexbox

CSS Flexbox: What I learned from Flexbox Zombies

I started playing an educational game called Flexbox Zombies, which has been teaching me the fundamentals of flexbox in a fun way. In the game, you fight zombies by using features of flexbox to aim your crossbow at the zombies.

MDN docs explain flexbox as:

a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces.

The Flexbox Zombies game teaches flexbox through a story, with each lesson building on the previous, thus reinforcing the fundamentals of flexbox in a fun and effective way.

#flexbox #css #css flexbox #flexbox zombies

Raleigh  Hayes

Raleigh Hayes


Theme Switcher with CSS Variables - Tutorial

Hello! For my last video of 2020, we are learning how to handle themes with CSS Variables, with a cool theme switcher from twitter. Enjoy!

Useful Links:

#css variables #css #tutorial #css variables - tutorial #css theme switcher