/zero-to-job-ready

Get job ready by learning these topics.

Get Job Ready in any domain by practicing these topics.

Domains -

  1. HTML and CSS
  2. Beginner Javascript
  3. Advanced Javascript
  4. React Js
  5. Node
  6. Git
  7. Github

The topics have a special focus on things actually used in real projects. After completing all topics in a domain you are capable of taking Freelance projects. Command line, Slack, Git and GitHub should also be used as these tools are a must know in software development.

Whenever I was learning, the biggest issue was correct progression. I wasn't sure if task I was choosing for myself was appropriete for me. This is a nice road map. Not too easy, and not impossible to do. - Paweł Kochanek

HTML and CSS

Topics to learn

  1. How to create html pages.
  2. Basic HTML tags.
  3. Styling HTML with inline styles.
  4. Embedded Stylesheet and External Stylesheet.
  5. CSS selectors.
  6. Basic CSS rules (background, color, margin, border, text-align, font-size etc.)
  7. px and percentage units.
  8. Chrome DevTools.
  9. Align boxes in same lines.
  10. Box Model
  11. Fluid Layout (percentage units)
  12. Centering boxes.
  13. HTML Forms and their styling.
  14. Flexbox and Viewport units.
  15. Responsive with media queries.
  16. Responsive with Bootstrap 4 Grid.
  17. Bootstrap 4 (button, grid, cards, forms)
  18. Bootstrap Modals, Tooltips and Carousel

Project Suggestions (from easy to hard)

  1. Resume Page
  2. Registration Form
  3. Landing Page with HTML and pure CSS.
  4. Landing Page with Bootstrap.
  5. Company Website with Landing Page, Pricing Page, Signup Page and Contact Page (with google maps)

Online Playground - Codepen

Beginner Javascript

Topics to learn

  1. Including scripts in html.
  2. Variables, Assignments and Print to Console.
  3. Conditionals and Loops.
  4. Event Handling with onClick.
  5. Select DOM nodes (querySelector, getElementById)
  6. Event Handling with addEventListener.
  7. Basic DOM manipulation (adding classes, innerHTML and modifying other attributes).
  8. Advanced DOM manipulation (insert new child nodes).
  9. AJAX requests
  10. Running local http server.
  11. Using third party libs (jQuery, slick carousel, fullpage etc.)
  12. Callbacks, setTimeout, setInterval and async js theory.

Project Suggestions (from easy to hard)

  1. Age Calculator
  2. Mouse tracker
  3. Calculator with one calculation at a time.
  4. Todo App with pure javascript.

Online Playground - JsBin

Advanced Javascript

Topics to learn

  1. Event Delegation
  2. Objects in Detail.
  3. concept of 'this' and quirks of this.
  4. Closures
  5. Making class like structures, using new , this and functions.
  6. Prototypes and Prototypical Inheritance.
  7. Develop own javascript library.
  8. es6
  9. Functional Javascript
  10. fetch api
  11. promises
  12. async/await
  13. Concurrency
  14. webpack
  15. javascript design patterns (revealing module and pub-sub a must).
  16. tools like eslint, jest and properly learning npm.
  17. Develop modern js lib and publish to npm.
  18. Factory Functions
  19. Regular Expressions
  20. Hoisting
  21. Event Loop

Project Suggestions (from easy to hard)

  1. Todo App
  2. Photo Editor
  3. Online Code Compiler

ReactJs

Topics to learn

  1. Development with CRA.
  2. Event Handling.
  3. Components in separate files.
  4. Concept of State.
  5. Concept of props.
  6. Class Components vs Functional Components.
  7. React libs (react-router)
  8. React Component Patterns
  9. Context API
  10. Authentication and Authorization.
  11. Redux (after making 2-3 projects with just react)

Project Suggestions (from easy to hard)

  1. Mouse Tracker
  2. Age Calculator
  3. Todo App
  4. Advanced Todo App with Login, Signup

Online Playground - CodeSandbox

Node

Topics to learn

  1. Running a javascript file in node.
  2. Making a basic HTTP server (just one GET request)
  3. Separating code in different files.
  4. HTTP server with express.
  5. Use Postman for testing APIs.
  6. Serving static files with express-static.
  7. CRUD APIs (array as in memory db)
  8. Mongoose for mongodb (use mlab for db instance)
  9. CRUD API with mongoose.
  10. Pragmatic REST APIs.
  11. Concurrency in Single Threaded Environment.
  12. Authentication with JWT.
  13. Authentication with express-session.
  14. OAuth using Passport.
  15. Jest for Unit Testing and API testing.
  16. How to make own CLI tool.
  17. Advanced pragmatic REST APIs with JOI validations.
  18. Read & Write Files.

Project Suggestions (from easy to hard)

  1. One page Todo Application. (Make api request from frontend)
  2. CLI tool to calculate age.
  3. CLI tool to simulate ls command and tree command.
  4. CLI tool to read package.json file of project and list all the different dependencies
  5. Anime Progress Tracker with templating (Multi Page and has Auth)
  6. API service with rate limiting and access token (jwt) verification

Online Playground - Glitch

Git

Topics to learn

  1. Make folder a git repo.
  2. Add and Commit files.
  3. Push commits to remote server like Github or Gitlab.
  4. Pull code from remote server.
  5. Fix merge errors.
  6. Create branches and switch from one to another.
  7. Use .gitignore

Github

Topics to learn

  1. Connect git repo to github.
  2. Clone github repo.
  3. Push to github.
  4. Markdown and proper Readme files.
  5. Create issues.
  6. Make Pull requests.
  7. Fork repos and do Open Source Contributions.