This section provides a roadmap for both front-end and back-end web development, outlining the steps and resources needed for mastering these skill areas.

FRONT-END

BACK-END

Learn the basics - HTML

Emmet
Forms
Semantic HTML
SEO Basics

Learn the basics - CSS

Flexbox
Grid
Media Queries
Pseudo Elements
Pseudo Classes
Animations

Learn any CSS Framework

Bootstrap
Tailwind
Materialize

Learn basic usage of Version Control System

Git
GitHub

Learn to deploy your websites

Netlify
Vercel
Firebase
Github Pages
Heroku
Render

Learn the basics - JS

Basic Syntax
DOM Manipulation
Fetch API / Ajax
Async Await
Event Listeners
ES6+ JavaScript
Promises
Classes
Array Methods
Scoping
Hoisting
Closures

Learn any CSS Preprocessor mostly SASS and SCSS

SASS / SCSS

Learn the basics of Package Managers

NPM
Yarn

Pick a JavaScript Framework / Library

React
Vue
Angular

Basic things to learn in React

Components
JSX
Props
State
Events
JSX
Conditional Rendering

Learn some of the React UI Frameworks

Material UI
Ant Design
Chakra UI
React Bootstrap

Learn to use popular React packages

React Router
React Query
Axios
React Hook Form
Styled Components
Storybook
Framer Motion

Learn how to manage state in React with state management tools

Redux
MobX

Things to learn after learning React

Next JS
Gatsby
TypeScript
React Native

Important things to learn in Next JS

Static Site Generation
Server Side Rendering
Incremental Static Regeneration
Dynamic Pages
CSS / SASS Modules
Lazy loading Modules
API Routes

Learn to test your apps with some of these libraries / frameworks

Jest
Testing Library
Cypress
Dynamic Pages

Optional Thing to learn

Webpack
Parcel
SnowPack
Rollup.js
Gulp

Learn Basic Front-End Dev

You must know basics of front-end development, and how things work in the browser.

HTML
CSS
JavaScript

Once you know basic front-end, you can then jump right into learning a programming language, there are so many options of programming language that you can learn to become a backend developer. Note: You don’t need to know multiple programming languages to become a backend developer.

Choose a Programming language

JavaScript
Python
PHP
Ruby
Rust
Java

Then choose a Framework according to your programming language

FOR JAVASCRIPT

Node.js
Deno

Node.js

POPULAR FRAMEWORK

Express.js
Nest.js
Fastify
Sails
Hapi
Restify
Koa

Python

POPULAR FRAMEWORK

Django
Flask

PHP

POPULAR FRAMEWORK

Laravel
Symfony

Backend concepts you should learn

HTTP / HTTPS
REST
GraphQL
Web Sockets
CORS
MVC Architecture
CI / CD
Serverless

Learn about databases

SQL

MySQL
PostgreSQL
SQL Lite

NoSQL

MongoDB
CouchDB
DynamoDB

Learn Caching

Redis
Memcached

Essential things to learn

Authentication
OAuth
Hashing (bcrypt)
Rate Limiting
Reverse proxy
Load balancer
Documentation (Swagger)

Learn any HTML Templating Engine

EJS
PUG
Handlebars
doT
Jade
Eta

Learn to deploy and learn any cloud service

Google Cloud
Digital Ocean
AWS
Azure
Heroku
Linode
Vercel

Tools to learn as a backend developer

NPM
Yarn
Postman
GitHub
Insomnia

Optional things to learn

Docker
Performance
Scalability
Kubernetes

In this section, you will have the opportunity to explore a wide range of 100% free courses that cover various aspects of web developmen

Intro - Programming with Scratch

A gentle introduction to programming that prepares you for subsequent courses in coding that can be found on the edX website, where you can explore more available 100% free courses.

Theoretical understanding of CSS

This course provide a comprehensive introduction to the world of CSS, learn the basics of controlling website style and layout through CSS, including element selection and targeting.

Learn JavaScript at Scrimba

Interactive JavaScript course with 140+ coding challenges for building muscle memory and improving skills. So say goodbye to "tutorial hell" and get ready to start feeling your JavaScript superpowers grow

Git and github

comprehensive guide to using Git and GitHub for version control and collaboration. It covers the basics of Git and its command-line interface, as well as more advanced topics such as branching, merging, and resolving conflicts.

In this section, you will find an array of useful websites and tools that can assist you in your journey as a web developer.

Google Fonts

Google Fonts is a free, open-source library of fonts that can be used on websites and other digital projects.

Purpose of the website:

Google Fonts allows designers and developers to easily access a wide variety of fonts to use on their websites, without the need to host them on their own servers.

Link: https://fonts.google.com

Font Awesome

Font Awesome is a free, open-source library of scalable vector icons that can be used on websites, mobile apps, and other digital projects.

Purpose of the website:

Font Awesome allows designers and developers to easily access a wide variety of customizable icons to use on their projects, without the need to create custom graphics.

Link: https://fontawesome.com

CDN Link: https://fontawesome.com

Coding Fantasy

Coding Fantasy is a website that provides a variety of tutorials and resources for learning how to code by playing games.

Purpose of the website:

It aims to assist users of all skill levels in learning how to code, by providing tutorials, resources, and examples that are easy to understand and follow through interactive and engaging games.

Link: https://codingfantasy.com

Code Image

Codeimage is a web-based application that allows users to create and share visual representations of their code snippets.

Purpose of the website:

to make it easier for developers to share their code with others in a more visually appealing way. This can be useful for teaching, documenting, and sharing code with colleagues, or for creating tutorials or blog posts.

Link: https://app.codeimage.dev/

Remove Background

Allows users to quickly and easily remove the background from images. The website provides a simple and easy-to-use interface that allows users to upload an image and then automatically remove the background,

Purpose of the website:

Provide a fast and efficient way to remove backgrounds from images, which can be useful for a variety of tasks such as creating transparent PNGs, removing unwanted elements from photos, and isolating specific objects in an image. The service can be used for personal or professional projects,

Link: https://www.remove.bg/

Chat GPT

The website provides an interactive platform for users to engage with OpenAI's language model GPT-3, which allows you to ask questions, get help with coding, or just have a conversation.

Purpose of the website:

to showcase the capabilities of GPT-3 and to provide a platform for users to interact with the model. By using the website, users can test the model's ability to understand natural language, generate human-like text, and complete tasks such as coding and language translation.

Link: https://chat.openai.com/

Roadmap.sh

Web-based project management tool that allows users to create and share visual roadmaps of their projects.

Purpose of the website:

Help users plan, organize and visualize their projects in a clear and simple way. Users can create detailed timelines, set milestones, and allocate resources to their projects

Link: https://roadmap.sh/

Icon finder

Website that provides a searchable database of icons and vector graphics for use in web design and graphic design projects.

Purpose of the website:

provide designers and developers with a convenient and easy way to find and download high-quality icons for their projects.

Link: https://www.iconfinder.com/

Tome

Tome app automatically creates a powerpoint presentation

Purpose of the website:

Help users create and share engaging, multimedia stories that can be easily consumed by readers on the web.

Link: https://tome.app/

In this section, you will find a variety of motivational quotes, and videos to keep you motivated and help you maintain your momentum.

In this section, you will find a collection of useful VS Code extensions that can enhance your coding experience. Keep in mind that some of the more common and widely used extensions, such as "Live Server" and "Prettier", have been excluded from this list.

Bearded Theme

provides a dark color scheme for the text editor. It is designed to be easy on the eyes and to provide a consistent professional-looking appearance for code.

Better Comments

The extension works by sending information about the currently open file and your activity status to the Discord client, which then updates your "presence" on Discord to reflect this information.

Discord Presence

provides a dark color scheme for the text editor. It is designed to be easy on the eyes and to provide a consistent professional-looking appearance for code.

Indent-rainbow

colorizes the indentation levels of code in the editor, making it easier to visually distinguish different levels of indentation. This can help make code more readable and easier to navigate.

vscode-icons

Customize the appearance of the icons in the File Explorer of the VS Code editor, which can make it easier to quickly identify different types of files and folders.

RESOURCES & GUIDES

FRONT-END

BACK-END

Intro - Programming with Scratch

Theoretical understanding of CSS

Learn JavaScript at Scrimba

Git and github

Google Fonts

Purpose of the website:

Font Awesome

Purpose of the website:

Coding Fantasy

Purpose of the website:

Code Image

Purpose of the website:

Remove Background

Purpose of the website:

Chat GPT

Purpose of the website:

Roadmap.sh

Purpose of the website:

Icon finder

Purpose of the website:

Tome

Purpose of the website:

Awesome ChatGPT Prompt

Awesome ChatGpt Prompt

Markdown badges

Markdown badges

Form-to-google-sheets

Form-to-google-sheets

Aos

Aos

Bearded Theme

Better Comments

Discord Presence

Indent-rainbow

vscode-icons

Icreatechs

Catdev Community

I.T. Security Forums

BSIT Community

BSIT Worldwide

Thoughts on Tech

Tiktok

Twitter

Youtube