Natural Language Processing Roadmap 🦝
Roadmap to Web Development
What is Web Development?
Web Development refers to the process of creating and maintaining websites on the internet. It can be broadly classified into frontend and backend development. Frontend Development means writing code that your browser will run, whereas backend code runs on a server.
Why learn Web Development?
Web Development is easy to start with and introduces you to a variety of programming concepts. It even introduces you to the most popular programming language in the world i.e JavaScript. Secondly, it is an evergreen skill, the internet isn’t going to disappear anytime soon, after all. Also it is a good way to deploy projects related to other domains. Made a new SOTA machine learning model? Show it to the world by making a web app!
Note: In case of any doubts while going through this roadmap, You can post your query on the Webdev Channel on the discord server of Programming Club,IIT Kanpur.
Week 1(Basics)
Let us dive into the world of web development by learning the basics of how the web works and making our first website. This week you’ll be learning about HTML and CSS, which are the basic building blocks of websites.
| Day Number | Resources |
|---|---|
| Day 1 | Let us start by learning how the web actually works, what does it mean to actually make a website? How does the web work? From week 3 we’ll be talking a lot about servers, it helps to know about what exactly is a server. What is a server? What are the rules that govern the web? Blog on web protocols Note: You don’t need to spend a lot of time here if you know the basics like domain names, DNSs, servers, web browsers, hosting. |
| Day 2 | Now let’s actually get started with coding! I recommend you to install VS Code(you can use any other editor that you like, but VSCode has a few extensions that really help) and set it up like this. For Linux users: Link Familiarise yourself with the interface and the basic shortcuts (creating a new file, closing the file, saving the file, etc.). After this you can start with learning HTML. HTML stands for HyperText Markup Language. It is used on the frontend and gives the structure to the webpage. Learn more from here: HTML Tutorial, HTML text tutorial |
| Day 3 | Now you know how to make a website, but it looks really bland, let’s add some style by using CSS. You can learn more about CSS from here: CSS Tutorial, CSS text reference (NOTE: CSS is vast and you do NOT need to remember all the properties, if you have a gist of what you need to do, you can do a google search to get answers) |
| Day 4 | CSS can be frustrating at times, especially if you cannot get the things where you want them to be(layouting). This video provides some tips regarding layouting. You can practise your CSS skills using this game. |
| Day 5 | We’ll dive a little bit deeper into CSS, there are a lot of frameworks for writing CSS like bootstrap, tailwind, SASS etc. This video goes over a few of them. One of the really helpful tools for making quick UIs is bootstrap, which is especially helpful when you are learning something more advanced and need a UI for testing Here’s a quick tutorial These are just the basics but feel free to dig deeper as you need. |
| Day 6 | A lot of people struggle with the fact that they can’t come up with good designs, which is totally fine. As a frontend engineer it is NOT your job to come up with designs, that part goes to the UI/UX team, but it does help to know the basic design principles. Check this: Design fundamentals, UI Design Blog |
| Day 7 | It’s time to make something on your own! If you have an idea of a website, try making it using HTML and CSS, otherwise, try to clone an existing website like the PClub Website. |
Make sure to do the exercise on Day 7 before jumping ahead, building projects is an important part of learning. Don’t forget to share your work on the #web-dev channel on the PClub discord server!
Week 2(JavaScript)
Finally, a programming language, JavaScript!!!
Now let us start with javascript ie. the language of the web! This is where the more “logical” side of web development starts.
| Day Number | Resources |
|---|---|
| Day 1 | Intro To JavaScript: A JavaScript roast for motivation and to know its history in brief. JavaScript for the Haters Understanding computer languages - quick reads: What is a programming language? 5 Types of Programming Languages Difference between Compiled and Interpreted Language Introduction to programming in JavaScript: An overview of JavaScript |
| Day 2 | Learning JavaScript: It is now time to start learning JavaScript. We have included an 8-hour YouTube video, which you can break into four parts and do one part daily. NOTE: Code while you watch the video and attempt to create some of your own versions. JavaScript Programming - Full Course (First Part - Till linking stylesheet - 2:00:56) |
| Day 3 | JavaScript Programming - Full Course (Second Part - Till Logical OR operator - 3:51:52) |
| Day 4 | JavaScript Programming - Full Course (Third Part - Till Style list - 5:46:13) |
| Day 5 | JavaScript Programming - Full Course (Fourth Part - Till 7:44:19) Note: JavaScript is also used for building entire applications or as a back-end programming language but at this stage, we just want to learn the basics. |
| Day 6 | Building games in JavaScript: JavaScript is now sufficiently familiar to you. It’s time to put your knowledge to use and construct something. I’ve included a 5-hour lesson on how to create some fun JavaScript games. This can be done over the course of the following two days in two sections. NOTE: Code while you watch the video and attempt to create some of your own games. Learn JavaScript by Building 7 Games - Full Course (First Part) |
| Day 7 | Learn JavaScript by Building 7 Games - Full Course (Second Part) |
Now that you know javascript, try making a Simon Says Game, without watching any tutorial.
Week 3(Backend)
Now that you know about the frontend, let’s start working on actual functional websites with a server.
Here we have provided 3 pathways. One through Go another through Node and finally one wiht Python(Django). While Golang being fast & scalable is mostly used for developing microservices softwares and cloud computing , on the other hand, Python providing for a huge number of libraries & community support is mostly used for AI,ML and data analysis and since most people starting with webdev are already familiar with JS Node provides a quick transition into backend without the hassle of learning a completely new language . You should learn any one of them right now , but after you are done with the roadmap, you are suggested to come back and go-through the alternative pathway too.
THE GO PATHWAY
| Day Number | Resources |
|---|---|
| Day 1 | Intro to Go First we’ll learn the basics of Golang for developing our entire backend from scratch. Go is a language created by google and is one of the best choices to create scalable backends. What is Go?. Go tutorial (suggested to complete till “More types: structs, slices, and maps “ for now) NOTE: To learn the backend, what’s better than starting a project. From now onwards , we will follow the book “Let’s Go” by Alex Edwards which is a step-by-step guide to create your first web-application(a Snippetbox- which lets people paste and share snippets of text) in Golang from scratch. Book is available here In case of any doubts while going through any of the implementations of the above book , it’s suggested to go through the Go documentation |
| Day 2 & 3 | Foundations We will follow chapter-2 from the Let’s Go book. It will guide you right from installing Go on your system. Note: In case you are already familiar with the VS Code environment, you can continue it as your Go IDE , else you are strongly suggested to download Goland as your IDE. You can use an educational licence to access it. Then this book will help you to go through the basics of web-applications and then implement how to route requests to multiple , custom HTTP headers. Then, you will learn how to integrate HTML pages and various features of frontend like CSS , javascripts that you learnt in previous weeks in this project. Suggestion: Write the code (even though it’s hard to understand) rather than just Ctrl + C/V. Then we will cover chapter-3 of this book. This chapter is a bit small and the major concepts it covers are Dependency Injections and error handling. |
| Day 4 | Databasing We will cover chapter-4 of this book. Databasing is one of the major parts of creating web-applications.But first lets see what they are and why are they important . This chapter helps you go through an implementation of MySQL database. |
| Day 5 | Displaying dynamic HTML templates We will cover chapter-5 of this book. This portion will help you implement displaying HTML pages using the dynamic data from our MySQL database created above. |
| Day 6 | Middlewares and RESTful routing We will cover chapter-6 and 7 of this book. This part of the book will provide you with an explained implementation of Middlewares and REST APIs through routers. |
| Day 7 | Form processing and Testing We will cover chapter-8 and 13 of this book. Chapter-8 helps you to implement how to process,parse and then store the data(upon validation) as entered by the user on your website. Upon completing this chapter, you would have created your own website from scratch. Note: In case you are interested to learn the whole deployment of the web application, you may go through chapters 9 - 12 which basically help you improve your web application by displaying flash messages to users, and security improvements to the website. Now having made your website, the next important aspect of creating any web-application is its testing. Chapter -13 will provide you with the basic syntaxes to creating tests to the components/services you have added to your website. |
THE NODE PATHWAY
| Day Number | Resources |
|---|---|
| Day 1 | Intro to Node The Node.js website describes it as an asynchronous event driven JavaScript runtime, designed to build scalable network applications. So, at its most basic level, Node allows you to run JavaScript code on a machine such as your local computer or a server without having to go through a web browser. To facilitate this, Node has some added functionality that is not found in browser-based JavaScript, such as the ability to read and write local files, create http connections and listen to network requests. To gain more knowledge about backend you can go through this short article on MDN |
| Day 2 & 3 | Foundations We will begin by installing Node on our systems which can be done from the official site. Now we are gonna cover the basic topics that you need to go thoroughly before working on the great websites you dream about making. We are linking the official Node.js docs which might be a bit confusing for people going through docs for the first time but dont worry it will help you out in the long run and you can always ask your doubts in the pclub discord server. Getting Started How to run Nod.js scripts from the terminal. .env files HTTP Module Learn how to make HTTP requests and Node’s http module File System We will now learn about how to read and write files with Node.js and the fs module Events Now we will go through the Node events module and Event Emitter |
| Day 4 | Databasing We will now cover storing data for our website. Storing data locally has limitations so we are gonna learn one of the most popular databases MongoDB. MongoDB is a NoSQL database. We are gonna cover SQL and NoSQL database at a later stage for now we just need to know that MongoDB is what everyone is doing right now. To get started with MongoDB go through the MongoDB University “Introduction to MongoDB” course. |
| Day 5 | Introduction To Express Finally we begin with the the most popular framework for building a backend in JS : EXPRESS. Go through the entire MDN documentation on Node.js It is long but going through it will give you a idea what all you can do with express. Templating Engine A templating engine is a tool that allows you to insert variables and logic into your views. For instance, you could have a header that updates with the actual user’s name once they’ve logged in, something that is not possible with plain HTML. Now there are two popular options you could go through : Pug which has a learning curve and is quite different than regular HTML and EJS which iss a lot more closer to HTML if you are comfortable with it. Middleware A middleware is just a plain JavaScript function that Express will call for you between the time it receives a network request and the time it fires off a response (i.e. it’s a function that sits in the middle). You will eventually be using several of these functions that will run in a specific sequence for every request. For example, you might have a logger (that prints details of the request to the console), an authenticator (that checks to see if the user is logged in, or otherwise has permission to access whatever they’re requesting) and a static-file server (if the user is requesting a static file then it will send it to them). You can read more about middlewares here NOTE While going through the resources you should also go through the MDN tutorial on express |
| Day 6 | CRUD and MVC CRUD stands for: Create, Read, Update and Delete. These are the four basic functions that you will be building into your database driven apps. If you are designing a CRUD interface that means that users can expect to be able to do these 4 things to items in the database (providing they have the appropriate permissions of course). Of course, this is a concept and not some sort of rule that must be followed. You may not want to allow users to do all of these actions, or you may want to limit which users can do what at any given time. MVC is another common concept in web development and also something that is likely to come up in an interview question. MVC stands for Model, View, Controller and refers to the architecture of your code. Models are the basic building blocks of your database. So for every type of entry in your DB (book, author, etc. in our Library Project), you’ll create a model that will hold the details of that type of entry. Models define the types of information that get used by your views and controllers. Views are, of course, the component that generates the UI for your application. In our case, we’ve selected a templating engine that uses data supplied by a controller to display the desired information. Controllers are the components that decide what view to display and what information is going to be put into it. Go through this resource to get a better understandding of MVC |
| Day 7 | Authentication and Testing Creating users and allowing them to log in and out of your web apps is a crucial functionality that we are finally ready to learn! There is quite a bit of setup involved here, but thankfully none of it is too tricky. You’ll be up and running in no time! In this lesson, we’re going to be using passportJS, an excellent middleware to handle our authentication and sessions for us. Follow this tutorial here to get a better idea of authentication. Testing is one of the most important parts of webdev that usually most people overlook. We are gonna cover the basics of testing that will get you started on this path. Follow along this tutorial to get a hang of it. |
THE DJANGO(PYTHON) PATHWAY
Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design. That’s why we are providing an alternate pathway for the backend .
| Day Number | Resources |
|---|---|
| Day 1 | Basics of Python and Django Let’s first start learning the basics of Python. You can implement them using Google Colab in case you have not installed Jupyter notebook. Note : In case you are already familiar with the basics of Python, you can skip this part and go ahead. Now let’s install Django on your dabbas and go through a quick overview of the functionality of Django. (You are suggested to use a virtual environment to build your projects in Django, as this will make your code less error prone with version updates of Django and other packages. You can use the “virtualenv” package for this purpose) In case of any doubts while going through any of the implementations of the above book , it’s suggested to go through the Django documentation. |
| Day 2 | Learning Django Now we will follow this website on our journey of learning Django. Its videos are compiled here. Note: Code while you watch the video and attempt to create some of your own versions. We will cover the basics of a web application server and HTTP protocols. Watch this video(00:07:04-01:17:39) for the same. Since we have already covered HTML and CSS before , we won’t be covering them here again. Additionally, you might see some of the open-source django sample codes available on this github repo and analyse them. |
| Day 3 | Databasing Databasing is one of the major parts of creating web-applications.But first lets see what they are and why are they important (in case you haven’t gone through the Go pathway). Watch this video(03:41:53-05:25:09) to see their implementation in Django. |
| Day 4 | Generating HTML forms & dynamic routes We will learn now about Routes , rendering HTML templates in Django and HTTP requests. Then we build dynamic HTML forms and protect our applications from CSRF. Watch this video(05:25:09 - 07:29:09 ) to see their implementation in Django. |
| Day 5 | Data Modelling & Authentication We will learn about cookies and sessions, data modelling, and user authentication and its interaction with our application. Then we learn about the use of Form objects in Django and how they simplify our work. Watch this video ( 07:29:09 - 09:13:20 ) to see their implementation in Django. Note: Though there are walkthroughs of sample codes present in the video , you are suggested to first analyse the relevant sample codes on your own from Day-2 link as a small exercise on each day. |
| Day 6 | Owned Objects, JS & jQuery We will first learn about how objects are marked as owned (video : 10:36:38 - 11:05:58 ), and then take a quick look through OOP in Java-Script(video : 13:41:05 - 13:58:37) , and then take a go-through to jQuery library(video: 14:57:07 - 15:49:29 )to use it for manipulations of Data Browser Model(a sample walkthrough is also added). Then we learn about JSON(video : 16:10:26 - 16:40:34 )which is used as a syntax to exchange data between the running code on the server and the browser. |
| Day 7 | Project time ! Now having seen most of the things about Django and having gone through multiple sample codes , it is strongly recommended that you make your own backend without following any tutorial. You could try to create the backend of some PClub IITK websites (perhaps Student Search IITK). |
Week 4(React)
Next thing you need to learn is React. React is a frontend library created and maintained by Facebook used to create Single Page Applications. It makes the process of frontend development much faster and is one of the most in-demand skills in the industry.
| Day Number | Resources |
|---|---|
| Day 1 | Learn the fundamentals of React and what kind of problems it solves. Check Videos 1-5 till react click events. Check this too - Learn React by making Tic-Tac-Toe |
| Day 2 | Hooks and props are fundamental features of react. Learn these topics from here: Videos 6-10 |
| Day 3 | Explore how to use APIs in react and the useEffect hook. Check Videos 11-15 till fetching API data. Check this blog now: React useEffect Hook |
| Day 4 | Learn about how to add routing in your react app from Videos 16-21 till state management in React. |
| Day 5 | Next is how to manage the state of your application in large projects? This is where redux comes in! Check this : Redux Intro, Redux Tutorial for beginners |
| Day 6 | What’s next in the React ecosystem? As I mentioned, react is a library. There are a lot of frameworks built upon react which make the process of development easier. What is NEXT.js? What is Vue js? (NOTE: You need not to go in depth of all these frameworks right now, the world of web frameworks is vast and you do not need to learn every single one) |
| Day 7 | Now that you know the basics of React and backend development, it’s time to build a project. To Do List |
Now that you know about react, it’s time for a challenge, make a note posting website, like this one. Use what you learnt in the previous week to make sure the notes are stored in a database and are loaded back as soon as the user opens up the page!
Week 5(DevOps)
Now that you’ve made a website, how will you share it with the world? How will you maintain and monitor your website? This is where DevOps comes in!
| Day Number | Resources |
|---|---|
| Day 1 | Basics Choosing an operating system We know most of you come from a windows or a mac background but when it comes to deevelopment you gotta go for a LINUX or UNIX based operating system. There are a lot of options out there but the most popular ones are UBUNTU, DEBIAN, FEDORA, ARCH, etc. We are not suggesting just shifting from your previous OS, start by dual booting it onto your machine and then slowly make it your daily driver. To get started read this article. Using a terminal A terminal is simply a text-based interface to the computer, it is used to interact with your computer system via CLI (command line interface). Everything you want to do can be achieved using the terminal and to become a good developer you must learn to live in the terminal. Here’s a good article to get you started. |
| Day 2 | Git Git is an important version control tool, it is used a lot in the industry. As a developer you must know how to use it. Let’s start by installing git, For windows, refer here | For Linux, refer here Before starting, it is really helpful to get familiar with the terminal, shell tutorial. Most commands you see here will also work on windows powershell. You can learn more about here : Git Video Tutorial, Blog on Git Git+Github Github is a platform where you can keep your code for the world to see! Is also used when multiple people have to contribute to a project. What If you mess up? To get started with github, we suggest making an account with the IITK email id to avail the student pack, which comes with a lot of benefits. To learn about github, the official docs are a great place to start Github Docs. Also, to get started you need to set up an SSH key, follow this tutorial. Learn more from here: Git + Github, Learn git branching |
| Day 3 | Github Actions Now that you know about github, it is time to implement some CI/CD using github actions. What is CI/CD Workflow for a React App |
| Day 4 | Network Security and Protocols As a DevOps engineer you will need to understand the basics of networking protocols, how they work, and how they are used in the real world. To get you started, you should learn about, TCP/IP, HTTP, HTTPS, FTP, SSH, SMTP. Web Testing Web testing is a software testing technique to test web applications or websites for finding errors and bugs. A web application must be tested properly before it goes to the end-users. Also, testing a web application does not only mean finding common bugs or errors but also testing the quality-related risks associated with the application. Here is a good resource to get you started. Keep in mind testing is one of the most important aspects of web development and you will keep learning new methods of testing as go along. |
| Day 5 | Docker Docker is a tool for containerizing your applications so that they can run on any platform! It is one of the most important tools used in the industry as it saves a lot of time. Check : What is Docker?, Docker Tutorial |
| Day 6 | Deployment Now it’s time to deploy your application to a server with everything we have learnt! DigitalOcean is a very good and economical service to do the same. In Depth guide to deploy a webapp on DigitalOcean with docker and Github Actions |
| Day 7 | Kubernetes Kubernetes is a service designed by Google which is used to manage and deploy multiple containers. Kubernetes Academy |
Extra Resources We have covered all the necessary resources needed to get you started on your journey as a web developer but there’s still a lot more to go but don’t worry. The best way to master all these concepts is to just practice and if you ever feel stuck feel free to contact us. We are providing a link of lists that would help you out a lot on your journey of mastering the web.
- Web Dev Resources 1
- Web Dev Resources 2
- Tutorial on MERN stack
- Tutorial on Django
- A few advanced practices
- The Odin Project (Covers almost everything from the most basic to advanced stuff)
One last thing that we want to leave you with is choosing the right database for your application. Database are one of the integral parts of your application and deciding on one can be a hassle as you move forward. Here is a good article to read if you want to get an idea.
What’s Next?
Now that we are familiar with both frontend and backend you can now start making websites and choose a stack to work with. We have given you a lot of options but there are still a lot more out there. The most popular stacks are MERN, MEAN, Ruby on Rails, GO+React and DJANGO.
The world of development is vast and there is a lot to explore, this roadmap is in fact just a beginning in your development journey. If you are interested, we suggest you learn more about Next.js(briefly mentioned in week4), MongoDB(a NoSql database), firebase, APIs, Regular Expressions and PostGre(another SQL database, but much more advanced and prevalent in the industry).
Web Development is a gateway to a lot of opportunities in Open Source. The huge benefit of contributing to open source is that you can network with other developers. This means that you’ll meet new people and make friends, collaborate with other developers on projects, find mentors and have an opportunity to learn from each other. Here is a list of competitions for students. We wish you all the best for your journey in web development!
Contributors -
- Shivam Sharma 9773521108
- Mihir Mittal 9004035048
- Ankush Yadav 9024503686
- Rahul Jha 8700367670
- Shivam Mishra 8604397668
- Abhimanyu Solanki 8218196261
