> I mentored a 22-year-old who received a remote job offer of a package of $40K annum for a Junior Full-Stack Web Developer position. It took him 3 months. > > 20+ key points he followed to achieve this ↓

​## 1. 不要花过多时间找资源

I suggested he should follow specific resources for learning instead of too many.

Resources include books, articles, and video tutorials.

⬙ Few such resources are ❍ javascript. info ❍ freeCodeCamp ❍ Geeks 4 Geeks ❍ Programiz

​## 2. 不再比较学位

⬘ During our first interaction, he stated "I am from a Tier-3 College".

⬙ My suggestions ❍ Stop demeaning yourself ❍ Don't waste time on what didn't happen ❍ Invest your time in learning whatever missed during graduation

​## 3. 选择正确的职业道路

⬘ His major was not Computer Science. But during academics, he learned a few computer subjects.

⬙ I evaluated his skills and, suggested going for Web Development. Because of ❍ Good artistic/visual skill ❍ Average analytical skill

​## 4. 在练习中学习

⬘ Learning by reading or, watching puts a concept in your brain for a few moments. ⬗ But by practicing, the concept remains forever. ⬙ During studying, try to form questions yourself.

​## 5. 避免教程地狱以及FOMO（害怕失去）

⬘ Do not watch excess video resources. Read from blogs and, documentation as well. ⬙ Don't change your path with a FOMO (Fear of Missing out). Give your best whichever path you have chosen.

​## 6. 尽早使用 Git

​## 7. 简单的 HTML & CSS

➊ HTML Topics (Basics)

➀ HTML Page Structure ➁ Elements, Tags & Attributes ➂ Empty/Void Element ➃ Heading Elements h1 to h6 ➄ Paragraph Elements p, br etc. ➅ Container Elements div, span etc. ➆ Form Based Elements form, input, textarea, select, button, datalist etc. ➇ Text Semantics b, i, u, sub, sup, small, strong, em, q, abbr etc. ➈ Text Blocks blockquote, address ➉ Hyperlink ➀➀ Image alt, max-width, aspect-ratio ➀➁ Lists ordered, unordered ➀➂ Table ➀➃ Semantic Elements header, footer, nav etc ➀➄ id and, class attributes ➀➅ Including Stylesheets ➀➆ Including JavaScript Files ➀➇ Setting FavIcon ➀➈ Setting Title

➋ CSS Topics (Basics)

➀ Box Model ➁ selectors and, combinators ➂ border, margin, padding and, outline ➃ border-radius ➄ background ➅ colors simple, gradient, alpha transparency ➆ fonts ➇ display block, inline, inline-block etc. ➈ position relative, absolute etc. ➉ dimension top, left, height, width, max-width, aspect-ratio etc. ➀➀ float ➀➁ overflow ➀➂ z-index

➌ CSS Topics (Medium)

➀ Specificity ➁ pseudo classes, elements ➂ opacity ➃ filter ➄ clip-path ➅ mask ➆ transform ➇ media ➈ Flex Box Layout ➉ Grid Layout ➀➀ animation

➍ HTML Topics (Medium)

➀ figure ➁ audio ➂ video ➃ map ➄ object ➅ embed

➎ Advanced Topics

➀ SEO ➁ Accessibility ➂ Responsiveness ➃ Performance

✷ Notes

⬘ You can learn HTML & CSS in parallel. ⬗ For each HTML element, play with all its CSS properties. ⬙ The best approach would be to build a sample project along with learning. ⬖ Do not stop after this. At some point, learn JavaScript.

🏁 What's next?

⬘ You just built static web pages. You have to add behaviour to make it dynamic. Learn JavaScript (ideally when you are at Medium stage).

⬙ Learn about ❍ DOM ❍ Event Handlers ❍ AJAX ❍ Fetch API

​## 8. JS 基础

💭 Before you go through this Thread

⬘ It's not going to be like typical roadmap. ⬖ No timelines are attached. Take your own time. Do not rush. Nothing gonna change if you finish 1 week or, 1 month late. ⬙ This is no spoon feeding. You have to practice hard to learn.

➊ Variables and, Datatypes

➀ Datatypes

• Primitives
• Literals ➟ Numeric ➟ Boolean ➟ String

➁ Variable ➟ Naming ➟ Declaration ➟ Assignment

✧ Special Topic ➟ Type Coercion/Conversion

➋ Operators

➀ Arithmetic Operators ➁ Comparison Operators ➂ Logical Operators ➃ Assignment Operators ➄ Typechecking Operators ➅ Bit-wise Operators (Optional) ➆ Ternary Operator

➌ Syntax

➀ Condition ➟ if else ➟ switch case

➁ Loop ➟ while ➟ do while ➟ for

➍ Function

➀ Function Declaration ➁ Function Expression ➂ Anonymous Function ➃ Arrow Function

✧ Special Topic: ➟ Variable Scope ➟ Hoisting ➟ Callback Function ➟ Closure

➎ Array

➀ Array Literal ➁ Array Creation ➂ Array.length ➃ Array methods ➄ Array Iteration

✧ Special Topic: ➟ Array Destructuring ➟ Array Spreading ➟ Array Sorting

➏ String

➀ String Literal ➁ String.length ➂ String methods

✧ Special Topic: ➟ String Template Literal

➐ Object

➀ Object Literal ➁ Accessing Object Properties ➂ Iterating through Objects (for…in)

✧ Special Topic: ➟ Object Destructuring ➟ Object Spreading

➑ Special Objects

➀ Number ➁ Boolean ➂ Set ➃ Map ➄ Math ➅ Date ➆ <mark>console</mark>

➒ JS Modules (ECMAScript Modules)

➀ import ➁ import {} ➂ export ➃ export default

➓ What next?

Based on what career you are choosing, you may have to study some (or, all) of below

➀ Async ➟ Promise API ➟ await async ➁ Object Oriented ➟ Class ➟ Prototype ➂ DOM ➃ Fetch API ➄ Client-side Storage ➟ Cookies ➟ Web Storage ➟ IndexedDB ➟ Cache API

🏁 Goal Post

Remember, it's not a competition that you have to finish 🥇🥈🥉

⬖ Learn with your own pace ⬘ Do practice for each lesson ⬗ Keep note of whatever you feel important ⬙ Save all your data in a safe storage (Git storage is preferred)

​## 9. 构建一些小项目

⬘ Try to build small and, simple projects initially to make your fundamentals strong.

⬙ Get some small project ideas from here: https://twitter.com/swapnakpanda/status/1526906873831915520

​## 10. 学习 TypeScript

​## 11. 代码模块化

⬘ Learn to develop modular type code.

⬗ Instead of developing a monolithic huge code, try to segregate them into multiple pieces.

⬙ Smaller units are easy to maintain and, help in reducing network bandwidth.

​## 12. 选择库、框架学习

​## 13. 解决问题的技能

⬘ Full-Stack developers require to possess problem solving skills.

⬗ I told the knowledge of DSA is very important and, can be learned by only practicing.

⬙ I suggested starting with simple data structures and, algorithms.

https://twitter.com/swapnakpanda/status/1538869285522505728

​## 14. Back-End with Node.js & Express

​## 15. Database with MySQL（MariaDB） & MongoDB

​## 16. 构建全栈项目

⬘ Using all the skills you achieved, build a few sample projects.

⬗ Host them using some free services like Vercel or, Netlify.

⬙ These projects would evaluate your skills. So, keep on improving them.

​## 17. 个人主页

A portfolio website is like a passport. Recruiters could find a lot of details from this about you.

❍ Tell about yourself ❍ Brief about your projects, achievements ❍ Share your GitHub link ❍ Make it responsive ❍ Make it fast

​## 18. 打造简历

A resume is one more important thing like the Portfolio website.

❍ Have a nice presentation ❍ Keep it short 'n' simple ❍ Use keywords like "Full Stack", "JavaScript", "React", "MERN" for more visibility ❍ Do not use too many fonts

​## 19. 构建联系/链接

⬘ You may possess 1000 skills, but all in vain if you don't have many connections. Connections provide opportunities. ⬗ Using online mode, you can build connections rapidly. ⬙ Join one or more social media. Connect with people. Build relations.

​## 20. 准备好接受失败

They said, "Failures are pillars of Success".

⬘ You may fail badly during the first few interviews. ⬗ Without getting demotivated, learn what recruiters are expecting. ⬙ Improve your skills, resume, portfolio, and projects.