Understanding the foundations of web development is the first step toward building websites and web apps.
1οΈβ£ What is Web Development?
Web development is the process of creating websites and web applications. It includes everything from a basic HTML page to full-stack apps.
Types of Web Dev:
- Frontend: What users see (HTML, CSS, JavaScript)
- Backend: Server-side logic, databases (Node.js, Python, etc.)
- Full Stack: Both frontend + backend
2οΈβ£ How the Web Works
When you visit a website:
- The browser (client) sends a request via HTTP
- The server processes it and sends back a response (HTML, data)
- Your browser renders it on the screen
Example: Typing
www.example.com sends a request β DNS resolves IP β Server sends back the HTML β Browser displays it 3οΈβ£ HTML (HyperText Markup Language)
Defines the structure of web pages.
<h1>Welcome</h1>
<p>This is my first website.</p>
4οΈβ£ CSS (Cascading Style Sheets)
Adds *style* to HTML: colors, layout, fonts.
h1 {
color: blue;
text-align: center;
}5οΈβ£ JavaScript (JS)
Makes the website *interactive* (buttons, forms, animations).
<button onclick="alert('Hello!')">Click Me</button>6οΈβ£ Responsive Design
Using *media queries* to make websites mobile-friendly.
@media (max-width: 600px) {
body {
font-size: 14px;
}
}7οΈβ£ DOM (Document Object Model)
JS can interact with page content using the DOM.
document.getElementById("demo").innerText = "Changed!";8οΈβ£ Git & GitHub
Version control to track changes and collaborate.
git init
git add .
git commit -m "First commit"
git push
9οΈβ£ API (Application Programming Interface)*
APIs let you pull or send data between your app and a server.
fetch('https://api.weatherapi.com')
.then(res => res.json())
.then(data => console.log(data));π Hosting Your Website
You can deploy websites using platforms like Vercel, Netlify, or GitHub Pages.
π‘ Once you know these basics, you can move on to frameworks like React, backend tools like Node.js, and databases like MongoDB.