Web development katas
Katas are exercises to develop muscle memory. This is a list of latest web developer katas. Practice katas regularly to level up your skills faster.
Filter & sort
-
Simple client-side routing
Implement a simple event-based client-side routing using hashes
-
File indexing
Create an index of files in a folder
-
Sortable and filterable list
Implement list sorting and filtering using custom elements and an event bus
-
Simple progress bar
Build a progress bar using CSS custom properties
-
Copy text to clipboard
Implement a button that copies some text to clipboard
-
Custom confirmation code input
Build a custom form control for entering OTP and confirmation codes
-
Create an icon font
Create a icon webfont using provided SVG files
-
SVG spritesheet
Create a SVG spritesheet from the provided icons
-
Serving static assets
Build a static site server
-
Slider widget
Build single- and dual-slider widgets
-
Responsive 50-50 split layout
Implement a responsive layout that split 50-50 along the shorter dimension
-
Client-side form handling
Handle a basic form on the client-side
-
Basic scraping
Perform basic web scraping using the browser's developer tools
-
Clone a web page
Visual training and UX intuition
-
Basic NodeJS server
Creating a simple NodeJS server using the http module
-
Lazy loading
Use import() to lazy-load a script
-
Add a script to the page
Use different techniques to add additional scripts to the page
-
Fetch a remote resource
Use different techniques to fetch data
-
Using web fonts
Converting, loading, registering and using web fonts
-
Skin a checkbox
Customize the look and feel of a checkbox
-
Select elements in a range
Use various selectors to select elements in different ranges
-
Open image button
Instrument a button to open an image
-
Encyclopedia article
Use of headings in encyclopedia-style article
-
Simple validation
A few basic input validation functions in plain JavaScript
-
Basic HTML page
HTML page skeleton 101