Companies Home Search Profile

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

Focused View

Academind by Maximilian Schwarzmüller,Maximilian Schwarzmüller,Manuel Lorenz

20:49:00

19 View
  • 1. Introduction.mp4
    01:39
  • 2.1 css-in-action.zip
  • 2. What is CSS.mp4
    02:59
  • 3. Join our Online Learning Community.html
  • 4. CSS History, Present & Future.mp4
    01:50
  • 5. Course Outline.mp4
    04:34
  • 6. Choose Your Track.html
  • 7. Course Prerequisites.mp4
    00:43
  • 8. How To Get The Most Out Of This Course.mp4
    02:49
  • 9. Recommended Tools.mp4
    01:26
  • 10. Where to Find the Source Code.html
  • 11. Useful Resources & Links.html
  • 1. Module Introduction.mp4
    00:55
  • 2.1 basics-01-understanding-the-course-project-starting-code.zip
  • 2. Understanding the Course Project Setup.mp4
    02:44
  • 3. Adding CSS to our Project with Inline Styles.mp4
    03:53
  • 4.1 basics-02-understanding-the-style-tag-finished.zip
  • 4.2 css-syntax.pdf
  • 4. Understanding the style Tag & Creating a .css File.mp4
    06:27
  • 5. Applying Additional Styles & Importing Google Fonts.mp4
    06:51
  • 6.1 basics-03-theory-time-selectors-finished.zip
  • 6.2 css-selectors.pdf
  • 6. Theory Time - Selectors.mp4
    08:56
  • 7.1 css-specificity.pdf
  • 7. Understanding the Cascading Style and Specificity.mp4
    08:14
  • 8.1 basics-04-understanding-inheritance-finished.zip
  • 8.2 css-inheritance.pdf
  • 8. Understanding Inheritance.mp4
    05:47
  • 9. Adding Combinators.mp4
    06:16
  • 10.1 basics-05-theory-time-combinators-finished.zip
  • 10.2 css-combinators.pdf
  • 10. Theory Time - Combinators.mp4
    05:42
  • 11.1 css-value-types.pdf
  • 11. Summarizing Properties & Selectors.mp4
    03:49
  • 12. Selectors & Combinators.html
  • 13. Time to Practice - The Basics.html
  • 14.1 css-02-basics-summary.pdf
  • 14. Wrap Up.mp4
    02:02
  • 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
  • 1. Module Introduction.mp4
    01:19
  • 2.1 diving-deeper-01-project-introducing-the-box-model-starting-code.zip
  • 2. Introducing the CSS Box Model.mp4
    03:36
  • 3.1 css-box-model.pdf
  • 3. Understanding the Box Model.mp4
    03:01
  • 4.1 css-margin-collapsing.pdf
  • 4. Understanding Margin Collapsing and Removing Default Margins.mp4
    03:05
  • 5. Deep Dive on Margin Collapsing.html
  • 6.1 css-shorthand-properties.pdf
  • 6. Theory Time - Working with Shorthand Properties.mp4
    03:48
  • 7. Applying Shorthands in Practice.mp4
    02:05
  • 8. Diving Into the Height & Width Properties.mp4
    06:07
  • 9. Understanding Box Sizing.mp4
    06:43
  • 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.mp4
    05:37
  • 11. Understanding the Display Property.mp4
    07:12
  • 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.mp4
    06:53
  • 15.1 diving-deeper-03-understanding-an-unexpected-behaviour-finished.zip
  • 15. Understanding an Unexpected inline-block Behaviour.mp4
    02:03
  • 16. Working with text-decoration & vertical-align.mp4
    04:54
  • 17.1 diving-deeper-04-styling-anchor-tags-finished.zip
  • 17. Styling Anchor Tags.mp4
    04:00
  • 18. Adding Pseudo Classes.mp4
    01:47
  • 19. Theory Time - Pseudo Classes & Pseudo Elements.mp4
    05:38
  • 20. Grouping Rules.mp4
    01:14
  • 21. Working with font-weight & border.mp4
    02:04
  • 22. Adding & Styling a CTA-Button.mp4
    04:09
  • 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.mp4
    01:50
  • 24.1 css-properties-worth-remembering.pdf
  • 24. Properties Worth to Remember.mp4
    01:29
  • 25. Time to Practice - Diving Deeper into CSS.html
  • 26.1 css-03-deep-dive-summary.pdf
  • 26. Wrap Up.mp4
    02:31
  • 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
  • 1. Module Introduction.mp4
    00:41
  • 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.mp4
    07:09
  • 3. Classes or IDs.mp4
    04:05
  • 4.1 more-on-selectors-3-important.zip
  • 4. (Not) using !important.mp4
    03:15
  • 5.1 more-on-selectors-4-finished.zip
  • 5. Selecting the Opposite with not().mp4
    03:29
  • 6. CSS & Browser Support.mp4
    03:51
  • 7.1 css-03b-more-selectors-summary.pdf
  • 7. Wrap Up.mp4
    01:06
  • 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
  • 1. Module Introduction.mp4
    00:37
  • 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.mp4
    08:34
  • 3. Working on the Recommended Plan.mp4
    06:33
  • 4. Styling the Badge with border-radius.mp4
    03:22
  • 5.1 practicing-basics-02-styling-our-list-finished.zip
  • 5. Styling our List.mp4
    03:02
  • 6. Working on the Title and the Price of our Packages.mp4
    04:33
  • 7. Improving our Action Button.mp4
    06:40
  • 8.1 practicing-basics-03-understanding-outlines-finished.zip
  • 8. Understanding Outlines.mp4
    02:17
  • 9.1 practicing-basics-04-html-code-core-features.zip
  • 9. Presenting the Core Features to the User.mp4
    01:22
  • 10. Styling the Headline of the Core Features Section.mp4
    03:38
  • 11. Preparing the Content of the Key Feature Area.mp4
    07:15
  • 12.1 practicing-basics-05-adding-the-footer-finished.zip
  • 12.2 practicing-basics-05.01-html-code-footer.zip
  • 12. Adding the Footer.mp4
    06:49
  • 13. What we Achieved so Far.mp4
    01:46
  • 14. Adding the Packages Page.mp4
    06:24
  • 15.1 practicing-basics-06-your-challenge-starting-code.zip
  • 15.2 practicing-basics-06.01-html-code-challenge.zip
  • 15. Your Challenge.mp4
    01:31
  • 16. Styling the Links.mp4
    03:55
  • 17.1 practicing-basics-07-styling-our-package-boxes-finished.zip
  • 17. Styling our Package Boxes.mp4
    07:15
  • 18. Adding float to our Package.mp4
    05:14
  • 19. Fixing the Hover Effect.mp4
    04:11
  • 20. Adding the Final Touches.mp4
    03:01
  • 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
  • 1. Module Introduction.mp4
    02:44
  • 2.1 position-01-why-positioning-improves-our-website-starting-code.zip
  • 2. Why Positioning will Improve our Website.mp4
    02:32
  • 3. Understanding Positioning - The Theory.mp4
    05:54
  • 4.1 position-02-working-with-fixed-starting-code.zip
  • 4. Working with the fixed Value.mp4
    09:50
  • 5. Creating a Fixed Navigation Bar.mp4
    03:54
  • 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.mp4
    06:03
  • 7. Understanding the Z-Index.mp4
    06:59
  • 8. Adding a Badge to our Package.mp4
    08:00
  • 9.1 position-04-styling-our-badge-finished.zip
  • 9. Styling & Positioning our Badge with absolute and relative.mp4
    03:10
  • 10.1 position-05-diving-deeper-into-relative-positioning-starting-code.zip
  • 10. Diving Deeper into Relative Positioning.mp4
    04:02
  • 11. Are you a position expert.html
  • 12.1 position-06-working-with-overflow-finished.zip
  • 12. Working with overflow and Relative Positioning.mp4
    04:17
  • 13.1 position-07-introducing-sticky-positioning-starting-code.zip
  • 13. Introducing sticky Positioning.mp4
    06:53
  • 14.1 position-08-understanding-stacking-context-starting-code.zip
  • 14. Understanding the Stacking Context.mp4
    05:53
  • 15. Time to Practice - Positioning.html
  • 16. Wrap Up.mp4
    04:12
  • 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
  • 1.1 background-images-01-understanding-background-size-starting-code-.zip
  • 1. Optional Advanced Track Introduction.mp4
    02:22
  • 2. Module Introduction.mp4
    01:05
  • 3.1 background-images-01-understanding-background-size-starting-code-.zip
  • 3. Understanding background-size.mp4
    08:41
  • 4. Working with background-position.mp4
    05:00
  • 5.1 css-background-properties.pdf
  • 5. The background Shorthand - Theory.mp4
    02:12
  • 6. Applying background Origin, Clip & Attachment.mp4
    05:51
  • 7.1 background-images-02-using-the-background-shorthand-finished.zip
  • 7. Using the background Shorthand on our Project.mp4
    02:19
  • 8.1 background-images-03-styling-images-uhost-icon.zip
  • 8. Styling Images.mp4
    07:33
  • 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.mp4
    03:19
  • 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.mp4
    08:07
  • 11. Understanding Linear Gradients.mp4
    06:16
  • 12.1 background-images-06-applying-radial-gradients-finished.zip
  • 12. Applying Radial Gradients.mp4
    05:41
  • 13. Stacking Multiple Backgrounds.mp4
    04:50
  • 14. Understanding Filters.mp4
    04:00
  • 15.1 background-images-07-adding-svgs-code.zip
  • 15. Adding & Styling SVGs - The Basics.mp4
    04:20
  • 16.1 css-07-background-summary.pdf
  • 16. Wrap Up.mp4
    02:14
  • 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
  • 1. Module Introduction.mp4
    02:35
  • 2.1 sizes-units-01-whats-wrong-with-starting-code.zip
  • 2. Whats Wrong With Our Project Units.mp4
    05:21
  • 3. Where Units Matter.mp4
    06:02
  • 4. An Overview of Available Sizes & Units.mp4
    04:24
  • 5. Rules to Remember Fixed Positioning & %.mp4
    04:15
  • 6. Rules to Remember Absolute Positioning & %.mp4
    08:14
  • 7. Rules to Remember Relative Static Positioning & %.mp4
    08:53
  • 8.1 sizes-units-02-the-height-100-issue-finished.zip
  • 8. Fixing the Height 100% Issue.mp4
    12:02
  • 9. Defining the Font Size in the Root Element.mp4
    02:18
  • 10. Using min-widthheight & max-widthheight.mp4
    05:27
  • 11.1 sizes-units-03-working-with-rem-and-em-finished.zip
  • 11. Working with rem & em.mp4
    12:47
  • 12. Adding rem to Additional Properties.mp4
    08:17
  • 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.mp4
    05:21
  • 14.1 sizes-units-05-understanding-vh-vw-finished.zip
  • 14. Understanding the Viewport Units vw &vh.mp4
    09:47
  • 15. Windows, Viewport Units & Scrollbars.html
  • 16. Choosing the Right Unit.mp4
    05:30
  • 17. Using auto to Center Elements.mp4
    01:42
  • 18. Cleaning Up our Code.mp4
    01:06
  • 19. Wrap Up.mp4
    04:23
  • 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
  • 1. Module Introduction.mp4
    01:16
  • 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.mp4
    04:13
  • 3. Selecting & Manipulating Styles with JavaScript.mp4
    10:34
  • 4. Adding an Event Listener.mp4
    06:05
  • 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.mp4
    07:14
  • 7.1 css-and-js-05-opening-closing-the-hamburger-finished.zip
  • 7. Opening and Closing the Hamburger Menu.mp4
    03:57
  • 8. Manipulating Element Classes.mp4
    06:40
  • 9. Understanding Property Notations.mp4
    03:12
  • 10. Cleaning Up our Code.mp4
    05:31
  • 11.1 css-09-javascript-and-css-summary.pdf
  • 11. Wrap Up.mp4
    01:15
  • 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
  • 1. Module Introduction.mp4
    01:45
  • 2.1 responsive-01-why-our-project-should-starting-code.zip
  • 2. Why our Project Should Become Responsive.mp4
    02:25
  • 3. Understanding Hardware Pixels vs. Software Pixels.mp4
    10:29
  • 4. Comparing the Viewport Metatag (HTML) and Media Queries (CSS).mp4
    03:04
  • 5.1 responsive-02-understanding-the-viewport-metatag-finished.zip
  • 5. Understanding the viewport Metatag.mp4
    07:22
  • 6. Designing Websites Mobile First.mp4
    01:54
  • 7. Adding our First Media Queries.mp4
    12:52
  • 8.1 responsive-03-things-to-keep-in-mind-finished.zip
  • 8. Things to Keep in Mind when Working with Media Queries.mp4
    08:09
  • 9. Finding the Right Breaking Points.mp4
    03:45
  • 10. Creating the Mobile First Design for our Plans.mp4
    06:37
  • 11.1 responsive-04-making-the-plans-responsive-finished.zip
  • 11. Making the Plans Responsive.mp4
    08:35
  • 12.1 responsive-05-your-challenge-finished.zip
  • 12. Your Challenge.mp4
    06:06
  • 13. Time to Practice - Creating a Responsive Design with Media Queries.html
  • 14. Working with Logical Operators.mp4
    08:13
  • 15. Improving the Customers Page.mp4
    14:58
  • 16.1 responsive-08-improving-the-packages-page-finished.zip
  • 16. Improving the Packages Page.mp4
    05:41
  • 17. Cleaning Up the Navigation Bar.mp4
    04:39
  • 18. Positioning our Footer Correctly.mp4
    10:09
  • 19. Wrap Up.mp4
    02:15
  • 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
  • 1. Module Introduction.mp4
    01:32
  • 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.mp4
    02:37
  • 3.1 forms-02-page-initialization-finished.zip
  • 3. Page Initialization.mp4
    06:35
  • 4. Understanding Advanced Attribute Selectors.mp4
    06:02
  • 5. Working on the General Layout.mp4
    07:15
  • 6. Restyling the Form Elements.mp4
    06:29
  • 7.1 forms-03-styling-the-checkbox-finished.zip
  • 7. Styling the Checkbox.mp4
    06:52
  • 8.1 forms-04-providing-validation-feedback-finished.zip
  • 8. Providing Validation Feedback.mp4
    08:50
  • 9. Styling the Signup Button.mp4
    03:42
  • 10. Fixing a Broken Link.html
  • 11.1 css-11-forms-summary.pdf
  • 11. Wrap Up.mp4
    01:29
  • 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
  • 1. Module Introduction.mp4
    01:20
  • 2. Comparing Generic Families & Font Families.mp4
    02:56
  • 3.1 fonts-01-understanding-the-browser-settings-starting-code.zip
  • 3. Understanding the Browser Settings.mp4
    06:17
  • 4. Using the Default Font Families.mp4
    06:53
  • 5. Understanding the font-family Syntax.mp4
    06:18
  • 6. Working with Locally Saved Fonts.mp4
    03:50
  • 7.1 fonts-02-working-with-google-fonts-finished.zip
  • 7. Working with Google Fonts.mp4
    10:28
  • 8. Understanding Font Faces & font-style.mp4
    06:49
  • 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.mp4
    09:03
  • 10.1 fonts-04-understanding-font-formats-finished.zip
  • 10. Understanding Font Formats.mp4
    05:41
  • 11. Diving into Font Properties.mp4
    03:10
  • 12.1 fonts-05-understanding-letter-spacing-finished.zip
  • 12. Adding letter-spacing.mp4
    04:43
  • 13. Changing the Line Height.mp4
    06:07
  • 14.1 fonts-06-applying-text-decoration-finished.zip
  • 14. Applying text-decoration & text-shadow.mp4
    05:51
  • 15. Understanding the font Shorthand.mp4
    08:39
  • 16. Loading Performance & font-display.mp4
    09:49
  • 17. Wrap Up.mp4
    03:47
  • 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
  • 1.1 flexbox-01-how-we-could-improve-starting-code.zip
  • 1. Optional Expert Track Introduction.mp4
    03:23
  • 2. Module Introduction.mp4
    01:31
  • 3.1 flexbox-01-how-we-could-improve-starting-code.zip
  • 3. How we Could Improve our Project.mp4
    02:58
  • 4. Understanding Flexbox.mp4
    03:18
  • 5.1 flexbox-02-creating-a-flex-container-starting-code.zip
  • 5. Creating a Flex Container.mp4
    05:33
  • 6. Using flex-direction & flex-wrap.mp4
    05:35
  • 7.1 flexbox-03-understanding-the-importance-main-cross-finished.zip
  • 7. Understanding the Importance of Main Axis & Cross Axis.mp4
    07:27
  • 8.1 Basic Flexbox Concepts (MDN).html
  • 8. Working with align-items & justify-content.mp4
    10:59
  • 9.1 flexbox-04-and-what-about-align-content-finished.zip
  • 9. And What About align-content.mp4
    02:40
  • 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.mp4
    12:02
  • 12.1 flexbox-06-your-challenge-finished.zip
  • 12. Your Challenge - Working on the Mobile Navigation Bar.mp4
    04:16
  • 13.1 flexbox-07-improving-the-footer-finished.zip
  • 13. Improving the Footer.mp4
    05:35
  • 14. Flexbox and the Z-Index.html
  • 15. Time to Practice - Flexbox.html
  • 16.1 flexbox-09-assignment-solution.zip
  • 16. [OPTIONAL] Assignment Solution.mp4
    08:32
  • 17. Adding Flexbox to the Customers Page.mp4
    03:16
  • 18.1 flexbox-10-using-the-order-property-starting-code.zip
  • 18. Using the order Property for a Flex Item.mp4
    06:07
  • 19. Working with align-self.mp4
    02:44
  • 20. Understanding flex-grow.mp4
    07:35
  • 21. Applying flex-shrink.mp4
    03:12
  • 22. Comparing flex-basis vs width & height.mp4
    08:35
  • 23. Wrap Up.mp4
    03:52
  • 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
  • 1. Module Introduction.mp4
    01:14
  • 2. What is the CSS Grid.mp4
    01:27
  • 3.1 grid-01-using-the-grid-on-our-projectstarting-code.zip
  • 3. Getting Started.mp4
    02:22
  • 4. Turning a Container into a Grid.mp4
    03:21
  • 5. Defining Columns & Rows.mp4
    05:49
  • 6.1 grid-02-positioning-child-elements.zip
  • 6. Positioning Child Elements in a Grid.mp4
    04:13
  • 7.1 grid-03-repeat-minmax.zip
  • 7. Using element-sizing, repeat & minmax.mp4
    06:45
  • 8. Advanced Element Positioning.mp4
    06:30
  • 9.1 grid-04-added-line-names.zip
  • 9. Working with Named Lines.mp4
    03:53
  • 10. Time to Practice - Grid.html
  • 11. Understanding Column & Row Shorthands.mp4
    02:54
  • 12.1 grid-07-working-with-gaps.zip
  • 12. Working with Gaps.mp4
    02:33
  • 13.1 grid-08-adding-named-template-areas.zip
  • 13. Adding Named Template Areas.mp4
    06:39
  • 14. Time to Practice - Diving deeper into the CSS Grid.html
  • 15.1 grid-11-auto-area.zip
  • 15. Creating Automatically Generated Grid Areas.mp4
    07:10
  • 16.1 grid-12-grid-in-project-first-steps.zip
  • 16. Using the Grid on our Project.mp4
    09:10
  • 17.1 grid-13-fit-content.zip
  • 17. Working with fit-content.mp4
    03:31
  • 18. Positioning Grid Elements.mp4
    03:35
  • 19. Positioning the Entire Grid Content.mp4
    03:17
  • 20.1 grid-14-grid-alignment.zip
  • 20. Positioning Elements Individually.mp4
    01:34
  • 21.1 grid-15-responsive.zip
  • 21. Understanding Responsive Grids.mp4
    05:30
  • 22.1 grid-16-prepared-auto-lectures.zip
  • 22.2 grid-17-applying-autoflow.zip
  • 22. Applying Autoflow.mp4
    06:39
  • 23. Comparing the Explicit & Implicit Grid.mp4
    02:31
  • 24.1 grid-18-autofill-autofit.zip
  • 24. Understanding auto-fill & auto-fit.mp4
    03:33
  • 25.1 grid-19-dense-grid.zip
  • 25. Creating a Dense Grid.mp4
    03:22
  • 26.1 grid-20-project-finished.zip
  • 26. Styling the Project Form with Grid.mp4
    09:45
  • 27. Comparing Grid & Flexbox.mp4
    02:27
  • 28. Next Steps.mp4
    01:31
  • 29.1 css-14-grid-summary.pdf
  • 29.2 css-grid.pdf
  • 29. Wrap Up.mp4
    03:49
  • 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
  • 1. Module Introduction.mp4
    00:31
  • 2. Rotating Elements and setting transform-origin.mp4
    03:45
  • 3.1 transforms-01-rotate-and-translate.zip
  • 3. Using Rotate and Translate.mp4
    04:57
  • 4.1 transforms-02-skew-scale.zip
  • 4. Working with skew and scale.mp4
    06:18
  • 5.1 transforms-03-shorthands.zip
  • 5. Applying Transformation Shorthands.mp4
    02:23
  • 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.mp4
    04:19
  • 7.1 transforms-6-added-perspective.zip
  • 7. Understanding the perspective Property.mp4
    03:37
  • 8.1 transforms-7-translatez.zip
  • 8. Moving Elements along the Z-Axis with translateZ.mp4
    03:54
  • 9. Rotating the Container with transform style.mp4
    03:44
  • 10.1 transforms-8-finished.zip
  • 10. Flipping Elements & backface-visibility.mp4
    01:15
  • 11.1 css-15-transform-summary.pdf
  • 11. Wrap Up.mp4
    01:14
  • 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
  • 1. Module Introduction.mp4
    00:22
  • 2.1 animations-1-applying-transitions.zip
  • 2. Understanding and Applying Transitions.mp4
    07:23
  • 3. CSS transition Property Deep Dive.html
  • 4.1 animations-2-timing-functions.zip
  • 4. Working with Timing Functions.mp4
    02:50
  • 5.1 animations-3-transition-and-display.zip
  • 5. Transitions & display.mp4
    06:11
  • 6. Time to Practice - CSS Transitions.html
  • 7.1 animations-5-animations-keyframes.zip
  • 7. Using CSS Animations.mp4
    09:00
  • 8. CSS animation Property Deep Dive.html
  • 9.1 animations-6-multiple-keyframes.zip
  • 9. Adding Multiple Keyframes.mp4
    03:22
  • 10.1 animations-7-customers-animations.zip
  • 10. Adding Animations to our Customers Page.mp4
    03:59
  • 11. Time to Practice - CSS Animations.html
  • 12.1 animations-9-finished.zip
  • 12. Using JavaScript Animation Event Listeners.mp4
    03:24
  • 13.1 css-16-animations-summary.pdf
  • 13. Wrap Up.mp4
    01:35
  • 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
  • 1. Module Introduction.mp4
    00:34
  • 2. CSS Modules & Their Working Groups.mp4
    01:55
  • 3.1 future-proof-1-css-variables.zip
  • 3. Using CSS Variables.mp4
    07:31
  • 4. Understanding & Using Vendor Prefixes.mp4
    04:47
  • 5.1 future-proof-2-vendor-prefixes.zip
  • 5. Which Prefixes Should You Use.mp4
    02:58
  • 6.1 future-proof-3-finished.zip
  • 6. Detecting Browser Support with @supports.mp4
    05:09
  • 7. Polyfills.mp4
    02:45
  • 8. Eliminating Cross-Browser Inconsistencies.mp4
    02:58
  • 9. How to Name CSS Classes.mp4
    04:52
  • 10.1 css-17-future-css.pdf
  • 10. Vanilla CSS vs Frameworks.mp4
    08:36
  • 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.mp4
    04:16
  • 12. Useful Resources & Links.html
  • 1. Module Introduction.mp4
    00:42
  • 2. What is Sass & Scss.mp4
    03:30
  • 3. Important Installing Sass.html
  • 4.1 sass-01-installing-sass-starting-code.zip
  • 4. Installing Sass.mp4
    04:25
  • 5. Things to be Improved with Sass.mp4
    01:33
  • 6. Nesting Selectors.mp4
    06:35
  • 7. Adding Nested Properties.mp4
    01:27
  • 8.1 sass-02-understanding-variables-finished.zip
  • 8. Understanding Variables.mp4
    03:05
  • 9. Storing Lists & Maps in Variables.mp4
    05:58
  • 10. Built-In Functions.mp4
    03:18
  • 11. Time to Practice - Sass.html
  • 12. Adding Simple Arithmetics.mp4
    02:24
  • 13.1 sass-05-adding-better-import-and-partials-finished.zip
  • 13. Adding Better Import and Partials.mp4
    04:46
  • 14. Improving Media Queries.mp4
    02:24
  • 15.1 sass-06-understanding-inheritance-finished.zip
  • 15. Understanding Inheritance.mp4
    03:33
  • 16. Adding Mixins.mp4
    06:45
  • 17. Using the Ampersand Operator.mp4
    02:57
  • 18. Wrap Up.mp4
    01:13
  • 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
  • 1. Course Roundup.mp4
    00:55
  • 2. Bonus More Content!.html
  • Description


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

    What You'll Learn?


    • Learn why CSS is amazing, not something to be afraid of!
    • Use basic as well as advanced CSS features
    • Flexbox, grid, animations, transitions, fonts, media queries and much more - it's all included!
    • Understand the concepts and theory behind CSS and certain CSS features
    • Build beautiful websites which don't just contain great content but also look good

    Who is this for?


  • Anyone who wants to learn CSS for the first time or wants to sharpen his or her CSS skills
  • Anyone who's excited to learn about the latest CSS features like Flexbox, CSS Grid or CSS Variables
  • Anyone who knows CSS but wants to dive deeper
  • What You Need to Know?


  • You should know the very basics about HTML and web development in general
  • NO advanced HTML or web development knowledge is required though
  • NO CSS knowledge is required at all! You'll learn it all in this course!
  • More details


    Description

    Join this bestselling CSS course to learn all about CSS from the ground up, in great depth!

    CSS ( Cascading Style Sheets) is a "programming language" you use to turn your HTML pages into real beautiful websites.

    This course covers it all - we start at the very basics (What is CSS? How does it work? How do you use it)? and gradually dive in deeper and deeper. And we do this by showing both practical examples as well as the theory behind it.

    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.

    Of course this course offers the theory and practical examples - we'll build an entire real course project throughout the course - but there also are multiple assignments, quizzes and challenges for you to practice individual concepts taught throughout the course.

    Talking about the course project - we'll build the frontend (no backend) of a fictional web hosting company. We'll have a starting screen which has different sections, we got a responsive design with an animated side-drawer, we got modals and forms and in general we got a lot of CSS animations, font styles and more!

    Here's what's inside the course in detail - this is all also applied to the mentioned course project:

    • The basics about selectors, combinators and how you set up styling rules in general

    • Properties, values and decalarations

    • How specifity and inheritance work and why it's called "Cascading" Style Sheets

    • Important theoretical concepts like the "Box Model"

    • How the default position of elements can be changed

    • Styling backgrounds (e.g. gradients) and images

    • Which units and dimensions you typically use in CSS (px, rem, % and more)

    • How JavaScript and CSS interact

    • Responsive design and what "Mobile First" means

    • Styling forms and form inputs

    • Working with text, fonts and text styles

    • Flexbox! How it works and how to use it

    • Using the CSS Grid and how it differs from Flexbox

    • Transforming and animating HTML elements with the help of CSS

    • Writing future-proof CSS with features like CSS variables or best-practice class names

    • Using Sass and what it actually is all about

    Is this course for you?

    It's for you if

    • you started with learning web development and you want to build more beautiful websites

    • you already know CSS but want to dive deeper

    • you're using CSS in a trial-and-error manner and want to change this (you should!)

    You might come back later if

    • you're an absolute CSS pro and you know the CSS working group drafts by heart

    • you're a backend-only developer (Node, PHP, NO HTML or frontend JavaScript)

    • you're a total newcomer to web development and you don't know the basics about HTML

    If that sounds good to you, we'd be more than happy to welcome you in this course!

    Who this course is for:

    • Anyone who wants to learn CSS for the first time or wants to sharpen his or her CSS skills
    • Anyone who's excited to learn about the latest CSS features like Flexbox, CSS Grid or CSS Variables
    • Anyone who knows CSS but wants to dive deeper

    User Reviews
    Rating
    0
    0
    0
    0
    0
    average 0
    Total votes0
    Focused display
    Category

    CSS

    Academind by Maximilian Schwarzmüller
    Academind by Maximilian Schwarzmüller
    Instructor's Courses
    Bundling the courses and know how of successful instructors, Academind strives to deliver high quality online education. Online Education, Real-Life Success - that's what Academind stands for. Learn topics like web development, data analyses and more in a fun and engaging way.We've taught more than 2,000,000 students on a broad variety of topics. We'd love to teach you as well! :)Keep learning!
    Maximilian Schwarzmüller
    Maximilian Schwarzmüller
    Instructor's Courses
    Experience as (Web) DeveloperStarting out at the age of 12 I never stopped learning new programming skills and languages. Early I started creating websites for friends and just for fun as well. Besides web development I also explored Python and other non-web-only languages. This passion has since lasted and lead to my decision of working as a freelance web developer and consultant. The success and fun I have in this job is immense and really keeps that passion burningly alive.Starting web development on the backend (PHP with Laravel, NodeJS, Python) I also became more and more of a frontend developer using modern frameworks like React, Angular or VueJS in a lot of projects. I love both worlds nowadays!I also build full-stack applications and acquired expert DevOps and cloud computing knowledge - proven by the many AWS certifications I hold (incl. the top-level Solutions Architect Professional certification).As a self-taught developer I had the chance to broaden my horizon by studying Business Administration where I hold a Master's degree. That enabled me to work in a major strategy consultancy as well as a bank. While learning, that I enjoy development more than these fields, the time in this sector greatly improved my overall experience and skills.Experience as InstructorAs a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enables me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses and more than 2,000,000 students on Udemy is the best proof for that.Whether working as development instructor or teaching Business Administration I always received great feedback. The most rewarding experience is to see how people find new, better jobs, build awesome web applications, acquire amazing projects or simply enjoy their hobby with the help of my content.Together with Manuel Lorenz, I founded Academind to offer the best possible learning experience to our more than 2,000,000 students.
    Manuel Lorenz
    Manuel Lorenz
    Instructor's Courses
    Having worked as a business analyst in both a major consultancy and an investment bank, I always found myself confronted with both various and complex problem sets and challenging client demands. The rapid development of technology and business requirements forces everyone to constantly adapt and to continue learning.Being an early adopter of new and quickly evolving tools, I always enjoyed both learning these tools and passing on my knowledge to my colleagues and fellow students. Since working as a business analyst implies a high affinity to programming, I also enjoy working as a web developer. It's that combination of self-taught knowledge and its application in a highly competitive consulting environment for various clients which gave me the ability to evaluate solutions from an industry perspective as well as from a learner's perspective. The latter also allows me to identify the pain points students might hit when learning these tools.Since I always found it hard to find high quality, understandable and comprehensive learning materials, I decided to create such materials on my own. Together with Maximilian Schwarzmüller I founded Academind to offer the best possible learning experience on web development and data science to our more than 2.000,000 students.
    Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.
    • language english
    • Training sessions 266
    • duration 20:49:00
    • English subtitles has
    • Release Date 2024/04/23

    Courses related to CSS

    Subtitle
    CSS Basics
    Treehouse Anwar Montasir
    Anwar Montasir
    CSS Basics
    4:37:20
    English subtitles
    04/09/2023
    Subtitle
    Introduction to HTML and CSS
    Treehouse Treasure Porth
    Treasure Porth
    Introduction to HTML and CSS
    1:00:37
    English subtitles
    04/09/2023