Coding Club · WebDev Vertical

CODING CLUBBITS PILANI

Hands-on web development sessions. You write the code in the room, it breaks in the room, and you fix it before you leave — starting with the CSS layout model everybody claims to know.

~$frontend-basics↵~$backend-basics↵

bash — webdevTab to complete

visitor@codingclub:~$

01 / playground

Edit the CSS. Watch it change.

A real editor and a real render — the same loop the sessions run on. Change a value, break the layout, put it back.

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  height: 140px;
}

.box {
  flex: 1;
  display: grid;
  place-items: center;
  height: 64px;
  border-radius: 10px;
  background: #5eead4;
  color: #08240f;
  font-weight: 700;
}

live preview

02 / sessions

Where to start.

Each session stands on its own. Open the one you need — no order is enforced.

01live

Frontend Basics

Flexbox Monkey — a game where you write real CSS to move a monkey onto its target. Layout you can feel rather than memorise.

display
justify-content
align-items
flex-direction

open session

02live

Backend Basics

A Django music app — artists, albums, playlists, likes and a full auth flow. The whole request → view → model → template path, running live.

django
models
auth
ORM
templates

open the app