42 articles

#web

All articles tagged with #web.

React Composition Patterns That Scale

Write React that stays clean: composition over props soup, the children prop, and lifting state up. Practical patterns with examples.

Jul 13, 20268 min

Web Dev

React Project: Build a Todo App with Hooks

Put it together: build a working React todo app with state, events, lists, and forms, fully editable live in your browser.

Jul 13, 20269 min

Web Dev

React Context: Share State Without Prop Drilling

Use React Context to share state across components without prop drilling. When to reach for it, when not to, and live code to try it out.

Jul 12, 20267 min

Web Dev

React Custom Hooks: Reuse Logic Cleanly

Extract and reuse logic with custom React hooks: the rules of hooks and a practical useLocalStorage example, runnable live.

Jul 12, 20268 min

Web Dev

Fetching Data in React with useEffect and fetch

Load data from an API in React: fetch in useEffect, loading and error states, and avoiding common bugs, with a live example.

Jul 11, 20268 min

Web Dev

React useEffect: Side Effects, Explained

Understand the useEffect hook: when effects run, the dependency array, and cleanup, without the usual confusion, with live code.

Jul 11, 20269 min

Web Dev

Conditional Rendering in React, Explained

Show and hide UI in React: ternaries, the && operator, early returns, and clean patterns for conditional rendering, with a live editor.

Jul 10, 20266 min

Web Dev

React Forms and Controlled Components

Build forms in React the right way: controlled inputs, handling change, simple validation, and submitting, with runnable examples.

Jul 10, 20268 min

Web Dev

Handling Events in React, Explained

Respond to clicks, input and form events in React: event handlers, the synthetic event, and passing arguments, with runnable live examples.

Jul 9, 20268 min

Web Dev

React Lists and Keys: Rendering Arrays

Render arrays in React with map, and why keys matter for correct, fast updates, with clear, runnable live examples.

Jul 9, 20267 min

Web Dev

React Components and Props, Explained

Build reusable React components and pass data with props. Composition, children, and default values, with runnable live examples.

Jul 8, 20269 min

Web Dev

React State with the useState Hook

Make React components interactive with useState: state vs props, updating state correctly, and re-renders, with a live counter example.

Jul 8, 20268 min

Web Dev

React JSX, Explained: HTML in Your JavaScript

How JSX works in React: expressions in curly braces, attributes, fragments, and the rules that trip up beginners, with a live editor.

Jul 7, 20267 min

Web Dev

Why React? Components and the UI Mental Model

What React is, the component mental model, and why it took over UI development, with a live React component you edit in the first minute.

Jul 7, 20268 min

Web Dev

CSS Project: Build a Responsive Landing Page

Put HTML and CSS together: build a clean, responsive landing page from scratch, covering layout, type, and polish, live in your browser.

Jul 6, 202613 min

Web Dev

Build a Responsive Card Layout with CSS Grid

A hands-on CSS project: build a responsive card grid that reflows on any screen using Grid and modern CSS, fully editable in your browser.

Jul 6, 202610 min

Web Dev

CSS Transitions and Animations, Explained

Add motion with CSS: transitions, transforms, and keyframe animations done tastefully and accessibly, with a live, editable preview you can edit.

Jul 5, 20267 min

Web Dev

Modern CSS in 2026: :has(), Container Queries

The modern CSS worth knowing now: custom properties, :has(), container queries, and nesting, with practical examples you can edit live.

Jul 5, 20269 min

Web Dev

CSS Positioning and z-index, Demystified

Understand CSS position (static, relative, absolute, fixed, sticky) and how z-index stacking really works, with editable examples.

Jul 4, 202610 min

Web Dev

Responsive Web Design with CSS Media Queries

Make pages work on any screen: mobile-first CSS, media queries, fluid units, and responsive images, with a live, editable preview.

Jul 4, 20268 min

Web Dev

CSS Flexbox: One-Dimensional Layout, Explained

Master CSS Flexbox: main vs cross axis, justify-content, align-items, and flex-wrap, with an interactive playground to see it move.

Jul 3, 20269 min

Web Dev

CSS Grid: Two-Dimensional Layout, Explained

Build real layouts with CSS Grid: columns, rows, gaps, and placement, with an interactive grid playground to experiment live.

Jul 3, 20268 min

Web Dev

CSS Colors, Units and Typography Basics

Style text and color in CSS: hex/rgb/hsl, rem vs px vs %, web fonts, and readable typography, with a live, editable preview.

Jul 2, 20269 min

Web Dev

CSS Selectors and the Box Model, Explained

How CSS selectors target elements and how the box model (margin, border, padding, content) controls size, with editable live examples.

Jul 2, 20269 min

Web Dev

HTML Forms and Inputs: A Practical Guide

Build accessible HTML forms: inputs, labels, selects, checkboxes, validation attributes, and the submit flow, with a live preview.

Jul 1, 20269 min

Web Dev

HTML Structure and Semantic Tags, Explained

Build a real web page with semantic HTML: headings, lists, links, images, and landmark tags like header, main and article, with a live preview.

Jul 1, 20269 min

Web Dev

JavaScript async/await and the fetch API

Write clean asynchronous JavaScript with async/await and fetch real data from an API, with live, runnable examples.

Jun 30, 20267 min

Web Dev

JavaScript Project: Build an Interactive Quiz App

Put it all together: build a small interactive quiz app in vanilla JavaScript, using DOM, events, and state, runnable in your browser.

Jun 30, 202610 min

Web Dev

JavaScript Callbacks and Promises, Explained

Understand asynchronous JavaScript: callbacks, the problem they cause, and how Promises fix it, with live, runnable examples to try.

Jun 29, 20268 min

Web Dev

JavaScript Events: Clicks, Input and Listeners

Respond to users with JavaScript events: addEventListener, the event object, clicks and input. Build interactivity, live in your browser.

Jun 29, 20268 min

Web Dev

JavaScript Objects: Properties, Methods and this

Model real things with JavaScript objects: properties, methods, dot vs bracket access, and a first look at this, with live code.

Jun 28, 20269 min

Web Dev

The JavaScript DOM: Select and Change the Page

Use JavaScript to read and change a web page: select elements, edit text and styles, and create nodes, all with a live preview.

Jun 28, 20268 min

Web Dev

JavaScript map, filter and reduce, Explained

Transform arrays the modern way with map, filter and reduce. Clear examples of each, runnable live in your browser.

Jun 27, 20269 min

Web Dev

JavaScript Arrays: Create, Access and Change Lists

Store lists in JavaScript arrays: indexing, adding and removing items, and the most useful array methods, runnable in your browser.

Jun 27, 20268 min

Web Dev

JavaScript Arrow Functions and Scope, Explained

Arrow functions vs regular functions, plus block scope and closures in plain English, with live, runnable JavaScript examples.

Jun 26, 20269 min

Web Dev

JavaScript Functions: Parameters and Return Values

Define and call JavaScript functions: parameters, return values, default parameters, and why functions are the heart of the language.

Jun 26, 20266 min

Web Dev

JavaScript Loops: for, while and for...of

Repeat work in JavaScript with for, while, for...of and for...in loops. When to use each, with live runnable examples.

Jun 25, 20268 min

Web Dev

JavaScript Operators and if/else Conditionals

Arithmetic, comparison and logical operators, plus if/else and the ternary. Make decisions in JavaScript, with live runnable code you can edit.

Jun 25, 20268 min

Web Dev

JavaScript Data Types: Numbers, Strings, Booleans

The core JavaScript data types (number, string, boolean, null, undefined) and how typeof works, explained with live runnable examples.

Jun 24, 20267 min

Web Dev

JavaScript Strings and Template Literals, Explained

Work with text in JavaScript: string methods, concatenation, and template literals for clean interpolation, with runnable examples throughout.

Jun 24, 20268 min

Web Dev

JavaScript Variables: let, const and var Explained

How to store data in JavaScript with let and const (and why to skip var), plus block scope basics, runnable live in your browser.

Jun 23, 20268 min

Web Dev

Why Learn JavaScript in 2026 (and Where It Runs)

What JavaScript is, where it runs (browser and server), and why it's the language of the web, with live code you run in the very first minute.

Jun 23, 20267 min