Web Development Basics

Client: Your browser (Chrome, Firefox). It requests data.
Server: A computer somewhere else (Amazon, Google) that sends the data back.

DNS: The internet's phonebook. Turns google.com into an IP address.
Hosting: Renting space on a server to store your website files so others can access them.

Use tags that have meaning. Instead of just <div>, use <header>, <nav>, <main>, and <footer>. This helps SEO and accessibility.

How you get data from users.
<input type="text">, <button>, <form>.

<a href="url"> points to another page.
<img src="image.jpg" alt="Description"> displays an image. Always use alt text!

Every element is a box.
Content: The text/image.
Padding: Space inside the box.
Border: The line around the box.
Margin: Space outside the box (pushes other things away).

The modern ways to lay out pages.
Flexbox: For 1D layouts (a row of buttons).
Grid: For 2D layouts (entire page structure).

Making sites work on phones. Use @media queries to change styles based on screen size (e.g., stack columns on mobile).

The DOM (Document Object Model) is the tree of HTML elements. JS can change it.
document.querySelector('h1').textContent = 'Hello';

Let/Const: Store data.
Functions: Reusable logic.
Events: Reacting to clicks, typing, etc. (button.addEventListener('click', ...)).

How to get data from a server without reloading the page.
const data = await fetch('/api/user');

Right-click anything -> Inspect. You can change HTML/CSS live to test ideas. F12 opens the full suite.

console.log('debug info') prints here. Errors appear here in red. It's your first stop when something breaks.

Shows every file (images, scripts, API calls) loading. Great for debugging slow sites or failed API requests.

Build a simple site with an "About Me" and "Contact" section. Great for practicing semantic HTML and layout.

The classic. Type a task, hit enter, add it to a list. Click to delete. Teaches you how to create elements with JS.

Use the Fetch API to get real weather data from a free API (like OpenWeatherMap) and display it nicely on screen.