Foundations
Start with the fundamentals of web development, learning the building blocks necessary to create web pages.
| Topic | Description & Resources | Project Ideas |
|---|---|---|
| HTML | Learn the structure of web pages with HTML. Mozilla Developer Network (MDN) HTML Guide | Build a personal portfolio page(A simple one) |
| CSS | Style your web pages with CSS. CSS Tricks - A Complete Guide to Flexbox | Create a simple landing page with responsive design |
| Bash Basics | Basic terminal commands. Learn Bash Scripting | Navigate and manage files through the terminal |
| Git/GitHub | Version control systems. Pro Git Book | Initialize a Git repository, commit changes |
| JavaScript Intro | Basics of JavaScript. JavaScript.info - Introduction - refer all other sections as well | Create a simple calculator |
| Common JS APIs (map, filter, reduce) | Learn common methods for handling arrays and objects. MDN JavaScript Reference | Implement a list filter and sorter using these methods |
Relevant Course(s)
Simple Frontend, DOM
Learn how to manipulate the DOM and create dynamic web pages. This section covers key concepts and APIs for interacting with the DOM.
| Topic | Description & Resources | Project Ideas |
|---|---|---|
| Intro to DOM, DOM Tree Structure | Understanding how the DOM represents the structure of a web document. MDN - Introduction to the DOM | Create an interactive photo gallery |
| Common DOM APIs | Learn to manipulate the DOM using common APIs. JavaScript.info - Document | Build a dynamic to-do list |
| Event Handlers | Manage user interactions. MDN - Event Reference | Implement a form that validates user input |
| localStorage | Store data in the browser. MDN - Window.localStorage | Create a notes app that saves data using localStorage |
Project Checkpoint
- Pure Frontend To-Do App: Use your knowledge of DOM manipulation, event handlers, and local storage to create a functional to-do app. This project serves as a great checkpoint to test your understanding of frontend development basics.
JavaScript Runtimes
Explore the environment where JavaScript code runs outside of the browser, such as Node.js, and learn to handle server-side JavaScript.
| Topic | Description & Resources | Project Ideas |
|---|---|---|
| What is a JS Runtime? | Understand the concept of a JavaScript runtime environment. Node.js Official Guide | Write a script to read and write files |
| Node.js Basics | Learn how to set up a Node.js environment. Node.js Installation Guide | Create a simple HTTP server using Node.js |
| File System API, fetch | Understand how to interact with the file system. Node.js File System Module | Create a file explorer app |
| External Packages | Learn to use npm and manage external packages. NPM Documentation | Use axios to make HTTP requests |
HTTP Servers
Understanding HTTP servers is crucial for backend development. This section covers the basics of creating servers and handling requests.
| Topic | Description & Resources | Project Ideas |
|---|---|---|
| What are HTTP Servers? | Basic understanding of how servers work. MDN - Introduction to HTTP | Set up a basic HTTP server in Node.js |
| Methods, Routes, URLs | Learn the different HTTP methods and routing concepts. MDN - HTTP Methods | Create a mini REST API server with multiple routes |
| Intro to Express.js | Framework for building web applications. Express.js Guide | Build a simple blog platform using Express |
| Handling JSON and Query Parameters | Understand how to work with different request data. Express.js Request | Implement a user data API that handles JSON and queries |
Relevant Course(s) / Videos
NoSQL Databases
Understand the basics of NoSQL databases, particularly MongoDB, which is popular among full-stack developers.
| Topic | Description & Resources | Project Ideas |
|---|---|---|
| Intro to Databases | Understanding the basics of databases. MongoDB Introduction | Set up a MongoDB database, create a simple data model |
| MongoDB Basics | Get familiar with MongoDB. MongoDB Basics | Build a CRUD app using MongoDB and Node.js |
| Simple CRUD Operations | Learn to perform basic CRUD operations. Mongoose Guide | Create a contact management system using CRUD |
Relevant Course(s) / Videos
SQL Databases
Learn about relational databases and SQL for handling structured data.
| Topic | Description & Resources | Project Ideas |
|---|---|---|
| SQL vs NoSQL Recap | Compare SQL and NoSQL databases. DigitalOcean - SQL vs NoSQL | Set up a relational database using Postgres |
| Postgres Basics | Introduction to Postgres and setting up a simple database. PostgreSQL Tutorial | Create a user registration system with Postgres |
| Basic SQL Queries | Learn to perform SQL queries. W3Schools SQL Tutorial | Build an application that uses SQL to fetch data |
Relevant course(s) / Videos
React
Dive into frontend frameworks with React. Learn to build modern, reactive web applications.
| Topic | Description & Resources | Project Ideas |
|---|---|---|
| Components in React | Learn about React components and how to use them. React Documentation | Build a basic React app with multiple components |
| State and Lifecycle | Understand state management and lifecycle methods in React. React State and Lifecycle | Create a weather app with dynamic state management |
| React Hooks (useState, useEffect) | Learn about the basic hooks in React. React Hooks | Build a countdown timer using hooks |
| Routing in React | Implement client-side routing in React using React Router. React Router Documentation | Develop a multi-page portfolio with routing |
Relevant Courses(s)
- ReactJS Full course
- Any other free course on YouTube
Project Checkpoint
- Gmail Clone: Use React to build a simplified version of a Gmail interface, focusing on managing state, components, and routing.
Typescript
Learn to add static types to JavaScript, helping you catch errors early and write more robust code.
| Topic | Description & Resources | Project Ideas |
|---|---|---|
| Why TypeScript? | Understand the benefits of using TypeScript over JavaScript. TypeScript Documentation | Convert a simple JS project to TypeScript |
| Basic Types and Interfaces | Learn to define types and interfaces. TypeScript Handbook | Create a simple TypeScript-based user management system |
Relevant Course(s) / Videos
Next.js
Next.js allows building server-side rendered React applications with ease. This section focuses on learning Next.js and building a full-stack application.
| Topic | Description & Resources | Project Ideas |
|---|---|---|
| Why Next.js? | Understand the advantages of using Next.js. Next.js Introduction | Set up a Next.js project |
| File-based Routing | Learn about Next.js's unique file-based routing. | |
| Next.js Routing | Build a blog with dynamic routing | |
| Server-Side Rendering (SSR) | Implement SSR in your React applications. Next.js Data Fetching | Create a news website that fetches data on the server |
| API Routes in Next.js | Explore creating API routes in Next.js. Next.js API Routes | Develop a simple e-commerce store with backend APIs |
Relevant Course(s) / Videos
Project Checkpoint
- E-commerce Platform: Using Next.js, build a full-stack e-commerce platform with server-side rendering, dynamic routing, and integrated API routes for handling product data and user authentication.
Authentication
Implement authentication to protect routes and secure your applications.
| Topic | Description & Resources | Project Ideas |
|---|---|---|
| Basics of Authentication | Understanding the role of authentication in web applications. Auth0 Introduction | Implement a login and signup page using JWT |
| OAuth & Social Login | Implementing third-party authentication. OAuth Guide | Add Google or Facebook login to your app |
Relevant Course(s) / Videos
- Authentication vs Authorization Explained
- Session vs Token Authentication in 100 Seconds
- How to roll your own Auth
- Passkeys: The Future Of Authentication
- Web Authentication Methods Explained
Deployment
Learn how to deploy your applications to make them live.
| Topic | Description & Resources | Project Ideas |
|---|---|---|
| Basics of Deployment | Understand different deployment options. Guide | Deploy a React app to Vercel |
| CI/CD Pipelines | Learn the basics of Continuous Integration and Continuous Deployment. GitHub Actions | Set up a CI/CD pipeline for an app on GitHub |
Other Technologies you may know
Blockchain
Blockchain is increasingly being used in decentralized applications (dApps), cryptocurrencies, and secure transaction systems. Understanding the basics can set you apart, especially if you’re interested in fintech or security.
- Resources:
- Coursera: Blockchain Basics
- YouTube: Simply Explained - Savjee
- Web3 Roadmap - Coming soon...
- Project Idea: Create a simple cryptocurrency transaction system or a decentralized voting application.
Generative AI
With AI being a hot topic, especially in areas like content generation, art, and code, understanding Generative AI can be a huge plus.
- Resources:
- Project Idea: Build a basic text-to-image generator or a chatbot using OpenAI's GPT or Google's Gemini models.
WebSockets
WebSockets enable real-time communication, crucial for applications like chat apps, live feeds, and multiplayer games.
- Resources:
- Project Idea: Develop a real-time chat application or a live dashboard that updates data in real-time.
GraphQL
GraphQL is a modern alternative to REST APIs, allowing more efficient data fetching. It's essential for anyone looking to work with APIs or backend development.
- Resources:
- Project Idea: Create an API for a blogging platform using GraphQL, or a front-end that consumes a GraphQL API.
UI/UX Design (Figma)
A good user interface and experience are essential for any project. Figma is a powerful tool used for designing UI/UX, and understanding it will help you design better user experiences.
- Resources:
- Project Idea: Design a mobile app prototype for a to-do list or a social media platform, focusing on user experience and interface design.
Essential Tools for Web Developers
- Code Editor: Use Visual Studio Code for coding. It’s highly customizable and supports many plugins.
- Version Control: Git and GitHub for version control and collaboration.
- Package Managers: npm and yarn for managing project dependencies.
- Browser DevTools: Use Chrome DevTools or Firefox Developer Edition for debugging and testing.
- Design Tools: Figma or Adobe XD for designing and prototyping user interfaces.
- Command-Line Tools: Become proficient with basic command-line tools for navigating and managing your projects.
- Docker: Learn Docker basics for containerizing applications and environments.
- Testing Tools: Use Jest for JavaScript testing, and Postman for API testing.
- CI/CD: Tools like GitHub Actions, Jenkins, or CircleCI for continuous integration and deployment.
- Deployment Platforms: Vercel, Netlify, and Heroku for deploying web applications quickly.
Final Tips
- Projects Matter: When applying, showcasing your projects can significantly boost your chances. Make sure your projects are well-documented and accessible, possibly on GitHub.
- Stay Updated: Technology is ever-evolving, so staying updated with the latest trends and tools is crucial. Follow tech blogs, join communities(us as well xD), and keep learning.
About Us
At GDSC, we believe in more than just coding and project building; we focus on fostering a vibrant community that nurtures both your technical and personal growth. Whether you're aiming to sharpen your skills, expand your network, or make a positive impact, GDSC provides the platform and support to help you achieve your goals. Learn more about GDSC here.
Good luck with your Development journey!
