Pratham Profile picture
19 Jun, 19 tweets, 4 min read
JavaScript is an enormous language but you don't need to learn everything in the beginning.

Here is the detailed explanation on JavaScript for Web Development πŸ§΅πŸ‘‡πŸ»
JavaScript is a kind of language that as you progress deeper in the field, you will come to know a lot more cool concepts about it.

Prerequisites if you want to learn JavaScript for web development πŸ‘‡πŸ»

- HTML
- CSS
First and foremost, it's a programming language so you should know about basic programming concepts:

- Data types in JavaScript
- Variables
- Statements
- Control statements
- Operators
- And other basic stuff....
When I started learning web development, I had basic knowledge about Java language which helped me a lot because I was no more in a need to learn about these general programming concepts.

But you can start with the ZERO knowledge as well.
There are some advanced topics in JavaScript which you don't need to learn in the beginning. For ex:

- Async/await
- callbacks, promises, etc...

These are some advance concept which you can learn after
You need to cover some intermediate topics so that you can add behaviour to your website. They are

- Arrays and their methods
- Objects
- Functions
- Arrow function

These will help you to work with DOM.
Let's talk about DOM a little bit. It stands for Document Object Model.

Consider it as a tree that comprises the content of a particular web page (HTML)
DOM gives you a superpower to change your webpage at your convenience using JavaScript.

- You change the HTML elements, attribute, styles
- You can delete existing HTML elements
- You can add HTML elements
JavaScript and DOM are connected.

We use DOM to access the elements but write JavaScript code in order to modify them.

Here is a simple example:
Don't get confused here. DOM is not a programming language it's just a model using which we can access and modify HTML elements,
Basic things you need to cover in DOM

πŸ“Œ Finding HTML Elements

- getElementsByTagName()
- getElementsById()
- getElementsByClassName()
πŸ“Œ Changing HTML Element

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

Pushpin Adding and deleting elements

- document.createElement(element)
- document.removeChild(element)
- document.appendChild(element)
Just one last thing and then you will be able to make fully-fledged websites.

After learning these basic properties and methods, its time to move onto Events and Event Listener

The addEventListener() method attaches an event handler to the specified element.
Up to this point you will able to make a fully functional website using JavaScript. But there are always some margin of improvement

Here are some advanced key concepts

- Hoisting
- Closures
- Callbacks
- Promises
- Async & Await
- Currying
- And other ES6 feature
Here is the complete general introduction to JavaScript

The most important concept on which the entire JavaScript language based on

The Event Loop

Project-based learning is the best. Here are some practice projects you can build.

freecodecamp.org/news/javascrip…
And I guess that's pretty much it for this thread. Hope you find it helpful πŸ’–
Whoa! Half million views 😳❀️

β€’ β€’ β€’

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

19 Jun
5 great websites a developer should visit

🧡 πŸ‘‡πŸ»
1. Algorithms Visualizer

- I have always some issues with algo and data structures but this site is a boon for me. Here you can visualize how different algorithms works

πŸ”— visualgo.net/en
2. Everything in one place

- DevDocs combines multiple API documentations in a fast, organized, and searchable interface.

πŸ”— devdocs.io
Read 6 tweets
18 Jun
Here is a curated list of my latest threads that can help you if you're a web developer.

Including resources, audience building, and other fully-fledged content.

🧡 πŸ‘‡πŸ»
1. ~100K audience on Twitter in 12 months

2. Code snippets for web developers and designer

Read 9 tweets
17 Jun
If you are a web developer then these 5 CSS generators can save you a lot of time

πŸ§΅πŸ‘‡πŸ»
1. CSS Accordion Slider Generator

- Create fully responsive, CSS only accordion sliders

πŸ”— accordionslider.com
2. Adobe color wheel

Explore and create accessible color palettes using color wheel, in variety of color variations and contrast levels. It will tell you automatically if two colors are not accessible

πŸ”— color.adobe.com/create/color-a…
Read 6 tweets
16 Jun
Here are some courses which will help you to learn web development.

Some of them are free

🧡 πŸ‘‡πŸ»
πŸ“Œ HTML

HTML is probably the easiest part of web development. I suggest you start with any YouTube crash course video. Or you can pick freecodecamp's one

πŸ”—
πŸ“Œ CSS

You can learn the entire CSS from my threads. Here is the complete curation

πŸ”— app.feedhive.io/public/post/cn…
Read 7 tweets
15 Jun
Some HTML and CSS tips that will blow your mind for sure

πŸ§΅πŸ‘‡πŸ»
2. Create Grammarly using one line of HTML

Read 6 tweets
15 Jun
My content usually revolves around CSS but I have a plethora of fully-fledged threads on React as well

Take a look πŸ§΅πŸ‘‡πŸ»
Read 9 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!

:(