Target #0
From the Night (not day , cuz i am a batman) on 11/9/2025. I set my focus into learning Full stack development using open source materials step by step. Gonna learn night-by-night until kick it off completely like a Professional.
Well I am hoping to post my daily work updates and stuff through out this journey and more, yet to achieve!.
"Steady steps to reach beyond the sun"
Here is a Roadmap I made (assist:Gemini) for this journey,
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Phase 1: The Front-End Foundations (The "See")
This is where you'll learn to build what the user sees in their browser. Start here, and don't move on until you're comfortable.
Learn HTML (HyperText Markup Language): This is the skeleton of all websites. It's the standard language used to create and structure content on a web page, like headings, paragraphs, images, and links.
Learn CSS (Cascading Style Sheets): This is the skin of the website. CSS is used to style the HTML, handling the colors, fonts, layout, and overall look.
Learn JavaScript (JS): This is the brain of the website. JavaScript makes a website interactive. It handles things like pop-up alerts, form validations, image sliders, and fetching new data without a page reload. You should spend the most time in this phase on JavaScript.
Key Goal: At the end of this phase, you should be able to build a simple, good-looking, and interactive static website (like a personal portfolio or a restaurant homepage).
Phase 2: The Essential Tools
As you learn the foundations, you must also learn the tools that all developers use to manage their code.
Learn Git & GitHub: Git is a version control system. Think of it as "Save" on steroids for your code. It lets you track every change you make and go back to previous versions if you break something. GitHub is a website where you store your Git projects (called repositories) online. It's essential for backing up your code and collaborating with others.
Get Comfortable with the Command Line: This is the text-based interface (like Terminal on Mac or PowerShell on Windows) that developers use to run commands, navigate files, and use tools like Git. You don't need to be a wizard, but you should know the basics.
Phase 3: The Back-End Engine (The "Think")
This is where you build the server, database, and logic that the front-end communicates with.
Choose Your "Stack": You need to pick a back-end language. Since you just learned JavaScript, the easiest transition is the MERN stack, which uses JavaScript for everything.
M = MongoDB (a database)
E = Express.js (a server framework)
R = React (a front-end framework - more on this in Phase 4)
N = Node.js (the back-end language)
Learn Node.js: This is a program that lets you run your JavaScript code on a server instead of just in a browser.
Learn Express.js: This is a framework that sits on top of Node.js and makes it much easier to build a server and create APIs.
Learn About APIs (Application Programming Interfaces): An API is a set of rules for communication. You'll build a RESTful API that your front-end can use to ask the back-end to "get all user data" or "create a new post."
Learn a Database: This is where you store all your application's data (user profiles, blog posts, etc.). A great one to start with is:
MongoDB (NoSQL): Stores data in a flexible, JSON-like format. It pairs perfectly with the MERN stack.
You will also hear about SQL databases (like PostgreSQL), which store data in rigid tables. It's good to learn one of each eventually, but start with one.
Key Goal: At this point, you should be able to build a full-stack application. For example, a simple to-do list app where you can add and delete items, and they are saved in your database.
Phase 4: Scaling Up (The "Polish")
Now you'll learn tools that make building large, complex applications much more efficient.
Learn a Front-End Framework: You've learned plain JavaScript, which is great. Now, learn a framework that makes building complex user interfaces much faster. React is the most popular and is part of the MERN stack. It lets you build reusable "components" (like a button or a navigation bar) to construct your site.
Learn About Deployment: This is the process of putting your website on the internet for everyone to see. You can start with free/cheap services like Netlify or Vercel for your front-end and Heroku or Render for your back-end.
Comments
Post a Comment