1. Glassmorphism
Glass UI makes elements look like frosted glass. The magic: background: rgba(255,255,255,0.05) + backdrop-filter: blur(20px) + a subtle white border. Always needs a colorful background behind it to show the blur effect.
Dark Glass
Frosted panel
Glass Card
blur + rgba
Crystal
White border
2. Claymorphism
Clay UI looks puffy, 3D, and soft — like actual modeling clay. The trick is layered box-shadow: outer dark shadow + bright highlight on top + inner glow. Popular in playful apps and landing pages.
Clay Card
Green Clay
3. Neumorphism (Soft UI)
Neumorphism looks like elements are pushed out from the background. Elements share the same background color — the depth comes only from shadows. Best for light grey backgrounds.
Soft Push
4. Brutalism
Raw, bold, no-rules design. Huge fonts, primary colors, thick black borders, zero subtlety. Think: early Craigslist, Figma's old marketing, brutalist.fyi. Everything is deliberately "ugly" in a beautiful way.
5. Bento Grid
Japanese lunchbox-style layout — cards of different sizes arranged in a mosaic grid. Made famous by Apple's WWDC pages and Linear's homepage. Key: grid-template-areas to define each tile's size.
6. Dark Mode UI
Dark backgrounds (#0a0a0f to #111118), light text, neon or muted accents. Reduce eye strain, look premium. Use prefers-color-scheme: dark to auto-enable based on OS preference.
7. Minimalism
White space is the design. Maximum one accent color, clean sans-serif, no decoration. Every pixel earns its place. Famous examples: Apple.com, Linear.app, Notion's landing page.
8. Gradient UI
Vibrant gradient backgrounds, mesh gradients, aurora effects. Stripe, Linear, and Vercel use this style. Key: background: linear-gradient() or radial-gradient() with multiple overlapping layers.
9. Swiss / Typography UI
Design driven entirely by typography and grid. No gradients, no illustrations — just clean type hierarchy, sharp lines, and whitespace. Inspired by the International Typographic Style from Switzerland in the 1950s.
Gallery UX — How it works
A gallery UX shows items in a grid. On hover: overlay with title/action. Clicking opens a lightbox or detail view. Used in photo apps, portfolios, product pages.
Masonry / Pinterest UX
Items flow into columns at variable heights. Creates a natural, organic look. CSS: columns: 3 is the simplest method.
Tab / Filter UX
Category tabs or pill filters let users narrow down content. Clicking a tab shows only matching items. Used in marketplaces, dashboards, and portfolios.
FILTER PATTERNSearch UX
Real-time search as you type (debouncing prevents lag). Shows suggestions in a dropdown. Filters results instantly. Keyboard navigable.
DISCOVERYCard List UX
A list of cards with image, title, description, and CTA button. Good for blogs, products, and profiles. Can switch between list and grid view.
STANDARDCarousel / Slider
Items scroll horizontally with arrows or swipe. Great for featured content, testimonials, and image galleries. Use sparingly — users often miss content.
SWIPEModal / Lightbox
A popup overlay that shows detail without leaving the page. Click outside or press ESC to close. Used for forms, image previews, confirmations.
OVERLAYInfinite Scroll
Load more content as the user scrolls down — no "next page" button. Used by Twitter, Instagram, TikTok. Uses IntersectionObserver API.
Text Elements
h1–h6 for headings, p for paragraphs, span for inline text, strong/em for emphasis, blockquote for quotes.
Media Elements
img for images, video with controls, audio player, canvas for drawing, iframe for embedding content.
Form Elements
input (text, email, range, checkbox), textarea, select/option, button, label, form — all for user data collection.
Layout Elements
div (generic container), section, article, header, footer, nav, main, aside — semantic elements for structure.
Link & List Elements
a for hyperlinks, ul/ol/li for lists, dl/dt/dd for definition lists. Links are the web's core navigation system.
Table Elements
table, thead, tbody, tr for rows, th for headers, td for cells. Use for data only — not for layouts anymore!
Script & Style
script to add JavaScript, style for inline CSS, link rel="stylesheet" to load external CSS files.
SVG Elements
Scalable Vector Graphics — icons, illustrations, charts drawn in code. path, circle, rect, g, text, defs inside <svg>.
Dialog & Details
dialog for native popups (no JS needed for basic use), details/summary for accordion dropdowns — zero CSS required.
Fade In/Out
opacity 0 → 1
Bounce
translateY loop
Spin
rotate 360deg
Pulse
scale 1 → 1.2
Shake
rotate ±8deg
More animation types:
Scroll Animations
Elements animate as you scroll. Use IntersectionObserver API + CSS class toggle. Libraries: AOS, GSAP ScrollTrigger, Animate On Scroll.
ON SCROLLCSS Keyframes
Define animation steps with @keyframes. Control timing with animation-duration, animation-timing-function (ease, linear, cubic-bezier).
CSS NATIVEHover Micro-interactions
Small animations on hover: button scale, icon rotate, underline grow, color shift. Adds polish and responsiveness to user actions.
UX POLISHLoading Animations
Spinner, skeleton screens, progress bar. Shown while data loads. Prevents users from thinking the site is broken. Use CSS or Lottie.
FEEDBACKPage Transitions
Fade or slide between pages. CSS View Transitions API (new!) makes this easy. GSAP or Barba.js for more control.
NAVIGATIONText Animation
Typewriter effect, text reveal, letter-by-letter stagger, gradient shift on text. Typed.js or pure CSS for basic effects.
TYPOGRAPHY🔍 SEO — Search Engine Optimization FOR GOOGLE
SEO makes your page show up in Google search results. You optimize for: meta title, meta description, heading structure (h1→h2→h3), page speed, mobile-friendliness, and backlinks. Use JSON-LD structured data to give Google extra context about your content.
🤖 AEO — Answer Engine Optimization FOR AI
AEO makes your content appear in AI answers — like Google's Featured Snippets, ChatGPT Browse, and Perplexity. Key: write clear Q&A style content, use FAQ schema (JSON-LD FAQPage), structure answers in 40–50 word paragraphs, use clean semantic HTML. AI models prefer precise, factual, well-structured pages.
🗺️ GEO — Generative Engine Optimization FOR LLMs
GEO is newer — optimizing for Large Language Models like Gemini and GPT-4. LLMs prefer content with: authoritative citations, clear entity mentions (names, locations, brands), structured data (Person/Organization schema), and factual accuracy. Your content becomes an LLM's "source of truth."
Essential JSON-LD Schemas
Core Web Vitals
Google scores your page on LCP (load speed), FID (interactivity), and CLS (layout stability). Test with Google Lighthouse.
PERFORMANCEMobile-First
Google ranks mobile versions first. Use responsive CSS (flexbox, grid, media queries). Test with Chrome DevTools device mode.
RESPONSIVEMeta Tags
title tag (60 chars), meta description (160 chars), canonical URL, robots meta, hreflang for multiple languages.
HEAD TAGSFavicon
The tiny icon in the browser tab (and bookmarks). A 32×32px or 16×16px .ico / .png file — or use an SVG favicon for perfect clarity at any size. Place as favicon.ico in your root folder, or link it in <head>.
OG Image (Open Graph)
When you share a link on Twitter, Discord, WhatsApp — the big preview image that appears. Must be 1200×630px. Set via <meta property="og:image"> in <head>. Make it eye-catching with your logo and title.
<link rel="icon" href="data:image/svg+xml,<svg...><text y='26'>⚡</text></svg>">
Create a GitHub account
Go to github.com, sign up free. Your username becomes part of your site URL — choose wisely!
github.com/signup
Create a new repository
Click the + button → New Repository. Give it a name (no spaces), set Public, and optionally add a README. Click "Create repository".
github.com/new
Install Git on your computer
Download git-scm.com. Run the installer. Verify in terminal: git --version should return a version number.
git --version
Initialize and connect your project
Open terminal in your project folder. Run these 3 commands to initialize git, stage all files, and make your first commit.
git init && git add . && git commit -m "first commit"
Push to GitHub
Connect your local repo to the remote GitHub repo and push your code. Replace YOUR-USERNAME and REPO-NAME with your actual values.
git remote add origin https://github.com/USER/REPO.git && git push -u origin main
Enable GitHub Pages
Go to your repo → Settings → Pages → Source: Deploy from branch → Branch: main → /root → Save. Your site goes live at username.github.io/repo-name in ~60 seconds.
Settings → Pages → Enable
Update your site
Made changes? Run these 3 commands again to push updates. GitHub Pages auto-rebuilds in seconds.
git add . && git commit -m "update" && git push
CSS Flexbox
1D layout system. Arranges items in a row or column. display:flex on parent. Children align with justify-content, align-items. The most-used CSS layout tool.
LAYOUTCSS Grid
2D layout system. Creates rows AND columns simultaneously. grid-template-columns with repeat() and minmax() for responsive grids without media queries.
LAYOUTMedia Queries
CSS that applies only at certain screen sizes. @media (max-width: 768px) { ... } makes your site adapt for phones, tablets, and desktops.
RESPONSIVEAPI Fetch
Load data from external services (weather, jokes, anime, etc). fetch('https://api.example.com/data').then(r => r.json()).then(data => console.log(data))
JAVASCRIPTlocalStorage
Store data in the browser permanently. No server needed. localStorage.setItem('key', value) / getItem('key'). Great for settings, saved state, dark mode pref.
STORAGECSS Variables
Define reusable values. --primary-color: #573AFC; on :root. Use anywhere with var(--primary-color). Change theme in one place, updates everywhere.
CSSDOM Manipulation
JavaScript controls the page. document.getElementById(), querySelector(), addEventListener(), innerHTML, classList.add/remove. This is how all interactivity works.
JSCDN Libraries
Load libraries instantly without installing: <script src="https://cdnjs.cloudflare.com/...">. Common: Three.js, GSAP, Chart.js, Alpine.js, Tailwind.
LIBRARIESAccessibility (a11y)
Make sites usable for everyone. Use alt="" on images, aria-label on buttons, semantic HTML (button not div), sufficient color contrast, keyboard navigation.
IMPORTANTColor Theory
60-30-10 rule: 60% neutral (bg), 30% secondary, 10% accent. Use HSL for easy tweaking. Tools: coolors.co, paletton.com, Adobe Color.
DESIGNTypography Scale
Use a type scale: 12px / 14px / 16px (base) / 20px / 24px / 32px / 48px / 64px. Font pairings: Inter + Fira Code, Poppins + Lato, Playfair + Source Sans.
TYPOGRAPHYHTTPS & SSL
Secure your site with HTTPS. GitHub Pages, Vercel, and Netlify give you free SSL automatically. Google ranks HTTPS sites higher than HTTP.
SECURITYCustom Domain
Buy a domain (Namecheap, Porkbun, Google Domains). Point CNAME to your hosting provider. yourname.com looks more professional than github.io/yourname.
DOMAINnpm / Package Manager
npm install [package] adds tools/libraries to your project. node_modules folder contains them. package.json tracks what you've installed. Don't commit node_modules!
TOOLINGVite / Build Tools
Vite bundles your code, handles imports, hot reloads in dev. npm create vite@latest. Essential for React/Vue projects. Way faster than webpack.
BUILDGit Branching
Create branches for features: git checkout -b feature-name. Work safely without breaking main. Merge with git merge or GitHub Pull Request.
GIT