Exercise 6: Semantics & Media
This
Exercise 7: Flexbox Layout
Card 1
Change my background, add a border, make me grow!
Card 2
Try hover:scale-110 or rotate on hover!
Card 3
Add more cards or change flex direction!
Welcome to the SandBox Test Bed
This page is completely cleared and ready for your various experiments, prototypes, or wild ideas. Dive into HTML basics inspired by W3Schools tutorials—try editing, breaking, and rebuilding!
Exercise 1: Headings & Paragraphs
Hello! This is a paragraph with some emphasis.
Hello! Welcome to my sandbox! HTML basics let you structure content easily!
Subheading for Testing
Welcome!
I'm so glad that you visited my blog! I welcome you to join me weekly for fashion ideas and healthy food ideas.
Every week I will share innovative, stylish tips to both blogs. Invite your friends to this page as well!
The more the merrier!
This is small text – try highlighting or deleting parts.
Add more text here. This is small text Hello! – try highlighting Hello! or deleting Hello! parts.
"Hello...testing this section with a proper blockquote." - Sarah Williams
Exercise 2: Lists
Unordered List (Dream Vacation Spots)
- Paris, France – Eiffel Tower at sunset
- Tokyo, Japan – Neon lights and ramen
- Beach in Bali
- Visit Sanur! Endless waves
- Ubud's rice terraces
Ordered List (Recipe Steps)
- Gather ingredients
- Flour
- Eggs
- Sugar
- Mix wet and dry separately
- Bake at 350°F for 25 mins
Exercise 3: Links & Images
Click the link below to visit W3Schools for more tutorials.
Above is a placeholder image – replace the src with your own URL!
Exercise 4: Tables
| Day | Activity | Time |
|---|---|---|
| Monday | Code HTML | 9 AM |
| Tuesday | Test Forms | 10 AM |
| Wednesday | Date | 11 AM |
| Thursday | Activity | 12 PM |
| Friday | Results | 1 PM |
Exercise 5: Forms
Exercise 8: CSS Grid Gallery
Exercise 9: Button Styles
Exercise 10: Modal Dialog
Exercise 11: Accordion
What is HTML?
HyperText Markup Language – the skeleton of all web pages! It is a way to make webpages.
Why Tailwind?
Because it's fast and fun – no more writing CSS files! izt's efficient!
Exercise 12: Progress Bars
HTML Skill: 75%
HTML Skill (Click buttons to animate): 75%
75%
75%
Tailwind Mastery: 45%
Tailwind Mastery: 45%
45%
45%
Exercise 13: Dark Mode Toggle
Try me – I actually work!
Exercise 15: Canvas Fun
Open console → try drawing with ctx.fillRect(), ctx.arc(), etc.
Exercise 16: Click Counter
Count how many times you click!
0
Exercise 17: Mouse-Following Blob
Move your mouse → watch the blob follow!
Exercise 18: Typing Effect
Tilt Me!
Move mouse over → 3D tilt effect
Exercise 20: Confetti Explosion
Exercise 21: Scroll Progress
Scroll down → see the colorful bar grow!
Exercise 22: Glassmorphism
Pure Tailwind magic — try changing opacity, blur, or add hover:backdrop-blur-2xl
Misty Forests
The background stays fixed while you scroll!
Content Break
This section slides over the background like a curtain.
Serene Waters
Exercise 24: Neumorphic Toggles
Zoomed!
Zoomed!
Zoomed!
Exercise 26: Numbers Go Brrr
0+
0 Projects
0% Fun
Exercise 27: Drag & Drop
Drag Me!
Drop Here
Exercise 28: Particle Storm
Watch the magic behind the text
Exercise 29: Scroll Reveal
Appears when you scroll!
Keep scrolling...
Surprise!
Exercise 30: Future Audio Visualizer
Drop an audio file + Web Audio API = Party
Exercise 31: Infinite Scroll Coming Soon
Your Turn: Ultimate Experiment Zone
Paste code from exercises above or create something new. Remember: Save, refresh, repeat!
Original text – what will you change?