একটি পরিষ্কার, ধাপে ধাপে গাইড: অ্যাপের বৈশিষ্ট্য পরিকল্পনা করুন, স্ক্রিন তৈরি করুন, লজিক যোগ করুন, ডেটা সংরক্ষণ করুন, টেস্ট করুন এবং প্রকাশ করুন — একটি ছোট টু-ডু অ্যাপ বানাতে।

এই গাইডে “অ্যাপ” বলতে আমি একটি ছোট ওয়েব অ্যাপ বুঝাচ্ছি: একটি একক পেজ যা আপনি একটি ব্রাউজার-এ খুলবেন এবং এটি আপনার ক্লিক ও টাইপ অনুযায়ী প্রতিক্রিয়া দেখাবে। কোনো ইনস্টলেশন নেই, কোনো অ্যাকাউন্ট নেই, কোনো জটিল সেটআপ নেই—শুধু এমন একটি সরল প্রজেক্ট যা আপনি লোকালি চালাতে পারবেন।
শেষে, আপনার কাছে একটি টু‑ডু অ্যাপ থাকবে যা করতে পারবে:
localStorage ব্যবহার করে (ট্যাব বন্ধ করলেও সব মুছে যাবে না)\n
এটি পরিপূর্ণ বা “এন্টারপ্রাইজ-গ্রেড” হবে না, এবং সেটাই উদ্দেশ্য। এটি একটি शुरुआतीদের প্রজেক্ট যাতে খুব বেশি টুল ছাড়াই মৌলিক বিষয়গুলি শেখানো হয়।আপনি ধাপে ধাপে অ্যাপটি তৈরি করবেন এবং ফ্রন্ট-এন্ড ওয়েব অ্যাপ কেমন কাজ করে তার মূল অংশগুলো শিখবেন:
সহজ রাখুন। আপনার শুধু দরকার:
যদি আপনি একটি ফোল্ডার তৈরি ও কিছু ফাইল এডিট করতে পারেন, আপনি প্রস্তুত।
কোনো কোড লেখার আগে ঠিক করুন “সফলতা” কেমন হবে। এই টিউটোরিয়াল এক ছোট অ্যাপ বানায় একটি পরিষ্কার কাজের জন্য: আপনার টাস্কগুলো ট্র্যাক করা।
একটি এক-লাইনের লক্ষ্য লিখে রাখুন যা আপনি নির্মাণের সময় মনে রাখবেন:\n
“এই অ্যাপ আমাকে একটি লিস্টে টাস্ক যোগ করতে দেয় যাতে আমি ভুলে না যাই।”
এইটুকুই। যদি আপনি ক্যালেন্ডার, রিমাইন্ডার, ট্যাগ, বা অ্যাকাউন্ট যোগ করতে ইচ্ছুক হন, সেগুলো পরে রাখুন।
দুইটি দ্রুত তালিকা করুন:
অবশ্যই থাকা (এই প্রজেক্টের জন্য):\n
localStorage ব্যবহার করব)\n
চাওয়া হলে (আজ করবো না): ডিউ তারিখ, প্রায়োরিটি, ক্যাটাগরি, সার্চ, ড্র্যাগ-এন্ড-ড্রপ, ক্লাউড সিঙ্ক।“অবশ্যই থাকা” কম রাখলে আপনি প্রকৃতপক্ষে কাজ শেষ করবেন।
এই অ্যাপ একটি সিঙ্গেল পেজ হতে পারে যেখানে থাকবে:
নির্দিষ্ট হন যাতে আপনি আটকে না যান:\n
এগুলো ঠিক করলে, প্রজেক্ট ফাইল সেটআপ করতে প্রস্তুত।
কোনো কোড লেখার আগে, অ্যাপের জন্য একটি পরিষ্কার ছোট “হোম” তৈরি করি। শুরু থেকে ফাইলগুলো সংগঠিত রাখা পরবর্তী ধাপগুলোকে সহজ করে।
কম্পিউটারে একটি নতুন ফোল্ডার বানান এবং নাম দিন todo-app মত কিছু। এই ফোল্ডারেই প্রজেক্টের সব থাকবে।
ফোল্ডারের মধ্যে তিনটি ফাইল তৈরি করুন:\n
index.html (পেজ স্ট্রাকচার)\n- styles.css (দর্শন ও লেআউট)\n- app.js (বিহেভিয়ার ও ইন্টারঅ্যাকটিভিটি)\n
আপনার কম্পিউটার যদি ফাইল এক্সটেনশন লুকায় (যেমন “.html”), নিশ্চিত করুন সঠিক এক্সটেনশনসহ ফাইল হচ্ছে। সাধারণ ত্রুটি হলো index.html.txt হয়ে যাওয়া।todo-app ফোল্ডারটি আপনার কোড এডিটরে খুলুন (VS Code, Sublime ইত্যাদি)। তারপর index.html ব্রাউজারে খুলুন।
এই সময় পেজ খালি থাকতে পারে—এটা ঠিক আছে। আমরা পরের ধাপে কন্টেন্ট যোগ করব।
আপনি ফাইল এডিট করলে ব্রাউজার স্বয়ংক্রিয়ভাবেই আপডেট নাও করবে (যদি কোনো টুল না থাকছে)।
বেসিক লুপ হবে:\n
কিছু কাজ না করলে প্রথমে রিফ্রেশ করে দেখুন।
আপনি ডাবল-ক্লিক করে index.html চালাতে পারবেন, কিন্তু একটি লোকাল সার্ভার পরে অদ্ভুত সমস্যি রোধ করে (বিশেষত যখন আপনি ডাটা সেভ বা ফাইল লোড করবেন)।
শুরু করার সহজ অপশনগুলি:\n
python -m http.server
তারপর ব্রাউজারে প্রদত্ত অ্যাড্রেস (সাধারণত http://localhost:8000) খুলুন।
এখন আমরা অ্যাপের জন্য একটি পরিষ্কার কঙ্কাল তৈরি করব। এই HTML এখনই ইন্টারঅ্যাকটিভ করবে না (সেটা পরের), কিন্তু এটি JavaScript কে স্পষ্ট জায়গা দেবে পড়া ও লেখা করার জন্য।
আমরা রাখব:\n
সহজ ও পড়তে সুবিধাজনক নাম রাখুন। ভাল id/class ব্যবহার করলে পরের ধাপগুলোতে JavaScript সহজে এলিমেন্ট ধরতে পারবে।
index.html-এ পেস্ট করুন<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>To‑Do App</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main class="app" id="app">
<h1 class="app__title" id="appTitle">My To‑Do List</h1>
<form class="task-form" id="taskForm">
<label class="task-form__label" for="taskInput">New task</label>
<div class="task-form__row">
<input
id="taskInput"
class="task-form__input"
type="text"
placeholder="e.g., Buy milk"
autocomplete="off"
/>
<button id="addButton" class="task-form__button" type="submit">
Add
</button>
</div>
</form>
<ul class="task-list" id="taskList" aria-label="Task list"></ul>
</main>
<script src="app.js"></script>
</body>
</html>
স্ট্রাকচারের জন্য এটুকুই। লক্ষ্য করুন আমরা id="taskInput" এবং id="taskList" ব্যবহার করেছি—এসবই JavaScript-এ সবচেয়ে বেশি ব্যবহার করবেন।
এখন আপনার পেজ আছে, কিন্তু হয়তো বেশ নির্বাথ লাগছে। একটু CSS দিলে ব্যবহার করা সুবিধাজনক হবে: স্পেসিং, পাঠযোগ্য টেক্সট, আর এমন বাটন যা ক্লিকযোগ্য লাগে।
কেন্দ্রীভূত বক্স অ্যাপটিকে ফোকাস করে রাখে এবং কনটেন্টকে চারপাশ জুড়ে ছড়িয়ে পড়া রোধ করে।
/* Basic page setup */
body {
font-family: Arial, sans-serif;
background: #f6f7fb;
margin: 0;
padding: 24px;
}
/* Centered app container */
.container {
max-width: 520px;
margin: 0 auto;
background: #ffffff;
padding: 16px;
border-radius: 10px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
প্রতিটি টাস্ক আলাদা “রো” মত দেখানো উচিত, আরামদায়ক স্পেসিং সহ।
ul { list-style: none; padding: 0; margin: 16px 0 0; }
li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
border: 1px solid #e7e7ee;
border-radius: 8px;
margin-bottom: 10px;
}
.task-text { flex: 1; }
যখন টাস্কটি সম্পন্ন, এটি ভিজ্যুয়ালি পরিবর্তিত হওয়া উচিত যাতে এক নজরে বোঝা যায়।
.done .task-text {
text-decoration: line-through;
color: #777;
opacity: 0.85;
}
একই সাইজ এবং স্টাইলে বাটন রাখুন যাতে এগুলো একটি অ্যাপের অংশ মনে হয়।
button {
border: none;
border-radius: 8px;
padding: 8px 10px;
cursor: pointer;
}
button:hover { filter: brightness(0.95); }
এটুকুই UI-র জন্য—কোনো উন্নত ট্রিক লাগবে না। এখন JavaScript দিয়ে বিহেভিয়ার যোগ করা যাক।
এখন আপনার ইনপুট, বাটন, ও লিস্ট পেজে আছে—এগুলোকে কাজ করাতে হবে। লক্ষ্য সহজ: যখন কেউ একটি টাস্ক টাইপ করে Add ক্লিক করবে (বা Enter চাপবে), নতুন আইটেম লিস্টে দেখা যাবে।
JavaScript ফাইলে প্রথমে প্রয়োজনীয় এলিমেন্টগুলো ধরুন, তারপর দুইটি অ্যাকশন শোনার কোড লাগান: বাটন ক্লিক এবং ইনপুটে Enter কী।
const taskInput = document.querySelector('#taskInput');
const addBtn = document.querySelector('#addBtn');
const taskList = document.querySelector('#taskList');
function addTask() {
const text = taskInput.value.trim();
// Block empty tasks (including ones that are just spaces)
if (text === '') return;
const li = document.createElement('li');
li.textContent = text;
taskList.appendChild(li);
// Clear the input and put the cursor back
taskInput.value = '';
taskInput.focus();
}
addBtn.addEventListener('click', addTask);
taskInput.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
addTask();
}
});
trim() করে অতিরিক্ত স্পেস সরায়।\n- খালি হলে থামে, যাতে খালি আইটেম না যায়।\n- একটি নতুন <li> তৈরি করে তার টেক্সট সেট করে এবং লিস্টে যোগ করে।\n- ইনপুট ক্লিয়ার করে এবং ফোকাস ফিরিয়ে দেয় যাতে পরের টাস্ক দ্রুত টাইপ করা যায়।কিছু না হলে, আপনার HTML-এ থাকা id গুলো ও JavaScript সিলেক্টর একে অপরের সাথে মিলছে কিনা চেক করুন (এটি সবচেয়ে সাধারণ সমস্যা)।
এখন আপনি টাস্ক যোগ করতে পারবেন—এগুলোকে কার্যকর করানো যাক: একটি টাস্ক সম্পন্ন হিসেবে চিহ্নিত করা এবং মুছে ফেলা সম্ভব হবে।
টাস্কগুলো স্ট্রিং হিসেবে রাখার পরিবর্তে অবজেক্ট হিসেবে রাখুন। এতে প্রতিটি টাস্কের একটি স্থায়ী আইডেন্টিটি থাকবে এবং “done” স্ট্যাটাস ট্র্যাক করার জায়গা থাকবে:\n
text: টাস্কের লেখা\n- done: true বা false\n- id: একটি ইউনিক নম্বর যাতে আমরা সঠিক টাস্কটি খুঁজে/মুছে পারিউদাহরণ:\n
let tasks = [
{ id: 1, text: "Buy milk", done: false },
{ id: 2, text: "Email Sam", done: true }
];
প্রতিটি টাস্ক রেন্ডার করলে একটি চেকবক্স বা “Done” বাটন এবং একটি “Delete” বাটন রাখুন।
একটি ইভেন্ট লিসেনার হলো ক্লিকের প্রতিক্রিয়া জানানোর উপায়। আপনি বাটনে (বা পুরো লিস্টে) ইভেন্ট লিসেনার লাগাবেন, এবং ইউজার ক্লিক করলে আপনার কোড রান করবে।
শুরুর জন্য একটা বন্ধুত্বপূর্ণ প্যাটার্ন হল ইভেন্ট ডেলিগেশন: টাস্ক লিস্ট কন্টেইনারে একটি ক্লিক লিসেনার রাখুন, তারপর চেক করুন কী ক্লিক করা হয়েছে।
function toggleDone(id) {
tasks = tasks.map(t => t.id === id ? { ...t, done: !t.done } : t);
renderTasks();
}
function deleteTask(id) {
tasks = tasks.filter(t => t.id !== id);
renderTasks();
}
document.querySelector("#taskList").addEventListener("click", (e) => {
const id = Number(e.target.dataset.id);
if (e.target.matches(".toggle")) toggleDone(id);
if (e.target.matches(".delete")) deleteTask(id);
});
আপনার renderTasks()-এ:\n
data-id="${task.id}" যোগ করুন।\n- .done ক্লাস যোগ করে সম্পন্ন টাস্কগুলো ভিজ্যুয়ালি দেখান।এখন আপনার টু‑ডু লিস্টের একটি বিরক্তিকর সমস্যা আছে: আপনি যদি পেজ রিফ্রেশ করেন (বা ট্যাব বন্ধ করেন), সব মুছে যায়।
কারণ টাস্কগুলো কেবল JavaScript মেমরিতে থাকছে। পেজ রিলোড করলে মেমরি রিসেট হয়।
localStorage ব্রাউজারের সাথে বিল্ট-ইন। এটাকে একটি নামের (কী) নিচে টেক্সট রাখা যায়। সার্ভার বা অ্যাকাউন্ট ছাড়া ছোট প্রজেক্টের জন্য এটি দারুণ উপযোগী।
পুরো টাস্ক লিস্টকে JSON টেক্সটে রেখে, তখন পেজ ওপেন হলে আবার সেটি লোড করা হবে।
আপনি যখনই টাস্ক যোগ করবেন, কোনো টাস্কের স্ট্যাটাস পালটাবেন, বা মুছবেন—পর তাহলেই saveTasks() কল করুন।
const STORAGE_KEY = "todo.tasks";
function saveTasks(tasks) {
localStorage.setItem(STORAGE_KEY, JSON.stringify(tasks));
}
আপনার অ্যাপ যেখানে tasks অ্যারে আপডেট করে সেখানে ঠিক এর পরই লিখুন:\n
saveTasks(tasks);
renderTasks(tasks);
পেজ লোড হলে সেভ করা মানটি পড়ুন। যদি কিছু না থাকে, ফাঁকা তালিকা ফিরিয়ে দিন।
function loadTasks() {
const saved = localStorage.getItem(STORAGE_KEY);
return saved ? JSON.parse(saved) : [];
}
let tasks = loadTasks();
renderTasks(tasks);
এটুকুই: এখন আপনার অ্যাপ রিফ্রেশের পরে টাস্ক মনে রাখে।
টিপ: localStorage কেবল স্ট্রিংই রাখে, তাই JSON.stringify() অ্যারে-কে টেক্সটে পরিণত করে এবং JSON.parse() লোড করার সময় এটাকে পুনরায় অ্যারে করে।
টেস্ট করা বোরিং শোনাতে পারে, কিন্তু এটা সবচেয়ে দ্রুত উপায় আপনার টু‑ডু অ্যাপকে "কাজ করে সবসময়" বানাতে। প্রতিটি ছোট পরিবর্তনের পরে একটা দ্রুত পাস করুন।
প্রধান ফ্লো নিচের ক্রমে চালান:\n
কোনো ধাপ ভুল করলে, নতুন ফিচার যোগ করার আগে সেটা ঠিক করুন। ছোট অ্যাপগুলো সমস্যা জমা হলে জটিল হয়ে যায়।
এগুলো হল ইনপুট যা আপনি ডিজাইন করেননি, কিন্তু বাস্তব মানুষ করবে:\n
const text = input.value.trim();
addButton.disabled = text === "";
(এটি প্রতিটি input ইভেন্টে চালাতে পারেন, এবং আবার অ্যাড করার আগে চেক করতে পারেন।)
ক্লিক করলে কিছু না হলে সাধারণত এগুলোই কারণ:\n
id বা ক্লাস নাম ভিন্ন)\n- আপনার স্ক্রিপ্ট লোড হয়নি (ভুল ফাইলনেম/পাথ, বা app.js খুঁজে পাওয়া যায়নি)\n- কোনো JavaScript এরর পুরো ফাইলটাকে থামিয়ে দিয়েছেযখন কিছু এলোমেলো লাগে, লগ করে দেখুন:\n
console.log("Adding:", text);
console.log("Current tasks:", tasks);
ব্রাউজারের Console-এ এরর (লাল টেক্সট) দেখুন। সমস্যা ঠিক হলে লগ মুছে দিন যাতে প্রকল্পে ঝামেলা না হয়।
একটি টু‑ডু অ্যাপ তখনই “ডান” যখন সেটা বাস্তব মানুষদের জন্য আরামদায়ক—ফোনে, কীবোর্ড দিয়ে, এবং স্ক্রিন রিডারের মতো সহায়ক টুলে।
ছোট স্ক্রিনে ক্ষুদ্র বাটন বিরক্তিকর। ক্লিকযোগ্য জিনিসগুলোকে পর্যাপ্ত স্পেস দিন:\n
CSS-এ padding, font-size, এবং gap বাড়ালেই বড় প্রভাভ ফেলে।
স্ক্রিন রিডারগুলোকে কন্ট্রোলগুলোর পরিষ্কার নাম দরকার।\n
<label> থাকা উচিত (সবচেয়ে ভালো)। আপনি যদি সেটি না দেখাতে চান, CSS-এ ভিস্যুয়ালি হাইড করে রেখে দিতে পারেন, কিন্তু HTML-এ রাখুন।\n- আইকন-অনলি বাটন (যেমন ট্রাশ আইকন) হলে aria-label="Delete task" দিন যাতে স্ক্রিন রিডার সেটিকে হ্যান্ডেল করতে পারে।এখানেই মানুষগুলো কন্ট্রোলগুলি বুঝবে অনুমান না করে।
মোজটা কীবোর্ড ছাড়া ব্যবহার করা উচিত নয়:\n
<form> ব্যবহার করলে Enter ন্যূনতম কাজ করে)।\n- টাস্ক যোগ হলে ফোকাস ইনপুটে ফিরিয়ে দিলে পরবর্তী টাস্ক দ্রুত যোগ করা যায়।পাঠযোগ্য ফন্ট সাইজ (১৬px ভালো বেসলাইন) ও শক্ত কনট্রাস্ট ব্যবহার করুন (ডার্ক টেক্সট লাইট ব্যাকগ্রাউন্ডে)। কেবল রং দিয়ে “ডান” দেখাবেন না—স্ট্রাইকথ্রু বা অন্যান্য স্পষ্ট স্টাইল রাখুন।
এখন সব কাজ করলে, ১০–১৫ মিনিট নিয়ে কোডটাকে টidy করুন। এতে ভবিষ্যতে ফিক্স করা সহজ হয় এবং পরে ফিরে দেখলে নিজের প্রজেক্টটা বোঝা সহজ হবে।
ছোট ও পূর্বানুমেয় রাখুন:\n
/index.html — পেজ স্ট্রাকচার (ইনপুট, বাটন, লিস্ট)\n- /styles.css — অ্যাপ কেমন দেখায় (স্পেসিং, ফন্ট, “ডান” স্টাইল)\n- /app.js — বিহেভিয়ার (যোগ, টগল ডন, মুছে ফেলা, সেভ/লোড)\n- /README.md — ভবিষ্যৎ আপনার জন্য দ্রুত নোটআপনি যদি সাবফোল্ডার পছন্দ করেন, করতে পারেন:\n
/css/styles.css\n- /js/app.jsশুধু নিশ্চিত করুন link ও script পাথগুলো ম্যাচ করে।
কিছু দ্রুত টিপস:\n
taskInput, taskList, saveTasks()\n- ফাংশন ছোট রাখুন: একটা ফাংশন যেন এক কাজ করে\n- কোড স্পষ্ট না হলে ছোট মন্তব্য দিন (প্রতি লাইনে মন্তব্য দেবেন না)উদাহরণ হিসেবে সহজ স্কিমা:\n
renderTasks(tasks)\n- addTask(text)\n- toggleTask(id)\n- deleteTask(id)README.md খুব সহজ হতে পারে:\n
index.html খুলুন)\n- ঐচ্ছিক: কোনো পরিচিত সীমাবদ্ধতাকমপক্ষে, কোনো মাইলস্টোন (যেমন “localStorage কাজ করে”) শেষ হলে ফোল্ডার জিপ করে রাখুন। যদি ভার্সন হিস্টরি চান, Git ভাল—কিন্তু ঐচ্ছিক। এমন একটি ব্যাকআপ একটাই বাঁচাতে পারে দুর্ঘটনাজনিত ডিলিট থেকে।
পাবলিশ মানে আপনার ফাইলগুলো (HTML, CSS, JS) কোথাও পাবলিকলি রেখে অন্যরা লিংকে খুললে ব্যবহার করতে পারে। এই টু‑ডু অ্যাপ একটি “স্ট্যাটিক সাইট”, তাই অনেক সার্ভিসে বিনামূল্যে হোস্ট করা যায়।
সংক্ষিপ্ত স্টেপগুলো:\n
আপনার অ্যাপ যদি আলাদা ফাইল ব্যবহার করে, ফাইলনেমগুলো ঠিক আছে কি না যাচাই করুন (styles.css বনাম style.css ইত্যাদি)।
সবচেয়ে সহজ “আপলোড ও চালান” চাইলে:\n
localStorage কাজ করছে)\n- যোগ, কমপ্লিট, মুছে দেখুন: কোনো বাটন ব্রোকেন নেই\n- মোবাইলে খুলুন (বা ব্রাউজার উইন্ডো সংকুচিত করুন): কিছু স্ক্রিন থেকে বাইরে ছুটে পড়ছে নাসব ঠিক থাকলে লিংক একজন বন্ধুকে পাঠান এবং তাদের দিয়ে ট্রাই করাতে বলুন—নতুন চোখ দ্রুত সমস্যা ধরতে পারে।
আপনি একটি কাজ করা টু‑ডু অ্যাপ বানিয়ে ফেলেছেন। যদি আপনি বড় না কুঁদে একটু শিখতে চান, এই আপগ্রেডগুলো বাস্তবে মূল্য বাড়ায় এবং দরকারী প্যাটার্ন শেখায়।
প্রতিটি টাস্কের পাশে একটি “Edit” বাটন যোগ করুন। ক্লিক করলে টাস্ক লেবেলকে একটি ইনপুট ফিল্ডে বদলান (পূর্বরূপ ভরা), সঙ্গে “Save” ও “Cancel” দিন।
টিপ: টাস্ক ডেটা id ও text সহ অবজেক্ট হিসেবে রাখুন—এভাবে এডিট করা সহজ: id দিয়ে সঠিক টাস্ক খুঁজে text আপডেট করে রেন্ডার ও সেভ করুন।
উপর তিনটি বাটন যোগ করুন: All, Active, Done।\n
বর্তমান ফিল্টার একটি ভেরিয়েবল রাখুন, যেমন currentFilter = 'all'। রেন্ডার করার সময় দেখান:\n
হালকাভাবে রাখুন:\n
YYYY-MM-DD) যোগ করুন এবং টাস্কের পাশে দেখান\n- অথবা একটি ছোট ড্রপডাউন দিয়ে ক্যাটাগরি দিন, যেমন “Work / Home / School”\n
একটি অতিরিক্ত ফিল্ড যোগ করলেই ডেটা মডেল ও UI একসাথে আপডেট কিভাবে করতে হয় শেখায়।যখন আপনি প্রস্তুত, বড় ধারণা হল: localStorage-এর বদলে টাস্কগুলো API (সার্ভার)-এ পাঠানো। সার্ভার সেটি ডেটাবেসে রাখবে, ফলে ডিভাইস জুড়ে সিঙ্ক হবে।
যদি আপনি সেটা ট্রায় করতে চান, কোনো ভিব-কোডিং প্ল্যাটফর্ম সাহায্য করতে পারে: ফিচার ডেসক্রাইব করে API এন্ডপয়েন্ট, ডাটাবেস টেবিল, UI চেঞ্জ বর্ণনা করে প্রোটোটাইপ তৈরি করতে পারেন এবং পরে সোর্স কোড এক্সপোর্ট করে শিখতে পারেন।
একটি নোটস অ্যাপ (সার্চসহ) বা একটি হ্যাবিট ট্র্যাকার (ডেইলি চেক-ইন) বানাতে পারেন। এগুলো এসে একই দক্ষতা ব্যবহার করে: লিস্ট রেন্ডারিং, এডিটিং, সেভিং, ও সহজ UI ডিজাইন।