Web Dev 101 Roadmap (Simplified)

Getting Started

  1. Decide what you want to build (Web Design / Full Stack Web Apps)
  2. Choose technology stack that you are gonna using
    • JS Frameworks: React / Vue / Svelte.js
    • PHP Frameworks: Laravel / CodeIgniter
    • CSS Frameworks: Bootstrap / Tailwind / Materialize CSS
      • DaisyUI
      • HeadlessUI
      • Flowbite
  3. Setup a Project management tools(optional)
    • Github Kanban/Project
    • Trello
    • Notion
  4. Start design/prototype, or if you to lazy to design , you can take inspiration from other sites that you are gonna build/design
    • Figma
    • Adobe XD
    • Penpot
  5. Start writing code
  6. Measure your web project and optimizing user experience using web-vitals
    • Analytics: Matomo/Umami/Plausible or Google Analytics 🙄
    • Accessibility: Unlighthouse
    • Issue & Error Monitoring: Sentry
    • Optimize SEO:
    • Perfomance: Priority Hints / Fetch Priority API
    • Security: Cloudflare Bot Management
  7. Unit test the code (QA)
    • Test Unit: Vitest/Jest
  8. Add database provider (optional - Back-end)
    • Firebase
    • Supabase
    • PlanetScale
  9. Deploy the code on Cloud (Dev-ops)
    • Netlify / Vercel
    • AWS / GCP / Azure

Last updated: 07/10/2023

Resource: