Pratham Profile picture
29 Apr, 20 tweets, 6 min read
The next 19 tweets will help you start your JavaScript journey with zero inconvenience

🧡 πŸ‘‡πŸ»
Some valid reasons why you should learn JavaScript

πŸ”Ή Currently used by 94.5% websites
πŸ”Ή Wide range of applications including mobile and desktop devices
πŸ”Ή Most in-demand language

{ 2 / 20 }
Here's a crash course of JavaScript by Freecodecamp.

Crash courses are just for quick look. Don't just stop learning after it. Keep exploring things by your own



{ 3 / 20 }
First things first, interesting part about JavaScript is that you can start writing it directly in your browser.

Few simple steps:

- Open your browser
- Right click anywhere
- Inspect
- A window will come
- From the top navigation bar, go to console
- Start writing

{ 4 / 20 }
JavaScript is a vast language but the basic principles are same here as well. In the beginning you need to learn some basic concepts.

Let's see what are these concepts πŸ‘‡πŸ»

{ 5 / 20 }
This is great website and here you'll find a proper syllabus of JavaScript

πŸ”— javascript.info

{ 6 / 20 }
Start with the basics of JavaScript or we can say basic of any programming language

- Print statement
- Data types and variables
- Basic operators
- Logical operators
- Comparisons
- Loops and statements

These all are pretty basic stuff in any programming language

{ 7 / 20 }
πŸ“Œ 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

{ 8 / 20 }
πŸ“Œ JavaScript helps you to add behaviour in you websites.

These two methods can help you to add interaction using which user can interact with your web page

1. alert()
2. prompt()

{ 9 / 20 }
alert() - display a dialog with an optional message, and to wait until the user dismisses the dialog

prompt() - display a dialog with an optional message prompting the user to input some text, and to wait until the user either submits the text or cancels the dialog

{ 10 / 20 }
πŸ“Œ 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

Loops:

{ 11 / 20 }
Some intermediate topics that you should cover in JavaScript

- Arrays
- Objects
- Functions
- Arrow function
- Array methods

πŸ“Œ
πŸ“Œ

{ 12 / 20 }
I think much JavaScript would be good enough before jumping onto DOM manipulation

Basic things you need to cover in DOM

πŸ“Œ Finding HTML Elements

- getElementsByTagName()
- getElementsById()
- getElementsByClassName()

{ 13 / 20 }
πŸ“Œ Changing HTML Element

- element.innerHTML
- element.attribute
-element.style.property
- element.setAttribute(attr, value)

πŸ“Œ Adding and deleting elements

- document.createElement(element)
- document.removeChild(element)
- document.appendChild(element)

{ 14 / 20 }
After learning these basic properties and methods, its time to move onto Evnets and Event Listener

The addEventListener() method attaches an event handler to the specified element.

{ 15 / 20 }
Upto this point you will able to make a fully functional website using JavaScript. But there are always some margin of improvement

Here are some advance key concepts

- Hoisting
- Closures
- Callbacks
- Promises
- Async & Await
- Currying
- And other ES6 feature

{ 16 / 20 }
Although you will need an editor as you go further into this field

There are plethora of editors out there. But I would recommend VS Code. Why?

- Many built-in features
- It's fast
- Large community
- IntelliSense code completion and debugging

{ 17 / 20 }
JavaScript in Visual Studio Code

code.visualstudio.com/docs/languages…

{ 18 / 20 }
Here I compiled 9 website so that you can start learning JavaScript with minimum efforts



{ 19 / 20 }
I think that's pretty much it for this thread. I hope you like it

Thanks for reading this ❀️

*** END ***

β€’ β€’ β€’

Missing some Tweet in this thread? You can try to force a refresh
γ€€

Keep Current with Pratham

Pratham Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @Prathkum

30 Apr
5 seamless single div css art that anyone can create for fun πŸ“±πŸŒ₯οΈπŸŽ§πŸ‘“πŸš€

🧡 πŸ‘‡πŸ»
1️⃣ Mobile Phone πŸ“±

Complete code: codepen.io/prathkum/pen/W… Image.phone {   position: relati...
2️⃣ Cloud πŸŒ₯️

Complete code: codepen.io/prathkum/pen/V… Image.cloud {   height: 50px;   ...
Read 8 tweets
29 Apr
10 HTML tips I bet you are not familiar with 🧡 πŸ‘‡πŸ»
HTML Tip 1

The input with type image defines an image as a submit button. With src attribute that specifies the link to the image ImageImage
HTML Tip 2

The "step" attribute specifies the interval between legal numbers in an <input> element

Suppose I want the user to only select Sundays in the input date then I'll mention the upcoming Sunday date with 7 stepsDown pointing backhand index Image
Read 11 tweets
29 Apr
6 amazing GitHub repositories that can help you in your web development journey

🧡 πŸ‘‡πŸ»
1️⃣ frontend-guidelines

- Some HTML, CSS and JS best practices.

πŸ”— github.com/bendc/frontend…
2️⃣ awesome-learning-resources

- Awesome list of resources on Web Development.

πŸ”— github.com/lauragift21/aw…
Read 7 tweets
28 Apr
5 amazing CSS properties you won't believe really exist 🎨

🧡 πŸ‘‡πŸ»
1️⃣ touch-action

The touch-action CSS property sets how an element's region can be manipulated by a touchscreen user (for example, by zooming features built into the browser).

This propety accepts the following values πŸ‘‡πŸ»
2️⃣ will-change

You can optimize the performance of your web page by adding one line of CSS🀯

The will-change CSS property hints to browsers how an element is expected to change. It can increase the speed by doing potentially expensive work before they are actually required.
Read 9 tweets
27 Apr
5 simple single div CSS arts you can try 🎨

{ 1 / 5 } 🧡
2. Yin and Yang ☯️
3. Coffee β˜•
Read 5 tweets
27 Apr
These 13 web development code snippet websites can save you a lot of time

A thread 🧡
1️⃣ W3 Schools How to

- Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS and JavaScript

πŸ”— w3schools.com/howto/default.…
2️⃣ Code My UI

- Handpicked collection of Web Design & UI Inspiration with Code Snippets.

πŸ”— codemyui.com
Read 14 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!