Resources Hub

Study guides, interactive roadmaps, and custom cheat sheets to level up your engineering skills.

📄

4

Static Cheat Sheets

🗺️

2

Interactive Roadmaps

💾

0

Your Uploaded Files

Quick Resource Finder

🔍
Cheatsheet

JavaScript ES6+ Cheatsheet

Arrow functions, destructuring, promises, classes, modules and new array methods.

Open Sheet →
Roadmap

Frontend Developer Roadmap

Interactive step-by-step roadmap from HTML/CSS to Frameworks and Deployments.

View Roadmap →
Roadmap

Backend Developer Roadmap

Master servers, databases, APIs, authentication, microservices, and system design.

View Roadmap →

JavaScript ES6+ Reference Sheet

Essential syntax patterns, promises, and standard modern JS concepts.

Arrow Functions & Lexical scoping

// Traditional Function
function multiply(a, b) {
  return a * b;
}

// Arrow Function (implicit return)
const multiply = (a, b) => a * b;

// With Lexical 'this'
const calculator = {
  factor: 2,
  multiplyArray(arr) {
    return arr.map(val => val * this.factor); // 'this' correctly refers to calculator
  }
};

Destructuring & Spread Operator

// Object & Array Destructuring
const user = { name: 'Ayush', role: 'AI Developer', location: 'India' };
const { name, role } = user;

const colors = ['red', 'gold', 'black'];
const [primary, secondary] = colors;

// Spread & Rest Operator
const updatedUser = { ...user, active: true };
const sumAll = (...args) => args.reduce((acc, curr) => acc + curr, 0);

Promises & Async/Await

// Creating a promise
const fetchData = (url) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(`Data from ${url}`), 1000);
  });
};

// Async / Await with Error Handling
async function loadDashboard() {
  try {
    const result = await fetchData('https://api.ayushgautam.co.in/status');
    console.log(result);
  } catch (error) {
    console.error('Fetch failed:', error);
  }
}

HTML5 & CSS3 Flexbox / Grid Reference

Layout systems cheat sheet for building responsive components quickly.

CSS Flexbox Properties

.flex-container {
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse;
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
  align-items: stretch | flex-start | flex-end | center | baseline;
  flex-wrap: nowrap | wrap | wrap-reverse;
}

.flex-item {
  flex-grow: 1; /* relative grow ratio */
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

CSS Grid Essentials

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-template-rows: auto 1fr auto;
  gap: 2rem; /* row-gap and column-gap */
}

.grid-item {
  grid-column: span 2; /* span across columns */
  grid-row: 1 / 3; /* start at row line 1, end at line 3 */
}

Python Advanced OOP Reference

Classes, magic methods, inheritance, and decorators.

Decorators & Magic Methods

class CustomDeveloper:
    def __init__(self, name: str, skills: list):
        self.name = name
        self.skills = skills
        
    # Representation Magic Method
    def __repr__(self):
        return f"Developer(name={self.name}, skills={self.skills})"

    # Custom Decorator for execution tracking
    @staticmethod
    def developer_check(func):
        def wrapper(*args, **kwargs):
            print("[System] Checking developer credentials...")
            return func(*args, **kwargs)
        return wrapper

    @developer_check
    def deploy_app(self):
        return f"{self.name} deployed the code successfully!"

List Comprehensions & Generator expressions

# Basic List Comprehension
squared_evens = [x**2 for x in range(10) if x % 2 == 0]

# Dictionary Comprehension
skill_ratings = {"Python": 9.5, "JavaScript": 8.5, "Docker": 7.5}
expert_skills = {k: v for k, v in skill_ratings.items() if v >= 8.0}

# Generator Expression (Memory Efficient)
large_generator = (n ** 2 for n in range(1000000))
# Access via next(large_generator) or loop

Git & GitHub Cheat Sheet

Standard workflow commands for version control management.

Essential Git Commands

# Initialize repository
git init

# Clone from remote server
git clone https://github.com/Ayushgautam16/repo-name.git

# Stage changes & commit
git add .
git commit -m "feat: implement resources page layout"

# Push to origin
git push origin main

# View status & logs
git status
git log --oneline -n 10

Branching & Merging

# Create and switch to new branch
git checkout -b feature/interactive-dashboard

# View local branches
git branch

# Merge a branch into current branch
git merge feature/interactive-dashboard

# Delete branch
git branch -d feature/interactive-dashboard

Stashing & Amending

# Temporarily save work (dirty working directory)
git stash

# Pop saved stash work
git stash pop

# Amend last commit message
git commit --amend -m "Corrected description details"
1

HTML & CSS Basics

Learn semantic layouts, HTML tags, CSS selectors, box model, and responsiveness (Flexbox, Grid, Media queries).

2

JavaScript Fundamentals

Master syntax, variables, scoping, array methods, DOM manipulation, promises, async/await, and APIs.

3

Git & GitHub (Version Control)

Understand commit workflows, branching, resolving merge conflicts, pulling/pushing, and collaborative GitHub tooling.

4

Package Managers & Build Tools

NPM or Yarn for module management. Transpilers like Babel, bundlers like Vite, and CSS frameworks (Tailwind).

5

Frameworks (React, Next.js, etc.)

Choose a framework to study. Master routing, state management (Redux, Context API), lifecycle components, and hooks.

1

Language Choice (Python, Node.js, Go)

Master standard library features, asynchronous programming patterns, memory management, and typing models.

2

Database Systems

Learn Relational databases (PostgreSQL, MySQL) vs. NoSQL (MongoDB, Redis). Study indexing, querying, transactions, and ORMs (Prisma, SQLAlchemy).

3

API Development

Build scalable architectures with RESTful frameworks, GraphQL, or gRPC. Master request validation, middleware pipelines, and controllers.

4

Security & Auth Systems

Implement secure workflows using JWT authentication, OAuth 2.0, bcrypt hashing, CORS protocols, and SQL injection prevention.

5

Testing, CI/CD & Hosting

Write unit and integration tests. Set up automated test pipelines in GitHub Actions. Deploy to services like AWS, Netlify, or Docker containers.

Upload Study Materials

Save roadmaps, cheat sheets, or notes locally in your browser's persistent storage.

☁️

Drag and drop your file here, or browse

Supports PDF, Images, JSON, TXT (Max 5MB)

My Uploaded Resources

All files saved here will persist inside this browser instance.

📂

No custom study files uploaded yet.

Fill out the form on the left to add your cheatsheets or roadmaps!

💡 Developer Tip

How to Permanently Embed These Resources Into Code

Since this portfolio is built as a static site hosted on platforms like Netlify, uploads using the form on this page are stored in your browser's local sandbox (LocalStorage).

To make these files available to **everyone who visits your site**:

  1. Place your PDF, image, or study files inside the project's folder structure (e.g. images/resources/ or create a new directory).
  2. Open resources.js in your editor and look for the static resources array variable.
  3. Add a new JSON object pointing to the file path of your newly added asset. Run git commit and push it to your repository!