logo

Your Step-by-Step Frontend Journey

A comprehensive guide to help you become a successful Frontend developer from scratch.

Start the Journey

Introduction to Frontend Development

What is Frontend Development?

Frontend development is the practice of producing HTML, CSS and JavaScript for a website or Web Application so that a user can see and interact with them directly. It's about creating a great user experience.

Who is this for?

This roadmap is for anyone who wants to learn how to build beautiful and interactive websites and web applications.

Step-by-Step Roadmap

This section outlines the key steps and skills you need to acquire in a logical order, from foundational knowledge to advanced topics.

Phase 1: The Basics

Step 1: HTML

Learn the structure of web pages.

HTML HTML
Step 2: CSS

Style your web pages.

CSS CSS Bootstrap Bootstrap Tailwind Tailwind
Step 3: JavaScript

Add interactivity to your web pages.

JavaScript JavaScript

Phase 2: Frameworks

Step 4: Choose a Framework

Learn a modern frontend framework.

React React Angular Angular Vue Vue

Phase 3: Advanced Topics

Step 5: State Management

Manage the state of your application.

Redux Redux Vuex Vuex NgRx NgRx
Step 6: Testing

Learn how to test your code.

Jest Jest Vitest Vitest
Step 7: Build Tools

Learn about module bundlers.

Webpack Webpack Vite Vite

Project Ideas

Beginner

  • Create a personal portfolio website.
  • Build a simple to-do list application.

Intermediate

  • Build a weather application that fetches data from an API.
  • Create a simple e-commerce site with a shopping cart.

Advanced

  • Build a real-time chat application.
  • Create a clone of a popular web application like Trello or Twitter.

Famous Courses

Here you can find a curated list of well-regarded courses to accelerate your learning.

HIT Myanmar

Web Development Foundation, Special Frontend Development

Creative Coder Myanmar

JavaScript, React, Vue, and Firebase courses

The Web Developer Bootcamp

Udemy - Colt Steele

Meta Front-End Developer Professional Certificate

Coursera

Documentation Links

Essential documentation and official guides for key tools and technologies.

Frontend Myanmar

A website dedicated to frontend development in Myanmar.

"Web Developer" by Ei Maung

An online book that covers web development from the basics to a professional level.

MDN Web Docs

The go-to resource for web developers.

W3Schools

A great resource for beginners.

YouTube Channels

Popular YouTube channels that provide tutorials and insights into the world of Frontend Development.

Creative Coder Myanmar

Tutorials on various web development topics.

Dgtech Myanmar

ReactJS tutorials for beginners.

Traversy Media

Web development tutorials.

freeCodeCamp.org

Full-length courses and tutorials.

Ebooks

Recommended e-books and reading materials for a deeper understanding.

HTML & CSS – Beginner to Super Beginner

by Lwin Moe Paing

JavaScript လို – တို – ရှင်း

by Ei Maung

Eloquent JavaScript

A modern introduction to programming.

You Don't Know JS

A series of books diving deep into the core mechanisms of JavaScript.