Skip to content

Instantly share code, notes, and snippets.

@snghnishant
Last active November 9, 2021 16:49
Show Gist options
  • Save snghnishant/826fb1d4ea4931d266397f6db87bab8e to your computer and use it in GitHub Desktop.
Save snghnishant/826fb1d4ea4931d266397f6db87bab8e to your computer and use it in GitHub Desktop.
Deep dive into Web Development (MERN Stack)

Web Designing

  1. Basics of UI/UX with Figma/AdobeXD/Web Flow and Common Web Design Trends
  2. Difference between Wireframes, Mockups, Prototype in UI designing.
  3. HTML5
  4. CSS3
  5. Advanced CSS
  • CSS Functions
  • Flexbox
  • Gridbox
  • CSS Variables
  • Animations and Transitions
  1. Responsive web design
  • Relative Sizing units
  • Device Breakpoints
  • Media Queries
  1. Advance HTML
  • HTML Audio
  • HTML Video
  • HTML Canvas
  • Accessibility
  1. Version control systems (Git and Github, Bitbucket)
  2. Deploying a static website (Netlify, Github Pages).
  3. CSS Framework and Libraries - Bootstrap/Tailwind/Bulma/Material CSS
  4. Miscellaneous
  • Utilising Browser DevTools
  • Utilising your IDE (Recommended - VSCode/Atom)

Front-End Web, Mobile Web Development

  1. Modern JavaScript ES5+
  2. DOM and BOM Manipulation in Vanilla-js
  3. JavaScript Request (XHR, AJAX)
  4. Nodejs & NPM Basics
  5. Demistifying Browser DevTools
  6. SASS (CSS-in-JS)
  7. Web Components
  8. Browser APIs
  9. Advance Topics
  • URL encoding
  • Shadow DOM
  • Virtual DOM
  • Data binding
  • Reactive UI
  • Router and SPA Implementation
  1. Core JavaScript topics
  • Callback and Callback Hell
  • Scopes
  • Currying
  • Global and Execution context
  • Hoisting
  • Event loop
  • Closures
  • Data Binding and Function Binding
  • Debouncing vs Throttling
  • Event Bubbling vs Tickling... More at The Modern JavaScript Tutorial
  1. Frontend framework/Libraries (pick any one, I'm using React here)
  1. Web page optimization and SEO
  2. Progressive Web Apps
  3. AMP
  4. Miscellaneous
  • Web Hooks
  • Static site generator
  • Consuming GraphQL APIs
  • JAMStack
  • Webpack
  • Firebase Integration
  • Serverless and Keep learning...

Architecture Patterns

  • Monoliths
  • Micorservices
  • Client server tier architecture
  • CDNs
  • Observer, Publisher subscriber

Server Side Web Development with JS

  1. JavaScript and Web fundamentals (Client-Server Architecture)
  2. NPM and Package Management
  3. Node.js Fundamentals link
  4. Database (Good to start with)
  • Database fundamentals
  • SQL Based (MySQL / PostgreSQL)
  • NoSQL Based (MongoDB)
  1. MVC and REST vs SOAP architecture pattern
  2. Express.js
  3. Template engine for server side rendering
  4. REST API development, Performing CRUD Operations
  5. Linting and enforcing code styling using ESLint
  6. Middlewares, and Sessions
  7. Authentication, Authorization methodologies
  • Cookie Based
  • JWT Token Based
  • OAuth, OAuth 2.0
  • 2-factor and multi-factor/ SSO
  1. Image/File storage with download/Upload functionalities
  2. Payment Gateway & other 3rd party service integrations (Checkpoint - Junior Backend developer)
  3. Testing
  • Unit testing for controllers and Virtual using Mocha/ Jest
  • Automated API testing using K6 and Postman
  1. Logging and log collection
  2. Mailing service integration
  3. Web automation using Puppeteer
  4. Writing Crons schedulers (Checkpoint - Mid level backend developer)
  5. Docker and Dockerizing Nodejs apps
  6. CI/CD and GitOps
  7. Integrating Observability tools for Server health monitoring (Signoz/Prometheus+Grafana)
  8. Server crash reporting/alert integrations (Slack/Emails)
  9. Caching and In-memory DB
  • Redis
  • Memcached
  1. Web Sockets and data streaming
  2. Messaging Queues and Message brokers
  3. Web Server - Nginx/Apache
  4. Web Security and Best development practices (Checkpoint - Senior level backend developer)
  5. DevOps
  • Docker
  • Docker Swarm/Kubernetes
  • Load Balancing
  • Cloud Platform (IaaS/PaaS) - GCP, Azure, AWS, Digital Ocean, Linode, Heroku...
  1. Performance engineering - Optimizing for scale
  2. Miscellaneous tools
  • Keystone.js / Strapi
  • GraphQL Server
  • Link preview (open graph protocol)
  • CMS (Ghost)
  • Frappe
  • CRMs
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment