CSS - The Complete Guide Flexbox, Grid & Sass
Learn with Collegites.tech
19 modules
English
Certificate of completion
Access for 2 days
Master CSS like a pro with this comprehensive guide to Flexbox, Grid & Sass - unleash your creativity and build stunning websites!
Overview
Getting started with CSS might look easy but there actually is a lot of depth to CSS - hence this course provides different "Tracks" or "Entry points" to exactly meet your demands and reflect you current knowledge level:
The Basics Track: Start from scratch, learn CSS from the ground up. You start with lecture 1 and simply follow through to the end.
The Advanced Track: You already know the CSS basics, you know what selectors are and how it works but you want to dive in deeper and learn some advanced features and usages.
The Expert Track: You got the advanced knowledge, too, but you want to dive into things like Flexbox, CSS Grid, CSS Variables or Sass. This track is for you.
Key Highlights
Master the fundamentals of CSS Flexbox, Grid, and Sass
Create responsive layouts with Flexbox and Grid
Understand the power of Sass for efficient styling
Implement advanced layout techniques with Flexbox and Grid
Optimize your CSS workflow using Sass variables and mixins
Learn to create complex and dynamic designs with CSS
Stay updated with the latest CSS trends and best practices
Practice exercises and projects to reinforce learning
What you will learn
Mastering Flexbox Layout
Learn how to create complex layouts with Flexbox in CSS for enhanced web design.
Utilizing Grid Layouts
Understand and apply CSS Grid to create responsive and dynamic web layouts efficiently.
Enhancing Styles with Sass
Explore using Sass to streamline CSS coding, organize stylesheets, and boost development speed.
Modules
Getting Started With Css
8 attachments • 16.06 mins
1 - Introduction
2 - What is CSS
4 - CSS History Present & Future
5 - Course Outline
7 - Course Prerequisites
8 - How To Get The Most Out Of This Course
9 - Recommended Tools
Source Code
2 - Diving Into the Basics of CSS
13 attachments • 1 hrs
12 - Module Introduction
13 - Understanding the Course Project Setup
14 - Adding CSS to our Project with Inline Styles
15 - Understanding the style Tag & Creating a css File
16 - Applying Additional Styles & Importing Google Fonts
17 - Theory Time Selectors
18 - Understanding the Cascading Style & Specificity
19 - Understanding Inheritance
20 - Adding Combinators
21 - Theory Time Combinators
22 - Summarizing Properties & Selectors
23 - Wrap Up
Css Basics Quiz
3 - Diving Deeper into CSS
22 attachments • 1 hrs
25 - Module Introduction
26 - Introducing the CSS Box Model
27 - Understanding the Box Model
28 - Understanding Margin Collapsing and Removing Default Margins
30 - Theory Time Working with Shorthand Properties
31 - Applying Shorthands in Practice
32 - Diving Into the Height & Width Properties
33 - Understanding Box Sizing
34 - Adding the Header to our Project
35 - Understanding the Display Property
38 - Applying the Display Property & Styling our Navigation Bar
39 - Understanding an Unexpected inlineblock Behaviour
40 - Working with textdecoration & verticalalign
41 - Styling Anchor Tags
42 - Adding Pseudo Classes
43 - Theory Time Pseudo Classes & Pseudo Elements
44 - Grouping Rules
45 - Working with fontweight & border
46 - Adding & Styling a CTAButton
47 - Adding a Background Image to our Project
48 - Properties Worth to Remember
49 - Wrap Up
4 - More on Selectors & CSS Features
7 attachments • 23.66 mins
51 - Module Introduction
52 - Using Multiple CSS Classes & Combined Selectors
53 - Classes or IDs
54 - Not using important
55 - Selecting the Opposite with not
56 - CSS & Browser Support
57 - Wrap Up
5 - Practicing the Basics
20 attachments • 1 hrs
59 - Module Introduction
60 - Adding Style to our Plans
61 - Working on the Recommended Plan
62 - Styling the Badge with borderradius
63 - Styling our List
64 - Working on the Title and the Price of our Packages
65 - Improving our Action Button
66 - Understanding Outlines
67 - Presenting the Core Features to the User
68 - Styling the Headline of the Core Features Section
69 - Preparing the Content of the Key Feature Area
70 - Adding the Footer
71 - What we Achieved so Far
72 - Adding the Packages Page
73 - Your Challenge
74 - Styling the Links
75 - Styling our Package Boxes
76 - Adding float to our Package
77 - Fixing the Hover Effect
78 - Adding the Final Touches
6 - Positioning Elements with CSS
14 attachments • 1 hrs
80 - Module Introduction
81 - Why Positioning will Improve our Website
82 - Understanding Positioning The Theory
83 - Working with the fixed Value
84 - Creating a Fixed Navigation Bar
85 - Using position to Add a Background Image
86 - Understanding the ZIndex
87 - Adding a Badge to our Package
88 - Styling & Positioning our Badge with absolute and relative
89 - Diving Deeper into Relative Positioning
90 - Working with overflow and Relative Positioning
91 - Introducing sticky Positioning
92 - Understanding the Stacking Context
93 - Wrap Up
7 - Understanding Background Images & Images
16 attachments • 1 hrs
95 - Optional Advanced Track Introduction
96 - Module Introduction
97 - Understanding backgroundsize
98 - Working with backgroundposition
99 - The background Shorthand Theory
100 - Applying background Origin Clip & Attachment
101 - Using the background Shorthand on our Project
102 - Styling Images
103 - Adding the Customers Page to our Website
104 - Working on the Image Layout
105 - Understanding Linear Gradients
106 - Applying Radial Gradients
107 - Stacking Multiple Backgrounds
108 - Understanding Filters
109 - Adding & Styling SVGs The Basics
110 - Wrap Up
8 - Sizes & Units
18 attachments • 1 hrs
112 - Module Introduction
113 - Whats Wrong With Our Project Units
114 - Where Units Matter
115 - An Overview of Available Sizes & Units
116 - Rules to Remember Fixed Positioning &
117 - Rules to Remember Absolute Positioning &
118 - Rules to Remember Relative Static Positioning &
119 - Fixing the Height 100 Issue
120 - Defining the Font Size in the Root Element
121 - Using minwidthheight & maxwidthheight
122 - Working with rem & em
123 - Adding rem to Additional Properties
124 - Finishing rem
125 - Understanding the Viewport Units vw &vh
127 - Choosing the Right Unit
128 - Using auto to Center Elements
129 - Cleaning Up our Code
130 - Wrap Up
9 - Working with JavaScript & CSS
10 attachments • 49.99 mins
132 - Module Introduction
133 - Adding a Modal
134 - Selecting & Manipulating Styles with JavaScript
135 - Adding an Event Listener
136 - Adding a Side Navigation Bar
137 - Opening and Closing the Hamburger Menu
138 - Manipulating Element Classes
139 - Understanding Property Notations
140 - Cleaning Up our Code
141 - Wrap Up
10 - Making our Website Responsive
18 attachments • 1 hrs
143 - Module Introduction
144 - Why our Project Should Become Responsive
145 - Understanding Hardware Pixels vs Software Pixels
146 - Comparing the Viewport Metatag HTML and Media Queries CSS
147 - Understanding the viewport Metatag
148 - Designing Websites Mobile First
149 - Adding our First Media Queries
150 - Things to Keep in Mind when Working with Media Queries
151 - Finding the Right Breaking Points
152 - Creating the Mobile First Design for our Plans
153 - Making the Plans Responsive
154 - Your Challenge
155 - Working with Logical Operators
156 - Improving the Customers Page
157 - Improving the Packages Page
158 - Cleaning Up the Navigation Bar
159 - Positioning our Footer Correctly
160 - Wrap Up
11 - Adding & Styling Forms
10 attachments • 51.45 mins
162 - Module Introduction
163 - Adding the Unstyled Form
164 - Page Initialization
165 - Understanding Advanced Attribute Selectors
166 - Working on the General Layout
167 - Restyling the Form Elements
168 - Styling the Checkbox
169 - Providing Validation Feedback
170 - Styling the Signup Button
172 - Wrap Up
12 - Working with Text and Fonts
17 attachments • 1 hrs
174 - Module Introduction
175 - Comparing Generic Families & Font Families
176 - Understanding the Browser Settings
177 - Using the Default Font Families
178 - Understanding the fontfamily Syntax
179 - Working with Locally Saved Fonts
180 - Working with Google Fonts
181 - Understanding Font Faces & fontstyle
182 - Importing our Custom Fonts
183 - Understanding Font Formats
184 - Diving into Font Properties
185 - Adding letterspacing
186 - Changing the Line Height
187 - Applying textdecoration & textshadow
188 - Understanding the font Shorthand
189 - Loading Performance & fontdisplay
190 - Wrap Up
13 - Adding Flexbox to our Project
20 attachments • 1 hrs
192 - Optional Expert Track Introduction
193 - Module Introduction
194 - How we Could Improve our Project
195 - Understanding Flexbox
196 - Creating a Flex Container
197 - Using flexdirection & flexwrap
198 - Understanding the Importance of Main Axis & Cross Axis
199 - Working with alignitems & justifycontent
200 - And What About aligncontent
201 - Improving the Navigation Bar with Flexbox
202 - Your Challenge Working on the Mobile Navigation Bar
203 - Improving the Footer
205 - OPTIONAL Assignment Solution
206 - Adding Flexbox to the Customers Page
207 - Using the order Property for a Flex Item
208 - Working with alignself
209 - Understanding flexgrow
210 - Applying flexshrink
211 - Comparing flexbasis vs width & height
212 - Wrap Up
14 - Using the CSS Grid
27 attachments • 1 hrs
214 - Module Introduction
215 - What is the CSS Grid
216 - Getting Started
217 - Turning a Container into a Grid
218 - Defining Columns & Rows
219 - Positioning Child Elements in a Grid
220 - Using elementsizing repeat & minmax
221 - Advanced Element Positioning
222 - Working with Named Lines
223 - Understanding Column & Row Shorthands
224 - Working with Gaps
225 - Adding Named Template Areas
226 - Creating Automatically Generated Grid Areas
227 - Using the Grid on our Project
228 - Working with fitcontent
229 - Positioning Grid Elements
230 - Positioning the Entire Grid Content
231 - Positioning Elements Individually
232 - Understanding Responsive Grids
233 - Applying Autoflow
234 - Comparing the Explicit & Implicit Grid
235 - Understanding autofill & autofit
236 - Creating a Dense Grid
237 - Styling the Project Form with Grid
238 - Comparing Grid & Flexbox
239 - Next Steps
240 - Wrap Up
15 - Transforming Elements with CSS Transforms
11 attachments • 36.04 mins
242 - Module Introduction
243 - Rotating Elements and setting transformorigin
244 - Using Rotate and Translate
245 - Working with skew and scale
246 - Applying Transformation Shorthands
247 - Rotating Elements in 3 Dimensions
248 - Understanding the perspective Property
249 - Moving Elements along the ZAxis with translateZ
250 - Rotating the Container with transform style
251 - Flipping Elements & backfacevisibility
252 - Wrap Up
16 - Transitions & Animations in CSS
9 attachments • 38.16 mins
254 - Module Introduction
255 - Understanding and Applying Transitions
257 - Working with Timing Functions
258 - Transitions & display
259 - Using CSS Animations
261 - Adding Multiple Keyframes
262 - Adding Animations to our Customers Page
263 - Using JavaScript Animation Event Listeners
264 - Wrap Up
17 - Writing FutureProof CSS Code
11 attachments • 46.44 mins
266 - Module Introduction
267 - CSS Modules & Their Working Groups
268 - Using CSS Variables
269 - Understanding & Using Vendor Prefixes
270 - Which Prefixes Should You Use
271 - Detecting Browser Support with supports
272 - Polyfills
273 - Eliminating CrossBrowser Inconsistencies
274 - How to Name CSS Classes
275 - Vanilla CSS vs Frameworks
276 - Wrap Up
18 - Introducing Sass Syntactically Awesome Style Sheets
16 attachments • 54.7 mins
278 - Module Introduction
279 - What is Sass & Scss
281 - Installing Sass
282 - Things to be Improved with Sass
283 - Nesting Selectors
284 - Adding Nested Properties
285 - Understanding Variables
286 - Storing Lists & Maps in Variables
287 - BuiltIn Functions
288 - Adding Simple Arithmetics
289 - Adding Better Import and Partials
290 - Improving Media Queries
291 - Understanding Inheritance
292 - Adding Mixins
293 - Using the Ampersand Operator
294 - Wrap Up
19 - Course Roundup
1 attachment • 1.94 mins
296 - Course Roundup
Certification
When you complete this course you receive a ‘Certificate of Completion’ signed and addressed personally by me.
FAQs
How can I enrol in a course?
Enrolling in a course is simple! Just browse through our website, select the course you're interested in, and click on the "Enrol Now" button. Follow the prompts to complete the enrolment process, and you'll gain immediate access to the course materials.
Can I access the course materials on any device?
Yes, our platform is designed to be accessible on various devices, including computers, laptops, tablets, and smartphones. You can access the course materials anytime, anywhere, as long as you have an internet connection.
How can I access the course materials?
Once you enrol in a course, you will gain access to a dedicated online learning platform. All course materials, including video lessons, lecture notes, and supplementary resources, can be accessed conveniently through the platform at any time.
Can I interact with the instructor during the course?
Absolutely! we are committed to providing an engaging and interactive learning experience. You will have opportunities to interact with them through our community. Take full advantage to enhance your understanding and gain insights directly from the expert.
About the creator
Learn with Collegites.tech
Rate this Course
Free
Order ID:
This course is in your library
What are you waiting for? It’s time to start learning!
Wait up!
We see you’re already enrolled in this course till Access for 2 days. Do you still wish to enroll again?
