AI

ACE AI Startup Bootcamp

Front-end development & API integration and AI

πŸ“– View Session 6 practice lesson plan ← Return to Curriculum page
Day 6 Front-end development & API integration and AI Video + AI chatbot learning

Front-end development & API integration and AI learning assistant

This is the 6th day of learning content that implements Figma UI as an actual service screen, binds server data to the screen through fetch/AJAX-based API integration, and handles loading, errors, and empty states. In particular, in this session, you will learn AI pair programming collaboration methods that utilize Codex Client Workspace to quickly create screen drafts, request debugging, and perform code refactoring and multidimensional code quality audits.

Target: Students who have completed UI/UX high-resolution design
What you need: Laptop, VS Code, web browser
Composition: 2 hours theory / 3 hours practice / 1 hour sharing
πŸ“– Go to Session 6 teaching plan

πŸš€ Day 6 Practice MVP Tasks Roadmap

Go to the entire Task board β†’
TASK 1
Prototype

Task 1. Quickly create a screen draft

Build a workable, responsive dashboard screen draft code based on the requirements specification.

Task 1 Entry to the lab
TASK 2
AI Debug

Task 2. Error resolution assistant

Learn about analysis of occurrence lines and defensive measures for asynchronous binding errors such as TypeError.

Task 2 Entry to the lab
TASK 3
Refactoring

Task 3. Improve the code

Refactor redundant HTML operations and ambiguous temporary variable names to conform to working naming conventions.

Task 3 Entry to the lab
MISSION 1
Troubleshooting

Mission 1. Solve errors with AI

Receive a background diagnosis of CORS/JSON garbage interpretation errors and create a report on measures to prevent the problem.

Mission 1 Lab Entry
MISSION 2
Code Review

Mission 2. Get AI code reviews

The written code is evaluated using multidimensional indicators to derive optimal encapsulation and readability improvements.

Mission 2 Lab Entry

Day 6 lecture video

YouTube Recommended Lectures
This is a list of recommended YouTube lectures corresponding to the core topics of the Day 6 curriculum (HTML/CSS/JS implementation, API integration, data binding, asynchronous programming, and error handling). (Constructed of free lecture videos that allow external sharing and playback.)
πŸ“š Full list of lectures (5)
  • β–Ά
    1. Learn JavaScript - Full Course for Beginners (freeCodeCamp)
    3:26:42
  • β–Ά
    2. WEB3 - Introduction to Ajax class (Life Coding)
    6:20
  • β–Ά
    3. WEB3 - How to use Ajax fetch API (Life Coding)
    8:10
  • β–Ά
    4. Introduction to JavaScript - jQuery Ajax (Life Coding)
    7:45
  • β–Ά
    5. JavaScript DOM Manipulation – Full Course for Beginners (freeCodeCamp)
    2:15:30

Key takeaway notes

Day 6 Summary

Today's Key Goals

On Day 6, Figma UI is implemented as an actual service screen, server data is bound to the screen through fetch/AJAX-based API integration, and loading, errors, and even empty states are handled.

  • HTML/CSS/JS web screen implementation: Implement Figma designs with semantic HTML tags and CSS styles
  • Responsive layout design: Utilizing Media Query and Flexbox/Grid
  • fetch API based data request: GET/POST API calls using fetch and async-await
  • Screen Data Binding: Apply JSON data received from the server to DOM elements
  • Status processing and error handling: Screen processing according to data loading, error occurrence, and empty data status
Learning tip: Ask the AI chatbot on the right, β€œHow do you handle errors when calling the fetch API using async/await syntax?” Or β€œHow to dynamically display JSON list data received from the server on the HTML screen?” Ask the same question.