Zeeshan-2k1 / WebDev-Syllabus

Web Development

---

Text Editor - VS Code (Preferred)

1. Front-End (8-10 weeks)

Basics

1. HTML : (Time: 1-2 weeks)

• W3Schools

• MDN Web Docs

• Video Lecture

• Tasks :

  1. A basic informative web page.
  2. Test

2. CSS: (Time 2-3 weeks)

• W3Schools

• MDN Web Docs

• Video Lecture

• Tasks :

  1. A Personal Portfolio
  2. A responsive informative webpage.
  3. Flex box
  4. Grid
  5. Test

Intermediate

1. HTML: (Time: 1-2 weeks)

• Topics
  1. <canvas> - W3Schools Video Lecture
  2. <iframe>- W3Schools

2. CSS: (1-2 weeks)

• Topics
  1. 3d Animations - Youtube Channel-1 Youtube Channel-2
  2. Bootstrap Docs Video Lecture
  3. Materialize CSS Docs Video Lecture
  4. Sass/Scss

Best Practices for HTML Best Practices for CSS

3. JavaScript : (Time: 2-4 weeks)

• W3Schools

• MDN Web Docs

• Video Lecture

• Tasks

  1. Utility Tool
  2. Games
  3. Hackerrank
  4. Quiz
  5. Test

• Important Topics

  1. jQuery
  2. Ajax
  3. Important Libraries :
     • Tilt.js
     • Animate.css
     • AOS
     • Chart.js

• VsCode Setup and Extensions

  • Live Server
  • Live Share
  • Bracket Pair Colorizer
  • EJS Language Support
  • ESlint
  • GitLens
  • Live Sass Compiler
  • Markdown Preview Enhancer
  • markdownlist
  • Prettier
  • Material Icon Theme Login and Setup VScode with your Github Account

Things to do before BackEnd Development

• Learn Git and Github Docs || Video Lecture
• Learn Markdown and JSON
• Learn about API and API calls
• Setup Linux and learn command line (Not Compulsory but highly recommended)

Tasks after FrontEnd

• Collab in real world projects.
• Maintain Club website and your own projects.
• Make at least 5 major projects.

2. Backend Development (Time 8-10 weeks)

Server Side Scripting

1. JavaScript (NodeJS):

• Installation Guide

• Docs

• Video Lecture

• Quick Guide

• Important Library

  • Passport Docs || Video Lecture
  • bcrypt Dcos || Video Lecture
  • Axios Docs || Video Lecture
  • Mongoose (for MongoDB |Guide Below |) Docs || Video Lecture
  • Sessions Docs || Video Lecture
  • MySql (|Guide Below |) Docs || Video Lecture

2. Python : You can choose between Djnago and Flask

• Django

  • Installation
  • Docs
  • Video Lecture

• Flask

  • Installation
  • Docs
  • Video

Important Topics

• Learn about Heruko and Netlify
• Learn Types of API
• Learn about How to make API?
• Learn about Database (A guide is given below)
• Learn about FAST API.

Tasks

• Make Full Fleged Webapps and deploy it.

DataBase (Time: 1 week)

1. MongoDB

• Installation
• Docs
• Video Lecture

2. SQL

• PostgreSQL

  • Installtion
  • Docs
  • Video Lecture

• MySql

  • Docs
  • Video Lecture

Extras

ReactJS

• Docs
• Video

Important Topics:

• React Class Components and Functional Components
• React Hooks
• React Route
• Advanced Concepts

Youtube Channels: Programming With Mosh || Traversy Media || Web Dev Simplified || freeCodeCamp.org || Online Tutorials || Clever Programmer || DesignCourse

Made by HnCC with ❤️