How Arts Graduates Can Start a Career in Web Development in 2026

What an arts background actually gives you:

✓ DESIGN SENSE
  You notice spacing, rhythm, colour. You can tell
  a "generic bootstrap page" from a designed one.
  Frontend interviews often include a UI component
  and most CS candidates fail on visual quality.

✓ STORYTELLING
  You know how to structure information so it makes
  sense to a reader. That's exactly what a landing
  page, an onboarding flow and a product tour need.

✓ COMMUNICATION
  You can explain a decision without jargon. Frontend
  roles sit between design and backend — you need to
  translate between both.

✓ EMPATHY
  You think about what the user feels. Most developers
  think about what the code does. You'll notice both.

✓ RESEARCH SKILL
  You know how to read carefully, take notes, and find
  patterns. That's exactly how you learn React docs.

What this means:
You are NOT starting from behind. You're starting
from a different place. The technical gap is real,
but so is the design and communication advantage.

Frontend teams desperately want people who can
write a component AND make it look good.
CS graduates are strong on code and weak on design.
Arts graduates are strong on design and weak on code.
Closing the code gap is 6-9 months of work.
Closing the design gap is years.
That's why arts graduates often do very well
once they get technical.

The honest gap you need to close:

✗ HTML & CSS
   Every tag, flexbox, grid, responsive design,
   accessibility basics.

✗ JavaScript
   Functions, DOM, events, fetch, promises,
   async/await, array methods.

✗ Git & GitHub
   Commits, branches, pull requests.

✗ React (or another framework)
   Components, state, props, hooks, routing.

✗ Deployment
   Build, host, custom domain, environment variables.

✗ Basic computer science concepts
   How the browser works, what HTTP does, what an API is.
   You don't need a CS degree, but you need the vocabulary.

What you DON'T need:
✗ A CS degree
✗ Deep maths
✗ Understanding compilers or operating systems
✗ Assembly or low-level programming

What you DO need:
✓ Consistency — 2-3 hours daily
✓ A portfolio with deployed projects
✓ Basic problem-solving
✓ The ability to explain what you built and why

Timeline is real: 9 months if you commit.
Faster if you already dabble in tech.
Slower if you only study on weekends.

The single biggest predictor of success:
finishing. Not talent. Not background. Finishing.

<!-- index.html — first page, but written properly -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Priya Sharma — Portfolio</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <header class="hero">
    <h1>Hi, I'm Priya.</h1>
    <p>I build web experiences that feel human.</p>
    <a href="#projects" class="btn">See my work</a>
  </header>

  <section id="projects">
    <h2>Projects</h2>
    <div class="grid">
      <article class="card">
        <h3>Landing Page</h3>
        <p>Built with HTML and CSS.</p>
      </article>
    </div>
  </section>
</body>
</html>

/* styles.css — key pieces */
.hero {
  padding: 80px 20px;
  text-align: center;
  background: #f9fafb;
}
h1 { font-size: 2.5rem; margin-bottom: 1rem; }
.btn {
  display: inline-block;
  padding: 12px 24px;
  background: #0f172a;
  color: white;
  border-radius: 8px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

/* Why this matters: */
/* - semantic HTML helps SEO and accessibility */
/* - flexbox / grid is what makes responsive work */
/* - you'll reuse this pattern in every project */

// app.js — first real JavaScript project
// A small todo app that saves to localStorage

const form = document.querySelector("#todo-form");
const input = document.querySelector("#todo-input");
const list = document.querySelector("#todo-list");

const todos = JSON.parse(localStorage.getItem("todos") || "[]");

function render() {
  list.innerHTML = "";
  for (const [i, todo] of todos.entries()) {
    const li = document.createElement("li");
    li.textContent = todo;
    li.dataset.index = i;
    if (todo.done) li.classList.add("done");
    list.appendChild(li);
  }
}

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const text = input.value.trim();
  if (!text) return;
  todos.push({ text, done: false });
  input.value = "";
  save();
  render();
});

list.addEventListener("click", (e) => {
  if (e.target.tagName === "LI") {
    const i = Number(e.target.dataset.index);
    todos[i].done = !todos[i].done;
    save();
    render();
  }
});

function save() {
  localStorage.setItem("todos", JSON.stringify(todos));
}

render();

// What this teaches:
// - DOM manipulation
// - Event handling
// - localStorage
// - JSON
// - Array methods (push, entries, map)

// Commit to GitHub on day one.
// A commit history is evidence of consistency.

// App.jsx — React with real state
import { useState } from "react";

function App() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState("");

  function addTodo(e) {
    e.preventDefault();
    if (!input.trim()) return;
    setTodos([...todos, { text: input, done: false }]);
    setInput("");
  }

  function toggle(i) {
    setTodos(todos.map((t, idx) =>
      idx === i ? { ...t, done: !t.done } : t
    ));
  }

  return (
    <div className="app">
      <h1>Todo</h1>
      <form onSubmit={addTodo}>
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Add a task..."
        />
        <button type="submit">Add</button>
      </form>
      <ul>
        {todos.map((t, i) => (
          <li
            key={i}
            onClick={() => toggle(i)}
            style={{ textDecoration: t.done ? "line-through" : "none" }}
          >
            {t.text}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

// What beginners get wrong:
// ✗ Mutating state directly (todos.push) — always create new
// ✗ Forgetting keys in lists
// ✗ Fetching data in the component body instead of useEffect
// ✗ Using inline styles everywhere instead of classes

// ProjectsPage.jsx — real data, real loading states
import { useEffect, useState } from "react";

export default function ProjectsPage() {
  const [projects, setProjects] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    let cancelled = false;

    async function load() {
      try {
        setLoading(true);
        const res = await fetch("https://api.github.com/users/priya/repos");
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        const data = await res.json();
        if (!cancelled) setProjects(data);
      } catch (err) {
        if (!cancelled) setError(err.message);
      } finally {
        if (!cancelled) setLoading(false);
      }
    }

    load();
    return () => { cancelled = true; };
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Couldn't load projects: {error}</p>;

  return (
    <div className="grid">
      {projects.map((p) => (
        <article key={p.id} className="card">
          <h3>{p.name}</h3>
          <p>{p.description || "No description"}</p>
          <a href={p.html_url} target="_blank" rel="noreferrer">
            View on GitHub →
          </a>
        </article>
      ))}
    </div>
  );
}

// What this teaches (and what interviewers ask):
// ✓ useEffect for data fetching
// ✓ Loading and error states (very few candidates do this)
// ✓ Cleanup (cancelled flag to avoid state updates after unmount)
// ✓ Real API integration

// This single pattern is 50% of the frontend interviews
// you'll face. Master it.

What a web developer portfolio needs:

☐ A personal site (your own domain, hosted on Vercel/Netlify)
☐ 3 deployed projects — each with a live URL
☐ Each project has:
    ☐ A one-line description of the problem
    ☐ Screenshots
    ☐ The stack you used
    ☐ A short "what I learned" note
    ☐ Link to GitHub
☐ An "About" page that's two paragraphs — not one
☐ A resume link (one PDF)
☐ A contact method (email or a form)
☐ Fast, accessible, responsive on mobile

What NOT to do:
✗ "Coming soon" sections
✗ Five half-finished projects (three good ones beats five)
✗ A hidden portfolio (make it easy to find)
✗ Personal photos in the hero if they're distracting
✗ Placeholder lorem ipsum

The 3 projects to build:
1. A landing page for a product or personal brand
2. A React app that fetches a real API
3. A small app that does something you care about

The third project is the one interviewers will
ask about. Make it personal — art history timeline,
bookshelf tracker, recipe explorer, whatever you'd
actually use.

# Deploying on Vercel — the fastest path

# 1. Build locally to confirm it works
npm run build

# 2. Push to GitHub
git init
git add .
git commit -m "Initial commit"
git push -u origin main

# 3. On vercel.com
#    - Import the GitHub repo
#    - Vercel detects the framework automatically
#    - Add environment variables if needed
#    - Deploy

# 4. Get a URL like
#    https://priya-portfolio.vercel.app

# 5. Custom domain (optional, cheap):
#    - Buy a .com for ₹800/year
#    - Point DNS to Vercel
#    - Live at priyasharma.dev

# Why this matters:
# - The live URL is what interviewers actually click
# - A GitHub repo alone is not enough
# - A "works on localhost" project is not deployed

# Alternatives to Vercel:
# - Netlify (same idea)
# - Cloudflare Pages (free, fast)
# - GitHub Pages (static only, fine for your first site)
# - Render (for full-stack)

# Just deploy this week. Nothing is more
# impressive than a link that opens.

How to actually apply (and get responses):

WHERE TO APPLY
☐ LinkedIn (best for mid-senior, and for startups)
☐ Naukri (best for Indian agencies and startups)
☐ Wellfound / AngelList (startups, often remote)
☐ Instahyre (product companies)
☐ Twitter/X (startups post jobs here constantly)
☐ Referrals (highest win rate by a wide margin)

HOW TO APPLY
☐ Resume: one page, link to portfolio at the top
☐ LinkedIn: headline says "Frontend Developer" + your stack
☐ Cover email: 4 lines — what you built, why it's relevant,
  the link, and a thank-you
☐ Follow-up after 5 days if no response

WHAT GETS YOU THE INTERVIEW
✓ A live portfolio URL
✓ 2-3 deployed projects with real data
✓ Clean GitHub with a README for each project
✓ Clear, non-jargon descriptions of what you built
✗ A list of courses and certificates
✗ "Currently learning..." as the first line
✗ A resume without links

REALISTIC EXPECTATIONS
- 50-100 applications to get 5-10 interviews
- 3-5 rounds per company
- 1-3 offers in 6-10 weeks if your portfolio is strong
- The first offer might be a startup, not a big brand

The single best move:
Apply to startups with 10-50 employees. They hire
on portfolio, not pedigree. That's where you get
your first offer.

9-month planner — arts to frontend developer:

MONTHS 1-2 (Foundations)
☐ HTML: semantic tags, forms, accessibility basics
☐ CSS: flexbox, grid, responsive design
☐ One personal site deployed
☐ Git and GitHub basics

MONTHS 3-4 (JavaScript)
☐ Functions, arrays, objects
☐ DOM manipulation
☐ Events, fetch, async/await
☐ Todo app + weather app on GitHub

MONTHS 5-6 (React)
☐ Components, props, state
☐ useEffect, custom hooks
☐ React Router
☐ React todo + multi-page app

MONTHS 7 (Real project)
☐ Fetch from a real API
☐ Loading and error states
☐ Forms with validation
☐ Personal third project

MONTHS 8-9 (Deploy and apply)
☐ All 3 projects deployed
☐ Portfolio site live
☐ Resume rewritten
☐ 50+ applications
☐ 5+ mock interviews

Milestones (must have at end):
☐ 3 deployed projects with live URLs
☐ Personal site at your own domain
☐ Clean GitHub with READMEs
☐ 50+ applications sent
☐ 3+ interview responses

Weekly log:

Week _____

Hours spent:
  HTML/CSS:        ___
  JavaScript:      ___
  React:           ___
  Project work:    ___

What I built this week:
_______________________________________________

What I shipped (deployed or committed):
_______________________________________________

What confused me:
_______________________________________________

Next week's single priority:
_______________________________________________

Rule: if nothing was "shipped", the week was
reading, not learning.
Shipped = committed to GitHub, or deployed live.
A CSS component counts. A finished article doesn't.

Skill matrix (rate 1-5 monthly):

HTML / CSS
HTML structure & semantics  [ ]
CSS flexbox                 [ ]
CSS grid                    [ ]
Responsive design           [ ]
Accessibility basics        [ ]
Design sense                [ ]

JAVASCRIPT
Syntax & data types         [ ]
Functions & scope           [ ]
Arrays & objects            [ ]
DOM manipulation            [ ]
Async / await / fetch       [ ]
Error handling              [ ]

REACT
Components & props          [ ]
useState                    [ ]
useEffect                   [ ]
Routing                     [ ]
Forms & validation          [ ]
Loading & error states      [ ]

DELIVERY
Git & GitHub                [ ]
Deployment (Vercel/Netlify) [ ]
Basic Node/npm              [ ]

Target after 9 months: 3+ in every row.
Anything at 1-2 = next month's focus.
Anything at 4-5 = your differentiator in interviews.