How To
75 small recipes for everyday tasks. Open one, run it, change it, copy it.
HTML
- Create a basic web pageEvery page needs a doctype, html, head with a title, and body.
- Make a contact formUse labels, input types and required to build a simple validated form.
- Embed a YouTube-style responsive video frameWrap an iframe in an aspect-ratio box so it scales.
- Create a table of dataUse thead, tbody and th for accessible tables.
- Add a skip link for accessibilityA link at the top lets keyboard users jump past the navigation.
- Make a download linkThe download attribute tells the browser to save the file.
- Add a favicon and page titleThe title goes in the browser tab. A link element with rel="icon" sets the small icon.
- Make a dropdown listA select element holds option elements. The value is what gets submitted.
- Add a placeholder and a required field to a formplaceholder gives a hint; required stops the form from submitting while empty.
- Create a progress barThe progress element shows how far something has got. value is out of max.
CSS
- Center a div horizontally and verticallyUse flexbox on the parent: justify-content and align-items both set to center.
- Make a sticky headerposition: sticky with top: 0 keeps the header visible while the page scrolls.
- Create a responsive grid of cardsCSS grid with repeat(auto-fit, minmax()) makes columns that wrap by themselves, with no media queries.
- Style a button with a hover effectUse :hover with transition for a smooth change.
- Build a pure CSS tooltipShow a ::after pseudo-element from a data attribute on hover.
- Make a loading spinnerRotate a bordered circle with a keyframe animation.
- Truncate long text with an ellipsisCombine overflow hidden, white-space nowrap and text-overflow ellipsis.
- Create a dark mode with CSS variablesDefine colours as variables and swap them with a class or prefers-color-scheme.
- Make an image responsivemax-width: 100% with height: auto stops images overflowing small screens.
- Create a CSS-only accordionUse the details and summary elements, then style them.
- Make a gradient text effectClip a background gradient to the text.
- Create a sidebar layoutA two-column grid with a fixed sidebar and a flexible main area.
- Create a responsive navigation barUse flexbox and let the links wrap on small screens.
- Make a card with a shadowborder-radius rounds the corners and box-shadow lifts the card off the page.
- Style a custom checkboxaccent-color recolours the native checkbox with one line.
- Animate an element with keyframesDefine the steps with @keyframes and attach them with the animation property.
- Keep a footer at the bottom of the pageMake the body a column that is at least as tall as the screen, and let the main area grow.
- Create a two-column layout with CSS gridgrid-template-columns splits the width. 2fr 1fr makes the first column twice as wide.
JavaScript
- Copy text to the clipboardnavigator.clipboard.writeText returns a promise; it needs a user action.
- Debounce a functionWait until the user stops triggering an event before running the work.
- Loop over an objectObject.entries gives key and value pairs to loop over.
- Remove duplicates from an arrayA Set keeps only unique values.
- Shuffle an arrayThe Fisher-Yates shuffle swaps each item with a random earlier one.
- Format a number as currencyIntl.NumberFormat formats numbers for a locale.
- Get a random number in a rangeScale Math.random() and round down.
- Fetch JSON from an APIfetch returns a promise; check response.ok before reading the JSON.
- Store data in localStoragelocalStorage keeps strings in the browser between visits.
- Toggle a CSS class on clickclassList.toggle adds or removes a class.
- Format a dateUse toLocaleDateString or Intl.DateTimeFormat for readable dates.
- Sort an array of objectsPass a compare function to sort.
- Count how many times each item appearsUse reduce to build a tally object.
- Capitalize the first letter of a wordTake the first character, upper-case it, and add the rest with slice(1).
- Convert a string to a URL slugLower-case it, replace anything that is not a letter or number with a dash, and trim the ends.
- Check if an array includes a valueincludes() returns true or false and works for strings and numbers.
- Get the unique values of an arrayPut the array in a Set, then spread it back into an array.
- Group items by a propertyLoop once and collect items in an object keyed by the property.
- Sum the numbers in an arrayreduce() folds the array into one value. Start the total at 0.
- Find the largest number in an arraySpread the array into Math.max.
- Wait for a delay with async and awaitWrap setTimeout in a Promise, then await it inside an async function.
- Copy an object without changing the originalSpread the object into a new one and override the keys you want to change.
- Validate an email address with a regular expressionA simple pattern catches most typos. Real verification needs a confirmation email.
- Pad a number with leading zerosTurn it into a string and use padStart.
- Convert an object to a list of pairs and backObject.entries gives [key, value] pairs; Object.fromEntries builds an object again.
Python
- Read a file line by lineUse with open() so the file is closed for you.
- Count words in a textcollections.Counter counts items for you.
- Reverse a stringSlice with a step of -1.
- Check if a number is primeTry divisors up to the square root.
- Merge two dictionariesUse the | operator (Python 3.9+).
- Sort a list of dictionariesUse sorted with a key function.
- Read and write a JSON filejson.dump writes a dictionary to a file; json.load reads it back.
- Count the most common items with Countercollections.Counter counts items and most_common(n) lists the top n.
- Flatten a list of listsA nested comprehension loops the outer list first, then the inner one.
- Check if a string is a palindromeCompare the cleaned text with its reverse.
- Generate the Fibonacci sequenceKeep two numbers and move forward one step at a time.
- Format numbers and text with f-stringsPut expressions in braces. After a colon you can set decimals and width.
- Get the current date and timedatetime.now() gives the time; strftime formats it. Here a fixed date keeps the output stable.
SQL
- Find duplicate valuesGroup by the column and keep groups with more than one row.
- Get the top N rows per queryORDER BY with LIMIT.
- Find rows with no match in another tableLEFT JOIN and keep the rows where the right side is NULL.
- Calculate a running totalUse a window function with SUM() OVER.
- Pivot values into columns with CASEUse CASE inside an aggregate to count conditionally.
- Count rows per groupGROUP BY with COUNT(*) gives one row per group.
- Find the most expensive product in each categoryJoin the table to a per-category maximum.
- Search text with LIKEThe % sign matches any run of characters.
- Total revenue per customerJoin orders to products, multiply price by quantity and add it up.