Start your web development journey with this thread

https://abs.twimg.com/emoji/v2/... draggable="false" alt="🧵" title="Thread" aria-label="Emoji: Thread">https://abs.twimg.com/emoji/v2/... draggable="false" alt="👇" title="Rückhand Zeigefinger nach unten" aria-label="Emoji: Rückhand Zeigefinger nach unten">
Getting started with web development is little tricky and tedious. I personally faced some difficulties when I was first learning it.

But you don& #39;t have to worry. In this thread we will make the process easier

{ 2 / 29 }
Web development is a vast field but mainly revolves around 3 different technologies.

HTML, CSS and JavaScript

You need to learn these 3 things in a chronological order. You can gain decent amount of web dev knowledge in 100 days. Lets see how https://abs.twimg.com/emoji/v2/... draggable="false" alt="👇🏻" title="Rückhand Zeigefinger nach unten (heller Hautton)" aria-label="Emoji: Rückhand Zeigefinger nach unten (heller Hautton)">

{ 3 / 29 }
In this 100 Days you need to cover mainly 4 technologies

- HTML
- CSS
- JavaScript
- DOM

Now you might be wondering why DOM? But trust me its important and necessaryhttps://abs.twimg.com/emoji/v2/... draggable="false" alt="😉" title="Zwinkerndes Gesicht" aria-label="Emoji: Zwinkerndes Gesicht">

{ 4 / 29 }
Starting with HTML, its pretty easy and straight forward. It& #39;s a markup that totally operates on tag.

You can get a quick overview of it within few minutes. But wait! Don& #39;t rush.... There are a lot of tags

You don& #39;t need to learn all tags in one single go

{ 5 / 29 }
I have been in this field for 2 years but yet I do not know all the tagshttps://abs.twimg.com/emoji/v2/... draggable="false" alt="😅" title="Lächelndes Gesicht mit offenem Mund und Angstschweiß" aria-label="Emoji: Lächelndes Gesicht mit offenem Mund und Angstschweiß">

I suggest you to start HTML with a Free crash course.

Here& #39;s the link
https://www.youtube.com/watch?v=pQN-pnXPaVg

{">https://www.youtube.com/watch... 6 / 29 }
Try to play around with all tricky tags like table tags.

You don& #39;t need to waste your 10 - 20 days in HTML because as you go further into your journey, you will discover more cool tags and attributes eventually

I think 1 to 5 days for HTML is enough.

{ 7 / 29 }
Try to learn these things https://abs.twimg.com/emoji/v2/... draggable="false" alt="👇🏻" title="Rückhand Zeigefinger nach unten (heller Hautton)" aria-label="Emoji: Rückhand Zeigefinger nach unten (heller Hautton)">

https://abs.twimg.com/emoji/v2/... draggable="false" alt="📌" title="Reißzwecke" aria-label="Emoji: Reißzwecke"> HTML

1. Understanding the full form of HTML
2. Anatomy of tags
3. HTML5 boilerplate
4. Heading tags
5. ul, ol, li, tags
6. img, span tag
7. Table tags for layout
8. Form tags
9. Some more semantic elements
10. Basic attributes

{ 8 / 29 }
After 5 - 6 days it& #39;s time to add some styling in your website. And here CSS comes into action

CSS is a deep technology but here& #39;s a trick to master some key concepts https://abs.twimg.com/emoji/v2/... draggable="false" alt="👇🏻" title="Rückhand Zeigefinger nach unten (heller Hautton)" aria-label="Emoji: Rückhand Zeigefinger nach unten (heller Hautton)">
https://twitter.com/Prathkum/status/1364581954620907525?s=20

{">https://twitter.com/Prathkum/... 9 / 29 }
You don& #39;t even need to learn all of them.

You must have heard about "Pareto principle" which states that for many outcomes roughly 80% of consequences come from 20% of the causes

Similarly, in order to cover 80% of CSS, you need to learn only 20 propertieshttps://abs.twimg.com/emoji/v2/... draggable="false" alt="😍" title="Lächelndes Gesicht mit herzförmigen Augen" aria-label="Emoji: Lächelndes Gesicht mit herzförmigen Augen">

{ 10 / 29 }
The cool part about this 100 Days of Code is that all technologies are interconnected. Like when you& #39;re working on CSS, you have to work on HTML as well.

So you& #39;ll learn about HTML as well while learning CSS

{ 11 / 29 }
Some important CSS concepts you need to cover

1. Inline, internal and external CSS
2. Selectors
3. Background
4. Color
5. Box model
6. Height and width
7. Margin and padding
8. Border
9. Positioning

CONT... https://abs.twimg.com/emoji/v2/... draggable="false" alt="👇🏻" title="Rückhand Zeigefinger nach unten (heller Hautton)" aria-label="Emoji: Rückhand Zeigefinger nach unten (heller Hautton)">

{ 12 / 29 }
10. display
11. Layouts
12. Grid and Flex
13. Alignment
14. Fonts
15. Animation
16. Pseudo-classes
17. Media query

{ 13 / 29 }
I have covered some number of CSS concepts in my threads. This mega thread can help you

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

{">https://twitter.com/Prathkum/... 14 / 29 }
In my opinion, 25 to 30 days should be enough for CSS. Although they are not fixed you can arrange them according to you.

To be good developer, you need to Google a lot. How quickly you find your solution on Google makes you a good developer

{ 15 / 29 }
W3 schools and MDN are documentations where you find detailed explanation on each and every topic

So try to learn from there. Try to put everything into practice.

https://www.youtube.com/watch?v=1Rs2ND1ryYc

{">https://www.youtube.com/watch... 16 / 29 }
Congratulationshttps://abs.twimg.com/emoji/v2/... draggable="false" alt="🎉" title="Partyknaller" aria-label="Emoji: Partyknaller">

After 30 days, you will be able to make some static sites, personal website and some stunning landing pages.

Time to rewind all your learning and put them together to create a website.

{ 17 / 29 }
Structure is donehttps://abs.twimg.com/emoji/v2/... draggable="false" alt="✅" title="Fettes weißes Häkchen" aria-label="Emoji: Fettes weißes Häkchen">
Styling is donehttps://abs.twimg.com/emoji/v2/... draggable="false" alt="✅" title="Fettes weißes Häkchen" aria-label="Emoji: Fettes weißes Häkchen">

Time to add behaviour in your website using JavaScript.

JavaScript is deep so I suggest you to learn it from day 31 to the end (100th day)

{ 18 / 29 }
JavaScript is used for adding logic in your website.

For ex...

- What happens after the user clicks on the button is controlled by JavaScript
- Increase the likes count when user click on the heart buttonhttps://abs.twimg.com/emoji/v2/... draggable="false" alt="😉" title="Zwinkerndes Gesicht" aria-label="Emoji: Zwinkerndes Gesicht">

{ 19 / 29 }
Basic things you need to cover lin JavaScript are

- Data Types
- Var, const, let
- Operators
- Comparators
- Functions
- Loops
- Control statement
- Arrays
- etc

{ 20 / 29 }
Though JavaScript is a deep language. You can& #39;t even learn it in 100 days but you can learn some key concepts for web development. Here& #39;s a list of topics you need to cover first https://abs.twimg.com/emoji/v2/... draggable="false" alt="👇🏻" title="Rückhand Zeigefinger nach unten (heller Hautton)" aria-label="Emoji: Rückhand Zeigefinger nach unten (heller Hautton)">

{ 21 / 29 }
1. Print statement
2. Data types and variables
3. Basic operators
4. Logical operators
5. Comparisons
6. Loops and statements
7. alert()
8. prompt()
9. Arrays
10. Objects
11. Functions
12. Arrow function
13. Array methods

https://abs.twimg.com/emoji/v2/... draggable="false" alt="👇🏻" title="Rückhand Zeigefinger nach unten (heller Hautton)" aria-label="Emoji: Rückhand Zeigefinger nach unten (heller Hautton)">

{ 22 / 29 }
14. Hoisting
15. Closures
16. Callbacks
17. Promises
18. Async & Await
19. Currying
20. And other ES6 feature

{ 23 / 29 }
This may sound challenging and confusing but once you start with it, everthing seems like a cake walk.

Don& #39;t rush. Try to take short note for future reference it will help you for sure.

{ 24 / 29 }
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

{ 25 / 29 }
The DOM is powerful but most beginners avoid it or don& #39;t take it seriously. Please do not do this.

DOM mainly revolves around methods and value. By method you select where to change and by value you tell what to change.

{ 26 / 29 }
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.....

{ 27 / 29 }
The combination of HTML, CSS, JavaScript and DOM is the most powerful thing in my opinion and once you learn these things. You will become powerful toohttps://abs.twimg.com/emoji/v2/... draggable="false" alt="💪" title="Angespannter Bizeps" aria-label="Emoji: Angespannter Bizeps">https://abs.twimg.com/emoji/v2/... draggable="false" alt="😉" title="Zwinkerndes Gesicht" aria-label="Emoji: Zwinkerndes Gesicht">

Start your web development journey today. It& #39;s now or never.

{ 28 / 29 }
I think that& #39;s pretty much it for this thread. I hope you enjoy reading it https://abs.twimg.com/emoji/v2/... draggable="false" alt="💖" title="Funkelndes Herz" aria-label="Emoji: Funkelndes Herz">
You can follow @Prathkum.
Tip: mention @twtextapp on a Twitter thread with the keyword “unroll” to get a link to it.

Latest Threads Unrolled:
There are a lot of misconceptions about the Turkish diaspora in Germany. Since i just finished writing an essay about this topic I thought it's time to give other people
Read more
Las mejores calculadoras online en 2020A thread http://totumat.com/2020/11/26/las-mejores-calculadoras-online-en-2020/ Cuando se estudian asignaturas que requieren de cálculos complicados, nada mejor que contar con una buena calculadora.
Read more
Mitigating #ClimateChange is as much about taking up new techs as about leaving others behindMost studies focus on #coal's global downfall but another #energy tech decline is loomingRead my new
Read more