90 Days are all you need to get a web developer job
This guide is your step-by-step plan to getting real at learning web development and getting a real job in 3 monthes.
# Roadmap
- Roadmap
- Hold yourself accountable
- Step 1: Do these things consistently
- Step 2: Learn the absolute basics
- Step 3: Create while you learn CSS
- Step 4: Shortcut your CSS Journey
- Step 5: Javascript
- Step 6: Shortcut your JS Journey
- Step 7: Database
- Step 8: Build this one project
- Step 9: Build your website/resume
- Step 10: Look for entry level jobs
- Congratulations 🔥🎉🥳
# Hold yourself accountable
Share and document your progress anywhere, on facebook, twitter or your blog using #90DaysChallenge.
Hold yourself accountable that'll work for 12 hours a day for 90 days!!
# Step 1: Do these things consistently
If you're serious let's start with the less relative things yet effective:
- 🛌 Sleep at least 7 hours a day and wake up early typically 6 AM everyday.
- 🥤 Drink a lot of water. Your brain is swimming in water and needs a lot of it to function properly.
- 🍎 Have natural sugars like fruits.
- 🤸♂️ Do some light exercises in the morning.
- 🔥 Most importantly you have to work at least 12 hours a day for 90 days and take Fridays off.
# Step 2: Learn the absolute basics
Before diving into HTML/CSS/JS and such you should learn the absolute basics first:
# Days 1 - 2 : Web Concepts
Tip: Don't just watch 45 mins videos, instad read some blog posts and grasp the general concepts.
- 🌐 What is web?
- 🖱️ What is a HTTP request?
- ✅ What is HTTP methods and headers?
- ✅ How the browser works?
- 🧱 What is HTML and how it works?
# Days 3 - 5: HTML Basics
- 🧱 Learn HTML basics including. (what is the difference between form id and class).
- 🧱 Why some HTML elements doesn't have closing tag?
- 🌳 Basics of HTML DOM tree. (Important!)
# Apply
🏗️ Build simple HTML page include all of what you have learned in it.
# Days 6 - 10: CSS Basics
- ✅ Learn VS Code basics. A basic crash course will do.
- ✅ Learn about Chrome dev-tools.
- 🎨 What is CSS?
- 🎨 CSS basics.
- 🎨 What is CSS media query?
- 🎨 CSS selectors.
- 🎨 CSS basic best practices.
# Step 3: Create while you learn CSS
# Days 11 - 12: Flexbox
- 📶 Learn Flexbox from wesbos's https://flexbox.io or any tutorial.
# Apply
🏗️ Build Google index page and the search results page again using flexbox.
# Days 13 - 14: Design your first page
# Apply Continued from previous day
🏗️ Rebuild these 2 landing pages or any 2 landing pages of your choice:
Using CSS's flexbox and html only, you may skip interactive or too complex parts in these pages for now and focus more on mocking them as accurate as possible.
# Days 15 - 16: CSS Grid
- 🎨 What is CSS grid?
- 🎨 Difference between grid and flexbox?
- 🎨 CSS grid basics.
🏗️ Build this page using css grid and flexbox:
- https://marvel-grid.webflow.io (opens new window) (Important!)
# Step 4: Shortcut your CSS Journey
# Day 17: Learn a CSS framework
- 🎨 What is a CSS framework?
- 🎨 Why do we need a framework?
- 🎨 What is Tailwind css?
- 🎨 What is uitlity first approach?
- 🎨 Why we design for mobile first then for large screens?
# Days 18 - 22: Learn TailwindCSS Basics
- 🎨 Tailwind CSS basics.
- 🎨 Read https://tailwindcss.com (opens new window) docs.
- 🎨 Watch Tailwindcss (opens new window) youtube channel.
🏗️ Build the 2 landing pages you have built before in Days 10 - 11. Only this time using only Tailwind css Do not use vanilla css.
💥 After this point you'll be either burnt out, gave up and fail or you have the confidence to build your personal website. Don't.
let's move on...
# Step 5: Javascript
# Day 23-25: Before Learning Javascript
- 🔌 What is Javascript?
- 🔌 Why do we need it?
- 🔌 How browsers read and parse javascript?
- 🔌 Where do javascript works and run?
- 🔌 Why there's so many javascript developers?
- 🔌 Why do we need a javascript framework?
- 🔌 What is modals?
# Days 25 - 35: Learn Javascript Basics
- 🔌 Javascript basics.
- 🔌 Javascript DOM manipulations.
# Days 26 - 30: Apply what you learned on javascript
- 🏗️ Build Dropdown menus, modals, tab navigation using only vanilla javascript.
- 🎨 Style them using Tailwindcss ☝
# Days 36 - 41: Advanced Javascript
- 🔌 #javascript Event Listeners.
- 🔌 ES6 features and syntax.
- 🔌 Promises, Async/Await.
- 🔌 "this" scopes.
- 🔌 Import/Export modules.
# Step 6: Shortcut your JS Journey
# Days 42 - 44: Learn a minmal javascript framework
- 🔌 What is a javascript framework?
- 🔌 Why do we need a framework?
- 🔌 Introduction to Alpine.js from https://github.com/alpinejs/alpine (opens new window)
🏗️ Build models, menu drop-downs, taps and basic navigation using Alpinejs
# Days 45 - 50: Apply what you learned
🏗️ Rebuild these websites using tailwindcss and alpinejs.
Twitter (opens new window) home page with the interactive parts such as when you hover on account image and card pop-up.
Spotify (opens new window) web Player page with some of the interactive parts.
# Days 51: What is Vuejs?
- ⚡️ What is vuejs?
- ⚡️ vuejs vs alpinejs.
- ⚡️ Introduction to reactivity.
- ⚡️ vuejs use cases.
- ⚡️ Try some examples from https://vuejs.org (opens new window)
# Days 52 - 59: Vuejs Basics
- ⚡️ Vuejs crash course (basics)
- ⚡️ Vuejs advance course
- ⚡️ Build simple Todo list app
- ⚡️ Build any simple API-based fetch app like wether app
- ⚡️ Style your apps using Tailwindcss
# Step 7: Database
# Day 60: Database concepts
- 🛢️ What is database?
- 🛢️ Why we need database?
- 🛢️ SQL vs NoSQL?
- 🛢️ What is sqlite databases?
- 🔥 What is firebase?
- 🔥 Introduction to Firebase.
# Days 61-70: Apply On Vuejs and firebase
🔥 Build Todo app using vuejs/tailwindcss/firebase.
# Step 8: Build this one project
# Days 70 - 85
This Step is essential for getting the job
- 🏗️ Build this project (bug tracker app) using all of the technology you have learned.
- 🛢️ Database/Backend using Firebase.
- 🎨 Frontend using vuejs and Tailwindcss.
# Step 9: Build your website/resume
# Days 85 - 89
- 🏗️ Build a simple CV/website using tailwind css to show case all of the website you have done earlier 🔥
# Step 10: Look for entry level jobs
# Day 90: Your last day must worth a while
Use this day to look on LinkedIn, Twitter or any job directory for an entry-level job here's some links that might help you:
# Congratulations 🔥🎉🥳
You just scratched the surface of the frontend development world, still you can land an intern/entry-level job.
Use the salary and the time to continue learning and evolving to the next level.