CSS – The Complete Guide 2024 (incl. Flexbox, Grid & Sass)

سرفصل های دوره

Learn CSS for the first time or brush up your CSS skills and dive in even deeper. EVERY web developer has to know CSS.

1. Getting Started

1. Introduction

2.1 css-in-action.zip

2. What is CSS

3. Join our Online Learning Community.html

4. CSS History, Present & Future

5. Course Outline

6. Choose Your Track.html

7. Course Prerequisites

8. How To Get The Most Out Of This Course

9. Recommended Tools

10. Where to Find the Source Code.html

11. Useful Resources & Links.html

2. Diving Into the Basics of CSS

1. Module Introduction

2.1 basics-01-understanding-the-course-project-starting-code.zip

2. Understanding the Course Project Setup

3. Adding CSS to our Project with Inline Styles

4.1 basics-02-understanding-the-style-tag-finished.zip

4.2 css-syntax.pdf

4. Understanding the style Tag & Creating a .css File

5. Applying Additional Styles & Importing Google Fonts

6.1 basics-03-theory-time-selectors-finished.zip

6.2 css-selectors.pdf

6. Theory Time - Selectors

7.1 css-specificity.pdf

7. Understanding the Cascading Style and Specificity

8.1 basics-04-understanding-inheritance-finished.zip

8.2 css-inheritance.pdf

8. Understanding Inheritance

9. Adding Combinators

10.1 basics-05-theory-time-combinators-finished.zip

10.2 css-combinators.pdf

10. Theory Time - Combinators

11.1 css-value-types.pdf

11. Summarizing Properties & Selectors

12. Selectors & Combinators.html

13. Time to Practice - The Basics.html

14.1 css-02-basics-summary.pdf

14. Wrap Up

15.1 basics-01-understanding-the-course-project-starting-code.zip

15.2 basics-02-understanding-the-style-tag-finished.zip

15.3 basics-03-theory-time-selectors-finished.zip

15.4 basics-04-understanding-inheritance-finished.zip

15.5 basics-05-theory-time-combinators-finished.zip

15.6 basics-06-assignment-problem.zip

15.7 basics-07-assignment-solution.zip

15.8 basics-08-project-finished.zip

15. Useful Resources & Links.html

3. Diving Deeper into CSS

1. Module Introduction

2.1 diving-deeper-01-project-introducing-the-box-model-starting-code.zip

2. Introducing the CSS Box Model

3.1 css-box-model.pdf

3. Understanding the Box Model

4.1 css-margin-collapsing.pdf

4. Understanding Margin Collapsing and Removing Default Margins

5. Deep Dive on Margin Collapsing.html

6.1 css-shorthand-properties.pdf

6. Theory Time - Working with Shorthand Properties

7. Applying Shorthands in Practice

8. Diving Into the Height & Width Properties

9. Understanding Box Sizing

10.1 diving-deeper-02-adding-the-header-starting-code.zip

10.2 diving-deeper-02.01-header-html-code.zip

10. Adding the Header to our Project

11. Understanding the Display Property

12. display none vs visibility hidden.html

13. HTML Refresher Block-level vs Inline Elements.html

14. Applying the Display Property & Styling our Navigation Bar

15.1 diving-deeper-03-understanding-an-unexpected-behaviour-finished.zip

15. Understanding an Unexpected inline-block Behaviour

16. Working with text-decoration & vertical-align

17.1 diving-deeper-04-styling-anchor-tags-finished.zip

17. Styling Anchor Tags

18. Adding Pseudo Classes

19. Theory Time - Pseudo Classes & Pseudo Elements

20. Grouping Rules

21. Working with font-weight & border

22. Adding & Styling a CTA-Button

23.1 diving-deeper-05-adding-a-background-image-finished.zip

23.2 diving-deeper-05.01-background-image.zip

23. Adding a Background Image to our Project

24.1 css-properties-worth-remembering.pdf

24. Properties Worth to Remember

25. Time to Practice - Diving Deeper into CSS.html

26.1 css-03-deep-dive-summary.pdf

26. Wrap Up

27.1 diving-deeper-01-project-introducing-the-box-model-starting-code.zip

27.2 diving-deeper-02-adding-the-header-starting-code.zip

27.3 diving-deeper-02.01-header-html-code.zip

27.4 diving-deeper-03-understanding-an-unexpected-behaviour-finished.zip

27.5 diving-deeper-04-styling-anchor-tags-finished.zip

27.6 diving-deeper-05-adding-a-background-image-finished.zip

27.7 diving-deeper-05.01-background-image.zip

27.8 diving-deeper-06-assignment-problem.zip

27.9 diving-deeper-07-assignment-solution.zip

27.10 diving-deeper-08-project-finished.zip

27. Useful Resources & Links.html

4. More on Selectors & CSS Features

1. Module Introduction

2.1 more-on-selectors-1-start-code.zip

2.2 more-on-selectors-2-multiple-css-classes.zip

2. Using Multiple CSS Classes & Combined Selectors

3. Classes or IDs

4.1 more-on-selectors-3-important.zip

4. (Not) using !important

5.1 more-on-selectors-4-finished.zip

5. Selecting the Opposite with not()

6. CSS & Browser Support

7.1 css-03b-more-selectors-summary.pdf

7. Wrap Up

8. Rounding up the Basics.html

9.1 more-on-selectors-1-start-code.zip

9.2 more-on-selectors-2-multiple-css-classes.zip

9.3 more-on-selectors-3-important.zip

9.4 more-on-selectors-4-finished.zip

9. Useful Resources & Links.html

5. Practicing the Basics

1. Module Introduction

2.1 practicing-basics-01-adding-style-to-plans-starting-code.zip

2.2 practicing-basics-01.01-html-code-plans.zip

2. Adding Style to our Plans

3. Working on the Recommended Plan

4. Styling the Badge with border-radius

5.1 practicing-basics-02-styling-our-list-finished.zip

5. Styling our List

6. Working on the Title and the Price of our Packages

7. Improving our Action Button

8.1 practicing-basics-03-understanding-outlines-finished.zip

8. Understanding Outlines

9.1 practicing-basics-04-html-code-core-features.zip

9. Presenting the Core Features to the User

10. Styling the Headline of the Core Features Section

11. Preparing the Content of the Key Feature Area

12.1 practicing-basics-05-adding-the-footer-finished.zip

12.2 practicing-basics-05.01-html-code-footer.zip

12. Adding the Footer

13. What we Achieved so Far

14. Adding the Packages Page

15.1 practicing-basics-06-your-challenge-starting-code.zip

15.2 practicing-basics-06.01-html-code-challenge.zip

15. Your Challenge

16. Styling the Links

17.1 practicing-basics-07-styling-our-package-boxes-finished.zip

17. Styling our Package Boxes

18. Adding float to our Package

19. Fixing the Hover Effect

20. Adding the Final Touches

21.1 practicing-basics-01-adding-style-to-plans-starting-code.zip

21.2 practicing-basics-01.01-html-code-plans.zip

21.3 practicing-basics-02-styling-our-list-finished.zip

21.4 practicing-basics-03-understanding-outlines-finished.zip

21.5 practicing-basics-04-html-code-core-features.zip

21.6 practicing-basics-05-adding-the-footer-finished.zip

21.7 practicing-basics-05.01-html-code-footer.zip

21.8 practicing-basics-06-your-challenge-starting-code.zip

21.9 practicing-basics-06.01-html-code-challenge.zip

21.10 practicing-basics-07-styling-our-package-boxes-finished.zip

21.11 practicing-basics-08-project-finished.zip

21. Useful Resources & Links.html

6. Positioning Elements with CSS

1. Module Introduction

2.1 position-01-why-positioning-improves-our-website-starting-code.zip

2. Why Positioning will Improve our Website

3. Understanding Positioning - The Theory

4.1 position-02-working-with-fixed-starting-code.zip

4. Working with the fixed Value

5. Creating a Fixed Navigation Bar

6.1 position-03-using-position-to-add-image-finished.zip

6.2 position-03.01-background-image.zip

6. Using position to Add a Background Image

7. Understanding the Z-Index

8. Adding a Badge to our Package

9.1 position-04-styling-our-badge-finished.zip

9. Styling & Positioning our Badge with absolute and relative

10.1 position-05-diving-deeper-into-relative-positioning-starting-code.zip

10. Diving Deeper into Relative Positioning

11. Are you a position expert.html

12.1 position-06-working-with-overflow-finished.zip

12. Working with overflow and Relative Positioning

13.1 position-07-introducing-sticky-positioning-starting-code.zip

13. Introducing sticky Positioning

14.1 position-08-understanding-stacking-context-starting-code.zip

14. Understanding the Stacking Context

15. Time to Practice - Positioning.html

16. Wrap Up

17.1 css-position-slides.pdf

17.2 position-01-why-positioning-improves-our-website-starting-code.zip

17.3 position-02-working-with-fixed-starting-code.zip

17.4 position-03-using-position-to-add-image-finished.zip

17.5 position-03.01-background-image.zip

17.6 position-04-styling-our-badge-finished.zip

17.7 position-05-diving-deeper-into-relative-positioning-starting-code.zip

17.8 position-06-working-with-overflow-finished.zip

17.9 position-07-introducing-sticky-positioning-starting-code.zip

17.10 position-08-understanding-stacking-context-starting-code.zip

17.11 position-09-assignment-problem.zip

17. Useful Resources & Links.html

7. Understanding Background Images & Images

1.1 background-images-01-understanding-background-size-starting-code-.zip

1. Optional Advanced Track Introduction

2. Module Introduction

3.1 background-images-01-understanding-background-size-starting-code-.zip

3. Understanding background-size

4. Working with background-position

5.1 css-background-properties.pdf

5. The background Shorthand - Theory

6. Applying background Origin, Clip & Attachment

7.1 background-images-02-using-the-background-shorthand-finished.zip

7. Using the background Shorthand on our Project

8.1 background-images-03-styling-images-uhost-icon.zip

8. Styling Images

9.1 background-images-04-adding-customer-page-finished.zip

9.2 background-images-04.01-adding-customer-page-html-code.zip

9.3 background-images-04.02-adding-customer-page-images.zip

9. Adding the Customers Page to our Website

10.1 background-images-05-working-on-the-image-layout-finished.zip

10.2 background-images-05.01-working-on-the-image-layout-css-code.zip

10. Working on the Image Layout

11. Understanding Linear Gradients

12.1 background-images-06-applying-radial-gradients-finished.zip

12. Applying Radial Gradients

13. Stacking Multiple Backgrounds

14. Understanding Filters

15.1 background-images-07-adding-svgs-code.zip

15. Adding & Styling SVGs - The Basics

16.1 css-07-background-summary.pdf

16. Wrap Up

17.1 background-images-01-understanding-background-size-starting-code-.zip

17.2 background-images-02-using-the-background-shorthand-finished.zip

17.3 background-images-03-styling-images-uhost-icon.zip

17.4 background-images-04-adding-customer-page-finished.zip

17.5 background-images-04.01-adding-customer-page-html-code.zip

17.6 background-images-04.02-adding-customer-page-images.zip

17.7 background-images-05-working-on-the-image-layout-finished.zip

17.8 background-images-06-applying-radial-gradients-finished.zip

17.9 background-images-07-adding-svgs-code.zip

17.10 background-images-08-project-finished.zip

17. Useful Resources & Links.html

8. Sizes & Units

1. Module Introduction

2.1 sizes-units-01-whats-wrong-with-starting-code.zip

2. Whats Wrong With Our Project Units

3. Where Units Matter

4. An Overview of Available Sizes & Units

5. Rules to Remember Fixed Positioning & %

6. Rules to Remember Absolute Positioning & %

7. Rules to Remember Relative Static Positioning & %

8.1 sizes-units-02-the-height-100-issue-finished.zip

8. Fixing the Height 100% Issue

9. Defining the Font Size in the Root Element

10. Using min-widthheight & max-widthheight

11.1 sizes-units-03-working-with-rem-and-em-finished.zip

11. Working with rem & em

12. Adding rem to Additional Properties

13.1 sizes-units-04-finishing-rem-finished.zip

13.2 sizes-units-04.01-finishing-rem-css-code-shared-and-main.zip

13. Finishing rem

14.1 sizes-units-05-understanding-vh-vw-finished.zip

14. Understanding the Viewport Units vw &vh

15. Windows, Viewport Units & Scrollbars.html

16. Choosing the Right Unit

17. Using auto to Center Elements

18. Cleaning Up our Code

19. Wrap Up

20.1 css-units-slides.pdf

20.2 sizes-units-01-whats-wrong-with-starting-code.zip

20.3 sizes-units-02-the-height-100-issue-finished.zip

20.4 sizes-units-03-working-with-rem-and-em-finished.zip

20.5 sizes-units-04-finishing-rem-finished.zip

20.6 sizes-units-04.01-finishing-rem-css-code-shared-and-main.zip

20.7 sizes-units-05-understanding-vh-vw-finished.zip

20.8 sizes-units-06-project-finished.zip

20. Useful Resources & Links.html

9. Working with JavaScript & CSS

1. Module Introduction

2.1 css-and-js-01-adding-a-modal-starting-code.zip

2.2 css-and-js-01.01-adding-a-modal-html-and-css-code.zip

2. Adding a Modal

3. Selecting & Manipulating Styles with JavaScript

4. Adding an Event Listener

5. Time to Practice - Adding Styles with JavaScript.html

6.1 css-and-js-04-adding-a-side-navigation-html-css-code.zip

6.2 toggle-button.zip

6. Adding a Side Navigation Bar

7.1 css-and-js-05-opening-closing-the-hamburger-finished.zip

7. Opening and Closing the Hamburger Menu

8. Manipulating Element Classes

9. Understanding Property Notations

10. Cleaning Up our Code

11.1 css-09-javascript-and-css-summary.pdf

11. Wrap Up

12.1 css-and-js-01-adding-a-modal-starting-code.zip

12.2 css-and-js-01.01-adding-a-modal-html-and-css-code.zip

12.3 css-and-js-02-assignment-problem.zip

12.4 css-and-js-03-assignment-solution.zip

12.5 css-and-js-04-adding-a-side-navigation-html-css-code.zip

12.6 css-and-js-05-opening-closing-the-hamburger-finished.zip

12.7 css-and-js-06-project-finished.zip

12. Useful Resources & Links.html

10. Making our Website Responsive

1. Module Introduction

2.1 responsive-01-why-our-project-should-starting-code.zip

2. Why our Project Should Become Responsive

3. Understanding Hardware Pixels vs. Software Pixels

4. Comparing the Viewport Metatag (HTML) and Media Queries (CSS)

5.1 responsive-02-understanding-the-viewport-metatag-finished.zip

5. Understanding the viewport Metatag

6. Designing Websites Mobile First

7. Adding our First Media Queries

8.1 responsive-03-things-to-keep-in-mind-finished.zip

8. Things to Keep in Mind when Working with Media Queries

9. Finding the Right Breaking Points

10. Creating the Mobile First Design for our Plans

11.1 responsive-04-making-the-plans-responsive-finished.zip

11. Making the Plans Responsive

12.1 responsive-05-your-challenge-finished.zip

12. Your Challenge

13. Time to Practice - Creating a Responsive Design with Media Queries.html

14. Working with Logical Operators

15. Improving the Customers Page

16.1 responsive-08-improving-the-packages-page-finished.zip

16. Improving the Packages Page

17. Cleaning Up the Navigation Bar

18. Positioning our Footer Correctly

19. Wrap Up

20.1 css-responsive-slides.pdf

20.2 responsive-01-why-our-project-should-starting-code.zip

20.3 responsive-02-understanding-the-viewport-metatag-finished.zip

20.4 responsive-03-things-to-keep-in-mind-finished.zip

20.5 responsive-04-making-the-plans-responsive-finished.zip

20.6 responsive-05-your-challenge-finished.zip

20.7 responsive-06-assignment-problem.zip

20.8 responsive-07-assignment-solution.zip

20.9 responsive-08-improving-the-packages-page-finished.zip

20.10 responsive-09-project-finished.zip

20. Useful Resources & Links.html

11. Adding & Styling Forms

1. Module Introduction

2.1 forms-01-adding-the-unstyled-form-starting-code.zip

2.2 forms-01.01-adding-the-unstyled-form-html-code.zip

2. Adding the Unstyled Form

3.1 forms-02-page-initialization-finished.zip

3. Page Initialization

4. Understanding Advanced Attribute Selectors

5. Working on the General Layout

6. Restyling the Form Elements

7.1 forms-03-styling-the-checkbox-finished.zip

7. Styling the Checkbox

8.1 forms-04-providing-validation-feedback-finished.zip

8. Providing Validation Feedback

9. Styling the Signup Button

10. Fixing a Broken Link.html

11.1 css-11-forms-summary.pdf

11. Wrap Up

12.1 css-attribute-selectors-slides.zip

12.2 forms-01-adding-the-unstyled-form-starting-code.zip

12.3 forms-01.01-adding-the-unstyled-form-html-code.zip

12.4 forms-02-page-initialization-finished.zip

12.5 forms-03-styling-the-checkbox-finished.zip

12.6 forms-04-providing-validation-feedback-finished.zip

12.7 forms-05-project-finished.zip

12. Useful Resources & Links.html

12. Working with Text and Fonts

1. Module Introduction

2. Comparing Generic Families & Font Families

3.1 fonts-01-understanding-the-browser-settings-starting-code.zip

3. Understanding the Browser Settings

4. Using the Default Font Families

5. Understanding the font-family Syntax

6. Working with Locally Saved Fonts

7.1 fonts-02-working-with-google-fonts-finished.zip

7. Working with Google Fonts

8. Understanding Font Faces & font-style

9.1 fonts-03-importing-our-own-fonts-finished.zip

9.2 fonts-03.01-importing-our-own-fonts-custom-font-ttf.zip

9. Importing our Custom Fonts

10.1 fonts-04-understanding-font-formats-finished.zip

10. Understanding Font Formats

11. Diving into Font Properties

12.1 fonts-05-understanding-letter-spacing-finished.zip

12. Adding letter-spacing

13. Changing the Line Height

14.1 fonts-06-applying-text-decoration-finished.zip

14. Applying text-decoration & text-shadow

15. Understanding the font Shorthand

16. Loading Performance & font-display

17. Wrap Up

18.1 css-fonts-slides.pdf

18.2 fonts-01-understanding-the-browser-settings-starting-code.zip

18.3 fonts-02-working-with-google-fonts-finished.zip

18.4 fonts-03-importing-our-own-fonts-finished.zip

18.5 fonts-03.01-importing-our-own-fonts-custom-font-ttf.zip

18.6 fonts-04-understanding-font-formats-finished.zip

18.7 fonts-05-understanding-letter-spacing-finished.zip

18.8 fonts-06-applying-text-decoration-finished.zip

18.9 fonts-07-project-finished.zip

18. Useful Resources & Links.html

13. Adding Flexbox to our Project

1.1 flexbox-01-how-we-could-improve-starting-code.zip

1. Optional Expert Track Introduction

2. Module Introduction

3.1 flexbox-01-how-we-could-improve-starting-code.zip

3. How we Could Improve our Project

4. Understanding Flexbox

5.1 flexbox-02-creating-a-flex-container-starting-code.zip

5. Creating a Flex Container

6. Using flex-direction & flex-wrap

7.1 flexbox-03-understanding-the-importance-main-cross-finished.zip

7. Understanding the Importance of Main Axis & Cross Axis

8.1 Basic Flexbox Concepts (MDN).html

8. Working with align-items & justify-content

9.1 flexbox-04-and-what-about-align-content-finished.zip

9. And What About align-content

10. Time for another quiz - are you a Flexbox expert already.html

11.1 flexbox-05-improving-the-navigation-bar-starting-code.zip

11. Improving the Navigation Bar with Flexbox

12.1 flexbox-06-your-challenge-finished.zip

12. Your Challenge - Working on the Mobile Navigation Bar

13.1 flexbox-07-improving-the-footer-finished.zip

13. Improving the Footer

14. Flexbox and the Z-Index.html

15. Time to Practice - Flexbox.html

16.1 flexbox-09-assignment-solution.zip

16. [OPTIONAL] Assignment Solution

17. Adding Flexbox to the Customers Page

18.1 flexbox-10-using-the-order-property-starting-code.zip

18. Using the order Property for a Flex Item

19. Working with align-self

20. Understanding flex-grow

21. Applying flex-shrink

22. Comparing flex-basis vs width & height

23. Wrap Up

24.1 css-flexbox-slides.pdf

24.2 flexbox-01-how-we-could-improve-starting-code.zip

24.3 flexbox-02-creating-a-flex-container-starting-code.zip

24.4 flexbox-03-understanding-the-importance-main-cross-finished.zip

24.5 flexbox-04-and-what-about-align-content-finished.zip

24.6 flexbox-05-improving-the-navigation-bar-starting-code.zip

24.7 flexbox-06-your-challenge-finished.zip

24.8 flexbox-07-improving-the-footer-finished.zip

24.9 flexbox-08-assignment-problem.zip

24.10 flexbox-09-assignment-solution.zip

24.11 flexbox-10-using-the-order-property-starting-code.zip

24.12 flexbox-11-project-finished.zip

24. Useful Resources & Links.html

14. Using the CSS Grid

1. Module Introduction

2. What is the CSS Grid

3.1 grid-01-using-the-grid-on-our-projectstarting-code.zip

3. Getting Started

4. Turning a Container into a Grid

5. Defining Columns & Rows

6.1 grid-02-positioning-child-elements.zip

6. Positioning Child Elements in a Grid

7.1 grid-03-repeat-minmax.zip

7. Using element-sizing, repeat & minmax

8. Advanced Element Positioning

9.1 grid-04-added-line-names.zip

9. Working with Named Lines

10. Time to Practice - Grid.html

11. Understanding Column & Row Shorthands

12.1 grid-07-working-with-gaps.zip

12. Working with Gaps

13.1 grid-08-adding-named-template-areas.zip

13. Adding Named Template Areas

14. Time to Practice - Diving deeper into the CSS Grid.html

15.1 grid-11-auto-area.zip

15. Creating Automatically Generated Grid Areas

16.1 grid-12-grid-in-project-first-steps.zip

16. Using the Grid on our Project

17.1 grid-13-fit-content.zip

17. Working with fit-content

18. Positioning Grid Elements

19. Positioning the Entire Grid Content

20.1 grid-14-grid-alignment.zip

20. Positioning Elements Individually

21.1 grid-15-responsive.zip

21. Understanding Responsive Grids

22.1 grid-16-prepared-auto-lectures.zip

22.2 grid-17-applying-autoflow.zip

22. Applying Autoflow

23. Comparing the Explicit & Implicit Grid

24.1 grid-18-autofill-autofit.zip

24. Understanding auto-fill & auto-fit

25.1 grid-19-dense-grid.zip

25. Creating a Dense Grid

26.1 grid-20-project-finished.zip

26. Styling the Project Form with Grid

27. Comparing Grid & Flexbox

28. Next Steps

29.1 css-14-grid-summary.pdf

29.2 css-grid.pdf

29. Wrap Up

30.1 css-grid.pdf

30.2 grid-01-using-the-grid-on-our-projectstarting-code.zip

30.3 grid-02-positioning-child-elements.zip

30.4 grid-03-repeat-minmax.zip

30.5 grid-04-added-line-names.zip

30.6 grid-05-assignment-1-start.zip

30.7 grid-06-assignment-1-solution.zip

30.8 grid-07-working-with-gaps.zip

30.9 grid-08-adding-named-template-areas.zip

30.10 grid-09-assignment-2-start.zip

30.11 grid-10-assignment-2-solution.zip

30.12 grid-11-auto-area.zip

30.13 grid-12-grid-in-project-first-steps.zip

30.14 grid-13-fit-content.zip

30.15 grid-14-grid-alignment.zip

30.16 grid-15-responsive.zip

30.17 grid-16-prepared-auto-lectures.zip

30.18 grid-17-applying-autoflow.zip

30.19 grid-18-autofill-autofit.zip

30.20 grid-19-dense-grid.zip

30.21 grid-20-project-finished.zip

30. Useful Resources & Links.html

15. Transforming Elements with CSS Transforms

1. Module Introduction

2. Rotating Elements and setting transform-origin

3.1 transforms-01-rotate-and-translate.zip

3. Using Rotate and Translate

4.1 transforms-02-skew-scale.zip

4. Working with skew and scale

5.1 transforms-03-shorthands.zip

5. Applying Transformation Shorthands

6.1 css-transform-rotate.pdf

6.2 transforms-4-3d-starting-code.zip

6.3 transforms-5-rotate-3d.zip

6. Rotating Elements in 3 Dimensions

7.1 transforms-6-added-perspective.zip

7. Understanding the perspective Property

8.1 transforms-7-translatez.zip

8. Moving Elements along the Z-Axis with translateZ

9. Rotating the Container with transform style

10.1 transforms-8-finished.zip

10. Flipping Elements & backface-visibility

11.1 css-15-transform-summary.pdf

11. Wrap Up

12.1 transforms-01-rotate-and-translate.zip

12.2 transforms-02-skew-scale.zip

12.3 transforms-03-shorthands.zip

12.4 transforms-4-3d-starting-code.zip

12.5 transforms-5-rotate-3d.zip

12.6 transforms-6-added-perspective.zip

12.7 transforms-7-translatez.zip

12.8 transforms-8-finished.zip

12. Useful Resources & Links.html

16. Transitions & Animations in CSS

1. Module Introduction

2.1 animations-1-applying-transitions.zip

2. Understanding and Applying Transitions

3. CSS transition Property Deep Dive.html

4.1 animations-2-timing-functions.zip

4. Working with Timing Functions

5.1 animations-3-transition-and-display.zip

5. Transitions & display

6. Time to Practice - CSS Transitions.html

7.1 animations-5-animations-keyframes.zip

7. Using CSS Animations

8. CSS animation Property Deep Dive.html

9.1 animations-6-multiple-keyframes.zip

9. Adding Multiple Keyframes

10.1 animations-7-customers-animations.zip

10. Adding Animations to our Customers Page

11. Time to Practice - CSS Animations.html

12.1 animations-9-finished.zip

12. Using JavaScript Animation Event Listeners

13.1 css-16-animations-summary.pdf

13. Wrap Up

14.1 animations-1-applying-transitions.zip

14.2 animations-2-timing-functions.zip

14.3 animations-3-transition-and-display.zip

14.4 animations-4-assignment-1-solution.zip

14.5 animations-5-animations-keyframes.zip

14.6 animations-6-multiple-keyframes.zip

14.7 animations-7-customers-animations.zip

14.8 animations-8-assignment-2-solution.zip

14.9 animations-9-finished.zip

14. Useful Resources & Links.html

17. Writing Future-Proof CSS Code

1. Module Introduction

2. CSS Modules & Their Working Groups

3.1 future-proof-1-css-variables.zip

3. Using CSS Variables

4. Understanding & Using Vendor Prefixes

5.1 future-proof-2-vendor-prefixes.zip

5. Which Prefixes Should You Use

6.1 future-proof-3-finished.zip

6. Detecting Browser Support with @supports

7. Polyfills

8. Eliminating Cross-Browser Inconsistencies

9. How to Name CSS Classes

10.1 css-17-future-css.pdf

10. Vanilla CSS vs Frameworks

11.1 css-17-future-css.pdf

11.2 future-proof-1-css-variables.zip

11.3 future-proof-2-vendor-prefixes.zip

11.4 future-proof-3-finished.zip

11. Wrap Up

12. Useful Resources & Links.html

18. Introducing Sass (Syntactically Awesome Style Sheets)

1. Module Introduction

2. What is Sass & Scss

3. Important Installing Sass.html

4.1 sass-01-installing-sass-starting-code.zip

4. Installing Sass

5. Things to be Improved with Sass

6. Nesting Selectors

7. Adding Nested Properties

8.1 sass-02-understanding-variables-finished.zip

8. Understanding Variables

9. Storing Lists & Maps in Variables

10. Built-In Functions

11. Time to Practice - Sass.html

12. Adding Simple Arithmetics

13.1 sass-05-adding-better-import-and-partials-finished.zip

13. Adding Better Import and Partials

14. Improving Media Queries

15.1 sass-06-understanding-inheritance-finished.zip

15. Understanding Inheritance

16. Adding Mixins

17. Using the Ampersand Operator

18. Wrap Up

19.1 sass-01-installing-sass-starting-code.zip

19.2 sass-02-understanding-variables-finished.zip

19.3 sass-03-assignment-problem.zip

19.4 sass-04-assignment-solution.zip

19.5 sass-05-adding-better-import-and-partials-finished.zip

19.6 sass-06-understanding-inheritance-finished.zip

19.7 sass-07-project-finished.zip

19. Useful Resources & Links.html

19. Course Roundup

1. Course Roundup

2. Bonus More Content!.html

139,000 تومان

خرید اشتراک افزودن به سبد خرید

خرید دانلودی فوری

در این روش نیاز به افزودن محصول به سبد خرید و تکمیل اطلاعات نیست و شما پس از وارد کردن ایمیل خود و طی کردن مراحل پرداخت لینک های دریافت محصولات را در ایمیل خود دریافت خواهید کرد.

تولید کننده: Udemy