Course Framework · Faith Johnson for Jidson Tech

Web Design in the
AI Era — A Human-Led
Mastery Course

A structured curriculum that teaches students how to build beautiful, functional websites while understanding exactly where AI helps — and where human creativity is irreplaceable.

10 Weeks Total
30 Class Sessions
4 Phases
Audience Levels
What makes this course different
Most web design courses either ignore AI entirely or treat it like a magic wand. This course does neither. It teaches students to be the creative director — using AI as a tool, not a replacement.
🧠

Human creativity first

Students learn to design with intention — understanding why a layout works, what makes a colour palette emotionally resonate, and how to tell a brand's story through a screen.

AI as a power tool

Students are taught to use AI tools (Midjourney, ChatGPT, GitHub Copilot, Framer AI, Adobe Firefly) to work faster — while knowing their output still requires human judgment and editing.

🏗️

Build real things

Every week ends with a practical output. Students graduate with a portfolio of 3–5 real websites — not exercises. Employers and clients care about what you've shipped, not what you studied.

💼

Business-ready mindset

The final phase teaches freelancing: pricing, client communication, contracts, and how to find work. Students leave knowing how to turn their skill into income — even from Day 1 after graduation.


What AI can do vs. what only you can do
This is the intellectual backbone of the course — students must be able to articulate this distinction confidently to clients and employers.

AI handles

Generate layout suggestions from a text prompt
Write and debug repetitive code faster
Generate background images, icons, illustrations
Produce colour palette options from a mood
Write placeholder or draft copy
Speed up asset resizing and formatting
Explain code errors and suggest fixes

Only you can

Understand a client's actual business goals
Make aesthetic judgments with cultural context
Know when a design feels "off" emotionally
Build trust and manage client relationships
Decide which AI output to use — and edit it
Create original brand identity and strategy
Solve problems no one has prompted AI for yet
💡

The instructor's talking point for Day 1

"AI can generate a website in 30 seconds. So can a bad designer. Your job is not to build fast — it is to build right. Clients pay for judgment, not just execution. AI has no judgment. You do."


Four phases, one complete designer
The course is structured in four progressive phases. Beginners and intermediate learners share the same sessions — but intermediate students are given extension tasks and deeper challenges each week.

Click any module to expand the full topic list ↓

1
Phase 1 — Foundation

How the web works + design thinking

From zero to understanding — before touching any tool

Weeks 1–2 6 sessions
How the internet works — servers, browsers, DNS, HTTP in plain language
What web designers actually do vs. web developers (the distinction matters for career and pricing)
Design thinking principles — empathy, problem definition, ideation, prototyping, testing
Typography fundamentals — type hierarchy, pairing, legibility, emotional tone of fonts
Colour theory — hue, saturation, value, colour psychology, cultural context in Nigerian/African markets human
Layout and composition — grids, whitespace, visual hierarchy, F-pattern and Z-pattern reading
Introduction to AI in design — what tools exist, what they can and cannot do AI intro
Workshop: Critique 5 real Nigerian business websites — what works and what fails
2
Phase 1 — Foundation

Figma — Design before you build

Industry-standard prototyping and UI design

Weeks 3–4 6 sessions
Figma workspace — frames, layers, components, auto-layout, constraints
Building a design system — colour styles, text styles, reusable components
Designing responsive layouts — desktop, tablet, mobile frames
UI component library — buttons, cards, navbars, forms, modals
Using Figma AI features — Auto Name, design suggestions AI tool
When to trust AI layout suggestions vs. override them with design judgment human
Prototyping and clickable flows — presenting to a client confidently
Handoff to developers — what specs to include, what annotations matter
3
Phase 2 — Building

HTML & CSS — How websites are actually built

Understanding code makes you a better designer, not just a builder

Weeks 5–6 6 sessions
HTML structure — elements, attributes, semantic tags (why they matter for SEO and accessibility)
CSS fundamentals — selectors, box model, flexbox, grid
Using ChatGPT/Copilot to generate HTML/CSS code from a design description AI tool
Critical skill: reviewing and editing AI-generated code — finding its mistakes human
Responsive design — media queries, mobile-first thinking
CSS animations and transitions — hover states, micro-interactions
Introduction to browser developer tools — inspecting, debugging, testing
Converting a Figma design into a hand-coded HTML/CSS page
4
Phase 2 — Building

WordPress + Elementor — Professional no-code delivery

The tool most Nigerian web design clients will ask for

Weeks 7–8 6 sessions
WordPress dashboard — pages, posts, plugins, themes, settings
Astra theme setup — global colours, fonts, header/footer configuration
Elementor page builder — widgets, sections, columns, global styling
Essential plugins — WPForms, Rank Math SEO, Wordfence, UpdraftPlus, Joinchat
Using AI image generators (Adobe Firefly, Canva AI) to create website graphics AI tool
Why AI-generated images need a human creative director — brand consistency, context human
Domain, hosting, SSL — the full deployment process on a Nigerian host
SEO fundamentals — on-page optimisation, keyword thinking for Nigerian audiences
Handing a site over to a client — what to include, what to document
5
Phase 3 — AI Mastery

AI-augmented web design workflow

Learn to work 3× faster without losing creative control

Week 9 3 sessions
The AI-augmented designer's toolkit — full walkthrough of 8 tools and when to use each AI tool
Framer AI and Wix ADI — generate a full site in minutes, then humanise it AI tool
ChatGPT for web copywriting — brief, generate, refine, make it sound human AI tool
AI image generation for websites — prompting well, avoiding generic output AI tool
The designer's editorial eye — curating and editing AI outputs with purpose human
Ethics of AI in design — transparency with clients, copyright awareness, originality
Speed challenge: Build a client-ready landing page in under 90 minutes using AI tools — then defend every design decision to the class
6
Phase 4 — Business & Career

Freelancing, pricing & getting clients

Turn your skill into a business — starting this week

Week 10 3 sessions
How to price web design work in Nigeria — project-based vs. hourly, what the market bears
Writing a professional proposal and service agreement (students receive templates)
Client intake process — questionnaire, brief, discovery call, managing scope creep
Building a portfolio — what to include, how to present work without real clients yet
Finding clients in Nigeria — referrals, social media, LinkedIn, local business outreach
Using AI to market yourself — writing your own bio, services page, and pitches AI tool
Platforms for remote work — Fiverr, Upwork, Toptal — how Nigerians succeed on each
Final presentation: Each student pitches their portfolio website to the class as if pitching a real client

Same class, different depth
You don't need separate classes. Use extension tasks to challenge intermediate learners while beginners build confidence with the core material.
Week Beginner Task Intermediate Extension
Weeks 1–2 Analyse and sketch a layout on paper Rebuild the same layout in Figma and critique it against a real competitor site
Weeks 3–4 Design a 3-page Figma mockup Design a full design system with 20+ reusable components
Weeks 5–6 Build one HTML/CSS page from a template Build from scratch with custom CSS animations and zero frameworks
Weeks 7–8 Build using Elementor with starter template Build entirely from blank canvas, add custom CSS, and configure Paystack
Week 9 Use one AI tool to speed up an existing project Build a full landing page using only AI tools — then audit every weakness
Week 10 Present a 3-page portfolio site Present a 5-page portfolio + a real client project with testimonial

What to charge — and how to split it
Priced for the Abeokuta student market. Jidson Tech hosts the class, provides the space and infrastructure, handles marketing and enrolment. You deliver the expertise. Both parties profit fairly.
Standard Tier

Full Course

₦45,000 per student
All 10 weeks, 30 sessions
Physical classes at Jidson Tech
Course notes and templates
Certificate of completion
WhatsApp support group access
Party Role Standard (₦45k) Premium (₦65k)
Faith Johnson (Instructor) Course design, teaching, materials, certificates ₦27,000 (60%) ₦39,000 (60%)
Jidson Technology (Host) Space, electricity, marketing, enrolment, branding ₦18,000 (40%) ₦26,000 (40%)
📊

Revenue projection — a cohort of 10 students (realistic for first run)

If 7 students take Standard and 3 take Premium: Total revenue = ₦315,000 + ₦195,000 = ₦510,000. Faith earns ₦306,000. Jidson Tech earns ₦204,000 — from the same 10 weeks, without Timothy lifting a teaching finger. Scale to 15 students and both sides earn significantly more.

🎯

Instalment option — to lower the barrier to entry

Offer students the ability to pay in 2 instalments: 50% on enrolment, 50% by Week 5. This increases conversion significantly in the student market. Both parties split each instalment proportionally as it comes in.


When client work comes through his business
Timothy's platform brings the client. You build the site. The split should reflect that he's doing business development and you're doing the skilled labour — a 70/30 arrangement is the professional standard for referral-based freelance work.
Small Project

Landing page or 1–3 page site

₦80,000
Faith: ₦56,000 · Jidson: ₦24,000
Standard Project

Business website — 4–7 pages

₦150,000
Faith: ₦105,000 · Jidson: ₦45,000
Full Project

Complex site — 8+ pages, forms, payments

₦230,000+
Faith: ₦161,000+ · Jidson: ₦69,000+
Rule Detail
Split ratio 70% Faith (execution) · 30% Jidson Tech (client acquisition + platform)
Who quotes the client Jidson Tech quotes and invoices the client. Faith receives her 70% upon client payment — not before.
IP & credit Client owns the final site. Faith retains the right to list the project in her portfolio. Jidson Tech may list it as a platform delivery.
Rush jobs Any project with a turnaround under 7 days carries a 20% rush surcharge — added to the client price, split the same way.
Direct referrals If a client found through Jidson Tech later contacts Faith directly for a new project, Jidson Tech receives a 15% finder's fee on that follow-up project only.
Put it in writing A simple platform agreement between you and Timothy should be signed before the first job comes in. Friendships survive with clear terms — not without them.
🤝

A word on protecting the friendship

Because Timothy is a friend, you must be more formal with documentation, not less. Clearly agree on the split, put it in a one-page platform agreement, and make sure payments are made promptly after each client settles. Money is the one thing that strains friendships — structure prevents that entirely.