HTML & CSS General
- HTML Basics
- HTML & CSS : Tips & Tricks
- A link basics
- A link states
- Meta tag redirect
- Meta Viewport
- Input Types
- Base CSS
- Base CSS V2
- Scroll Behaviour
- CSS Selectors
- Pseudo Elements
- CSS Selectors Cheat Sheet
- CSS Box Model
- Positioning
- Z-index
- Flow Control
- Multi-Column Layout
- Accessibility : Skip to Main Content
- SVG Basics
- Buttons
- Inputs
- Editable CSS
- Text Bg clip
- Font Sizing and padding : em vs rem
- Variable Fonts
- Font Sizing in VW?
- The 1px gap under image
- Make any image square
- Images Srcset
- Css Shapes
- HTML - CSS Highlight color etc
- CSS ~ JS Custom Properties
- Image Object Fit
- Writing Mode
- CSS : Console log?
- Custom Checkbox
- CSS Feature Check
- Circular Menu
- Tool Tip
- Background Patterns
- Background Patterns Settings
- Box shadows
- Text shadows
- Borders types, colors etc
- Border Radius
- Border : Type 1
- Border : Type 2
- Border : Type 3
- Border : Type 4
- Gradients Overview
- Text Gradients
- Gradient 1
- Gradient 2
- Gradient 3
- Multiple Backgrounds
- Table Header Sticky
- HTML Popup
- HTML Symbols & Entities
- CSS for print
- HTML accent color
- Scroll bar gutter
CSS Transitions ~ Animations ~ Transforms ~ Effects
- CSS Transition Overview
- CSS Transform Overview
- CSS Animation Overview
- Animating Spinner
- Animating Buttons
- Animation Underline
- BG Animation
- Animating waves for header
- Typewriter Effect
- Cool Merging text effect
- Gradient Underline
- Background Color Animation
- Animating Text Effect
- Pure CSS animating bg
- Animation canvas bg
- Moving bg text clip
- Blur vs Background Blur
- TV Show Intro
- DOT Location animation
- Headline animation
Modals
Simple Pages
- Simple Blog
- Before after effectcomparing images : CSS only
- Responsive iFrame
- Ecommerce Cart : JS Based
- Ecommerce Template
- To do List : JS
- To do List 2: JS
- Cart Total : JS
- Time Ticking : JS
- Replace code tags
- Tabs - JS - CSS
- Accordion
- Go to top
- Image Lightbox
- Image Lightbox 2
- Content Slider
- Notes app : js
- Skeleton Loading
- Greeting Wallpaper
- Web form accessibility
- Auto Complete text box
- Confeti effect
- Toggle Switch
- 45deg Gallery
- 45deg Gallery 2
- Glitch Effect 1
- Glitch Effect 2
- 4 images in 2x2 grid
- Landing Page 1
- Landing Page 2
- Pricing Cards
- Profile Cards
- Heading underline ::after
- Nest Theme
Useful Websites
- Blobatar - Generate deterministic geometric avatars from any string using a lightweight, dependency-free library and interactive editor.
Misc
- Top 20 UX Questions
- Useful Laws & Principles
- readme.md
- Which side should the primary button be right or left? and serial order of the primary button, first or last?
- Order of classes vs stylesheet
- CSS : !important vs inline. Who wins?