WebCraft
Frontend engineer career growth path

Frontend · Career · Learning Path

Frontend Engineer Roadmap: Skills, Tasks, and Learning Resources

From HTML, CSS, and JavaScript through frameworks, testing, and senior-level thinking—each stage includes competency markers, practice tasks, and curated resources to help you grow steadily into a frontend career.

~8,000 wordsFrontendCareer

Frontend engineering is a role I genuinely enjoy. As frontend engineers, we are the people who turn flat design mockups into real web pages. The web is a blank canvas, and we are the painters who bring ideas to life on screen.

Early on, the job is about “painting” a designer's layout in the browser, then making that page move and respond. After that, you start exploring how to improve performance, development efficiency, and reliability—and gradually grow into a senior frontend engineer along the way.

In this article I walk through the key skills from newbie to senior, with practice tasks and learning resources at each stage. I hope it helps you grow into a confident, capable frontend engineer.

Newbie

This stage has three phases. Think of it like learning to drive at driving school:

  • Phase 1: You sit in the passenger seat while the instructor explains every control in the car.
  • Phase 2: You move to the driver's seat, explore the controls, and start learning to drive.
  • Phase 3: You finish the course. You are not an expert yet, but you are allowed on the road.

N1. Newbie Level 1

Competency markers

  • You can clearly explain HTML, CSS, and JavaScript well enough that a mentor or ChatGPT confirms you understand them.
  • You can use a code editor to edit plain text files as easily as you would in Notepad.
  • You know what browser DevTools are and can open them comfortably in Chrome or another browser.

Task 1: Understand what HTML, CSS, and JavaScript are

I asked ChatGPT: What is the relationship between HTML, CSS, and JavaScript? Here is the answer:

If you imagine a website as a house, then:
  • HTML is the skeleton—it decides how many rooms there are and what goes in each. Headings, paragraphs, images, and buttons on a page are all placed with HTML.
  • CSS is the interior design—colors, font sizes, rounded or square buttons. Without CSS, a site looks like plain black text on a white wall.
  • JavaScript is the wiring and remote controls that make things move. Dialogs on button click, image carousels, and add-to-cart behavior all run on JavaScript.

I think that analogy holds up pretty well.

JavaScript is abbreviated as JS. Java is not short for JavaScript—they are completely different languages.

Task 2: Watch the first video in the learning resources and complete VS Code download.

Learning resources

Task 3: Watch the learning resources for this task to get a first impression of DevTools—what they can do. When you start writing code for real, come back and practice hands-on.

The instructors in these videos use Chrome.

Learning resources

N2. Newbie Level 2

Competency markers

  • Start learning to use the terminal.
  • Have your own GitHub account.
  • Upload your first webpage to GitHub Pages and confirm it loads correctly in a browser.
If you are starting from zero, this level may take several days. That is normal—do not rush.

Task 1: Learn to use the terminal

If you are not sure how to open a terminal, ask ChatGPT—for example: “I am on a Mac. How do I open Terminal?”

Learning resources

At this stage, get comfortable with at least these terminal operations:

  1. Check your current directory: pwd
  2. List files (including hidden): ls
  3. Move between directories: cd
  4. Move files or folders: mv
  5. Delete files: rm

When you forget a command, ask ChatGPT—for example:

  • I am on a Mac. What command shows my current directory in Terminal?
  • I am on a Mac. How do I delete a folder in Terminal?

Task 2: Build a webpage. If you are not sure what to make, try a personal resume with photo, bio, and work history.

The first bottleneck beginners hit is layout—where things sit on the page. You need a solid grasp of CSS Display, Position, and the Box Model. Most of the learning resources below cover these; use them to break through that wall quickly.

Learning resources

- HTML tutorials by STEAM 教育學習網

- CSS tutorials by STEAM 教育學習網

When you hit a wall, talk to ChatGPT!

Task 3: Add responsive (RWD) behavior so the page reads well on desktop, tablet, and phone.

Learning resources

Task 4: Follow Create a Dark Mode Switch with HTML, CSS, JavaScript by Coding2GO [YouTube] to add a light/dark theme toggle on your page.

The demo in the video may use SVG icons—you can skip those and use plain text buttons instead.

Learning resources

Task 5: Create a GitHub account and publish your page

You have finished your first webpage—it is time to share it. Follow the learning resources to set up GitHub and deploy the page you built to GitHub Pages.

You only touch a little Git in this task, but Git is foundational for working with teammates later—invest time in it.

Learning resources

N3. Newbie Level 3

Competency markers

  • You can explain CSS selectors and specificity clearly enough for a mentor or ChatGPT to confirm.
  • You know JS basics and can name at least five of JavaScript's “quirky” behaviors with confidence.
  • You can outline hoisting, the event loop, the prototype chain, and this at a high level.

Task 1: Go deeper on CSS. Watch CSS tutorials (2023) by CodeShiba 程式柴 [YouTube List], starting with CSS basics.

Learning resources

Task 2: Complete JavaScript: The First Steps (free) by Andre Madarang on Laracasts.

Learning resources

Task 3: Learn JavaScript's “quirky” behaviors

Learning resources

  • Ask ChatGPT: “What are JavaScript's quirky behaviors?”

Task 3: Clarify hoisting, the event loop, the prototype chain, and this

These concepts are hard to fully grasp early on. Get the gist now and revisit as you gain experience—it will click later.

Learning resources

You can skip the React section at the end for now and return when needed.

Stage summary

You have finished the first step as a frontend newbie: a working grasp of HTML, CSS, and JavaScript, plus tools like VS Code, browser DevTools, and the terminal. You built a static page and put it on GitHub. Next up: strengthen fundamentals, connect to external data with JavaScript, and add interactive features.

Junior Engineer

This stage focuses on:

  1. Continuing to strengthen fundamentals.
  2. Learning how the web works at a protocol level.
  3. Calling HTTP APIs with tools and code.

J1. Junior Level 1

Competency markers

  • You know what the DOM is and can query and manipulate it with JavaScript.
  • You know what JSON and XML are.
  • You know what an HTTP API call is.
  • You know request and response.
  • You can call HTTP APIs with JavaScript and Postman.
  • You can explain CORS clearly enough for a mentor or ChatGPT to confirm.

Task 1: Learn the DOM and practice manipulating it with JavaScript

Read learning resource 1 for a first pass on the DOM, then follow learning resource 2 to practice DOM manipulation. After this task you should be able to change page content comfortably with JavaScript.

Learning resources

  1. HTML DOM guide for beginners by 新人日誌
  2. JavaScript DOM tutorials by dcode [YouTube List]

Task 2: Learn XML and JSON

XML and JSON are two data formats used widely in industry—especially when integrating with other systems. You may not need them on day one, but you should recognize them.

Learning resources

  1. XML overview by J.J's Blogs
  2. JSON in 20 minutes by MIS2000 Lab. [YouTube]
  3. JSON basics by 彭彭 [YouTube]

Task 3: Use Postman to fetch open data from Taipei Data Platform

Besides Postman and API calls, the resources below cover concepts you must internalize:

  1. How browsers talk to servers
  2. HTTP requests and responses
  3. HTTP status codes

After the videos, head to Taipei Data Platform, open the data catalog, filter by JSON format, and pick a dataset that interests you to practice with.

Learning resources

  1. What is HTTP? by Proladon [YouTube]
  2. HTTP, HTTPS, request, response, status codes by GrandmaCan [YouTube]
  3. Postman demo with Taiwan open data by 葉政偉 [YouTube]
  4. Top 9 HTTP request methods (with examples) by JavaScript on LinkedIn

Task 4: Understand packets, TCP, IP, and domains

Learning how packets, TCP, IP, and domains fit together gives you a mental model of what happens between typing a URL and seeing a page.

You do not need deep expertise yet—basic concepts will help later.

Learning resources

Task 5: Understand CORS

In decoupled front-end/back-end setups, CORS (Cross-Origin Resource Sharing) often shows up as: “Access to fetch at 'xxx' from origin 'yyy' has been blocked by CORS policy.” It is confusing until you know what it is.

CORS is not a bug—it is a browser security mechanism that limits cross-origin access to protect users. The intent is sound; configuring it correctly in dev and production is what hurts.

This task covers:

  • Why CORS exists
  • When it triggers
  • How to configure it in dev and production
  • How to tell server misconfiguration from a bad client request

Learning resources

J2. Junior Level 2

Competency markers

  • Start using Node.js and npm.
  • Can scaffold a new Vue project with Vite.
  • Know what cookies are and read/write them with JavaScript.
  • Know the difference between localStorage and sessionStorage and can use both from JavaScript.
  • Can build a full-featured Todo List in Vue.
  • Can fetch third-party data via API in a Vue project.

Task 1: Learn Node.js and npm, scaffold a Vue project with Vite, and start practicing Vue

This is a big step—you enter the Node/npm toolchain and modern front-end engineering with Vue. There is a lot to absorb; follow the steps below in order.

Steps:

  1. Install Node.js and npm following npm for absolute beginners by Kevin Powell [YouTube].
  2. Create your first Vue 3 app with Creating Your First Vue 3 App with Vite by LearnVue [YouTube].
  3. Learn Vue alongside Vue JS 3 Tutorial by Codevolution [YouTube]
  4. Optional: Learn Vue 3: Step by Step by Jeffrey Way [Laracasts]
There are many ways to install Node.js. At work you will likely use nvm eventually; for now downloading from the Node.js site is fine. Node, Vite, and Vue sit on large ecosystems—this task is only the entry point.

Learning resources

Task 2: Learn cookies, localStorage, and sessionStorage

These are the three most common ways browsers persist data. The resources below explain differences and when to use each.

Learning resources

Task 3: Build a Todo List with Vue

A Vue Todo List is excellent practice—you will touch most Vue basics and finish with something satisfying to show.

Your Todo List should support:

  • Adding todos
  • Listing all todos on screen
  • Filtering todos by keyword
  • Marking todos complete
  • Deleting todos
  • Editing todo properties (e.g. title)
  • Pagination—10 items per page with previous/next

Try building it yourself first. If you get stuck, see Vue 3 Composition API Todo List by Wei Wei 前端教學. Note what felt weak and revisit those topics after.

Learning resources

Task 4: Fetch Taipei Data Platform open data in Vue

You already used Postman for this dataset—now wire it up in JavaScript. Watch the tutorials first, then practice.

Common HTTP client options: native fetch and the axios library. Practice both—you will see each in the wild.

Learning resources

Stage summary

You can build a simple Vue Todo List, call HTTP APIs from code, and understand CORS. Start reading the Vue docs and fill gaps—you will need deeper Vue knowledge and ecosystem tools in the next stage.

Mid-Level Engineer

This stage is about broadening your horizon.

You will touch tooling that speeds development, libraries that extend what sites can do, and design thinking for large, messy codebases. It is demanding—and deeply rewarding.

M1. Mid Level 1

Competency markers

  • Use TypeScript
  • Use Tailwind CSS
  • Use Vue Router, Vue I18n, and Pinia

Task 1: Rewrite the J2 Todo List in TypeScript

TypeScript (TS) fills gaps in JavaScript with static types. It is more complex than JS but catches mistakes earlier—especially valuable on long-lived, larger projects. The trade-off is higher authoring cost; not every small project needs it.

Learning resources

Task 2: Build a task board with Vue

Tooling:

  • Vue Router
  • Vue I18n
  • Pinia
  • Tailwind CSS

Features:

  • Sign-in and sign-out with auth state preserved across routes

- Recommended: Firebase for auth and database

  • Change password and avatar
  • Light/dark theme toggle that survives refresh
  • English/Chinese locale switch that survives refresh
  • Drag task cards to update status on a kanban board

Learning resources

M2. Mid Level 2

Competency markers

  • Explain WebSocket and Web Components well enough for a mentor or ChatGPT to confirm.
  • Explain SOLID, OOP, and FP well enough for a mentor or ChatGPT to confirm.
  • Start applying reactive programming techniques
  • Build a Todo List in React or Angular
  • Rewrite the M1 task board in TypeScript

Task 1: Learn WebSocket

Learning resources

Task 2: Build a custom element with Web Components

Learning resources

Task 3: Start learning design patterns, OOP, and FP

As codebases grow, small changes take longer and break more often—you need structure. Fortunately, others have documented patterns worth studying until complexity feels manageable again.

Architecture and design patterns are a long game—the resources here are a starting point, not the finish line.

Learning resources

Task 4: Build a Todo List in React or Angular

I recommend starting with Vue because it is gentler for beginners, but React and Angular are equally common at work. If you have not tried them yet, spend time here and see how they feel.

Learning resources

Task 5: Learn debounce and throttle

Learning resources

Task 6: Learn reactive programming with RxJS

RxJS is a favorite of mine—less mainstream and harder than many topics, but worth understanding. Learn the core ideas and operators like switchMap, mergeMap, concatMap, and exhaustMap.

Learning resources:

The video is seven years old—treat it as an introduction, not current best practice.

The link starts at 8:20 because the speaker spends the opening on project setup.

Task 7: Rewrite the M1 task board in TypeScript

Stage summary

You now have a working map of tools and techniques used in production front-end work. Keep going—get fluent with what you use every day.

Mid-to-Senior Engineer

As projects grow, problems surface—performance, reliability, delivery speed. Bundlers, automated testing, monitoring, and CDNs help you raise quality and operational efficiency.

Mid-to-Senior

Competency markers

  • Use front-end tooling to bundle and ship assets.
  • Build SSR sites with a front-end framework.
  • Write unit, integration, and end-to-end tests.
  • Partner with backend, SRE, and DevOps engineers on:

- CI/CD for automated test and deploy pipelines

- Monitoring and alerting

- CDN and edge computing

Task 1: Learn web bundlers

###### Sub-task 1: Build a small JS package, bundle with Rollup, and publish to npm

Use Rollup for this exercise. In late 2024, Rolldown reached v1.0.0-beta.1—it aims to unify bundling and may replace Rollup and esbuild inside Vite. Follow Rolldown on GitHub if that interests you.

Learning resources

###### Sub-task 2: Rebuild the task board with Webpack

Vite is enough for many apps, but Webpack still matters when you need finer control over many asset types—or when you join teams running large legacy builds.

Learning resources

Task 2: Learn SSR and build a site with Nuxt.js

Client-side rendering (CSR) with Vue is common—the browser paints the UI. CSR can hurt SEO and first paint. Server-side rendering (SSR) prepares HTML on the server; with good caching it improves performance and discoverability.

Learning resources

Task 3: Learn automated testing

Manual regression does not scale. Automated unit, integration, and end-to-end tests catch breakage faster and raise confidence before release.

Pair tests with CI/CD so every push can run checks, build artifacts, and deploy on green pipelines.

You should write tests

Learning resources

Task 4: Learn CI/CD

Learning resources

Task 5: Learn monitoring

Backend monitoring often focuses on servers and errors. Front-end Real User Monitoring (RUM) focuses on what users actually experience.

RUM captures load time, interaction delay, client errors, geography, and browser context—fuel for performance work and faster incident triage.

Learning resources

Task 6: Learn CDN and edge computing

Static assets often travel far from origin. CDNs cache content at edge nodes worldwide so users fetch from nearby servers—lower latency, better experience.

Edge computing goes further: run logic close to users—auth, A/B tests, redirects—not just cache bytes.

CDN and edge infrastructure usually span teams beyond front-end; build conceptual understanding first.

Learning resources

Stage summary

You ship features and also improve how the site is built and operated— tests, CI/CD, CDN, and related practices. You are moving from “I know the tools” toward systems thinking about maintainability, scale, and stability.

Senior Engineer

Senior engineers look at delivery flow, cross-team efficiency, and standards—architecture, specs, mentoring—not only implementation. It is a role that balances deep technical work with clear communication.

Competency markers

  • Contribute to architecture and technology choices
  • Understand the team's full stack end to end
  • Propose solutions when problems appear
  • Mentor less experienced teammates
  • Ramp quickly on unfamiliar technologies

Task 1: Maintain user and developer handbooks for the project

User handbook

Documenting features forces deep product knowledge. A solid handbook cuts repetitive support questions—especially paired with AI tools like NotebookLM.

Developer handbook

Think README, but for someone joining with zero context: terms, implementation notes, deploy and test steps, why the system exists, and stakeholders. Do not compress big topics into one paragraph.

“Handbook” does not mean text only—diagrams and screen recordings help.

Task 2: Learn management (in the broad sense)

I am not fond of “management” when it sounds like micromanaging people. What I mean is listening, delegating, establishing team rhythm, and keeping information flowing so the team runs smoothly.

Books are the simplest entry point. A few I recommend:

Book recommendations

Worth reading at any career stage, not only as a senior.

Task 3: Build a habit of observing, listening, and reflecting

Hard to formalize, but roughly:

  • When a product feels great, ask why.
  • When something goes wrong, ask how to prevent a repeat.
  • When a feature impresses you, study how it was built.
  • After a project ends, ask what you would do differently.
  • When something looks odd, ask why it exists before judging.
  • Follow news and topics you care about in the industry.

That steady curiosity compounds into broader perspective and sharper judgment.

Strong topics can become team case studies—shared learning beats solo reflection alone.

Stage summary

In my view, senior engineers are almost managers-in-training. This section leans toward leadership and mindset more than new syntax.

Some people prefer the IC track over people management—the next section sketches the specialist path. I am not a specialist myself, so treat it as orientation, not a prescription.

Specialist

Competency markers

  • Ship complex interactive applications
  • Push past default browser limits when the product demands it

I wonder what it takes to build products like Figma, Miro, Notion, Canva, or Google Sheets—apps that feel impossible in the browser.

I am not at that level either. Much of what follows came from conversations with ChatGPT—concepts and keywords to explore on your own if this path excites you.

Data chunking and lazy loading

Loading everything at once breaks down at scale. Apps like Google Sheets or Notion split data into chunks and fetch on scroll or interaction—less memory, smoother UX.

Memory management and batched updates

High-interaction apps fire many events and state changes. Processing each immediately causes jank. Batching updates and flushing on a schedule reduces re-renders—patterns you see in React and similar systems.

Further reading

Browser rendering

Animations in heavy SaaS UIs should favor properties that skip layout thrashing—transform and opacity—so work can move to the GPU. Avoid animating width, margin, top, or left when smoothness matters.

Properties that trigger reflow and repaint across the DOM are expensive at scale.

Learning resources

Virtual scrolling

Render only what is visible. Scroll through twenty thousand rows in Google Sheets but only dozens exist in the DOM—tight height estimation and paging make it feel seamless.

Learning resources

Dependency graphs

In a spreadsheet with interlinked formulas, changing one cell should not recompute everything. Dependency tracking records relationships and updates only downstream cells—core to reactive systems in Vue and React hooks alike.

Vue tracks reads via Proxy; React asks you to declare dependencies in hooks like useEffect.

Sync and conflict in collaborative editing

Multiplayer editing needs sync and conflict resolution. Common approaches include LWW (last write wins), OT (operational transformation), and CRDT (conflict-free replicated data types).

ApproachCore ideaBest forProsCons
LWWLatest timestamp winsDB sync, simple configsSimple, fastData can be overwritten
CRDTMerge-friendly structuresOffline sync, decentralized collabDecentralized, conflict-free mergeComplex, heavier cost
OTTransform operationsReal-time online editingMature, ordered operationsUsually needs central server

Learning resources

Undo/redo and operation history

Undo and redo in advanced apps require deciding what to record, what state is reversible, and how history aligns with multiplayer sync— often command patterns or immutable state design.

Canvas, SVG, WebGL

Tools like Canva, Figma, and Miro lean on Canvas or WebGL for graphics. Canvas suits 2D; WebGL for GPU-heavy scenes; SVG for simpler or static vector work.

Basic drag, zoom, and move are approachable; brushes, filters, Bézier curves, and boolean ops need computer graphics fundamentals.

WebAssembly

Products like Figma and Photoshop on the web use WebAssembly to run C++ cores in the browser.

Engines built for desktop are compiled with Emscripten to WebAssembly and bridged with JavaScript—reuse mature code at near-native speed for brush simulation, rendering, selection, and filters.

Related resources

Conclusion

This roadmap covers five stages from zero to senior— (Newbie → Junior → Mid → Mid-to-Senior → Senior / Specialist)—with competency markers, tasks, and learning resources at each step.

These stages are my own framing. If your company's levels differ, trust your org's definitions.

If you are switching careers or still in school: learning a craft takes time. Even talented people rarely jump from zero to expert in six months—much growth needs real projects and repetition. Do not crush yourself with arbitrary deadlines. Steady practice adds up, and you can absolutely grow into a capable front-end engineer.