DAY 6 TEXTBOOKACE Startup SW/AI Pilot

ACE AI Startup Bootcamp Textbook Series 06

Frontend and UI Development

A self-study textbook covering essential theory, comparative examples, guided practice, quality review, and a capstone exercise. Central question: How do we build a fast, accessible interface that communicates every state change?

ACE AI Startup Bootcamp | Day 6Study Guide

HOW TO STUDY

Learning Goals and Study Routine

How do we build a fast, accessible interface that communicates every state change? You complete today’s lesson when you can answer this question in your own words, produce the required artifact, and review its quality.

Theory: 60 minPractice: 90 minReview: 30 min

Explain the browser rendering pipeline.

Divide component and state responsibilities.

Design loading, success, empty, and error states.

Apply responsive layout and accessibility.

Understand Core Web Vitals.

Review UI quality across behavior, visuals, and accessibility.

Recommended self-study routine

Explain why a problem occurs before memorizing its terminology.
Describe the difference between good and poor examples using observable criteria.
Attempt the capstone before opening the model answer.
Mark missing conditions in a second color and revise your artifact.

ACE AI Startup Bootcamp | Day 6Table of Contents

CONTENTS

Study Guide and Learning GoalsPage 02
Chapter 1. Core Theory and Design PrinciplesPage 04
Chapter 2. Guided Design PracticePage 05
Chapter 3. Case Review and Quality CheckPage 06
Chapter 4. Capstone and Model AnswerPage 07
Glossary and Final ChecklistPage 08
Self-study reference and guided practicePages 09–11

Completion standard

Submit the capstone artifact, score at least 80/100 on the self-review, and write your own answers to the four concept questions.

ACE AI Startup Bootcamp | Day 6Chapter 1 · Core Theory

CHAPTER 01

Core Theory: Frontend and UI Development

Each technical term exists to solve a recurring design problem. Study when and why the concept is needed, not merely its definition.

Core concept	Working definition
DOM / CSSOM	The trees the browser creates from HTML and CSS.
Component	A reusable UI unit with one coherent responsibility.
State	Data that changes over time and affects the interface.
Semantic HTML	Markup that communicates meaning to browsers and assistive technology.
Responsive Design	A layout that adapts to viewport size and input method.
Web Vitals	User-centered measures of loading, responsiveness, and visual stability.

Poor and Effective Approaches

Avoid

Show a blank screen while data loads and write errors only to the console.

Prefer

Provide content-shaped loading feedback, a specific error with retry, and an empty state with the next action.

Design formula

[User Goal] → [Component Responsibilities] → [State Model] → [Accessibility] → [Responsive Layout] → [Performance and Feedback]

ACE AI Startup Bootcamp | Day 6Chapter 2 · Guided Practice

CHAPTER 02

A Six-Step Design Workflow

Define the problem

Define the user task and information hierarchy in a wireframe.

Extract the structure

Split components by responsibility and assign state ownership.

Design the core flow

Model idle, loading, success, empty, and error before implementation.

Add failure conditions

Implement keyboard access, focus, labels, and contrast.

Connect policies

Inspect layout and touch targets at 375, 768, and 1024 pixels.

Verify and trace

Measure LCP, INP, CLS, and console errors, then improve them.

Worked Example

State-driven UI pseudocode

if (state === 'loading') return <ReservationSkeleton />; if (state === 'error') return <ErrorMessage onRetry={reload} />; if (reservations.length === 0) { return <EmptyState action="Create your first reservation" />; } return <ReservationList items={reservations} />;

Questions for reading the example

Are the input and initiating condition explicit?
Are success and failure outcomes observable?
Are duplication, authorization, concurrency, and dependency failure covered as needed?
Can the result be traced back to a requirement?

ACE AI Startup Bootcamp | Day 6Chapter 3 · Review

CHAPTER 03

Concept Check and Quality Review

CONCEPT CHECK

Why should all state not automatically be global?
How does semantic HTML improve accessibility?
How does a high CLS hurt users?
Why does hover-dependent design fail on mobile?

Answer each in two or three sentences and add one example that supports your explanation.

Self-Assessment · 100 points

Area	Standard	Points
Accuracy	Concepts and technical choices match the facts and requirements.	25
Completeness	Normal flow, boundaries, failures, and recovery are covered.	25
Consistency	Terms, IDs, states, and interfaces agree across artifacts.	20
Verifiability	Observable outcomes and completion criteria are present.	20
Reasoning	The choice and its tradeoffs can be explained clearly.	10

If your score is below 80

Do not only correct the result. Record which question you failed to ask so your next design process prevents the same omission.

ACE AI Startup Bootcamp | Day 6Chapter 4 · Capstone

CHAPTER 04

Capstone Exercise and Model Answer

SUBMISSION

Design a reservation-list screen. Define mobile and desktop layouts plus loading, empty, error, and success states.

List assumptions and unresolved decisions first.
Produce the main design as a table, diagram, or code block.
Include the normal flow and at least three failures or boundaries.
Score it with the rubric and compare before and after revision.

Open the model answer

On mobile, place the essential status and next action first and keep targets at least 44px. Match the loading skeleton to real rows, give errors a cause and retry action, and provide a first-reservation action in the empty state.

How to use the answer

The model is not the only valid design. If yours differs, explain the requirement, cost, complexity, or risk that justifies your choice.

ACE AI Startup Bootcamp | Day 6Lesson Review

REVIEW

Glossary and Final Checklist

Term	Plain-English meaning
Reflow	Recalculation of layout.
Hydration	Connecting client behavior to server-rendered HTML.
ARIA	A standard for supplementing accessibility semantics.
LCP	The time until the main content becomes visible.
INP	Responsiveness to user input.
CLS	The amount of unexpected visual movement.

Eight checks before submission

Can you answer today’s central question in your own words?
Are inputs, conditions, and results explicit?
Did you include failures and recovery, not only the happy path?
Did you review concurrency, duplicate requests, and permissions?
Did you account for dependency failure and timeouts?
Can you explain the disadvantages and alternatives to your choice?
Are terminology and states consistent across artifacts?
Is there an observable or testable completion standard?

Day 6 in one question

How do we build a fast, accessible interface that communicates every state change? Answer it now using evidence from the artifact you created.

ACE AI Startup Bootcamp | Day 6Self-study reference

SELF-STUDY 01

Key Terms in Context

Learn each term as a decision tool. Read across each row: definition, reason to use it, and the failure it prevents.

Term	Plain definition	Why it matters	Example or caution
Component	A reusable UI unit with one clear responsibility.	It isolates concerns and limits change impact.	Split by responsibility rather than arbitrary size.
State	Data that changes over time and affects what the UI shows.	It determines the visible interface.	Separate server state from in-progress form state.
Event	A signal such as a click, input, or response that triggers a transition.	It connects user action to logic.	Prevent duplicate submission while an event is processing.
Responsive design	A layout that adapts to available screen size.	It supports mobile, tablet, and desktop use.	Choose breakpoints where content breaks, not by device name.
Accessibility	Usability through different abilities and assistive technologies.	Keyboard and screen-reader users must complete the same task.	Verify semantic HTML, labels, focus order, and contrast.
Loading/error state	The UI representation of an asynchronous request in progress or failure.	It explains current status and the next action.	Show a retry path instead of a blank screen.

Practice scenario

Build a mobile-first product list that loads data, supports search, and adds items to a cart.

ACE AI Startup Bootcamp | Day 6Guided practice

SELF-STUDY 02

Guided Practice and Troubleshooting

Practice scenario

Build a mobile-first product list that loads data, supports search, and adds items to a cart.

Complete in order

List the data, actions, and states before drawing the screen.
Implement loading, success, empty, and error views separately.
Complete the main flow with a keyboard and at 320px width.
Simulate latency and repeated clicks to verify transitions.

Required evidence

Save one artifact, three assumptions, and at least three failure cases. A classmate should be able to reproduce your reasoning without asking what you meant.

If the result is wrong, diagnose it

Observed symptom	Likely cause	Next action
Repeated click duplicates work	Pending state is unmanaged	Disable during progress and enforce server idempotency
Table clips on mobile	Fixed width layout	Switch to cards or define horizontal scrolling
Screen reader cannot identify an input	Missing label	Associate a label with the input

ACE AI Startup Bootcamp | Day 6Retrieval practice

SELF-STUDY 03

Check Your Understanding

Retrieval check — answer before opening

How does state differ from a normal variable?

A state change participates in rendering; changing a plain variable usually does not trigger a UI update.

Can accessibility wait until the end?

It can, but remediation is costly. Design structure, keyboard use, and contrast from the start.

When is the UI complete?

Major states and failure paths work across screen sizes and input methods.

Teach it back in two minutes

Explain the day's main decision, one failure mode, and one verification method without reading the page. If you cannot connect all three, return to the row or diagnostic case you missed.