Thread by @Prathkum

Are you new in the field of Web development or planning to start with it?
This is how you can start with total ease.

🧵 👇🏻

Getting started with web development is little tricky and tedious. I personally faced some difficulties when I was first learning it.

But you don't have to worry. In this thread we will make the process easier

Three different languages you need to learn

HTML
CSS
JavaScript

You need to learn these 3 things in a chronological order

First things first, You need an editor where you can write code. I'll recommend you to start with VS Code. Why?

- IntelliSense code completion
- Better environment

Download it from here: code.visualstudio.com/download

📌 Start with learning HTML

Its pretty easy and you don't need to spend much days on it. You can also start learning it through any YouTube video right away.

📌 Project based learning is the best

I suggest you to create a simple portfolio or personal site using HTML only. This way you can make projects while learning and later on you can include them in your Resume as well

📌 Time to learn CSS

Although CSS is deep but it revolves around few concepts only.

In the beginning you don't need to learn the entire CSS in one single go, learn basics so that you would be able to make basic websites

Some CSS topics you need to learn

- color
- background
- font
- layout
- positioning
- media query

Again, I suggest you to make project along side.

When I was learning HTML and CSS, I create this portfolio 👇🏻

You can start learning CSS using this latest course

web.dev/learn/css/

📌 CSS Framework

CSS framework can save you a lot of time. You can CSS frameworks as someone's code which you can use in your project

Learn Bootstarp or TailwindCSS, that's my recommendation

📌 JavaScript

JavaScript is used to add functionality in your website so that user can interact with your webpage. There are plethora of course out there for JavaScript, you can pick any updated one

Here are some websites from where you can learn or improve your JavaScript knowledge

https://twitter.com/Prathkum/status/1373625950118805507?s=20

📌 Document Object Model

So how we can change thing in HTML using JavaScript?
Here DOM comes into play

With the HTML DOM, JavaScript can access and change all the elements of an HTML document

By the combination of DOM and JavaScript you can perform a lot of cool things.

- You can change styling
- You can change content
- You can change tags
- You can change attributes
- ETC.....

You can learn DOM from here

codecademy.com/learn/build-in…

And again, you need to build some projects. When I was learning this, I made a lot projects. You can find them on my GitHub link

github.com/PrathamKumar14

📌 Command Line Interface

Developers prefer CLI becuase its faster and provides you extra power becuase you can control OS as well with some commands

📌 Version Control

Version control, also known as source control, is the practice of tracking and managing changes to software code. In simple terms, you can store your code in other computer and it can help persist you data if you delete code from your computer.

There are a lot of version control softwares but Git is pretty famous and its ecosystem in great

GitHub is a code hosting platform for version control (Git)

Check out this great free website and lean git visually

🔗 learngitbranching.js.org

So far so good. At this point you would be able to get a job, freelancing and other stuff. But in order to dive deep into the Web development ocean, we need to learn some front-end framework

I recommend React becuase it is fast, flexible and the community is really big.

I have a fully fledged thread on React. Check it out

https://twitter.com/Prathkum/status/1395372995821060100?s=20

Make more projects and test your skills. Include them in your Resume and start applying for a front-end role

That's pretty much it for this thread. Feel free to ask your doubts if any. I'll catch you with the next thread until then

Peace out 😉

With this thread, You can buy my CSS Cheat Sheet for free. Hurry up next 100 copies only

Discount Code: pratham ⚡

🔗gum.co/css-cheat