StudyItAll
Web Dev Practice

Web Development Practice

Sharpen your HTML, CSS, JavaScript, React, and deployment skills with 50 hands-on questions across 5 categories. Every answer comes with a short explanation that teaches the underlying concept.

0 / 5 categories completedStart a quiz below

Choose a Quiz Category

Visual Study Guides

Reference diagrams for the concepts that come up again and again.

HTTP Request Lifecycle

1

DNS Lookup

Browser asks a DNS resolver to translate the domain into an IP address.

2

TCP / TLS Handshake

Client and server establish a connection and negotiate encryption (HTTPS).

3

HTTP Request

Browser sends method, path, headers, and optional body to the server.

4

Server Processing

App routes the request, runs business logic, queries the database, builds a response.

5

Response & Render

Server returns status, headers, and body. Browser parses HTML, fetches assets, and paints.

CSS Box Model

1

Content

The actual text, image, or child elements. Width/height set its size with box-sizing: content-box.

2

Padding

Transparent space INSIDE the border. Backgrounds extend across padding.

3

Border

The visible edge of the box. Has width, style, and color.

4

Margin

Transparent space OUTSIDE the border. Pushes neighboring elements away. Vertical margins collapse.

Tip: Use * { box-sizing: border-box; } so width/height includes padding and border — much easier to reason about.

React Component Tree

<>

App

Root component — holds providers, routing, and global layout.

<>

Header

Logo, navigation links, user menu.

<>

Main

Page content area — child components vary by route.

<>

ProductList

Fetches products, maps over them, renders ProductCards with stable keys.

<>

ProductCard

Receives a product prop. Pure presentational — no fetching.

<>

Footer

Site links, copyright, social icons.

Data flow: Props flow down the tree (parent to child); events flow up via callbacks. Lift shared state to the closest common ancestor.

Common HTTP Status Codes

200

OK

Successful GET, PUT, or PATCH.

201

Created

POST succeeded — new resource exists.

301

Moved Permanently

Resource lives at a new URL forever.

400

Bad Request

Client sent malformed input.

401

Unauthorized

Authentication required or invalid.

403

Forbidden

Authenticated, but not allowed.

404

Not Found

Server has no resource at that path.

500

Internal Server Error

Unhandled exception on the server.

503

Service Unavailable

Server overloaded or under maintenance.

Ranges: 1xx informational · 2xx success · 3xx redirect · 4xx client error · 5xx server error.

WebsiteDown.io

Free Tool

Quickly check if any website is down — handy when debugging APIs and third-party integrations. Is it your code, or is the upstream service actually offline?

Open WebsiteDown.io

Web Dev Study Tips

Build, don't just read

Every concept sticks 10x better when you ship a small project that uses it. Even 30 lines counts.

Read the docs

MDN for HTML/CSS/JS, the React docs, and the Node docs. They're authoritative and surprisingly readable.

Use DevTools daily

Inspect elements, set breakpoints in Sources, watch the Network tab, profile with Performance.

Learn Git early

Branching, merging, and pull requests are non-negotiable in any real codebase. Practice with a side project.

Ship small, ship often

Deploy to Vercel, Netlify, or Cloudflare Pages from day one. A live URL keeps you motivated.

Read other people's code

Open-source repos and GitHub PRs reveal patterns no tutorial covers. Pick one library you use and skim its source.

Continue learning

Module 7: Full-Stack Web Dev

Start with HTTP & REST fundamentals

Browse

All coding lessons

Modules across Python, JS, C++, Java, and more

← Back to Home