Weekly breakdown optionally with resources to follow
Press right arrow to start
Press down arrow for instructions
On each week, pressing right takes you to next
On each week, pressing down takes you to the courses or practice modules
Press down
Content / resources will be added frequently here
This deck is opinionated. You might not agree with all tech stack options here, but this is tried and tested tech stack (Me, the developer behind codedamn platform is the setter of this deck)
Brought to you by - codedamn.com
Unlock all codedamn resources with 20% discount for 3 months (billed monthly)
Unlock all codedamn resources with 80% discount for 3 months (billed yearly)
Contact [email protected] for any queries
Press right arrow for next week
Press down arrow for resources for that week
Press down arrow to see practice projects
Press up arrow to see video courses
Basics of HTTP/How the internet and web work
A brief introduction to HTML and CSS
Creating very simple pages with HTML and CSS
CSS layout systems - flexbox and grid, box model, and more
Forms in HTML
Advanced HTML/CSS
Practice with projects
JavaScript introduction and basics
Work with HTML/CSS/JavaScript together
Do some simple projects with JavaScript
Build simple projects with HTML/CSS/JavaScript
Learn about DOM APIs and how to interact with them
Learn how to use browser DevTools
Briefy go over through advanced JS concepts. You do not absolutely need to understand them
Sharpen your logical thinking with Project Euler challenges. Do as much challenges as you can
These challeneges will help you build a mathematical approach of solving problems
Complete more JavaScript projects and classrooms
Understand JS under the hood
Introduction to Node.js
Creating a simple backend server
Serving static assets
Scroll up for video courses for now
Learn about linux fundamentals
Working with basic linux commands
Scroll up for video courses for now
Learn about MongoDB
Create a database and link it with simple Node backend
Create simple apps like URL shortner
Implement authentication using DB
Learn about cookies and session authentication
Scroll up for video courses for now
Cover NPM and how to work with it
Learn about common npm commands and initializing different projects with it
Scroll up for video courses for now
Learn to work with git and GitHub
Put your past projects online on GitHub
Explore GitHub pages
Scroll up for video courses for now
Introduction to React
Fundamentals of React and getting started
Scroll up for video courses for now
Building more projects with React
Learning to use common React practices
Learn more about data fetching and convert existing apps to new solutions
Look for react-query
Caching/Invalidation
Learn about UI systems.
Look for Material UI this week
Learn about UI systems.
Look for tailwind CSS this week
Learn about Next.js
Shift a few past React apps to Next.js
Scroll up for video courses for now
Learn about SSR/SSG/Incremental building with Next.js
Learn about Next.js API/lambda functions
Scroll up for video courses for now
Learn about deploying Next.js apps on vercel
Scroll up for video courses for now
Decouple your Next.js app from backend
Use a different standalone REST API server in Node for backend
Learn about JWT authentication
Start learning TypeScript
Why it is needed
Setting up environment
First few programs
Scroll up for video courses for now
Learning about tsconfig options
Strict JavaScript typing
Converting your very first HTML/CSS/JS projects in typescript
Scroll up for video courses for now
Use Next.js or React with TypeScript
Learn about "typing" Next.js code
Cover a few advanced TypeScript syntax along the way
Practice more with TypeScript
Scroll up for video courses for now
Practice week - 1
You have enough tech-stack knowledge right now to build things. Stop learning new things for a while and build personal projects with your knowledge so far
Practice week - 2
You have enough tech-stack knowledge right now to build things. Stop learning new things for a while and build personal projects with your knowledge so far
Practice week - 3
You have enough tech-stack knowledge right now to build things. Stop learning new things for a while and build personal projects with your knowledge so far
Practice week - 4
You have enough tech-stack knowledge right now to build things. Stop learning new things for a while and build personal projects with your knowledge so far
Introduction to GraphQL
Start learning GraphQL and schemas to create APIs
Use express-graphql
Covert an existing REST app you created into GraphQL backend
Create frontend in Next.js (decoupled)
Use TypeScript on frontend and backend both
Continue working on GraphQL
Learned about typed-graphql using graphql-code-gen
Shift to Apollo GraphQL client (for React/Next.js) and server (for Node.js)
Create your first full-stack app locally next 2 weeks
Use Next.js for frontend
GraphQL for backend
TypeScript on both
Create your first full-stack app locally next 2 weeks
Use Next.js for frontend
GraphQL for backend
TypeScript on both
Learn about cloud deployment with DigitalOcean
Create your first droplet
Revise about ssh and linux fundamentals
Scroll up for video courses for now
Learn about NGiNX and reverse proxies
Learn to serve static files on production using NGiNX
Learn to link your backend process to NGiNX
Manually deploy your backend app on your droplet
Install relevant softwares (mongodb/node/etc) and pull code from GitHub
Link your frontend Next.js app deployed on vercel to your droplet backed
Learn about DNS Records and mapping to a real domain name for backend
Make your app live
Scroll up for video courses for now
Learn about GitHub Actions and configuration file
Configure your backend build to be deployed on repository push
Learn about unit testing with react-testing-library
Learn about end-2-end testing with Cypress
API testing
Scroll up for video courses for now
Write end-2-end tests for your past Next.js applications using Cypress
Integrate these tests in your automated deployment pipeline using GitHub Actions
Scroll up for video courses for now
Learn about Docker
Setup a container and learn about benefits of containerization in production
Learn about Dockerfile
Learn about port mapping/containers talking to each other
Learn about persistent volumes (for databases)
Create a Dockerfile for your previous backend builds of GraphQL locally
Use GitHub Actions to change your deployment pipeline to build and deploy as a container on your server
Learn about server-side caching (for DB queries, etc.) with redis
Explore cloudflare for caching
Learn about CDNs and how they speed up delivery
Learn about web security
XSS/CSRF/XSRF/SQLi
Other common/OWASP vulnerabilities
Create an AWS account
Learn about SES to send emails programmatically
Learn about a few serverless technologies
Learn about lambdas
Learn about scaling tech
Horizontal/vertical scaling
Containerization and migration cloud provider-agnostic codebase
MongoDB Atlas
Build build build
Build end-2-end projects with your current knowledge
Deploy them on digitalocean/any other cloud
Build build build
Build end-2-end projects with your current knowledge
Deploy them on digitalocean/any other cloud
Build build build
Build end-2-end projects with your current knowledge
Deploy them on digitalocean/any other cloud
Build build build
Build end-2-end projects with your current knowledge
Deploy them on digitalocean/any other cloud
Build build build
Build end-2-end projects with your current knowledge
Deploy them on digitalocean/any other cloud