50 Projects In 50 Days - HTML, CSS & JavaScript

Build expanding cards with background images and headings, align with Flexbox, and use JavaScript to toggle an active class for a smooth CSS transition expansion, with headings appearing on expansion.

Build expanding image cards with HTML and CSS using a flex container and an active class to enlarge the selected panel, with background images and responsive behavior for small screens.

Implement expanding panel effect in javascript by selecting panels with querySelector, looping with for each, toggling active class on click, and removing it from others for a smooth opacity transition.

Build an interactive multi-step progress bar with next and previous buttons, highlighting the current step and disabling navigation at the ends for multi-step forms, implemented with HTML, CSS, and JavaScript.

Build a step-by-step progress indicator with a dynamic line and numbered circles, controlled by next and previous buttons and styled with CSS, ready for JavaScript interactivity.

Implement step navigation in JavaScript by wiring next and previous controls, updating active circles, and syncing a progress bar with dynamic width percentages.

demonstrates a simple article layout with a rotating container that reveals a side navigation and toggles open and close icons using a show nav class controlled by JavaScript and CSS.

Build a rotating circular navigation with Font Awesome open and close icons, toggling a show nav class to rotate the circle from the top-left while revealing content.

Learn how to create a rotate and slide navigation effect with a fixed bottom nav, using transform translateX, transitions, and class toggling in HTML, CSS, and JavaScript.

Create a hidden search widget with a Font Awesome search icon; click triggers a JavaScript event that toggles a class, widening the input and translating the button, with CSS transitions.

Build a hidden search widget with an input and Font Awesome icon button, using CSS transitions on width and transform triggered by a vanilla JavaScript toggle of the active class.

Build a blurry loading page that reveals an image from 0 to 100 percent, using a stackoverflow-inspired function to map the range, blur from 30px to 0, and load elements.

Implement a blurry loading screen with a full-viewport background image, CSS blur, and a 0% loading text, then use JavaScript to clear the image as the percentage increases.

Create a 0–100 load animation that fades the loading text and maps background blur from 30px to 0 using a scale function, updating every 30 ms until complete.

Build a scroll-triggered animation using CSS transitions and JavaScript to reveal content blocks as you scroll, alternating entrances from left and right and resetting on scroll up.

Create a lightweight scroll-triggered animation that slides boxes in from alternating sides using CSS transforms, transitions, and a scroll listener with getBoundingClientRect.

Create a split landing page with a background image and overlay, featuring 75/25 split when clicked or hovered, using heavy CSS and light JavaScript for hover effects.

Build a split landing page with left and right panels using HTML and CSS, featuring background overlays and CSS variables, and implement a hover effect with JavaScript to boost interactivity.

Create a hover-driven split layout by widening the left or right panel with css variables, and use javascript to toggle hover-left and hover-right classes with smooth transitions and responsive adjustments.

Create a login form with wave animated labels by wrapping each input label in a span and applying transitions with staggered delays so each letter rises on focus.

Build a basic login form inside a styled container, then apply CSS styling and plan a JavaScript wave effect by wrapping each label letter in spans.

Learn to build a wave-like label animation for form controls by converting label text to per-letter spans. Apply translateY with a cubic-bezier transition and stagger delays for a cascading wave.

Create a soundboard using the HTML5 audio tag and JavaScript, where clicking a button plays a sound effect and stops any currently playing audio before starting the next.

Create a sound board with html5 audio, dynamically generate buttons from a sounds array, and implement a stop songs routine to pause and reset clips before playback.