Frontend Developer Roadmap — 2025 (Extreme)

// DNS: Converts domain → IP
www.example.com -> 142.251.46.110

// Hosting: Your website files stored on a server.

GET /products HTTP/1.1
Host: api.store.com
Accept: application/json

// 200 OK
// 404 Not Found
// 500 Server Error

<header>Site Header</header>
<nav>Main Navigation</nav>
<main>Page Content</main>
<footer>Footer</footer>

<form>
  <input type="email" required />
  <input type="password" minlength="6" />
  <button>Login</button>
</form>

.box {
  padding: 16px;
  margin: 24px;
  border: 1px solid #ddd;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.layout {
  display: grid;
  grid-template-areas:
    'header header'
    'sidebar content'
    'footer footer';
}

@media (max-width: 768px) {
  .menu { display: none; }
}

/* Base = mobile */
.container { padding: 1rem; }

/* Bigger screens override */
@media (min-width: 768px) {
  .container { padding: 2rem; }
}

:root {
  --primary: #4f46e5;
}

.button {
  background: var(--primary);
}

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in { animation: fade 1s ease-in; }

const age = 25;
let name = 'John';
const user = { name, age };

const sum = (a, b) => a + b;
console.log(sum(3, 5));

document.querySelector('.btn').addEventListener('click', () => {
  alert('Clicked!');
});

async function loadData() {
  const res = await fetch('/api/data');
  const json = await res.json();
  console.log(json);
}

const { name, age } = user;
const [first, second] = items;

interface User {
  name: string;
  age: number;
}

const u: User = { name: 'John', age: 20 };

function wrap<T>(value: T) {
  return [value];
}

git init
git add .
git commit -m "Initial commit"
git push origin main

git checkout -b feature/login

npm create vite@latest my-app

module.exports = {
  entry: './src/index.js',
  output: { filename: 'bundle.js' }
};

<button class="px-4 py-2 bg-indigo-600 text-white rounded">Save</button>

import { Button } from '@mui/material';

<Button variant="contained">Click</Button>

function App() {
  return <h1>Hello React</h1>;
}

const [count, setCount] = useState(0);

export default function Page() {
  return <div>Hello Next.js</div>;
}

<template>
  <h1>{{ message }}</h1>
</template>

<script>
export default {
  data() {
    return { message: 'Hello Vue!' };
  }
};
</script>

import create from 'zustand';

const useStore = create(set => ({
  count: 0,
  inc: () => set(s => ({ count: s.count + 1 }))
}));

fetch('/api/users')
  .then(r => r.json())
  .then(console.log);

{
  user(id: 1) {
    name
    email
  }
}

const payload = JSON.parse(atob(token.split('.')[1]));

import { expect, test } from 'vitest';

test('math', () => {
  expect(2 + 2).toBe(4);
});

const Lazy = React.lazy(() => import('./HeavyComponent'));

const safe = str.replace(/</g, '&lt;').replace(/>/g, '&gt;');

name: CI
on: push
jobs:
  build:
    runs-on: ubuntu-latest

<button aria-label="Close menu">X</button>

<meta name="description" content="Frontend Roadmap 2025" />

localStorage.setItem('theme', 'dark');

navigator.serviceWorker.register('/sw.js');

<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>Hello</motion.div>

:root {
  --color-primary: #6366f1;
}

{
  "pipeline": {
    "build": { "outputs": ["dist/**"] }
  }
}

const ctx = canvas.getContext('2d');
ctx.arc(50, 50, 30, 0, Math.PI * 2);
ctx.fill();

"Generate a responsive navbar with Tailwind and React."

- Projects
- Case studies
- About me
- Contact form