Learning Web Development in 30 Days With Resources & Practice in 2024

I hope you are curious about how can you start your career in web development even if you don’t have any IT related degree. The most notable thing is that Web development does not depend on your age. It does not matter who are you or which type of background you have.
So, let’s get deep dive in it.

So, the first thing that you will need to learn is “Networking ”and how will you learn that is just by typing on google or search on YouTube about “Networking Crash Course for Web” and you will find your target. You just need a little bit knowledge about DNS, Hosting, how browsers work and Protocols.

So, let me give you a good example of frontend and backend in Web. We type from keyboard. Let’s suppose I type “A” then We have to display it on the monitor, here the purpose of the monitor is to display our “A” on its screen.

Similarly, input is backend and the thing which displays that data is frontend. how simple is that. That’s it, its like riding a bicycle.

Frontend and backend Fig

Similarly, the work of HTML5 is to display the data on the screen and it is included in frontend and which send the data like keyboard is Node js or any other Backend technology. HTML5 takes the data and displays it on the browser.

There are three technologies that you have to learn for Web Development in 2023:

1. HTML5
2. CSS 3
3. JavaScript (ES7+)

→ HTML5

is the structure of a car and CSS3 is the colors and the shining of the Car and JavaScript is the engine of that car because it adds functionalities in that car.

**Here is the content for HTML5**:

HTML5 Complete in One Presentation

I hope you have read about HTML5. Let’s move to our next step which is:

→CSS3

an essential part of our Web Technology. You just need to study about flex box that is one dimensional and grid layout that is two dimensional layout, margin, padding, Background, positions → absolute, fixed, sticky and relative, and shadow etc. The work of CSS is of only One day. Learn more about Media query and responsiveness with flexbox.

CSS Content:

CSS3 Properties and Concepts

Now make a project with HTML5 and CSS3 and then move to our Next or Last Step to accomplish your task which is:

→JavaScript

“It is a scripting language that enables you to control or create dynamic pages.” Every thing in JS is function. It is a very vast scripting language but we will cover it up to our need:

1. syntax and basic structure
2. Dom Manipulation
3. Learn Fetch/API
4. ES6+Modular

**JavaScript Content**:

If you prefer to watch my own slides, here you go:

What is JavaScript? - Learn web development | MDN

After leaning all this, what you need to know is about “GitHub ”and “Gitkraken ”rather than “Git ”that is useless.

Just watch the basic use of github with gitkraken that is enough for web development.

Now here’s the time to complete a full project with javascript,html5 and css3.

Let’s get deepdive into:

→React JS

“A frontend JavaScript Library, make sure that it is not a framework.”

**Learning Content**:

Create a New React App - React

Just learn the concepts of react JS like

hooks, props, functions, routing, we pack etc.

1. Now create a weather app which uses the API to fetch the data and then display that data on the screen.
2. Make a Recipe app that shows the details of different recipes and then display that data in cards and make a search also for that.

Now you are ready to apply online at any frontend job But if you want to learn backend then I will prefer Node JS and Mongodb as database that are at level now and also in future.

→Node JS

“Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on a JavaScript Engine.” Node JS is used for the Crud operations that are performed on MongoDb or database to fetch the data according to the user needs.

Node js recommended video

→MongoDB

“MongoDB is a non-relational document database that provides support for JSON-like storage. The MongoDB database has a flexible data model that enables you to store unstructured data, and it provides full indexing support, and replication with rich and intuitive APIs.”

MongoDb recommended video

after watching all these videos, now its time to turn you into a complete project or to make you A Mern Stack Developer:

Create a Todo List app and make it like that every user can has its own to-dos with his own identity login and then he can delete or update that todo with resolved(Checkbox). Just like this app:

https://bucket-todos.netlify.app/

If you will create this app at your own then you will have gain all that knowledge or if you can’t then try it by watching other or similar videos of todo-list making.

I hope you have learned web development with zero knowledge of programming. After you learn Web development then kindly go to Hackerrank, freecodecamp, leetcode or any other platform to increase your problem solving approach that would be better for you.

Do all this only for a month. That is all.

Thanks for reading. If you have any query just let me know I will respond you.