01 — HERO SECTIONS
Hero Layouts
The first section a visitor sees. Six styles shown: dark overlay, minimal white, bold dark with glow, split layout, image slideshow, and video slideshow.
Hero A — Dark Overlay + Centered Text + Buttons HERO
New Collection · Spring 2026
Designed for
Designed for
the way you live.
Thoughtfully crafted products that blend into your life seamlessly. Built to last. Made to inspire.
Hero B — Minimal White + Left-Aligned + Image Right HERO
Introducing Series 6
Work smarter.
Work smarter.
Live better.
The tools you need, designed the way you want. Productivity starts here.
Hero C — Full-Screen Bold Dark + Gradient Text + Glow HERO
Web & Multimedia · Portfolio
Build things
that matter.
Every project is a chance to create something real. Learn the craft. Ship the work. Make your mark.
Hero D — Split Layout 50/50 (Text Left, Image Right) HERO
Available Now
Fresh flavors,
Fresh flavors,
delivered daily.
Farm-to-table ingredients sourced from local growers. Ready to cook in 15 minutes or less.
Hero E — Image Slideshow with Different Text Per Slide SLIDESHOW
Hero F — Video Slideshow with Real <video> Elements VIDEO SLIDESHOW
03 — STACKED SECTIONS
Vertical Storytelling
Full-width sections stacked vertically with alternating backgrounds. Each section tells one story.
Five stacked sections — light, dark, warm, image band, minimal LAYOUT
What I Do
I write code that
I write code that
looks like design.
Clean HTML structure, precise CSS, and just enough JavaScript. Every line serves a purpose. Nothing wasted, nothing missing.
See my projects →
Responsive Design
Every screen.
Every screen.
Every device.
Mobile-first layouts that adapt gracefully from the smallest phone to the widest monitor. Tested at every breakpoint.
Learn about my process →Deployed live.
On the real internet.
Not just a file on your desktop — a real website with a real URL, deployed on Netlify, accessible to anyone in the world.
View Live Sites
03
The details are the design.
Hover effects, transitions, spacing, hierarchy — everything deliberate. Because great design is felt, not just seen.
04 — SPLIT LAYOUTS
Text + Image Side-by-Side
Three variations: 50/50 with checklist, 40/60 quote panel, and dark text with full bleed image.
Split A — 50/50 · Image Left · Text + Checklist Right SPLIT
Your Class Project
Built with purpose,
Built with purpose,
designed with care.
A fully responsive portfolio built from scratch in Your Class. No templates. No shortcuts. Just clean code and good decisions.
- HTML5 semantic structure
- CSS Grid and Flexbox layouts
- Mobile responsive at every breakpoint
- Deployed live on Netlify
Split B — 40/60 · Dark Quote Panel Left · Full Image Right SPLIT
"
Design is not just what it looks like and feels like. Design is how it works.
— Steve Jobs, Apple co-founder
Split C — 42/58 · Dark Text Left · Full Bleed Image Right SPLIT
About This Project
A semester of
A semester of
real work.
Every project, every line of code, every deployment — here's what I built in Your Class Web Design.
View All Projects
05 — CARDS
All Types of Cards
Seven card patterns used on real home pages: product, feature, blog, pricing, testimonial, profile, and horizontal list.
Product Cards — 4 per row · badge · price · rating · add button CARD
SALE
Accessories
Minimalist Watch
$89$119
NEW
Skincare
Vitamin C Serum
$42
HOT
Footwear
Trail Runner Pro
$135
Audio
Wireless Headphones
$199$249
Feature / Service Cards — icon · title · description · link CARD
Web Development
Hand-coded HTML and CSS, responsive layouts, and live deployments to real URLs you can share.
Learn more →
UI Design
Clean, intentional interfaces designed with visual hierarchy, color systems, and spatial balance.
Learn more →
Responsive Design
Mobile-first thinking baked into every project. Tested on real devices at every screen size.
Learn more →
Blog / Article Cards — image · category · title · excerpt · author CARD
Why Every Developer Should Learn CSS Grid First
Grid changed the way I think about layout. Here's why it should be the first thing you learn.
March 14, 2026
The Spacing System That Makes Everything Look Better
8px grids, 4px micro-spacing, and why consistent rhythm makes even simple pages feel polished.
April 2, 2026
Mobile First Isn't Just a Buzzword — Here's Why It Changes Everything
Starting with the smallest screen forces better decisions. Here's how to actually do it.
April 18, 2026
Pricing Cards — featured center card scales up · gradient dark background CARD
Starter
$9
per month, billed monthly
- 5 projects
- 10GB storage
- Basic analytics
- Email support
POPULAR
Pro
$29
per month, billed monthly
- Unlimited projects
- 100GB storage
- Advanced analytics
- Priority support
- Custom domain
Enterprise
$99
per month, billed annually
- Everything in Pro
- 1TB storage
- SSO & security
- Dedicated manager
Testimonial Cards — star rating · quote · author with avatar CARD
★★★★★
"This class completely changed how I think about the web. I went from zero to deploying real sites in one semester."
Marcus W.
Your Class Student, Spring 2026
★★★★★
"I never thought I could build something that actually looks professional. Dr. G's approach made it click for me."
Priya M.
Your Class Student, Fall 2026
★★★★★
"The portfolio I built in this class got me my first freelance client before the semester was even over."
Darius K.
Your Class Student, Fall 2026
Profile / Team Cards — photo · name · role · bio · social icons CARD
Your Name
Web Designer
Specializing in responsive layouts and clean CSS. Currently studying at Your School.
Alex Chen
UI/UX Designer
Passionate about user experience and accessible design. Figma power user.
Maya Torres
Multimedia Creator
Video, motion graphics, and interactive web experiences built from scratch.
Horizontal List Cards — image left · text right · arrow · hover shift CARD
Photography Grid — Responsive CSS Grid Gallery
A 4-column responsive image grid with hover zoom effects, deployed live on Netlify.
→
Portfolio Landing Page — Your Class Final
Fully responsive portfolio with hero slideshow, skills section, and contact form.
→
Product Landing Page — Tailwind CSS
A product marketing page built entirely with Tailwind utility classes — zero custom CSS.
→
05B — BOX LAYOUTS
Boxes & Bento Grids
Modular box layouts where content blocks can span different sizes. Popular for dashboards, portfolios, and Apple-style product pages. Each box is a self-contained unit.
Bento Grid — mixed-size boxes (Apple style) BENTO
Featured Project
Code
Design
Team
Dev
UI Design
Web
Equal Square Boxes — 3x3 grid, same size BOXES
Mountains
Code
Workspace
Design
Team
UI
Dashboard Boxes — big hero + smaller info cards DASHBOARD
Projects
View all of your current projects and their progress.
Schedule
Upcoming deadlines and important dates.
Messages
Recent conversations and team updates.
Resources
Tutorials, documentation, and helpful links.
06 — CREATIVE TEXT
Typography on Home Pages
How to use text as a design element — not just content. Gradients, outlines, scale, rhythm, and contrast.
Gradient Text · Outlined Text · Mixed Fill TEXT
Gradient Text
Design.
Code.
Deploy.
Code.
Deploy.
Outlined + Filled Together
Future
Forward
Huge Background Number + Stagger Scale TEXT
Mixed Weight Headline + Typewriter Cursor + Split Color TEXT
Mixed Weight
I build things
on the internet
for a living.
on the internet
for a living.
Split Color + Typewriter
I design for
the web.
the web.
I code, I design
Pull Quote · Oversized Number · Eyebrow System TEXT
Good design is as little design as possible.
— Dieter Rams
03
Years of building on the web.
Every project a lesson. Every bug a teacher. Getting better every day.
Text Highlights · Inline Code · Warm Background Type TEXT
Inline Highlights
Build real sites
not just mockups.
not just mockups.
Use position: fixed for sticky nav,
object-fit: cover for images.
Real properties for real results.
Warm
typography
works.
typography
works.
Golden backgrounds with dark amber text create warmth and urgency. Great for CTAs and hero banners.
Full Eyebrow System — 3 styles TEXT
Plain uppercase
Section Heading
Dot prefix
Another Section
Filled Badge
Third Section