Are you planning to learn Front-end development in 2021?

Here is a quick start guide 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)">

Thread https://abs.twimg.com/emoji/v2/... draggable="false" alt="🧵" title="Thread" aria-label="Emoji: Thread">
You can start learning web development with backend as well but starting with Front-end is more beneficial.

Well it depends on person to person. Let& #39;s move forward https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔽" title="Nach unten zeigendes Dreieck" aria-label="Emoji: Nach unten zeigendes Dreieck">

{ 2 / 28 }
First things first, you need an editor to write code. There are plethora of editors out there like atom, VS code, sublime etc

I recommend you to start with VS code. Why?

Many built-in features
It& #39;s fast
Large community
IntelliSense code completion and debugging

{ 3 / 28 }
Initially you don& #39;t even need to download an editor. I recommend you to use online editor in your initial days.

It will give you can quick taste of how technologies work. Later on, You can download an editor for more complex projects

{ 4 / 28 }
Two best online editors

1. codepen ( http://codepen.io"> http://codepen.io )
2. codesandbox ( http://codesandbox.io"> http://codesandbox.io )

{ 5 / 28 }
CodeSandbox: Online Code Editor and IDE for Rapid Web Development

CodeSandbox is an online code editor and prototyping tool that makes creating and sharing web apps faster

http://codepen.io
Moving forward, Now you need to understand the backbone on web development.

A typical website can be divide into three phases

- HTML https://abs.twimg.com/emoji/v2/... draggable="false" alt="🧱" title="Bricks" aria-label="Emoji: Bricks">
- CSS https://abs.twimg.com/emoji/v2/... draggable="false" alt="🎨" title="Farbpalette" aria-label="Emoji: Farbpalette">
- JavaScript https://abs.twimg.com/emoji/v2/... draggable="false" alt="⚙️" title="Zahnrad" aria-label="Emoji: Zahnrad">

{ 6 / 28 }
HTML

- It is used to build the skeleton for your website
- It& #39;s a markup language that totally operates on tags
- You can master it with 10 days

HTML is pretty simple, you can learn it from a crash course

https://www.youtube.com/watch?v=pQN-pnXPaVg

{">https://www.youtube.com/watch... 7 / 28 }
CSS

- It is used to give the styling for your website
- Cascading Style Sheets, that totally operates on properties values pair
- You can learn it within 20-25 days but it will take time to master it

{ 8 / 28 }
CSS is little tricky and can be mastered with little practice

Here are 4 websites from where you can learn CSS:

1. http://cssreference.io"> http://cssreference.io 
2. http://learn.shayhowe.com"> http://learn.shayhowe.com 
3. http://learnlayout.com"> http://learnlayout.com 
4. http://csstutorial.net"> http://csstutorial.net 

{ 9 / 28 }
CSS Tutorial

Beginners CSS Tutorial For Web Designers.

http://cssreference.io
Here is the CSS roadmap 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)">

- Background
- Color
- Box model
- Height and width
- Margin and padding
- Border
- Positioning
- display
- Layouts
- Grid and Flex
- Alignment
- Fonts
- Animation
- Pseudo-classes
- Media query

{ 10 / 28 }
CSS Frameworks

- In simple words CSS frameworks are the CSS code written by some other developers. All you need to do is just import in your HTML file and now you can add styling in your website with even writing CSS code by yourself

- Isn& #39;t it cool

{ 11 / 28 }
Learning a particular CSS framework is pretty easy. You can learn them by reading official documentation

Pick any CSS Frameworks by your choice

Tailwind CSS
Bootstrap
Bulma
Materialize CSS
Foundation

... and many more

{ 12 / 28 }
JavaScript

- JS is used to add functionality and behavior in your website
- JavaScript is a popular programming and widely used language for Web Development
- You can& #39;t master JS in few days or months, It will take time
But you will be able to create websites in few days

13/28
JavaScript is so deep so let me give you a quick overview of it in this same thread 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)">

( Next 7 tweet is for JavaScript quick start )

{ 14 / 28 }
https://abs.twimg.com/emoji/v2/... draggable="false" alt="1️⃣" title="Tastenkappe Ziffer 1" aria-label="Emoji: Tastenkappe Ziffer 1"> Start with JavaScript Variables

Variable are nothing but containers for storing data values. You will use them almost 100% in your JavaScript code.
There are three ways to declare a variable using var, let and const keyword

{ 15 / 28 }
https://abs.twimg.com/emoji/v2/... draggable="false" alt="2️⃣" title="Tastenkappe Ziffer 2" aria-label="Emoji: Tastenkappe Ziffer 2"> Loops and conditional statements

Loops are nothing but piece of code that repeats itself on a particular situation whereas conditional statement is a piece of code that runs when particular conditions occurs

https://www.youtube.com/watch?v=rJtN14OPpKc

{">https://www.youtube.com/watch... 16 / 28 }
https://abs.twimg.com/emoji/v2/... draggable="false" alt="3️⃣" title="Tastenkappe Ziffer 3" aria-label="Emoji: Tastenkappe Ziffer 3"> alert() and prompt() methods

An alert box is often used to popup some message whereas prompt is used for taking input from user.

A typical example 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)">

{ 17 / 28 }
https://abs.twimg.com/emoji/v2/... draggable= alert() and prompt() methodsAn alert box is often used to popup some message whereas prompt is used for taking input from user. A typical example 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)">{ 17 / 28 }" title="https://abs.twimg.com/emoji/v2/... draggable="false" alt="3️⃣" title="Tastenkappe Ziffer 3" aria-label="Emoji: Tastenkappe Ziffer 3"> alert() and prompt() methodsAn alert box is often used to popup some message whereas prompt is used for taking input from user. A typical example 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)">{ 17 / 28 }">
https://abs.twimg.com/emoji/v2/... draggable= alert() and prompt() methodsAn alert box is often used to popup some message whereas prompt is used for taking input from user. A typical example 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)">{ 17 / 28 }" title="https://abs.twimg.com/emoji/v2/... draggable="false" alt="3️⃣" title="Tastenkappe Ziffer 3" aria-label="Emoji: Tastenkappe Ziffer 3"> alert() and prompt() methodsAn alert box is often used to popup some message whereas prompt is used for taking input from user. A typical example 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)">{ 17 / 28 }">
https://abs.twimg.com/emoji/v2/... draggable="false" alt="4️⃣" title="Tastenkappe Ziffer 4" aria-label="Emoji: Tastenkappe Ziffer 4"> Arrays and their methods

We can say array is nothing but the collection of data.
Check this video for a quick look

https://youtube.com/watch?v=5kFOWBh5zKE

{">https://youtube.com/watch... 18 / 28 }
https://abs.twimg.com/emoji/v2/... draggable="false" alt="5️⃣" title="Tastenkappe Ziffer 5" aria-label="Emoji: Tastenkappe Ziffer 5"> JavaScript - HTML DOM methods

You might know that JavaScript is for adding behaviour in your webpage. For that you need to catch the HTML element so that you can change things accordingly

HTML DOM methods are actions
HTML DOM properties are values that you can set

{19/28}
https://abs.twimg.com/emoji/v2/... draggable="false" alt="6️⃣" title="Tastenkappe Ziffer 6" aria-label="Emoji: Tastenkappe Ziffer 6"> Events

You can handle various events using JavaScript. An event can be defined as something the browser does, or something a user does.

For example, click is a event that user does, whereas onload is a event when user enters the page

{ 20 / 28 }
https://abs.twimg.com/emoji/v2/... draggable="false" alt="7️⃣" title="Tastenkappe Ziffer 7" aria-label="Emoji: Tastenkappe Ziffer 7"> The addEventListener()

When using the addEventListener() method, the JavaScript is separated from the HTML markup, for better readability and allows you to add event listeners even when you do not control the HTML markup

{ 21 / 28 }
Document Object Model (DOM)

- With the HTML DOM, you can access, modify and changes the HTML elements

- When a web page is loaded, the browser creates a Document Object Model of the page

{ 22 / 28 }
With the help of DOM, JavaScript can change the

- elements in the page
- attributes
- CSS styling

I mean now you have a super power to make changes in you webpage using JS

{ 23 / 28 }
Git and GitHub

I think now it& #39;s the right time to learn Git and GitHub (version control)

- Git is a Version Control system used for tracking changes
- GitHub is a code hosting platform of Git

{ 24 / 28 }
I learned Git and GitHub from this free tutorial on Udemy. Its a great course definitely check it out

https://www.udemy.com/course/git-expert-4-hours/

{">https://www.udemy.com/course/gi... 25 / 28 }
Moving forward, next up we have is

front-end frameworks and libraries

There are many like React, Angular, vue, Ember, Backbone etc. All are equally good.

{ 26 / 28 }
The ecosystem for React is really big. I also love React.

Check out my this thread for quick start guide to React

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

{">https://twitter.com/Prathkum/... 27 / 28 }
Well! Web development is a vast field. No one can explaing it fully in one single thread or article.

I tried to give you a little push so that you can start. I hope you like it.

Thanks for reading it https://abs.twimg.com/emoji/v2/... draggable="false" alt="❤️" title="Rotes Herz" aria-label="Emoji: Rotes Herz">

*** END ***
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