20 CSS Tricks You Probably Haven't Used Before

Aga Naplocha, Creative coder & designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
23 Lessons (1h 12m)
    • 1. Introduction

      1:44
    • 2. Preparations – what you need

      1:43
    • 3. Trick #1 – Multiple Backgrounds

      5:39
    • 4. Trick #2 – Viewport width & height units (vw & vh)

      2:33
    • 5. Trick #3 – Font shorthand

      2:47
    • 6. Trick #4 – Text stroke

      3:13
    • 7. Trick #5 – Drop shadow

      2:48
    • 8. Trick #6 – Filter blur

      2:00
    • 9. Trick #7 – Character unit (ch)

      2:20
    • 10. Trick #8 – First letter

      5:11
    • 11. Trick #9 – Line clamp

      3:04
    • 12. Trick #10 – Numbered list

      6:26
    • 13. Trick #11 – Truncate text

      3:23
    • 14. Trick #12 – Gradient text

      2:53
    • 15. Trick #13 – Cross Text Selection

      2:18
    • 16. Trick #14 – Conic gradient

      3:41
    • 17. Trick # 15 – Word break tag

      4:16
    • 18. Trick #16 – Custom Bullet Points

      5:06
    • 19. Trick #17 – Object fit

      3:16
    • 20. Trick #18 – Column count

      1:19
    • 21. Trick #19 – Adjacent Sibling Combinator

      2:49
    • 22. Trick #20 – General Sibling Combinator

      1:34
    • 23. Final word

      1:58
40 students are watching this class

Project Description

TASK

You'll be coding all of the elements with me. In the package, you'll find the template of the website where you can apply CSS tricks in a way whichever you like! Use your creativity. Sky's the limit!

Website BEFORE:

f4d4349a

Website AFTER fulfilling all the exercises:

f303643e

DELIVERABLES

Share the links or screenshots of your visual version for the mentioned CSS tricks :) Feel free to use different composition, colors & typography :) 

Resources(1)

Student Projects

project card
1 comment