<!-- A 45-minute HTML/CSS practice card
     — achievable in one daily session -->

<div class="card">
  <img class="card__image" src="cover.jpg" alt="Course" />
  <div class="card__body">
    <h2 class="card__title">Learn CSS Layouts</h2>
    <p class="card__desc">A short intro to flexbox and grid.</p>
    <a class="card__btn" href="#">Enrol now</a>
  </div>
</div>

<style>
  .card {
    max-width: 320px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0,0,0,0.08);
    font-family: system-ui, sans-serif;
  }
  .card__image { width: 100%; display: block; }
  .card__body  { padding: 16px; }
  .card__title { margin: 0 0 8px; font-size: 1.2rem; }
  .card__btn {
    display: inline-block;
    margin-top: 12px;
    padding: 8px 14px;
    border-radius: 8px;
    background: #0b6e75;
    color: #fff;
    text-decoration: none;
  }
</style>

// A 45-minute JavaScript practice exercise
// Fetch data and render it into the DOM.

const list = document.querySelector("#items");

async function loadItems() {
  try {
    const res = await fetch("https://jsonplaceholder.typicode.com/posts?_limit=5");
    if (!res.ok) throw new Error("Network error");
    const data = await res.json();

    list.innerHTML = data
      .map(({ id, title }) => `<li data-id="${id}">${title}</li>`)
      .join("");
  } catch (err) {
    list.innerHTML = "<li>Failed to load items</li>";
    console.error(err);
  }
}

loadItems();

// Practice goal: understand async/await, error handling,
// and rendering safely into the DOM. Repeat this 2-3 times
// with different APIs to build muscle memory.

Daily practice plan — three formats

1) 45-minute quick session (busy day)
   - 15 min: read one concept
   - 25 min: type a small example
   - 5 min: write one-line notes

2) 2-hour focused session (default)
   - 20 min: review yesterday
   - 40 min: learn one new concept (hands-on)
   - 50 min: apply it in a mini project
   - 10 min: commit to Git + notes

3) 4-hour deep session (weekend)
   - 30 min: plan the day's goal
   - 2 hrs: build a feature in your project
   - 1 hr: debug + improve
   - 30 min: write a README or demo video

Rule: Always end the session with something
shipped — even if small.

# Set up a project you'll build on daily
mkdir learn-web-dev && cd learn-web-dev
git init

# Simple structure for the first month
mkdir css js img
touch index.html css/style.css js/app.js README.md

# First commit
git add .
git commit -m "Initial project scaffold"

# Create a GitHub repo and push
git remote add origin https://github.com/you/learn-web-dev.git
git branch -M main
git push -u origin main

# Your daily Git loop — end every session with a commit
git status
git add .
git commit -m "Day 14: added responsive nav bar"

# Push to GitHub so the commit is visible
git push

# The commit log becomes your learning journal.
# In interviews, you can walk through the history
# and show how the project evolved day by day.

Month 1 — Static landing page
Goal: master HTML + CSS fundamentals.

Sections to build:
- Hero (headline, CTA button)
- Features (3 cards)
- Testimonials (2 quotes)
- Footer with links

Stretch goals:
- Responsive under 480px
- Dark mode toggle (CSS only)
- Deploy to GitHub Pages

Milestone:
- Live link you can share
- README explaining the build
- At least 2 screenshots in the README

Month 2 — Interactive API app
Goal: master JavaScript, async, and one small app.

Suggested project: weather app
- Search input for a city
- Fetch from a public weather API
- Show temperature, condition, forecast
- Error handling for bad cities / no network

Stretch goals:
- Save last search in localStorage
- Loading state and skeleton UI
- Deploy to Vercel or Netlify

Milestone:
- Live link on a public URL
- 30-second demo video
- Clean README with the API used and lessons learned