HTML UI Elements
Eight portfolio-grade UI builds: gradient buttons, a glass navbar with hamburger menu, a DMV form, CSS-only tabs, cards, tables, and a full hero.
A portfolio full of tutorials looks like a portfolio full of tutorials. What gets attention is polish: the button with a gradient border that animates on hover, the navbar with a glass effect that collapses into a working hamburger menu. This course is eight of those builds, back to back.
The projects
Every project opens with a preview of the finished component, then builds it in parts. The rainbow button teaches pseudo-elements by using them for a gradient border, then animates it. The modern navigation bar is the deepest one: CSS variables and theming, the glass effect, a gradient logo, animated underlines on the desktop links, and a mobile hamburger menu to finish.
From there the range widens. A flight card with icons and action buttons. A DMV license application form that works through the input types most developers never practice, text, number, date, selects, radios, checkboxes, file upload, and textarea. A tab system that needs no JavaScript because radio buttons and the :has() selector do the work. An interactive data table built row by row. And two hero projects: one focused on layered positioning, and a big final hero section built across ten parts, with an animated status badge, call-to-action buttons, social proof avatars, a media card with play button, glassmorphism survey bubbles, and a metric card.
Who it fits
One honest note: this is a builders' course, not a fundamentals course. Lessons tell you what to build and how, and they assume the vocabulary is already there. If selectors or the box model still feel new, run through HTML Basics and CSS Basics first, then come back here and turn those fundamentals into things worth screenshotting.
What you'll learn
- ✓ Build a gradient-border rainbow button using pseudo-elements and hover animation
- ✓ Create a modern navbar with CSS variables, a glass effect, animated underlines, and a mobile hamburger menu
- ✓ Style a flight card with icons, action buttons, and hover polish
- ✓ Build a full DMV-style application form covering text, number, date, selection, and file inputs
- ✓ Make a CSS-only tab system driven by radio buttons and the :has() selector
- ✓ Construct an interactive data table row by row
- ✓ Position layered hero visuals and center content responsively with containers
- ✓ Build a complete hero section with status badge, CTA buttons, social proof, and glassmorphism cards
Course Curriculum
7 sections · 42 lessons
1
Rainbow Button Project
4 lessons
- Rainbow Button Project - Preview
- Rainbow Button Project - Part 1: Structure and Basic Styling
- Rainbow Button Project - Part 2: Gradient Border with Pseudo-Elements
- Rainbow Button Project - Part 3: Hover Animation
2
Modern Navigation Bar
8 lessons
- Modern Navigation Bar - Project Preview
- Modern Navigation - Part 1: HTML Structure Setup
- Modern Navigation - Part 2: CSS Variables & Theming
- Modern Navigation - Part 3: Glass Effect & Container Styling
- Modern Navigation - Part 4: Gradient Logo Design
- Modern Navigation - Part 5: Desktop Links with Animated Underlines
- Modern Navigation - Part 6: Mobile Responsive & Hamburger Menu
- Modern Navigation - Complete: Mobile Responsive & Hamburger Menu
3
CSS Tabs Project
5 lessons
- CSS Tabs System - Preview
- CSS Tabs Project - Part 1: HTML Structure & Basic Layout
- CSS Tabs Project - Part 2: Radio Buttons & Tab Labels
- CSS Tabs Project - Part 3: Tab Content & CSS :has() Selector
- CSS Tabs Project - Part 4: Tab Styling & Visual Effects
4
Flight Card Project
6 lessons
- Flight Card Project - Preview
- Flight Card Project - Part 1: HTML Structure & Layout Setup
- Flight Card Project - Part 2: Card Container & Image Styling
- Flight Card Project - Part 3: Info Sections with Icons
- Flight Card Project - Part 4: Action Buttons & SVG Icons
- Flight Card Project - Part 5: Hover Effects & Final Polish
5
CSS Layout Fundamentals
1 lessons
- CSS Containers – Centering Content Responsively
6
DMV Form Project
7 lessons
- DMV License Application Form - Preview
- DMV Form Project - Part 1: Form Structure & Basic Styling
- DMV Form Project - Part 2: Text-based Input Types
- DMV Form Project - Part 3: Number & Date Input Types
- DMV Form Project - Part 4: Selection Inputs (Select, Radio, Checkbox)
- DMV Form Project - Part 5: File Upload & Textarea
- DMV Form Project - Part 6: Submit Buttons & Final Polish
7
Hero Section Project
11 lessons
- Hero Section Project - Preview
- Hero Section - Part 1: Layout Structure and Container
- Hero Section - Part 2: Animated Status Badge
- Hero Section - Part 3: Heading and Lead Text
- Hero Section - Part 4: Call-to-Action Buttons
- Hero Section - Part 5: Social Proof & Avatars
- Hero Section - Part 6: Visual Section & Gradient Background
- Hero Section - Part 7: Media Card with Play Button
- Hero Section - Part 8: Survey Bubbles with Glassmorphism
- Hero Section - Part 9: Metric Card with Performance Data
- Hero Section - Part 10: Final Product Card & Completion
Before you start
- ✓ HTML and CSS basics. These are guided builds, not theory lessons, so you should know your way around a stylesheet
