CodeLab: Beginner’s Guide to Building Your First AppBuilding your first app can feel like standing at the base of a mountain — exciting, a little intimidating, and full of possibilities. This guide walks you through the journey step-by-step using CodeLab, a friendly environment for learning to code and shipping simple applications. By the end you’ll understand how to plan an app, write code, test it, and deploy a basic but functional product.
Who this guide is for
This guide is aimed at complete beginners and new programmers who want a practical, hands-on path to building a simple app. No prior experience is required, though familiarity with basic computer use helps. If you’ve written a little HTML, JavaScript, or Python before, you’ll pick things up faster.
What you’ll build
We’ll create a small to-do list app with these features:
- Add tasks with a title and optional description
- Mark tasks as done/undone
- Delete tasks
- Persist tasks locally so they remain after closing the browser (using local storage)
This app is small enough to complete in one project but demonstrates core concepts you’ll reuse in larger projects.
Tools and technologies
- CodeLab — the coding environment where you’ll write and run your app
- HTML — structure of the app
- CSS — basic styling and layout
- JavaScript — app logic, event handling, and local storage
- (Optional) A version control system like Git for saving progress
Planning the app
Good planning saves time. Keep the scope tight for your first app.
- Define features (we listed them above).
- Sketch the UI: a header, input form to add tasks, a list area showing tasks with check and delete buttons.
- Decide data shape. For our to-do items, use objects like:
{ "id": "unique-id", "title": "Buy milk", "description": "2 liters", "done": false, "createdAt": 1620000000000 } - Plan how the app will persist data (localStorage key: “codelab-todos”).
Project structure
A simple file layout:
- index.html
- styles.css
- app.js
Keep things simple while learning. Later you can split concerns further.
Step-by-step implementation
1) HTML: structure
Create a basic page with a header, form, and a list container. Example:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title>CodeLab To‑Do</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <main class="app"> <h1>CodeLab To‑Do</h1> <form id="todo-form"> <input id="todo-title" type="text" placeholder="Task title" required /> <input id="todo-desc" type="text" placeholder="Description (optional)" /> <button type="submit">Add</button> </form> <section id="todo-list" aria-live="polite"></section> </main> <script src="app.js"></script> </body> </html> 2) CSS: basic styling
Add simple, responsive styles so the UI is usable and clean.
/* styles.css */ :root{font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;} body{margin:0;padding:2rem;background:#f7f7fb;color:#111;} .app{max-width:600px;margin:0 auto;} h1{text-align:center;margin-bottom:1rem;} form{display:flex;gap:.5rem;margin-bottom:1rem;} form input{flex:1;padding:.5rem;border:1px solid #ddd;border-radius:4px;} form button{padding:.5rem 1rem;border:0;background:#0066ff;color:#fff;border-radius:4px;cursor:pointer;} #todo-list{display:flex;flex-direction:column;gap:.5rem;} .todo{display:flex;align-items:center;justify-content:space-between;padding:.5rem;border:1px solid #e0e0ea;background:#fff;border-radius:6px;} .todo .meta{display:flex;gap:.5rem;align-items:center;} .todo.done{opacity:.6;text-decoration:line-through;} .btn{border:0;background:transparent;cursor:pointer;padding:.25rem;} 3) JavaScript: app logic
This script sets up the data model, renders UI, handles events, and uses localStorage.
// app.js const STORAGE_KEY = 'codelab-todos'; function uid() { return Date.now().toString(36) + Math.random().toString(36).slice(2,8); } function loadTodos() { try { const raw = localStorage.getItem(STORAGE_KEY); return raw ? JSON.parse(raw) : []; } catch (e) { console.error('Failed to load todos', e); return []; } } function saveTodos(todos) { try { localStorage.setItem(STORAGE_KEY, JSON.stringify(todos)); } catch (e) { console.error('Failed to save todos', e); } } let todos = loadTodos(); const form = document.getElementById('todo-form'); const titleInput = document.getElementById('todo-title'); const descInput = document.getElementById('todo-desc'); const listEl = document.getElementById('todo-list'); function render() { listEl.innerHTML = ''; if (todos.length === 0) { listEl.textContent = 'No tasks yet. Add one above.'; return; } todos.forEach(todo => { const item = document.createElement('div'); item.className = 'todo' + (todo.done ? ' done' : ''); const meta = document.createElement('div'); meta.className = 'meta'; const title = document.createElement('div'); title.textContent = todo.title; const desc = document.createElement('small'); desc.textContent = todo.description || ''; meta.appendChild(title); if (todo.description) meta.appendChild(desc); const controls = document.createElement('div'); const toggleBtn = document.createElement('button'); toggleBtn.className = 'btn'; toggleBtn.textContent = todo.done ? 'Undo' : 'Done'; toggleBtn.addEventListener('click', () => { todo.done = !todo.done; saveTodos(todos); render(); }); const delBtn = document.createElement('button'); delBtn.className = 'btn'; delBtn.textContent = 'Delete'; delBtn.addEventListener('click', () => { todos = todos.filter(t => t.id !== todo.id); saveTodos(todos); render(); }); controls.appendChild(toggleBtn); controls.appendChild(delBtn); item.appendChild(meta); item.appendChild(controls); listEl.appendChild(item); }); } form.addEventListener('submit', (e) => { e.preventDefault(); const title = titleInput.value.trim(); if (!title) return; const newTodo = { id: uid(), title, description: descInput.value.trim(), done: false, createdAt: Date.now() }; todos.unshift(newTodo); saveTodos(todos); render(); form.reset(); }); render(); Testing and refining
- Try adding, completing, and deleting tasks.
- Refresh the page to confirm persistence.
- Inspect console for errors and fix them stepwise.
- Improve UX: add keyboard shortcuts, confirm delete, or sort tasks.
Next learning steps
- Extract UI components and reuse them.
- Replace localStorage with a backend (Node/Express + database) for multi-device sync.
- Learn a front-end framework (React, Vue, Svelte) to manage complex UIs.
- Add user authentication to save tasks per user.
Troubleshooting — quick fixes
- If the app shows blank: open the console for syntax errors, confirm app.js is loaded, and check file paths.
- If localStorage isn’t saving: check privacy settings or use an Incognito mode where localStorage is disabled.
Building an app is iterative: start small, test often, and gradually add features. This CodeLab project gives you a repeatable template for many beginner apps — a solid base to expand your skills.
Leave a Reply