Skip to content
Akwannya Hub
All tech roadmaps

Software Development

Frontend Development

Frontend engineers turn a design and an API into something a person can use on any device, at any connection speed, with any assistive technology. The craft is less about knowing a framework than about state, accessibility and performance.

7 stages3 projectsBeginner friendly6 to 9 months, part time

Start here

Open your browser's developer tools on any website you like and change some text on the page. That is the whole job in miniature. Begin at Stage 1; you need no prior programming.

01

How the web actually works

Skipping this is why people later cannot explain why their page is slow or their request failed.

Required

The request/response model

Every bug you will ever debug is somewhere in this loop. Knowing the loop is what turns guessing into diagnosis.

What to learn

  • What a browser does with a URL
  • HTTP methods and status codes
  • DNS and hosting in outline
  • Client versus server

Tools

  • Browser developer tools
  • The Network tab

Practice

Load a news site with the Network tab open. Find the slowest request and write down one sentence on why it is slow.

Next: HTML, because now you know what the browser receives.

02

Structure and style

HTML and CSS are not a warm-up you graduate from. Senior frontend work is mostly these two done well.

Required

Semantic HTML

The right element gives you keyboard behaviour, screen reader support and SEO for free. The wrong one means rebuilding all three by hand.

What to learn

  • Document structure
  • Forms and labels
  • Headings and landmarks
  • Images and alt text
  • When a div is wrong

Practice

Rebuild a page you like using no CSS at all. If it is unreadable without styling, the HTML is wrong.

Next: CSS, to control how that structure looks.

Required

CSS and layout

Layout is where most frontend time goes, and where most frontend frustration lives.

What to learn

  • The box model
  • Flexbox
  • Grid
  • Responsive design and media queries
  • Custom properties
  • Specificity and the cascade

Tools

  • Plain CSS first
  • Then one of Tailwind or CSS Modules

Practice

Take one screen design and build it at 375px, 768px and 1280px without a framework.

Project

beginner

A responsive personal site

A three-page personal site with a navigation bar, a projects grid and a contact form. No JavaScript frameworks, no CSS libraries.

  • HTML
  • CSS
  • Any static host

You can build and publish a page that looks deliberate on a phone and a laptop.

Next: JavaScript, to make it respond to people.

03

JavaScript for real

Deep enough that a framework later feels like a convenience rather than magic you cannot see through.

Required

Language fundamentals

Every framework is JavaScript underneath. People who skip this stage plateau the moment something breaks outside the framework's happy path.

What to learn

  • Types and coercion
  • Functions and scope
  • Arrays and objects
  • Modules
  • Async, promises and await
  • Error handling

First understand

  • Semantic HTML

Practice

Fetch from a public API and render the results as a list, using no libraries.

Next: The DOM and browser APIs.

Required

The DOM and browser APIs

Frameworks abstract the DOM. When the abstraction leaks, and it will, you need to know what is underneath.

What to learn

  • Selecting and updating elements
  • Events and delegation
  • Fetch
  • Storage
  • Forms and validation

Practice

Build a to-do list that survives a page refresh, with no framework.

Next: Git, before your project gets big enough to lose.

04

Working with others

Introduced here rather than later because every job assumes it from day one.

Required

Git and code review

It is the single most common thing a junior is expected to already know and most commonly has not practised.

What to learn

  • Commits and branches
  • Merging and resolving conflicts
  • Pull requests
  • Reading a diff
  • Useful commit messages

Tools

  • Git
  • GitHub

Practice

Deliberately create a merge conflict between two branches and resolve it without deleting either change.

Next: A framework, now that you can work on a codebase safely.

05

One framework, properly

This is the stage where people lose a year. You do not need three. You need one, deeply.

Choose one framework and stay with it for at least six months.

They solve the same problem. Employers care that you understand component state, not which logo you learned it with. React is the safest default in Ghana's job market; the others are genuinely fine.

Pick one

React

The largest job market and the largest ecosystem, which matters most when you are stuck at 11pm.

What to learn

  • Components and props
  • State and effects
  • Lists and keys
  • Forms
  • Data fetching
  • Composition over configuration

Tools

  • React
  • Vite
  • React Router

First understand

  • JavaScript fundamentals
  • The DOM

Next: TypeScript, once components feel natural.

Pick one

Vue

A gentler learning curve and excellent documentation, with a real if smaller job market.

What to learn

  • Single-file components
  • Reactivity
  • Composition API
  • Routing
  • State management

Tools

  • Vue
  • Vite
  • Pinia

First understand

  • JavaScript fundamentals
  • The DOM

Next: TypeScript, once components feel natural.

Pick one

Svelte

The least ceremony of the three and a genuine pleasure to write, with the smallest job market of the three.

What to learn

  • Components and reactivity
  • Stores
  • Routing with SvelteKit

Tools

  • Svelte
  • SvelteKit

First understand

  • JavaScript fundamentals
  • The DOM

Next: TypeScript, once components feel natural.

06

What separates a demo from production

Everything in this stage is what interviewers probe and tutorials skip.

Required

TypeScript

Now effectively the default in professional frontend work. It catches a whole class of bug before the page loads.

What to learn

  • Basic types
  • Interfaces and type aliases
  • Generics in outline
  • Typing component props
  • Reading a type error calmly

First understand

  • Comfortable with your chosen framework

Next: Accessibility, which is the other non-negotiable.

Required

Accessibility

It is a legal requirement in many markets, it overlaps almost entirely with good semantics, and it is the fastest way to stand out as a junior.

What to learn

  • Keyboard navigation
  • Focus management
  • ARIA only where semantics fall short
  • Colour contrast
  • Screen reader basics

Tools

  • axe DevTools
  • VoiceOver or NVDA

Practice

Navigate your own project using only the keyboard. Fix everything you cannot reach.

Next: Testing.

Recommended

Testing

You do not need full coverage. You do need to stop breaking the same thing twice.

What to learn

  • Unit tests
  • Testing user behaviour rather than implementation
  • One end-to-end happy path

Tools

  • Vitest or Jest
  • Testing Library
  • Playwright

Next: Performance.

Recommended

Performance

On the connections and devices most Ghanaian users actually have, this is a feature, not a polish item.

What to learn

  • Core Web Vitals
  • Bundle size
  • Image optimisation
  • Lazy loading
  • Reading a Lighthouse report

Tools

  • Lighthouse
  • The Network tab

Practice

Throttle your connection to Slow 3G and use your own project. Fix the worst thing you find.

Project

intermediate

A data-driven application

An app consuming a public API with search, filtering, pagination, loading and error states, and a detail view. Fully keyboard accessible and responsive.

  • Your framework
  • TypeScript
  • A public API

You can build something with real states rather than a happy-path demo, and explain each decision.

Next: Deployment.

07

Ship it and prove it

Work nobody can visit does not count as evidence.

Required

Deployment and tooling

A live URL is what turns a claim on a CV into something a hiring manager can click.

What to learn

  • Build output
  • Environment variables
  • Continuous deployment
  • Custom domains
  • Basic monitoring

Tools

  • Vercel or Netlify
  • GitHub Actions

Next: A portfolio piece with genuine depth.

Required

One deep project

Three shallow clones are worth less than one application with real requirements and honest trade-offs written down.

What to learn

  • Scoping
  • Architecture decisions
  • Writing about your own work

Project

advanced

A production-style application

An application with authentication, a real database, at least one non-trivial interaction such as drag-and-drop or realtime updates, and a written case study covering what you chose and what you would change.

  • Your framework
  • TypeScript
  • A backend service
  • A deployment platform

You can walk a stranger through a system you designed and defend the trade-offs for ten minutes.

Where this leads

You do not have to pick one now. These are the directions this path opens up once you are working.

Full Stack Development

Add the server side and own a feature end to end.

View roadmap

Mobile Development

Your JavaScript transfers directly to React Native.

View roadmap

UI/UX Design

Move earlier in the process, towards deciding what gets built.

View roadmap

Continue your journey

The paths closest to this one. Skills overlap more than the job titles suggest.

Full Stack Development

Own a feature from the database to the button someone clicks.

View

Backend Development

Build the systems that store, protect and serve everyone's data.

View

UI/UX Design

Decide how something should work before anyone builds it.

View

Mobile Development

Build apps for the device most people in Ghana use for everything.

View

You do not have to do this alone

Our programs are free, taught live, and built around the same progression. Join one and work through it alongside other people.

See our programsCreate a free account