Frontend
Developer
Roadmap
Created by
@BPTHEDEV
This guide will help you define a clear path
to becoming a frontend developer.
Getting started on your journey to becoming a
frontend developer can be daunting. There are so
many different languages and frameworks out there,
how are you supposed to know which way to go?
In this guide, I will share you with you exactly how I
would begin by developer journey with all of the
knowledge that I now have.
BP
BPTHEDEV
Getting Started - HTML
HTML
HTML is what you write to create the structure of any
web page. It doesn’t make the page pretty, but think of
it as the foundation of any web page.
Key areas
Basic structuring
Heading
List
Table
Link
Form
SEO Basics (Slightly more advanced)
BPTHEDEV
Making It Pretty - CSS
CSS
CSS is what you write to make your website go from
the image in the previous slide to something like the
below image.
Key areas
Types of stylin Selector
Colour FlexBo
Sizin Gri
Positionin Animation
Fonts Media Queries
BPTHEDEV
Making It Work - JS
JS
JavaScript is what brings your website to life, allowing
you to create interactive and dynamic elements. It
handles everything from basic functionality to complex
logic.
Key areas
DOM Manipulatio
Event Handlin
Variables & Data Type
Functions & Control Structure
Fetching Data from API
Asynchronous Programming (Promises, Async/
Await)
BPTHEDEV
The Fun Part
CSS Frameworks
Now that you have the basics sorted, you can choose a
CSS framework that will allow you to build beautiful UI’s
a lot easier and faster.
The most popular frameworks are:
tailwindcss chakra ui shadcn/ui
I have used all of the above, but the most popular is
tailwindcss and it is what I build all of my projects with.
tailwind classes are shortened and written inline
BPTHEDEV
The Less Fun Part
Version Control
Okay sweet you can now write code! Now you want to
ensure you are “saving” your progress as you build
applications.
Version control allows you to “commit” (save) your
code at certain points.
git
Git is the most popular version control system out
there. You install this locally and “save” your code as
you go.
GitHub
GitHub is a remote repository that integrates with git.
This is so you can store your codebase off your local
computer, as well as collaborate with other developers
either in a team environment or on open source
projects.
BPTHEDEV
The Best Part
Frontend Framework
You are totally across the basics now, and you are now
about to start on the best part. A frontend framework
allows you to build apps, faster and easier than writing
plain HTML and vanilla JS.
The most popular frameworks are:
NextJS (React) Angular Vue
React is the most popular frontend framework out
there, but it gets even better when you use NextJS
instead of React on its own.
Key areas
Component
Routing (how to move between pages
Dynamic routing (pages that render from a
database
Client & Server-sid
API route
State & Effect
Metadata
BPTHEDEV
The Sharing Part
Deployment
Now you have successfully built your app, this is how
you deploy it. This is how I deploy all of my apps, and it
is essentially the only way I have ever done it.
Vercel
Vercel is a super easy and free way to deploy your app.
You just create a free account, link it to your GitHub
repository and you are done.
Every time you commit to your repo, your app will
automatically rebuild and redeploy with your latest
version.
BPTHEDEV
