Want to become an Aspiring Frontend Web Developer?

This thread is for you.

Front-end Web Developer Roadmap, zero to advanced. Understand all concepts with explanations.

Mega Thread πŸ§΅β†“
1. Understanding Internet.

You should get a clear view of how browsers work and what runs between. Basic knowledge of the Internet is the first step.

Learn the fundamentals:
- How does the Internet work?
- What is HTTP?
- How do Browsers work?

{ 1 / 10 }
2. HTML

HTML comes up next. HTML is the standard markup language for Web pages. Start with basics by understanding DOM, Forms and then move on to larger concepts like SEO and Accessibility.

Learn Fundamentals:
- DOM Structure
- Basic Tags
- SEO

{ 2 / 10 }
3. CSS

CSS is the language used to style a Web Page. CSS is easy to learn and will help you to create beautiful sites. Start with basics of making layouts and then move on to create responsive sites.

Learn Basics:
- Selectors
- Box Model
- Media Queries

{ 3 / 10 }
4. JavaScript

JavaScript is a programming language used to define certain function and handle change of the Web Page. JavaScript could control everything that runs on the web page.

Learn Basics:
- Syntax
- DOM Manipulation
- Events

{ 4 / 10 }
5. APIs

API are protocols that allow apps to communicate with each other via the internet.

Learning APIs can help:
- Increase development speed
- Reduce software cost
- Increase quality of the software

Visit @Rapid_API to get access to 35k+ APIs.

{ 5 / 10 }
6. Version Control

Git is a version control system that enables developers to track changes in their project. Git helps developers collaborate as a team.

Learn Fundamentals:
- Usage of Git
- Repo Hosting
- GitHub

{ 6 / 10 }
7. Package Managers

A package manager is a collection of software that automates different process of installing, uprading, configuring and so on.

Popular Package Managers:
- NPM
- Yarn

{ 7 / 10 }
8. Choose a JavaScript Framework

JavaScript frameworks are pre-writted JavaScript library to speed up frontend web development by starting from basic structures. Learning only one framework is necessary.

Popular JavaScript Frameworks:
- React
- Angular
- Vue

{ 8 / 10 }
9. Use CSS Frameworks

CSS frameworks are a library of pre-written CSS styles from which one can easily use it in their web page. CSS frameworks will make the development way faster and beutiful.

Popular CSS Frameworks:
- Tailwind
- Bootstrap
- Material Design

{ 9 / 10 }
10. Learn to Deploy

Here comes the final part. After coding a project, it is time to deploy it, so the world could see and use it. There are different sites which offer you free hosting and domain.

Popular Free Deploying Sites:
- Vercel
- Netlify
- Firebase

{ 10 / 10 }
πŸ₯³ Conclusion:

Congrats on being an aspiring fronted web developer. Building is the best way to learn. Start building projects and rock on.

Wishing you all success! πŸŽ‰
Thank you for reading!

I'm Savio πŸ‘‹
Helping you become an aspiring web developer. Daily threads on web development.

If you found this Thread useful:
- Follow me βœ…
- Retweet it
- Turn on the notifications

Thank you for the support friends! πŸ™

β€’ β€’ β€’

Missing some Tweet in this thread? You can try to force a refresh
γ€€

Keep Current with Savio Martin ⚑️

Savio Martin ⚑️ 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 @saviomartin7

9 Oct
Googling is a must have skill for developers.

Here are the pro tips to search on Google.
( A thread with examples πŸ§΅β†“ )
1. Asterisk *

Use * to fill in missing words or phrases.
πŸ”Ž Example Search: how to * in JavaScript

{ 1 / 10 } Image
2. Search:

Using search: you can search within a website.
πŸ”Ž Example Search: search:quora .com arrays

{ 2 / 10 } Image
Read 12 tweets
8 Oct
Platforms to Get Free 3D illustrations for your projects.

3d illustrations make your site stand out. Here are 10 popular platforms to get FREE 3d illustrations.

A thread πŸ§΅πŸ‘‡οΈ Image
1️⃣ AmritPal Design

In his website you can find all 3D illustrations, 3D design assets, and 3D avatars.

amritpaldesign.com πŸ”— Image
2️⃣ SALY

Saly is a completely FREE figma file with collection of high-quality 3D illustrations, hand-crafted and full of personalities.

figma.com/community/file… πŸ”— Image
Read 12 tweets
6 Oct
I gathered the tools for your next startup πŸ› οΈ

Save 100+ hours on researching.
(A thread🧡)
webflow.com πŸ”—

The modern way to build for the web with No Code.
Price: Free πŸ’Έ
spline.design πŸ”—

Amazing design tool for 3D web experiences.
Price: Free πŸ’Έ
Read 34 tweets
4 Oct
Free Web Development Resources ✨

Huge list of 180+ curated free resources for any project. Save 100+ hours on researching.

A thread πŸ§΅πŸ‘‡οΈ
Free Illustrations:

πŸ”₯ storytale.io
πŸ”₯ undraw.co/illustrations
πŸ”₯ icons8.com/illustrations
πŸ”₯ humaaans.com
πŸ”₯ blush.design
πŸ”₯ lukaszadam.com/illustrations
πŸ”₯ interfacer.xyz
Read 21 tweets
24 Sep
Platforms to get free illustrations for your next Web Development projects.

A Thread πŸ§΅πŸ‘‡οΈ
1️⃣ Story Tale

Free illustrations to make your project eye-catching with awesome characters.

storytale.io πŸ”—
2️⃣ Undraw

Beautiful illustrations that are customizable, ready to download in a single click.

undraw.co/illustrations πŸ”—
Read 12 tweets
23 Sep
Free Web Development Resources πŸ‘¨β€πŸ’»

180+ curated free resources for any topic. 99.8% don't know these amazing resources, must read thread!

A Mega Thread πŸ§΅πŸ‘‡οΈ
Free Learning Platforms:

✍️ w3schools.com
✍️ developer.mozilla.org/en-US/
✍️ freecodecamp.org
✍️ guru99.com
✍️ htmldog.com
✍️ geeksforgeeks.org
✍️ sololearn.com/home
✍️ javascript.info
Design Inspiration:

✨ dribbble.com
✨ awwwards.com
✨ dribbble.com
✨ muz.li
✨ onepagelove.com
✨ collectui.com
✨ land-book.com
✨ mobbin.design/browse/ios/apps
Read 25 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!

:(