7 essential skills every web developer should have (my opinion)
Thread below

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="Kleine blaue Raute" aria-label="Emoji: Kleine blaue Raute"> Problem Solving
I put this first because I think it&
#39;s the most essential soft skill to posses.
Whether you are planning your site&
#39;s design, styling elements or debugging, you are solving a problem.
Web devt and programming is all about problem solving and critical thinking.

https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔹" title="Kleine blaue Raute" aria-label="Emoji: Kleine blaue Raute"> Communication
Not everyone knows what the DOM, Git or an API is.
Being able to communicate difficult concepts in a simple and digestible way is a crucial skill, especially for teamwork and collaboration.
Mastering the art of effective communication is crucial for a web dev

https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔹" title="Kleine blaue Raute" aria-label="Emoji: Kleine blaue Raute">Git
Not many people store their codebase in their local machine anymore. Git is an incredibly popular source control software.
Source control is a fancy way of saying - track, manage and observe changes made to source code over time.
Learning at least the basics is important

https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔹" title="Kleine blaue Raute" aria-label="Emoji: Kleine blaue Raute">CSS
All those fancy websites you find were all made possible with CSS.
Grasping the basics of CSS is very important. Things like

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

https://abs.twimg.com/emoji/v2/... draggable="false" alt="✅" title="Fettes weißes Häkchen" aria-label="Emoji: Fettes weißes Häkchen"> Selectors

https://abs.twimg.com/emoji/v2/... draggable="false" alt="✅" title="Fettes weißes Häkchen" aria-label="Emoji: Fettes weißes Häkchen"> CSS Properties

https://abs.twimg.com/emoji/v2/... draggable="false" alt="✅" title="Fettes weißes Häkchen" aria-label="Emoji: Fettes weißes Häkchen"> Length units

https://abs.twimg.com/emoji/v2/... draggable="false" alt="✅" title="Fettes weißes Häkchen" aria-label="Emoji: Fettes weißes Häkchen"> Flexbox and Grids

https://abs.twimg.com/emoji/v2/... draggable="false" alt="✅" title="Fettes weißes Häkchen" aria-label="Emoji: Fettes weißes Häkchen"> Transitions

https://abs.twimg.com/emoji/v2/... draggable="false" alt="✅" title="Fettes weißes Häkchen" aria-label="Emoji: Fettes weißes Häkchen"> Animations

https://abs.twimg.com/emoji/v2/... draggable="false" alt="✅" title="Fettes weißes Häkchen" aria-label="Emoji: Fettes weißes Häkchen"> Media queries for responsive design
etc

https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔹" title="Kleine blaue Raute" aria-label="Emoji: Kleine blaue Raute"> JavaScript
The last and important piece of the puzzle.
JavaScript is used to create the movements and logics in your website.
You use it to make your website "intelligent".
Learn

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

https://abs.twimg.com/emoji/v2/... draggable="false" alt="✅" title="Fettes weißes Häkchen" aria-label="Emoji: Fettes weißes Häkchen"> Fetch API

https://abs.twimg.com/emoji/v2/... draggable="false" alt="✅" title="Fettes weißes Häkchen" aria-label="Emoji: Fettes weißes Häkchen"> Promises

https://abs.twimg.com/emoji/v2/... draggable="false" alt="✅" title="Fettes weißes Häkchen" aria-label="Emoji: Fettes weißes Häkchen"> Variables

https://abs.twimg.com/emoji/v2/... draggable="false" alt="✅" title="Fettes weißes Häkchen" aria-label="Emoji: Fettes weißes Häkchen"> Data Structures

https://abs.twimg.com/emoji/v2/... draggable="false" alt="✅" title="Fettes weißes Häkchen" aria-label="Emoji: Fettes weißes Häkchen"> Syntax rules

https://abs.twimg.com/emoji/v2/... draggable="false" alt="✅" title="Fettes weißes Häkchen" aria-label="Emoji: Fettes weißes Häkchen"> ES6
And more!

https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔹" title="Kleine blaue Raute" aria-label="Emoji: Kleine blaue Raute">UI Frameworks
We all know that time is important for web developers. Hence, frameworks are being created consistently to save more time.
It&
#39;s then best to learn one or two frameworks like

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

https://abs.twimg.com/emoji/v2/... draggable="false" alt="✅" title="Fettes weißes Häkchen" aria-label="Emoji: Fettes weißes Häkchen"> Bootstrap CSS

https://abs.twimg.com/emoji/v2/... draggable="false" alt="✅" title="Fettes weißes Häkchen" aria-label="Emoji: Fettes weißes Häkchen"> React is

https://abs.twimg.com/emoji/v2/... draggable="false" alt="✅" title="Fettes weißes Häkchen" aria-label="Emoji: Fettes weißes Häkchen"> Vue js

https://abs.twimg.com/emoji/v2/... draggable="false" alt="✅" title="Fettes weißes Häkchen" aria-label="Emoji: Fettes weißes Häkchen"> Materialize CSS

https://abs.twimg.com/emoji/v2/... draggable="false" alt="✅" title="Fettes weißes Häkchen" aria-label="Emoji: Fettes weißes Häkchen"> Angular

https://abs.twimg.com/emoji/v2/... draggable="false" alt="✅" title="Fettes weißes Häkchen" aria-label="Emoji: Fettes weißes Häkchen"> Tailwind
These are the essential skills I believe web developers should have.
One more I would add would be a DevTool, like Chrome DevTools. This will help in development.
If this was helpful to you, follow me

https://abs.twimg.com/emoji/v2/... draggable="false" alt="👉" title="Rückhand Zeigefinger nach rechts" aria-label="Emoji: Rückhand Zeigefinger nach rechts">
@UbahTheBuilder for more tweets on software development.
Tip: mention @twtextapp on a Twitter thread with the keyword “unroll” to get a link to it.