Web Dev Roadmap 2026 para sa beginners (libre lahat, walang bootcamp)

Mga kapatid, ito na yung pinaka-hinihingi niyo sa comments ko for months. Yung roadmap na binibigay ko sa mga students ko, buo, libre. Hindi ito para maging "senior in 3 months". Ito ay para sa taong may trabaho o nag-aaral, may 2 oras kada araw, at gustong maging job-ready sa loob ng isang taon.

(Goal desk. Hindi akin. Yung akin may electric fan at kapeng 3-in-1.)

Phase 0: Setup (week 1)

• VS Code, Git, at isang browser na alam mo ang DevTools (Chrome o Firefox).
• GitHub account. Lahat ng gagawin mo simula ngayon, naka-push doon.
• Isang notebook (papel!) para sa notes. Seryoso.

Phase 1: HTML at CSS (month 1-2)

• Semantic HTML: header, nav, main, section, article, footer. Forms at labels.
• Accessibility basics: alt text, tamang headings, keyboard navigation.
• CSS: box model, flexbox, grid, responsive design gamit ang media queries.
• Projects: personal page mo, at landing page para sa isang local business (yung karinderya sa kanto, yung pinsan mong nagbebenta online).

Phase 2: JavaScript (month 3-4)

• Variables, functions, arrays, objects, loops.
• DOM at events: pag-click, pag-type, pag-submit.
• fetch, promises, async/await. Dito madalas sumuko ang mga tao, kaya dahan-dahan.
• Modules (import / export).

Practice na hindi kailangan ng API key: kunin ang temperature sa Cebu ngayon gamit ang Open-Meteo.

async function getCebuTemp() {
  const url = 'https://api.open-meteo.com/v1/forecast?latitude=10.32&longitude=123.89&current=temperature_2m';
  try {
    const res = await fetch(url);
    if (!res.ok) throw new Error('HTTP ' + res.status);
    const data = await res.json();
    return data.current.temperature_2m;
  } catch (err) {
    console.error('Hindi makuha ang weather:', err);
    return null;
  }
}

getCebuTemp().then((temp) => {
  document.querySelector('#temp').textContent = temp === null ? 'offline' : temp + '°C';
});

Projects: weather app, quiz app, at isang maliit na expense tracker na naka-save sa localStorage.

Phase 3: Git, npm at React (month 5-6)

• Git ng maayos: branches, pull requests, pag-resolve ng merge conflict.
• npm at kung ano ang package.json.
• React: components, props, state, useEffect (at oo, yung dependency array, kung hindi mag-loop forever yan 😂), React Router.
• TypeScript basics sa dulo ng phase na to. Hindi kailangan ng advanced types, basta marunong ka mag-type ng props at function parameters.
• Project: inventory system para sa sari-sari store. Products, stock, simple sales log.

Phase 4: Backend basics at deploy (month 7-8)

• Node.js: Express, o route handlers ng Next.js.
• REST: GET, POST, PUT, DELETE, status codes.
• Isang database: PostgreSQL. May mga free tier na sapat para sa practice.
• Auth basics: login, sessions o tokens, at bakit hindi mo sine-save ang password ng plain text.
• Deploy sa isang free tier (Vercel, Netlify, Render). Kung hindi naka-deploy, para sa recruiter, wala yan.
• Project: full stack app na may login. Kahit simple.

Phase 5: Job-ready (month 9-12)

• Portfolio na may 3 magandang projects, hindi 10 clones. Bawat isa may README, screenshots, at live link.
• Matutong magbasa ng code ng iba: mag-ambag sa isang maliit na open source issue.
• Basic testing: kahit ilang unit tests lang.
• Mock interviews kasama ang kaibigan. Ipaliwanag ang projects mo ng malakas.
• Mag-apply: local (Cebu IT Park, BGC, Ortigas), remote (OnlineJobs.ph, at Upwork pero mag-ingat sa sobrang baba na rates), at internships.

Ano ang i-skip muna

• Wag mag-aral ng 5 frameworks. Isa lang muna.
• Wag magsimula sa microservices, Kubernetes, o "web3". Para yan sa later.
• Wag magbayad ng ₱60k-₱150k na bootcamp hangga't hindi mo pa nasusubukan ang libre ng 2 buwan. MDN, freeCodeCamp, The Odin Project, at oo, yung channel ko.
• AI tools: gamitin bilang tutor, hindi bilang replacement. Itanong mo kung bakit nag-error, hindi "gawin mo lahat". Sa unang 3 buwan, i-off mo ang AI autocomplete. Kailangan mong maramdaman yung hirap para matuto.

Weekly schedule (2 hours a day)

• Weekdays: 30 minutes manood o magbasa, 90 minutes mag-build.
• Weekend: isang 4-hour session sa project mo.
• Isang araw pahinga. Hindi tayo robot.

Kung kaya ko, kaya mo 💪🇵🇭 I-save niyo, i-share sa barkada na matagal nang nagsasabing "mag-start na ako next week".