web-development-skill

What this skill does

# Web Development Skill

Complete guide to building modern web applications from frontend to full-stack systems.

## Quick Start

### Choose Your Path

```
Frontend Only → Full Stack → Backend Focus
     ↓             ↓            ↓
  React        Next.js/      Node.js +
  Vue/        Nuxt/         Database
  Angular     Blitz
```

### Get Started in 5 Steps

1. **HTML & CSS Fundamentals** (2-3 weeks)
   - Semantic HTML
   - CSS layouts (Flexbox, Grid)
   - Responsive design

2. **JavaScript Core** (4-6 weeks)
   - ES6+ syntax
   - DOM manipulation
   - Async/await, Promises
   - Event handling

3. **Frontend Framework** (4-8 weeks)
   - React (most popular)
   - Or: Vue (easier), Angular (enterprise)
   - Components, state, hooks

4. **Backend Basics** (4-6 weeks)
   - Node.js + Express/Fastify
   - Database fundamentals
   - REST API design

5. **Deploy & Polish** (ongoing)
   - Deployment platforms (Vercel, Netlify, Heroku)
   - Performance optimization
   - Monitoring and logging

---

## Frontend Development

### **HTML & CSS Mastery**

**HTML5 Best Practices:**
```html
<!-- Semantic markup -->
<header>
  <nav>Navigation</nav>
</header>

<main>
  <article>
    <h1>Article Title</h1>
    <p>Content...</p>
  </article>
</main>

<footer>
  <p>&copy; 2024</p>
</footer>

<!-- Accessibility -->
<img src="image.jpg" alt="Descriptive text">
<button aria-label="Close menu">×</button>
```

**CSS Modern Layout:**
```css
/* Flexbox - 1D layouts */
.flex-container {
  display: flex;
  justify-content: space-between;  /* horizontal */
  align-items: center;            /* vertical */
  gap: 1rem;
}

/* Grid - 2D layouts */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}
```

**CSS Framework Comparison:**

| Framework | Approach | Learning Curve | Customization |
|-----------|----------|---|---|
| **Tailwind** | Utility-first | Medium | High |
| **Bootstrap** | Component-based | Low | Medium |
| **Material UI** | Design system | High | Low |
| **Bulma** | Modern, minimal | Low | High |

### **JavaScript Fundamentals**

**ES6+ Essential Features:**
```javascript
// 1. Arrow Functions
const add = (a, b) => a + b;

// 2. Destructuring
const { name, age } = user;
const [first, second] = array;

// 3. Spread Operator
const newArr = [...oldArr, newItem];
const merged = { ...obj1, ...obj2 };

// 4. Template Literals
const message = `Hello, ${name}!`;

// 5. const vs let (always use these, not var)
const CONSTANT = 5;      // Never changes
let variable = 10;       // Can change

// 6. Async/Await (modern promises)
async function fetchData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error:', error);
  }
}

// 7. Higher-order Functions
const numbers = [1, 2, 3, 4];
const doubled = numbers
  .filter(n => n > 2)        // Filter: [3, 4]
  .map(n => n * 2)           // Map: [6, 8]
  .reduce((acc, n) => acc + n, 0);  // Reduce: 14
```

### **Frontend Frameworks**

#### React (Most Popular)
```jsx
// Function Components + Hooks (modern way)
import { useState, useEffect } from 'react';

function UserProfile() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  // Data fetching
  useEffect(() => {
    fetchUser().then(data => {
      setUser(data);
      setLoading(false);
    });
  }, []); // Empty dependency = run once

  if (loading) return <p>Loading...</p>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

export default UserProfile;
```

**Key Concepts:**
- Components: Reusable UI units
- JSX: HTML-in-JavaScript
- State: Component data (useState)
- Props: Component parameters
- Hooks: useState, useEffect, useContext
- Context API: Global state management
- Performance: React.memo, useMemo

#### Vue.js (Easier than React)
```vue
<template>
  <div class="user-profile">
    <h1>{{ user.name }}</h1>
    <p v-if="loading">Loading...</p>
    <button @click="increment">Count: {{ count }}</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const count = ref(0);
const user = ref(null);
const loading = ref(true);

onMounted(async () => {
  const data = await fetchUser();
  user.value = data;
  loading.value = false;
});

const increment = () => count.value++;
</script>

<style scoped>
.user-profile {
  padding: 1rem;
}
</style>
```

#### Angular (Enterprise)
- Full framework with dependency injection
- TypeScript-first
- RxJS for reactive programming
- Best for large enterprise applications

### **State Management**

**When to use:**
- Redux: Large apps with complex state
- Zustand: Simple, modern alternative
- Jotai: Atomic state management
- MobX: Simplified reactive state

**Redux Example:**
```javascript
// 1. Actions
const INCREMENT = 'INCREMENT';
const increment = () => ({ type: INCREMENT });

// 2. Reducer
const countReducer = (state = 0, action) => {
  if (action.type === INCREMENT) return state + 1;
  return state;
};

// 3. Store
const store = createStore(countReducer);

// 4. Use in React
const count = useSelector(state => state);
const dispatch = useDispatch();

// <button onClick={() => dispatch(increment())}>+</button>
```

### **Testing**

```javascript
// Jest + React Testing Library
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

test('button increments count', async () => {
  render(<Counter />);
  const button = screen.getByRole('button', { name: /increment/i });

  await userEvent.click(button);
  expect(button).toHaveTextContent('Count: 1');
});
```

---

## Backend Development

### **Node.js + Express**

```javascript
const express = require('express');
const app = express();

// Middleware
app.use(express.json());
app.use(cors());

// Routes
app.get('/api/users/:id', async (req, res) => {
  try {
    const user = await User.findById(req.params.id);
    res.json(user);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

app.post('/api/users', async (req, res) => {
  const user = new User(req.body);
  await user.save();
  res.status(201).json(user);
});

// Error handling
app.use((err, req, res, next) => {
  console.error(err);
  res.status(500).json({ error: 'Internal Server Error' });
});

app.listen(3000, () => console.log('Server running'));
```

### **Database Integration**

**SQL (PostgreSQL):**
```javascript
const { Pool } = require('pg');
const pool = new Pool({
  user: 'username',
  password: 'password',
  host: 'localhost',
  port: 5432,
  database: 'mydb'
});

// Query
const result = await pool.query(
  'SELECT * FROM users WHERE id = $1',
  [userId]
);
```

**NoSQL (MongoDB):**
```javascript
const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
  name: String,
  email: { type: String, unique: true },
  createdAt: { type: Date, default: Date.now }
});

const User = mongoose.model('User', userSchema);
const user = await User.findById(id);
```

### **RESTful API Design**

**HTTP Method Best Practices:**

```
GET    /api/users          - List all users
GET    /api/users/:id      - Get single user
POST   /api/users          - Create user
PUT    /api/users/:id      - Update user (full)
PATCH  /api/users/:id      - Update user (partial)
DELETE /api/users/:id      - Delete user
```

**Status Codes:**
```
200 OK                 - Successful GET/PUT/PATCH
201 Created            - Successful POST
204 No Content         - DELETE, no response body
400 Bad Request        - Validation failed
401 Unauthorized       - Authentication required
403 Forbidden          - Authorization failed
404 Not Found          - Resource doesn't exist
500 Internal Error     - Server error
```

### **Authentication & Authorization**

**JWT (JSON Web Tokens):**
```javascript
const jwt = re