<!-- Build this in 30 minutes: a responsive card -->
<div class="card">
  <h3>Noida Tech Meetup</h3>
  <p>Saturday, 10 AM</p>
  <button>Register</button>
</div>
<style>
  .card { max-width: 320px; padding: 16px; border-radius: 12px;
          box-shadow: 0 2px 8px rgba(0,0,0,.1); font-family: sans-serif; }
  .card button { padding: 8px 16px; border: 0; border-radius: 8px; }
  @media (max-width: 400px) { .card { max-width: 100%; } }
</style>

# Build this in 30 minutes: an events API (pip install fastapi uvicorn)
from fastapi import FastAPI

app = FastAPI()
events = [{"id": 1, "title": "Noida Tech Meetup", "day": "Saturday"}]

@app.get("/events")
def list_events():
    return events

@app.post("/events")
def add_event(event: dict):
    event["id"] = len(events) + 1
    events.append(event)
    return event
# run: uvicorn main:app --reload

DevTools skills every web role uses
☐ Inspect an element and change its CSS live
☐ Read errors in the Console
☐ Watch requests and responses in the Network tab
☐ Check mobile layout with device mode
☐ Run a Lighthouse report for performance and accessibility
Practise on any website for 20 minutes a day.

<!-- Small habits that UI developers are expected to know -->
<img src="team.jpg" alt="Our team at the annual hackathon">
<label for="email">Email</label>
<input id="email" type="email" required>
<button type="submit">Subscribe</button>
<!-- Meaningful alt text, labelled inputs, real buttons -->

Project ideas with real users
- College event registration site (frontend + backend + database)
- Library book availability tracker for your department
- Hostel mess menu and feedback app
- Portfolio site for a local shop or tutor
Each project: README, screenshots, live link, short write-up.

# College Events Portal
Live: <link>  |  Code: <link>
## Problem
Students missed events because notices were scattered.
## Features
- Event listing and search
- Registration with email confirmation
- Admin page for organisers
## Tech
React, FastAPI, PostgreSQL, deployed on free tiers
## What I learned
Form validation, authentication, deployment

Semester plan
Semester A: HTML, CSS, JavaScript basics; Git
Semester B: taste tests; choose frontend or backend; first project
Semester C: framework depth (React OR Python/Node + SQL); second project; internship search
Semester D: full stack basics; deployed capstone; interview practice
Every week: 4-6 hours of practice

Web skills checklist
☐ Semantic HTML and forms
☐ Flexbox and Grid, responsive design
☐ JavaScript: DOM, events, fetch, async/await
☐ Git and GitHub
☐ One frontend framework OR one backend framework
☐ SQL basics
☐ REST APIs
☐ Deployment to a live URL

Job/Internship Tracker
Company   Role            Path       Applied   Status    Follow-up
_______   _____________   frontend   ____      ______    ______
_______   _____________   backend    ____      ______    ______
_______   _____________   related    ____      ______    ______