Developer Toolkit.

Your standardized workspace for building, testing, and shipping modern web applications. From reference to reality.

JS Playground

Quick access to JS Playground tools and reference.

DOM Reference

Quick access to DOM Reference tools and reference.

HTML Reference

Quick access to HTML Reference tools and reference.

CSS Reference

Quick access to CSS Reference tools and reference.

Flexbox

Quick access to Flexbox tools and reference.

CSS Grid

Quick access to CSS Grid tools and reference.

ES6+ Modern JS

Quick access to ES6+ Modern JS tools and reference.

TypeScript

Quick access to TypeScript tools and reference.

Node.js

Quick access to Node.js tools and reference.

Express.js

Quick access to Express.js tools and reference.

MongoDB

Quick access to MongoDB tools and reference.

Git & GitHub

Quick access to Git & GitHub tools and reference.

Launch Center

Quick access to Launch Center tools and reference.

Project Planning

Quick access to Project Planning tools and reference.

Daily Planner

Quick access to Daily Planner tools and reference.

Resources

Quick access to Resources tools and reference.

Design Tools

Quick access to Design Tools tools and reference.

Project Ideas

Quick access to Project Ideas tools and reference.

AI Prompts

Quick access to AI Prompts tools and reference.

JS Playground

Reference and best practices for JS Playground.

Live Editor

Input Code

// Try some JavaScript!
const greeting = "Hello CodeVent!";
console.log(greeting.toUpperCase());

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log("Doubled:", doubled);

Console Output

Click 'Run Code' to see results...

Variables & Types

const name = "Emmanuel";  // Can't reassign — use by default
let   count = 0;           // Can reassign
// var — avoid in modern JS

// Types: string | number | boolean | null | undefined | array | object
Array.isArray([])  // true
typeof "hello"     // "string"
x === null         // null check

Functions

// Declaration
function greet(name) { return `Hello, ${name}!`; }

// Arrow (same but concise, no own 'this')
const greet = (name) => `Hello, ${name}!`;

// Default + rest params
const greet = (name = "Dev") => `Hello, ${name}!`;
const sum   = (...nums) => nums.reduce((a, b) => a + b, 0);

Array Methods (Most Important)

Method	What it does	Returns
.map(fn)	Transform each item	New array
.filter(fn)	Keep items that pass test	New array
.reduce(fn, init)	Collapse to single value	Any value
.find(fn)	First item that passes	Item or undefined
.some(fn)	Any item passes?	Boolean
.every(fn)	All items pass?	Boolean
.includes(val)	Contains value?	Boolean
.forEach(fn)	Loop (no return value)	undefined

Fetch & Async/Await

async function getData(url) {
  try {
    const res  = await fetch(url);
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const data = await res.json();
    return data;
  } catch (err) {
    console.error("Failed:", err);
  }
}

DOM Reference

Reference and best practices for DOM Reference.

Selecting Elements

document.querySelector('.btn')         // First match (returns element or null)
document.querySelectorAll('.card')     // All matches (NodeList)
document.getElementById('nav')        // By ID (fastest)

Changing Content, Attributes & Classes

const el = document.querySelector('#title');
el.textContent = 'New Title';    // Safe — no HTML parsing
el.innerHTML = '<b>Bold</b>';   // Parses HTML (XSS risk with user input)
el.setAttribute('aria-label', 'Close');
el.style.display = 'none';

el.classList.add('active');
el.classList.remove('hidden');
el.classList.toggle('open');
el.classList.contains('loading'); // true/false

Events

el.addEventListener('click', (e) => {
  e.preventDefault();   // Stop default (links, form submit)
  e.stopPropagation();  // Stop bubbling
  console.log(e.target); // Clicked element
});
// Common: click, dblclick, keydown, keyup, input, change, submit, focus, blur, scroll

Creating & Removing Elements

const div = document.createElement('div');
div.textContent = 'Hello';
div.classList.add('card');
parent.appendChild(div);   // Add at end
parent.prepend(div);        // Add at start
el.remove();                // Remove element

HTML Reference

Reference and best practices for HTML Reference.

Document Structure

<!-- Standard HTML5 Boilerplate -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Page description here">
  <title>Page Title</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- Content here -->
  <script src="script.js" defer></script>
</body>
</html>

Semantic Elements

Element	Purpose	When to use
<header>	Intro content, logos, nav	Top of page or section
<nav>	Navigation links	Main or secondary navigation
<main>	Primary page content	Once per page
<section>	Thematic grouping	Related content with a heading
<article>	Self-contained content	Blog posts, news items, cards
<aside>	Tangential content	Sidebars, related links
<footer>	Closing content	Copyright, links, credits
<figure>	Media with caption	Images, diagrams, code blocks

Links, Images & Forms

<!-- Link (always use noopener for external) -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Text</a>

<!-- Image with lazy loading -->
<img src="image.jpg" alt="Descriptive text" width="400" height="300" loading="lazy">

<!-- Accessible form -->
<form action="/submit" method="POST">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Submit</button>
</form>

Common Mistakes

Using <div> for everything — use semantic elements instead
Missing alt text on images — breaks accessibility and SEO
Opening external links without rel="noopener noreferrer"
Multiple <h1> tags on one page — only one per page
Forgetting the viewport meta tag — breaks all mobile layouts
Not associating labels with inputs — breaks screen readers

Best Practices Checklist

Include DOCTYPE and lang attribute
Add meaningful alt text to every image
Use semantic HTML over generic divs
Associate every label with its input via for/id
Load scripts with defer attribute
Add loading="lazy" to below-the-fold images

CSS Reference

Reference and best practices for CSS Reference.

Selectors

Selector	Targets	Example
*	All elements	* { box-sizing: border-box; }
.class	Class name	.btn { padding: 8px 16px; }
#id	Element ID	#nav { position: fixed; }
A B	B descendant of A	nav a { color: white; }
A > B	Direct child B of A	ul > li { list-style: none; }
A + B	B immediately after A	h2 + p { margin-top: 0; }
[attr]	Has attribute	[type="email"] { border: 1px; }
:hover	Mouse over	a:hover { opacity: 0.8; }
:focus	Keyboard focus	input:focus { outline: 2px solid blue; }
:nth-child(n)	Nth child	li:nth-child(odd) { background: #f5f5f5; }
::before / ::after	Pseudo-elements	.icon::before { content: '★'; }

Box Model & Units

/* Always set this globally */
* { box-sizing: border-box; }

.box {
  width: 300px;      /* content area */
  padding: 20px;    /* inside the border */
  border: 2px solid #333;
  margin: 16px;     /* outside the border */
}

/* Units: px (fixed) | % (parent) | rem (root font) | em (current font)
         vw/vh (viewport) | clamp(min, preferred, max) */

CSS Variables

:root {
  --color-primary: #5b4cff;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --space-md: 16px;
}
.button {
  background: var(--color-primary);
  padding: var(--space-md);
}

Transitions & Animations

.btn { transition: background 0.2s ease, transform 0.15s ease; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card { animation: fadeIn 0.3s ease forwards; }

💡

Use rem for font sizes (respects browser zoom), em for padding that should scale with font size, and px for borders and shadows.

Flexbox

Reference and best practices for Flexbox.

Container Properties

.container {
  display: flex;
  flex-direction: row;          /* row | row-reverse | column | column-reverse */
  flex-wrap: wrap;              /* nowrap | wrap | wrap-reverse */
  justify-content: space-between; /* main axis */
  align-items: center;          /* cross axis */
  gap: 16px;
}

justify-content Values

Value	Effect
flex-start	Items at start (default)
flex-end	Items at end
center	Items centered
space-between	First/last at edges, equal space between
space-around	Equal space around each item
space-evenly	Equal space everywhere including edges

Item Properties

.item {
  flex: 1;             /* grow shrink basis shorthand */
  flex-grow: 1;        /* how much to grow */
  flex-shrink: 0;      /* 0 = don't shrink */
  flex-basis: 200px;   /* starting size */
  align-self: center;  /* override align-items for this item */
  order: -1;           /* visual reorder */
}

Common Patterns

/* Perfect center */
.center { display: flex; justify-content: center; align-items: center; }

/* Navbar */
nav { display: flex; justify-content: space-between; align-items: center; }

/* Card grid that wraps */
.cards { display: flex; flex-wrap: wrap; gap: 16px; }
.card  { flex: 1 1 280px; } /* min 280px, grows to fill */

/* Push last item to far right */
.row .last-item { margin-left: auto; }

💡

Memory trick: justify-content = main axis (same direction as flex-direction). align-items = cross axis (perpendicular to flex-direction).

CSS Grid

Reference and best practices for CSS Grid.

Container Setup

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);    /* 3 equal columns */
  grid-template-rows: auto 1fr auto;       /* header, main, footer */
  gap: 24px;                               /* row and column gap */
  column-gap: 16px; row-gap: 24px;        /* or separate */
}

Key Functions & Units

Syntax	Meaning
fr	Fraction of remaining space
repeat(3, 1fr)	3 equal columns
minmax(200px, 1fr)	Min 200px, max fills remaining
auto-fill	As many columns as fit
auto-fit	Same but collapses empty tracks

Placing Items & Named Areas

.item { grid-column: 1 / 3; grid-row: 2 / 4; }  /* by line numbers */
.wide { grid-column: span 2; }                     /* span 2 tracks */

.layout {
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

Responsive — No Media Queries Needed

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
/* Cards are ≥260px wide, wrap automatically */

💡

Grid vs Flexbox: Use Grid for 2D (rows AND columns). Use Flexbox for 1D — aligning items in a single row or column.

ES6+ Modern JS

Reference and best practices for ES6+ Modern JS.

Destructuring

const [first, , third, ...rest] = [1, 2, 3, 4, 5];
const { name, age, role = 'dev' } = user;  // default value if missing
const { name: userName } = user;             // rename on destructure

Spread, Optional Chaining & Nullish Coalescing

const arr2 = [...arr1, 4, 5];
const obj2 = { ...obj1, newKey: 'value' };

user?.address?.city      // undefined if missing, not error
data?.items?.[0]?.name

count = data ?? 0        // 0 only if data is null or undefined

Modules

// Export
export const API_URL = 'https://api.example.com';
export function formatDate(d) { return d.toISOString(); }
export default MyComponent;

// Import
import MyComponent from './MyComponent';
import { API_URL, formatDate } from './utils';
import * as Utils from './utils';

Promises

// Run multiple in parallel
const [users, posts] = await Promise.all([
  fetch('/api/users').then(r => r.json()),
  fetch('/api/posts').then(r => r.json())
]);

// Don't fail if one rejects
const results = await Promise.allSettled([p1, p2, p3]);

TypeScript

Reference and best practices for TypeScript.

Types & Interfaces

let name: string = "Emmanuel";
let items: string[] = ["a", "b"];

interface User {
  id: number;
  name: string;
  email?: string;       // optional
  readonly role: string; // immutable after creation
}

type Status = "active" | "inactive" | "pending";
type UserCard = User & { avatar: string }; // intersection

Functions & Generics

function greet(name: string, greeting?: string): string {
  return `${greeting ?? 'Hello'}, ${name}!`;
}

async function getUser(id: number): Promise<User> { ... }

// Generic — works with any type
function first<T>(arr: T[]): T | undefined { return arr[0]; }

interface ApiResponse<T> {
  data: T;
  error: string | null;
  status: number;
}

Node.js

Reference and best practices for Node.js.

Core Modules

Module	Use	Import
fs/promises	File system (async)	require('fs/promises')
path	File paths — join, resolve	require('path')
http	Create HTTP server	require('http')
os	System info	require('os')
crypto	Hashing, encryption	require('crypto')

File System & Env Vars

const fs = require('fs/promises');
const content = await fs.readFile('./data.txt', 'utf8');
await fs.writeFile('./out.txt', data, 'utf8');
await fs.appendFile('./log.txt', `${new Date().toISOString()}: event\n`);
const files = await fs.readdir('./src');

// .env — install dotenv: npm install dotenv
require('dotenv').config();
const port = process.env.PORT || 3000;

⚠️

Never commit .env files. Add .env to .gitignore before your first commit. Use .env.example to document required vars.

Express.js

Reference and best practices for Express.js.

Server Setup & Routes

const express = require('express');
const app = express();

app.use(express.json());
app.use(express.static('public'));

app.get('/users', (req, res) => res.json({ users: [] }));

app.post('/users', (req, res) => {
  const { name, email } = req.body;
  res.status(201).json({ message: 'Created', name });
});

app.put('/users/:id', (req, res) => {
  const { id } = req.params;
  res.json({ updated: id });
});

app.delete('/users/:id', (req, res) => res.status(204).send());

app.listen(3000, () => console.log('Server on 3000'));

Router & Error Handling

// routes/users.js
const router = require('express').Router();
router.get('/', getUsers);
router.post('/', createUser);
module.exports = router;

// app.js — mount routes
app.use('/api/users', require('./routes/users'));

// Error middleware (4 params — required)
app.use((err, req, res, next) => {
  res.status(err.status || 500).json({ error: err.message });
});

MongoDB

Reference and best practices for MongoDB.

Mongoose Setup & CRUD

const mongoose = require('mongoose');
await mongoose.connect(process.env.DATABASE_URL);

const userSchema = new mongoose.Schema({
  name:  { type: String, required: true, trim: true },
  email: { type: String, required: true, unique: true },
  createdAt: { type: Date, default: Date.now }
});
const User = mongoose.model('User', userSchema);

// CREATE
const user = await User.create({ name: 'Emmanuel', email: 'e@dev.com' });

// READ
const users = await User.find({ status: 'active' }).sort({ name: 1 }).limit(10);
const user  = await User.findById(id);

// UPDATE
await User.findByIdAndUpdate(id, { name: 'New' }, { new: true });

// DELETE
await User.findByIdAndDelete(id);

Query Operators

Operator	Meaning	Example
$gt / $gte	Greater than (or equal)	{ age: { $gte: 18 } }
$lt / $lte	Less than (or equal)	{ price: { $lt: 100 } }
$in	In array	{ role: { $in: ['admin','dev'] } }
$or	Either condition	{ $or: [{ a: 1 }, { b: 2 }] }
$regex	Pattern match	{ name: { $regex: /em/i } }

Git & GitHub

Reference and best practices for Git & GitHub.

Setup & Core Commands

git config --global user.name "Your Name"
git config --global user.email "you@email.com"

Command	What it does
git init	Initialize new repo
git clone <url>	Clone a remote repo
git status	Show changed files
git add .	Stage all changes
git commit -m "msg"	Commit staged changes
git log --oneline	Compact commit history
git diff --staged	Show staged changes

Branches & Remote

git checkout -b feature-login   # Create + switch
git switch main                  # Switch branch (modern)
git merge feature-login          # Merge into current
git branch -d feature-login      # Delete merged branch

git push -u origin main          # Push + set upstream
git pull                         # Fetch + merge
git stash / git stash pop        # Save/restore temp work
git restore <file>               # Discard unstaged changes

Commit Message Format

# type: brief description (max 72 chars)
# types: feat | fix | docs | style | refactor | test | chore
feat: add user authentication
fix: resolve login form validation bug
docs: update README with setup steps

⚠️

Never commit: API keys, passwords, .env files, node_modules, or build folders. Add them to .gitignore before your first commit.

Launch Center

Reference and best practices for Launch Center.

Website Launch Checklist

All pages load without errors
All links work — internal and external
Contact form sends and receives emails
Mobile responsive — tested on real device
Page speed acceptable (PageSpeed Insights)
Favicon is set
Meta title and description on every page
Open Graph image and tags set
SSL certificate active (HTTPS)
Analytics installed
Sitemap submitted to Google Search Console

First Client Checklist

Proposal sent and accepted in writing
50% deposit received before starting
Timeline agreed — in writing
All required assets received from client
Client approved design before development started
Client approved final site before final payment
Final 50% payment received before file handover
Client credentials (hosting, domain) transferred
Testimonial or review requested

Freelancer Launch Checklist

Portfolio site live with 3+ projects
Services and pricing defined
Payment method ready (Paystack, bank account, etc.)
Proposal template ready to send
Social media presence active
First 3 potential clients identified and contacted

💡

The #1 freelance insight: Your first clients don't come from job boards. They come from people you already know. Tell everyone what you do and what problems you solve.

Project Planning

Reference and best practices for Project Planning.

PROJECT PLAN ────────────────────────────── PROJECT NAME: DEADLINE: STACK: Frontend: ___ Backend: ___ DB: ___ Hosting: ___ ────────────────────────────── PROBLEM STATEMENT What problem does this solve? ────────────────────────────── TARGET USER Who is this built for? ────────────────────────────── CORE FEATURES (MVP only) 1. 2. 3. ────────────────────────────── PAGES / SCREENS 1. 2. 3. ────────────────────────────── MILESTONES [ ] Week 1: [ ] Week 2: [ ] Week 3: [ ] Week 4: Launch ────────────────────────────── SUCCESS METRICS How will you know this project succeeded?

Daily Planner

Reference and best practices for Daily Planner.

🌅 Morning (30 min)

Review yesterday's progress and leftover tasks
Write 3 specific tasks for today (not vague goals)
Identify the hardest task — schedule it first

💻 Deep Work Block (2–4 hrs)

Notifications off / phone away
Work on one task at a time
5-min break every 50 minutes (Pomodoro)
Commit code at every milestone

📚 Learning Block (30–60 min)

One resource only — don't hop between courses
Code along — never just watch
Write one note on what you'll apply

🌙 End of Day (15 min)

Commit and push all changes
Write one line: what did I learn today?
Set tomorrow's top 3 tasks now

Resources

Reference and best practices for Resources.

Learning Platforms

MDN Web Docs

developer.mozilla.org

The standard HTML/CSS/JS reference

JavaScript.info

javascript.info

Best free JS course — deep and practical

web.dev

Modern web best practices by Google

CSS-Tricks

css-tricks.com

Deep CSS guides and visual references

The Odin Project

theodinproject.com

Free complete full-stack curriculum

freeCodeCamp

freecodecamp.org

Free curriculum + certifications

Practice & Challenges

Frontend Mentor

frontendmentor.io

Real-world design challenges to build

Codewars

codewars.com

Algorithm and logic challenges

JavaScript 30

javascript30.com

30 free vanilla JS projects by Wes Bos

CSS Battle

css-battles.dev

Build images using only CSS

Official Documentation

React Docs

react.dev

Vue.js Docs

vuejs.org

Node.js Docs

nodejs.org/docs

Express Docs

expressjs.com

TypeScript Docs

typescriptlang.org

Mongoose Docs

mongoosejs.com

Design Tools

Reference and best practices for Design Tools.

Icons

Lucide Icons

lucide.dev

Clean, consistent open-source icons

Heroicons

heroicons.com

Icons from the Tailwind team

Phosphor Icons

phosphoricons.com

Large, flexible icon family

SVG Repo

svgrepo.com

500,000+ free SVG vectors

Fonts & Illustrations

Google Fonts

fonts.google.com

1000+ free fonts

Fontshare

fontshare.com

High quality free fonts

unDraw

undraw.co

Free SVG illustrations, recolorable

Unsplash

unsplash.com

Free high-quality photos

Tools

Figma

figma.com

Industry-standard design tool (free tier)

Squoosh

squoosh.app

Compress images in browser

CSS Gradient

cssgradient.io

Visual gradient generator

Coolors

coolors.co

Generate color palettes fast

Project Ideas

Reference and best practices for Project Ideas.

Frontend Projects

📝 Markdown Notes App

Beginner

HTML · CSS · JavaScript · localStorage

Write Markdown
Live preview
Save + search notes
Dark mode

🌦️ Weather App

Intermediate

HTML · CSS · JavaScript · OpenWeatherMap API

Search city
5-day forecast
Geolocation
Animated icons

📊 Expense Tracker

Intermediate

HTML · CSS · JavaScript · Chart.js

Add income/expenses
Category breakdown
Chart visualization
Export data

🔗 Link-in-Bio Page

Beginner

HTML · CSS (no framework needed)

Profile section
Social links
Link cards
Deploy on GitHub Pages

Full Stack Projects

✅ Task Manager App

Intermediate

React + Node.js + Express + MongoDB

User auth (login/register)
Create/update/delete tasks
Categories + due dates
Filter and search

📰 Blog Platform

Advanced

Next.js or React + Node + MongoDB

Auth + role permissions
Create/edit posts (Markdown editor)
Comments + tags
Admin dashboard

🛒 E-commerce Store

Advanced

React + Node + MongoDB + Paystack

Product catalog + search
Cart + checkout
Payment integration
Order tracking + admin

🤖 AI Chat Interface

Intermediate

HTML + CSS + JS + Cloudflare Worker + Gemini API

Chat UI with history
Streaming responses
localStorage memory
System prompt config

AI Prompts

Reference and best practices for AI Prompts.

Debugging Prompts

"Here is my code. The error I'm getting is: [ERROR MESSAGE] Code: [PASTE CODE] Explain what's wrong and show me the fix."

Learning Prompts

"Explain [CONCEPT] like I'm a beginner. Give me: 1. A plain English explanation 2. A real-world analogy 3. A code example I can run in the browser"

Code Review Prompts

"Review this code and tell me: 1. Bugs or potential errors 2. Security issues 3. Performance improvements 4. Better practices [PASTE CODE]"

Project Planning Prompts

"I'm building a [PROJECT TYPE] using [TECH STACK]. Give me a step-by-step plan starting with the simplest MVP version."

💡

Golden rule: Be specific. Include the error, context, language, and what you've already tried. Vague prompts return vague answers.