Will Beeler's Frontend Dojo

Welcome to the Frontend Dojo — a training ground for honing skills in JavaScript, CSS, and frontend experiments.

This repository is a collection of small tests, prototypes, and code snippets where new ideas can spar, break, and grow stronger. Think of it as a dojo for web development: a place to practice, experiment, and refine techniques without the pressure of a polished project.

Layout & Positioning

• Sticky image + scrolling text.
• Infinite scroll with dynamic content loading.
• Masonry/Pinterest-style grid without libraries.
• CSS Grid magazine layout with overlapping elements.
• Flexbox photo gallery with equal aspect ratios.
• Holy Grail layout (header, footer, fixed sidebar, scrollable content).
• Split-screen layout with synchronized scroll effects.

Navigation & Menus

• Animated hamburger menu (pure CSS/JS).
• Sticky nav that changes style on scroll.
• Scroll-spy navigation (active link highlights based on section).
• Multi-level dropdown menu with accessibility in mind.
• Tabbed navigation component with keyboard support.

Forms & Inputs

• Custom styled checkboxes, radios, and selects.
• Floating label inputs (label animates when typing).
• Password strength indicator with color/animation.
• Character counter for textareas
• Accessible form validation with inline error messages.

Animation & Effects

• CSS-only Starry Night v1
• CSS + JS Starry Night v2
• CSS-only image carousel.
• Expandable accordion with smooth transitions.
• Tooltip that fades in/out on hover.
• Modal dialog with background blur.
• Lightbox image viewer.
• Smooth scroll back-to-top button.

Interactivity (Vanilla JS)

• Drag-and-drop reordering list.
• Sortable & filterable data table.
• Countdown timer with pause/reset.
• Simple image slider with autoplay.
• Typewriter text effect.
• Dark mode toggle (persist with localStorage).

Canvas & Visuals

• Drawing pad (mouse/touch).
• Particle background (stars, confetti, snow).
• Image zoom on hover with magnifier effect.
• Progress ring (circular loader with SVG).

Fun/UI Challenges

• CSS-only tic-tac-toe board.
• Animated progress bar that fills on scroll.
• Skeleton screen loading effect.
• Card flip effect on hover.
• Responsive pricing table with highlighted plan.