Mini Projects

HTMLCSSJavaScript18th May 2024

This collection features a variety of small, self-contained HTML, JavaScript, and CSS projects designed to explore different concepts, tools, and techniques in web development.

🌱 Projects

  • CSS Toggle themes - A simple interactive CSS project on how to implement a light/dark theme toggle using global variables.
  • JS Todo App - A basic todo app with data persistence using local storage.
  • JS Drum Kit - Play audio and animate frontend based on keyboard input and associated keyCodes using "data-" attribute values.
  • JS Clock - Animate clock with CSS and JS using transform property.
  • CSS Variables - Using CSS variables and updating them with JavaScript.
  • CSS Flex Panels - CSS Flexbox and transitions.
  • JS Fetch - Use Fetch to retrieve data from API and filter results with regular expressions to display.
  • HTML Canvas - Draw on HTML5 canvas with mouse and touch events using HSL values.
  • JS Checkbox - Checkbox interactions with shift key for selecting multiple checkboxes.
  • JS Scroll Events - Scroll events and transitions with css depending on scroll position, using debounce to control the time at which scroll event should be executed.
  • JS Fixed Nav - Sticky navigation functionality using scroll position and CSS.

Copyright © 2024 Yin Bo Ly⋅All rights reserved

Illustrations by Storyset

â‹…

Icons by Icons8