Beginner friendly thread to start with Web Development in 2021

THREADπŸ§΅πŸ‘‡
Did you know you don't need any prior coding knowledge to start with web development.

You can start it with scratch. You neither need to install any software initially you can make your first site on Notepad or some online editor

(2 / 13)
πŸ“Œ Tools you need

- An editor, where you can write some code.

There are two options

1. Install editor on your machine
2. Use an online editor

(3 / 13)
I suggest you not to install any editor in beginning, try to write your first line of code on online editor. It's easy and convenient

You
1. Codepen (codepen.io)
2. Codesandbox (codesandbox.io/dashboard)

(4 / 13)
Great!! You're all set to write your first line of code

Web development revolves around 3 languages

1. HTML
2. CSS
3. JavaScript

(5 / 13)
πŸ”Ή HTML is for structuring website
πŸ”Ή CSS is for add styling in website
πŸ”Ή JavaScript is for adding behaviour in website

Let's start with HTML

(6 / 13)
HTML is easy as compared to other language. It totally operates on tags. In order to get started, you just need to learn about few basic tags

Freecodecamp has an amazing crash course on YouTube



(7 / 13)
I guess this is the right time to introduce you what "Documentation" is

As the term suggest, it's a kind of written content where you can find all about a particular language

Two well written documents are

- W3 Schools
- MDN (developer.mozilla.org/en-US/docs/Web…)

(8 / 13)
Let me try to give you a quick example:

Let say you wanna embed some image onto your webpage. So how would you do that?

It's easy

1. Open Google
2. Search "embed image in html"
3. Quick read about it on W3 or mdn
4. Now you know how to display image in a webpage

(9 / 13)
As you can see first two results of Google search are W3 and MDN. You can open anyone of them and give it a quick read

Initially it may take some time to find your desired solution but once you get used to it, it all seems easy

(10 / 13)
Same thing applied to CSS and JavaScript. That's how you find your answers of Google. Using docs, article, video doesn't matter as far as you get your answer.

I suggest to develop this habit, it will help you forever

(11 / 13)
In the similar fashion you can start with CSS. Start it with freecodecamp's crash course.

The crash course is good because it gives a quick insight into how things work. But don't depends on it completely



(12 / 13)
I tried to give you a quick way of how to get started with web development.

Time to give it a shot nowπŸ₯‚

(13 / 13)

β€’ β€’ β€’

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

17 Feb
Everything you need to know about CSS Flexible Box LayoutπŸ‘‡

THREAD🧡 Image
Start appyling display: flex; property to parent element
This will take the all the elements in horizontal direction ImageImage
You can also change the direction of elements. For doing so, you need to mention the flex-direction property

The flex-direction property specifies the direction of the items within the flex container Image
Read 11 tweets
14 Feb
Some important topics of JavaScript before diving into React

A Thread🧡
1️⃣ ES6 classes

Although new developers are working with functional components, there is a possibility that you may encounter old written class component code. So it can be helpful to learn basic of ES6 class.
2️⃣ Basic understanding of var, let and const

You should have the basic understanding of variable declaration. When to use var, let or const. What is the block scope and stuff like that.

for example

var x = 2;
// Here x is 2
{
let x = 4;
// Here x is 4
}
// Here x is 2
Read 9 tweets
13 Feb
Start your 100 Days of Code journey with this thread⚑

πŸ§΅πŸ‘‡
Hey, thereπŸ‘‹

If you want to learn web development then this thread is for you. In this thread, I'll try to give a basic overview of

What 100DaysOfCode is?
How to manage your time?
How to divide your time?

And any other doubt you have in mind... So Let's go

(2 / nn)
In this 100 Days you need to cover mainly 4 technologies

- HTML
- CSS
- JavaScript
- DOM

Now you might be wondering why DOM? But trust me its important and necessaryπŸ˜‰

(3 / nn)
Read 22 tweets
12 Feb
Don't repeat my mistakesβŒπŸ‘‡

When I was learning Java, about 3 years ago, I tried to remember the code of the star patterns (It may sound silly)πŸ™ƒ

I was like what is the use of this star pattern in the real world. They meant nothing to me

(1 / 4)
Later I realized that coding is about creating logic in the mind so that we can reach an effective solution

By star patterns, they were trying to make my better understanding on for loops and if conditions. So that my logic building ability can be improved

(2 / 4)
The other big mistake I made was "didn't ask this question at the time".

I think I should have asked
Why star patterns?
What's the use of this?

But we learn from our mistakes. I also learned

(3 / 4)
Read 4 tweets
9 Feb
A compiled tweet of the CSS cheats sheet I created in the last few days

πŸ§΅πŸ‘‡
Border-radius
Flexbox
Read 8 tweets
6 Feb
We can't create gradient border directly but we have a trickπŸ˜‰

A SHORT THREAD🧡 Image
This is pretty easy. It will just take 5 minutesπŸ˜„

STEP 1:
- Create your element around which you want to create gradient border

In this example I have a sqaure around which I'll create gradient border
STEP 2:
- Create pseudo-element with little extra height and width

Let's say if my sqaure height width is 300px then I'll set 304px height and width of pseudo-element
Read 6 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!