Facing some difficulties to get started with web development in 2021? I think I can help you

πŸ§΅πŸ‘‡πŸ»
There are so many latest evolving trends and sub fields in web dev. So don't be overwhelmed, just focus on one thing at a time.

Start with HTML....

Let's go πŸš€

{ 2 / 19 }
You have picked the right field for you. It's interesting, amazing and challenging. You will enjoy it a lot once you get used to it

I have been doing it for little over one year and in this thread I will try to explain how you can start it

{ 3 / 19 }
I started it with a little coding knowledge but you can start it with 0% coding knowledge as well.

There is no problem to start it without prior coding knowledge

{ 4 / 19 }
Three basic language you need to learn

- HTML
- CSS
- JavaScript

I suggest you to start with free tutorial on YouTube or somewhere else

{ 5 / 19 }
I'm not going to post a particular video link here becasue IMO everyone has the different way of explaining things

So just search `HTML Tutorials` on YouTube, watch video for 10-15 minute, if things make sense, stick around else switch to other video

{ 6 / 19 }
I am sure after switching to 2 - 3 videos, things are start making sense to you.
Initially, it might be little confusing so don't forget to take short notes. It can help you in future

{ 7 / 19 }
While learning HTML and CSS, it doesn't matter that you have some prior coding knowledge or not.

These are two pretty intuitive language
HTML operates on tags whereas CSS operates on properites - values pair

{ 8 / 19 }
After you spend 3-4 days on HTML, I suggest you to move onto CSS. Though, HTML is deep but as you progress further, you automatically come to know about various tags and attributes

{ 9 / 19 }
Start with CSS in the similar fashion as you did with HTML.

Start with a free crash on YouTube and follow two important documentation website along with it

1. w3 schools
2. MDN docs

{ 10 / 19 }
You can literally improve your coding skills by writing code.

In order to write code, you need an editor. If your machine has enough space you can download VS Code else you can start writing code on free online editor

{ 11 / 19 }
VS Code: code.visualstudio.com/download
Online: codesandbox.io

{ 12 / 19 }
You can create amazing website using HTML and CSS only.

So before jumping onto JavaScript you should create some projects in the form on portfolio, landing page or some static site.

{ 13 / 19 }
JavaScript is used for adding some behaviour in website. It's all about logic building

So if you have some prior coding knowledge then it will be helpful for you to start with it. Because you already knew what for loop is? what are conditional statement? etc...

{ 14 / 19 }
I suggest you to start JavaScript with freecodecamp full course.

Web development is all about exploring things by own. There are a lot good documentation, article, videos, books, etc for grabbing knowledge even for free

{ 15 / 19 }
JavaScript is little harder than HTML and CSS but it just the matter of practice in my opinion.

Sometimes you will get your desired result in one go whereas sometimes you will end up spending days on a silly error.

{ 16 / 19 }
Just remember HTML, CSS and JavaScript are interconnected

- Learn HTML
- Then learn HTML and CSS
- Then learn HTML, CSS and JavaScript

{ 17 / 19 }
Create projects while learning, by doing so you can literally speed up your learning process and you can relate things more effectively and accurately

{ 18 / 19 }
Compiling my thread, I just wanna say that just start, the path will start appearing itself

I just shared some things by my personal experience so if you wanna add something, feel free to add it belowπŸ’–

If you like it, share it with your connectionsπŸ˜„

{ 19 / 19 }

β€’ β€’ β€’

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

8 Mar
8 amazing CSS animation libraries that can make your life easier

πŸ§΅πŸ‘‡πŸ»
1️⃣ Animate.css

- Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects.

animate.style
2️⃣ OBNOXIOUS.css

- CSS Animations for the strong of heart, and weak of mind. Shake It, Intensifies, Fontalicious, Strobe, twister.

tholman.com/obnoxious/
Read 8 tweets
7 Mar
A great list of amazing React UI libraries

πŸ§΅πŸ‘‡πŸ»
1️⃣ Chakra UI

- Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

chakra-ui.com
2️⃣ Material UI

- React components for faster and easier web development. Build your own design system, or start with Material Design.

material-ui.com
Read 10 tweets
7 Mar
Some amazing websites and resources for User Interface (UI)

Thread πŸ§΅πŸ‘‡πŸ»
πŸ“Œ error404.fun

- Free illustration for 404 pages

Make a unique journey through 404 error pages on your website Use these illustrations that describe better than words
πŸ“Œ uplabs.com

- UpLabs is the place to find high-quality design resources for designers, creative agencies and developers
Read 8 tweets
6 Mar
7 GitHub repositories that can help you in your React development journey

Thread πŸ§΅πŸ‘‡πŸ»
1️⃣ Awesome React

- A collection of awesome things regarding React ecosystem. In this repo you will find tools, tutorials and other resources in various form

github.com/enaqx/awesome-…
2️⃣ React learning

- As the repo name suggests in this repo you'll find a curated list of free resources to master React Development

github.com/ericdouglas/re…
Read 8 tweets
5 Mar
10 CSS properties you probably haven't heard of them yet

πŸ§΅πŸ‘‡πŸ»
1️⃣ all

The all property resets all properties, apart from unicode-bidi and direction, to their initial or inherited value.

"all" accepts following values

- initial
- inherit
- unset
2️⃣ caret-color

The caret-color property specifies the color of the cursor (caret) in inputs, textareas, or any element that is editable.

The caret is blinking line in input field that indicates that user can write something here
Read 11 tweets
4 Mar
8 amazing HTML attributes that are so powerful and maybe you haven't heard of them yet

πŸ§΅πŸ‘‡πŸ»
1️⃣ Translate

The translate attribute specifies whether the content of an element should be translated or not

You can use it in your brand name so that whenever page translated to other language, your brand name will keep same
2️⃣ sandbox

Applies extra restrictions to the content in the frame. The value of the attribute can either be empty to apply all restrictions, or space-separated tokens to lift particular restrictions
Read 12 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!