Roadmap
Tips Writing Progress
Refactoring
⌛️ In Progress
0✅ Published
12- Grid [grid-template-columns:1fr_auto]
- Color scheme
- Aspect-Ratio
- Scroll margin and padding
- List image
- Text Balance
- Viewport (dvh instead of screen)
- Inset instead of top-0 right-0 bottom-0 left-0
- Size utilities
- Space utilities
- Use of * and **
- Hyphens : break long words
Use of
⌛️ In Progress
0✅ Published
16- File : style input:file
- Marker : style list-marker
- Selection : highlight selected text
- Data-attribute : style based on data-attributes
- Visited : style a link if it has already been visited
- Target : style an element if it’s id matches the url
- Last, First and Only
- Indeterminate
- Empty : style an element when it doesn't contain an element
- Autofill : style an autofilled input
- Enabled and Disabled
- Container
- Focus Within and Focus visible
- Odd and Even
- Peer variant
- Has variant
How To Create
⌛️ In Progress
17- Text with limited lines
- Blur background
- Animated Navbar without js
- Fancy Button (use before instead of box-shadow)
- Margin Auto (responsive)
- Glassmorphism
- Snap Scroll
- Mix Blend
- HTML anchor target (top)
- Animated Arrow Icon
- Semantic Colors
- Mid Container
- Animated Hamburger Icon
- Bonus (dark mode in css)
- A Color strategy
- Dark Light mode through css variables and data attributes
- Colored underline
✅ Published
14- Gradient Text
- Scaling Container
- Stripes
- Dotted background
- In - Out scaling underline
- Input with Icon
- Native dialog
- Gradient borders
- Stacked avatars with transparent background
- Perfect inner-outer border radius
- Opacity focus (when hover navlinks only the current link has 100 opacity and the others 50)
- Autosizing Textarea
- Sidebar Layout
- Floating labels input
When To Use
⌛️ In Progress
4- Sr-only (accessibility)
- Max width, min width, max height, and min height
- Container Queries
- Drop shadow-sm
✅ Published
5- arbitrary values
- Theme variables
- Calc function
- Logical Properties
- Group and In
Mistakes to Avoid
⌛️ In Progress
1- Using % unit in width for container elements
✅ Published
3- Interpolations
- Important (`!utility`)
- Not using layers