<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Riya Sharma — Portfolio</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header><h1>Riya Sharma</h1></header>
  <main>
    <section id="projects">
      <h2>Projects</h2>
    </section>
  </main>
  <footer>© 2026</footer>
</body>
</html>

/* mobile first */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* tablets and up */
@media (min-width: 768px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

/* desktops */
@media (min-width: 1100px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

async function loadUsers() {
  try {
    const res = await fetch("https://jsonplaceholder.typicode.com/users");
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const users = await res.json();
    const list = document.querySelector("#users");
    list.innerHTML = users.map(u => `<li>${u.name}</li>`).join("");
  } catch (err) {
    console.error("Could not load users:", err.message);
  }
}
loadUsers();

import { useEffect, useState } from "react";

export default function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(r => r.json())
      .then(setUsers);
  }, []);

  return (
    <ul>
      {users.map(u => <li key={u.id}>{u.name}</li>)}
    </ul>
  );
}

// npm install express
const express = require("express");
const app = express();
app.use(express.json());

let notes = [{ id: 1, text: "Learn Express" }];

app.get("/api/notes", (req, res) => res.json(notes));

app.post("/api/notes", (req, res) => {
  const note = { id: notes.length + 1, text: req.body.text };
  notes.push(note);
  res.status(201).json(note);
});

app.listen(3000, () => console.log("API on http://localhost:3000"));

CREATE TABLE notes (
  id SERIAL PRIMARY KEY,
  user_id INTEGER NOT NULL,
  text VARCHAR(500) NOT NULL,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

INSERT INTO notes (user_id, text) VALUES (1, 'Learn SQL joins');
SELECT id, text FROM notes WHERE user_id = 1 ORDER BY created_at DESC;

Frontend Checkpoint (end of week 4)
☐ I use semantic tags (header, main, section, footer)
☐ My forms have labels and correct input types
☐ I can explain the box model
☐ I can build a layout with Flexbox and with Grid
☐ My site works on a phone screen
☐ My portfolio is on GitHub

JS & React Checkpoint (end of week 8)
☐ I can use map, filter and reduce
☐ I can handle form submit events
☐ I can fetch data with async/await and handle errors
☐ I understand props vs state
☐ I can explain useEffect dependencies
☐ One React app pushed to GitHub

Full Stack Checkpoint (end of week 12)
☐ I built REST endpoints for create, read, update, delete
☐ Data is stored in a database
☐ Passwords are hashed, never stored as plain text
☐ Secrets are in environment variables
☐ The app is deployed with a live URL
☐ README explains setup and features