Became Fullstack

Developer
Roadmap

tom.is.coding @Tomiscodin
 tom.is.coding

Fundamentals

Fullstack dev Roadmap

In this roadmap, you will find directions and
technologies I personally chose to guide you
through learning full-stack development. The
roadmap is structured into two phases -
frontend and backend. Each checkpoint has
suggested projects, and all points have attached
short explanations and resources to learn from.
So let's start!
tom.is.coding

Phase 1
Road to FrontendApp
1.HTML 2.CSS

Static Page

4.npm 3.Javascript

App using Simple Web

npm App

5.Git 6.GitHub

Github
Practise

Frontend 7.React
App
 tom.is.coding

Frontend Description 1

1. HTML
•HTML, or HyperText Markup Language, structures the frontend of
webpages.
It provides the foundation for styling with CSS and interactivity with
JavaScript.
Resources:
• https://www.w3schools.com/html
• https://www.codecademy.com/learn/learn-html

2. CSS
CSS (Cascading Style Sheets) is crucial for styling the frontend of websites.
It complements HTML and JavaScript, forming a trio of essential web
technologies.
Resources:
• https://www.w3schools.com/css/
• https://www.freecodecamp.org/learn/2022/responsive-web-design/

3. JavaScript
JavaScript enhances webpages by adding interactivity.
Examples include sliders, click interactions, and popups.
Resources:
• https://www.w3schools.com/js/
• https://www.youtube.com/watch?v=P7t13SGytRk
 tom.is.coding

Frontend Description 2

4. Git
Git, a distributed version control system, efficiently handles projects of various
sizes.
Resources:
• https://www.atlassian.com/git
• https://education.github.com/git-cheat-sheet-education.pdf

5. GitHub
GitHub provides hosting for software development and version control using
Git. It combines Git's functionality with additional features.
Resources:
• https://github.com/
• https://docs.github.com/en

6. React
React, a leading frontend JavaScript library, excels in building user interfaces,
whether for web applications or mobile apps with React Native.
Resources:
• https://react.dev/
• https://react.dev/learn
• https://www.freecodecamp.org/news/get-started-with-react-for-beginners/
 tom.is.coding

Frontend Excersises

Static page:
1. Build static webpages to solidify HTML and CSS skills.
2. Practice coding along with instructors, and try building projects without
guidance.
3. Copy the design of a favorite website or create a personal portfolio.

Simple web app:

1. Develop a to-do list app with search, add, edit, and delete functionalities
using local storage.
2. Create a webpage to input a GitHub username and display the user's
profile information using GitHub's API.
3. Design a basic calculator app with essential arithmetic operations.

App using npm:

1. Build a webpage showing the current time of the user using dayjs.
2. Use the micromodal library to create a modal that allows users to select a
timezone and updates the displayed time accordingly.

Github practise:
1. Set up your GitHub profile and push completed projects.
2. Follow best practices for repository naming, add descriptive README
files, include project snapshots, and apply appropriate licenses.

Project Ideas After Frontend Development:

1. Build complete frontend applications, incorporating HTML, CSS, and
JavaScript skills.
2. Consider learning a frontend framework like React, Vue, or Angular
for modern frontend development.
tom.is.coding

Phase 2
Road to FullStack

8.NodeJS 9.MongoDB

CLI App

CLI CRUD
App

11.JWT 10.REST

Full App
 tom.is.coding

Backend Description

7. Node.js
Node.js, an open-source JavaScript runtime, powers various projects. It runs
the V8 JavaScript engine outside the browser, ensuring high performance.
Resources:
• https://nodejs.org/en
• https://nodejs.org/en/learn/getting-started/introduction-to-nodejs
• https://www.freecodecamp.org/news/free-8-hour-node-express-course/

8. MongoDB
MongoDB, an open-source NoSQL database, excels in performance and
scalability. It stores data in flexible BSON documents, making it suitable for
diverse applications.
Resources:
• https://www.mongodb.com/
• https://learn.mongodb.com/

9. REST
REST (Representational State Transfer) is an architectural style that
standardizes communication between computer systems on the web.
Resources:
• https://www.codecademy.com/article/what-is-rest
• https://www.restapitutorial.com/

10. JWT
JWT (JSON Web Token) provides a secure method for transferring information
as a JSON object. It is commonly used for authentication.
Resources:
• https://jwt.io/
• https://auth0.com/learn/json-web-tokens
 tom.is.coding

Backend Excersises
CLI App:
1. Build CLI applications in Node.js.
2. Develop applications with file operations, command line arguments, HTTP
requests, JSON parsing, and third-party library usage.

CRUD App:
1. Practice CRUD operations by building a CLI todo list application.
2. Develop a complete application with a responsive frontend, secured backend
API, and database storage.

Final project:
1. Build a blogging application with user registration, login, and post creation.
2. Create a single-page site builder with template selection and modification.
3. Develop a simple e-commerce application for sellers and buyers.

Note: Continue learning backend development, explore DevOps, and consider

frontend and backend roadmaps for further growth. Practice regularly and build
projects to solidify your skills. The provided resources are essential references for
each technology. Good luck on your full-stack development journey!

Feel free to explore even more materials on the internet or substitute provided
ones.