Build Projects - Web Dev Learning Path

🧮 Simple Calculator

Build a basic calculator with HTML/CSS/JavaScript. Create the interface, handle button clicks, and perform arithmetic operations. Perfect for understanding event handlers and basic math logic.

HTML CSS JavaScript No frameworks

Goal

Build a calculator that displays numbers and operations (+, -, ×, ÷) when buttons are clicked. The result should be displayed in a display area.

Key Concepts

- String concatenation for building the expression - Event delegation for button clicks - Conditional logic for validation - DOM manipulation for updates

Demo Code

// Calculator logic
function calculate() {
  const display = document.querySelector(
    '#display'
  ).value;
  
  if (display) {
    try {
      const result = eval(display); // Simple eval for demo
      document.querySelector(''#display').value = result;
    } catch (e) {
      document.querySelector(''#display').value = 'Error';
    }
  }
}
            

Build Calculator →

🌤️ Weather App (API)

Fetch and display real weather data from a free API. Learn about async/await, fetch API, and handling external data. Great for understanding API integration and data visualization.

JavaScript Fetch API Async/Await JSON

Goal

Create a weather app that: - Accepts city input - Fetches weather from OpenWeatherMap API - Displays temperature, conditions

Key Concepts

- Fetch API for HTTP requests - Async/await for async operations - JSON parsing - Conditional rendering - Error handling

Demo Code

async function getWeather(city) {
  try {
    // Get API key (replace with yours)
    const apiKey = 'your-api-key';
    const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;
    
    const response = await fetch(url);
    const data = await response.json();
    
    return data;
  } catch (error) {
    console.error('Error fetching weather', error);
  }
}
            

Build Weather App →

📝 Notes with LocalStorage

Build an app that saves notes to browser storage. Learn localStorage, CRUD operations, and making apps persistent. Great for understanding client-side data persistence.

JavaScript LocalStorage JSON.stringify CRUD

Goal

Create a notes app that: - Adds new notes - Stores them in localStorage - Displays existing notes - Deletes notes

Key Concepts

- localStorage API - JSON.stringify()/parse() - Array operations - DOM event delegation - State management basics

Demo Code

// Save note
saveNote = () => {
  const text = document.querySelector(
    '#note-text'
  ).value;
  
  if (text.trim()) {
    const notes = JSON.parse(
      localStorage.getItem('notes') || '[]'
    );
    
    notes.push({
      text,
      id: Date.now()
    });
    
    localStorage.setItem(
      'notes',
      JSON.stringify(notes)
    );
    
    render()
  }
};

// Load notes on page
window.onload = () => {
  const notes = JSON.parse(
    localStorage.getItem('notes') || '[]'
  );
  render(notes);
};
            

Build Notes App →

✅ Advanced Todo App

Enhance your existing Todo app with TypeScript! Add type checking, better state management, and polish. This connects your 5-stage progression with React/TypeScript best practices.

React TypeScript State Management Advanced Patterns

Goal

Build an enhanced Todo app that: - Uses TypeScript for type safety - Implements drag-to-reorder - Supports categories - Persists to server (or localStorage)

Key Concepts

- TypeScript interfaces - React state best practices - Conditional rendering - Event handlers - Form handling

Demo Code

// TypeScript TodoItem interface
interface TodoItem {
  id: number;
  text: string;
  completed: boolean;
  category: 'personal' | 'work' | 'both';
}

// React component
const TodoApp = ({ todos }) => {
  const [filter, setFilter] = useState('all');
  
  const filteredTodos = todos
    .filter(todo => {
      return filter === 'all' ||
        todo.completed === (filter === 'completed');
    });
  
  return (
    <div className='todo-container'>
      <h1>Todo App</h1>
      <button onClick={() => setFilter('all')}>All</button>
      <button onClick={() => setFilter('active')}>Active</button>
      <button onClick={() => setFilter('completed')}>Completed</button>
      
      <ul className='todo-list'>
        {filteredTodos.map(todo => (
          <li key={todo.id}>
            <input type=checkbox checked={todo.completed} />
            <span>{todo.text}</span>
          </li>
        ))}
      </ul>
    </div>
  );
};
            

Build Todo App →

🛠️ Build Projects

Build Real Apps