If you're learning or planning to learn Web Development in 2021 then this thread is for you

๐Ÿงต๐Ÿ‘‡๐Ÿป

WHERE TO START? Front-end or Backend?

- Well this may be a debatable question but I would suggest you to start with front-end development

- It depends entirely on the individual but in my opinion, starting with front-end development has its advantages.

{ 2 / 16 }
WHY TO START WITH FRONT-END DEVELOPMENT?

- More visual content gives you an aesthetic vibe

- You can share your creations

- Easier to get feedback as you can show your webpages to any non technical person as well

{ 3 / 16 }
FUNDAMENTALS ARE IMPORTANT

- Don't rush! Spend some time on HTML, CSS and JavaScript. You can do pretty amazing things using these three languages

{ 4 / 16 }
- Make sure to learn and build some web pages using HTML and CSS before jumping onto JavaScript

- JavaScript is the backbone of web development, Don't rush to start with React/Angular/vue or any other front-end framework or library

{ 5 / 16 }
- I don't think we should set some time after which you can start with front-end framework. Just make sure to be develop your strong hold on the foundation.

- I spent about 3-4 months with HTML, CSS and JS

{ 6 / 16 }
DOCUMENT YOUR LEARNINGโœ๏ธ

- Take a short note of what you learn on the daily basis will be helpful in the long term

- Whenever you go for an interview or some test, you can revise through your notes

{ 7 / 16 }
- You can also share your learning, projects or anything on social media. It also helps you to be up-to-date

- Write your achievements or failures while learning a specific topic, create tutorials, write article, etc

{ 8 / 16 }
There are a lot of free tools and courses on the internet you can start with

- I always recommend start with a crash course so that you can have taste of things. Later on, you can buy a course or learn by self teaching

{ 9 / 16 }
DYNAMIC FIELD๐Ÿš€

- Web development is a constantly evolving field. To be a great developer, you need to stay updated

- Almost daily, we come across with new concepts, technique, framework, library, designs, etc. So as to survive strongly in this world, you should be updated
- In order to keep up with these, You can read latest article, watch YouTubers, be active on social media, etc

- It will be more beneficial if you can put new concepts into practice. It will help you to understand a specific concept more accurately and effectively

{ 11 / 16 }
THERE IS ALWAYS A SLIGHT MARGIN TO IMPROVE๐Ÿ€

- You can't be perfect in this field but you can try to be

- Always be open to learn new things, as this is the vast field learning new techniques always pays off

{ 12 / 16 }
BE POSITIVE๐Ÿ˜

- During your journey you will face many challenges. But it does not matter. What matters is your attitude towards your problems

{ 13 / 16 }
- I started learning programming on my old PC. I used to write code in my phone as well. But I didn't give up

- Frustration is the basic side effect of coding. Just take a break. No need to burden yourself

{ 14 / 16 }
This all may sound like a little hectic but it's actually not.

Do not burden yourself. Just try to code daily so that you can develop consistency inside you. Does not matter for hours or minutes

{ 15 / 16 }
That's pretty much it. Don't think much just start. Let me know if i can help you in any way

All the best๐Ÿ˜„

More from Pratham ๐Ÿ‘จโ€๐Ÿ’ป๐Ÿš€

5 amazing websites that will blow the mind of a developer. Definitely check them out

๐Ÿงต๐Ÿ‘‡๐Ÿป

1๏ธโƒฃ Animation generator

- Dead simple visual tools to help you generate CSS for your projects.

๐Ÿ”—
https://t.co/IFmIEgDiVY


2๏ธโƒฃ Neural Network Visualizer

- Deep playground is an interactive visualization of neural networks, written in TypeScript using d3.js.

๐Ÿ”— https://t.co/mTAlFbJsOW


3๏ธโƒฃ Blockchain Demo

- A visual demo of blockchain technology

๐Ÿ”— https://t.co/I1RwxYcM1Z


4๏ธโƒฃ Developer Roadmaps

- Step by step guides and paths to learn different tools or technologies

๐Ÿ”— https://t.co/VSNPdG8jQR
6 beginner friendly websites that will boost your HTML and CSS learning process ๐Ÿš€

๐Ÿงต๐Ÿ‘‡๐Ÿป

1๏ธโƒฃ Learn HTML

- The easiest way to learn HTML & CSS. Learn HTML provides an interactive tutorial that explains how to build HTML & CSS websites step by step.

๐Ÿ”—
https://t.co/W1XytKL1MI


2๏ธโƒฃ HTML best practice

- A very well written document on HTML best practice

๐Ÿ”— https://t.co/6PTcY1U5Cw


3๏ธโƒฃ Learn to Code HTML & CSS

- Learn to Code HTML & CSS is a simple and comprehensive guide dedicated to helping beginners learn HTML and CSS

๐Ÿ”— https://t.co/LwY9E2qUNS


4๏ธโƒฃ Hex Invaders

- Hex Invaders is a fun way to learn and understand what hex codes are and how they work

๐Ÿ”— https://t.co/EpQyhlN7pv
If you know CSS then you can use these amazing generators and save your time

Thread ๐Ÿงต๐Ÿ‘‡๐Ÿป

1๏ธโƒฃ CSS Box Shadow Generator

- Generate CSS3 Box Shadow code for your Div, Frame, Buttons or any other HTML element with Outline, and Inset (inner) type shadow effects

๐Ÿ”—
https://t.co/6La36IzBLj


2๏ธโƒฃ Glassmorphism

- Generate glassmorphic design easily

๐Ÿ”— https://t.co/qrKqDV5tzY


3๏ธโƒฃ Cool Backgrounds

- Explore a beautifully curated selection of cool backgrounds that you can add to your next project

๐Ÿ”— https://t.co/df7VSaRSh9


4๏ธโƒฃ Pixel art

- Create CSS pixel art, export the results to CSS and download them.

๐Ÿ”— https://t.co/ojD8qwzuhx
5 great gradient background sites for every web developer and designer ๐ŸŽจ

๐Ÿงต๐Ÿ‘‡๐Ÿป


1๏ธโƒฃ uiGradients

- A handpicked collection of beautiful color gradients for designers and developers.

๐Ÿ”—
https://t.co/EainhiePop


2๏ธโƒฃ Eggradient

- Ready to use gradient background colors. โœ“ Cool Gradients are prepared according to the latest design trends

๐Ÿ”— https://t.co/F0uYVsZbA4


3๏ธโƒฃ Mesh Gradients

- Create beautiful gradient like aurora UI in few clicks

๐Ÿ”— https://t.co/MV8PT7q3Kz


4๏ธโƒฃ CSS Gradient

- Create beatiful gradeint either linear or radial on different angles

๐Ÿ”— https://t.co/dlCExilHAT
JavaScript is powerful.

But sometimes, you can do great things using CSS.

A long thread of CSS tips and tricks:

1. Smooth


2. Change marker styling


3. Add styling to video


4. Change input caret

More from Coding

If you are a developer then these GitHub repositories or websites will boost your knowledge to the next level

A Thread ๐Ÿงต

1๏ธโƒฃ JavaScript

- A kind of eBook in the form of readme. Covers from beginners to intermediate concepts of JavaScript

๐Ÿ”—
https://t.co/SM9jcxuoZ1


2๏ธโƒฃ Python

- A huge list of python projects, snippets, example and almost everything related to Python which helps you understand it in detail

๐Ÿ”—

3๏ธโƒฃ React Lifecycle

- Interactive React Lifecycle Methods diagram.

๐Ÿ”— https://t.co/7UVoA1rXCZ


4๏ธโƒฃ Cheatsheets

- JavaScript cheatsheets incluse express4, Node.js, React, MongoDB

๐Ÿ”— https://t.co/Jm9izXrcMu

You May Also Like