FA-0812Software DevelopmentAgentic & Generative AI

Web Development with ChatGPT: Frontend Foundations

Introduction

Why this course

Create a small interactive portfolio page with HTML, CSS and JavaScript while using ChatGPT to ask focused questions, draft examples and understand changes. Eight sessions cover environment setup, document structure, styling, responsive layouts and client-side form handling.

The two-day programme focuses on frontend foundations. Backend roles are explained conceptually; generated code is reviewed, run and corrected rather than assumed accurate or production-ready.

Learning outcomes

Describe frontend/backend roles and set up an editor/browser environment.
Use focused prompts to request, explain and revise small web-code examples.
Build HTML content, apply CSS and handle simple JavaScript events.
Adapt layouts using media queries and create a mobile-friendly navigation example.
Use HTML attributes and JavaScript for client-side validation and feedback.
Combine the work into an introductory portfolio page and check its behaviour.

Prerequisites

A laptop or desktop with a modern browser, selected text editor and reliable internet access. ChatGPT access is needed for the assisted exercises; no particular paid plan or model is required by this outline.

Training outline

8 modules

01Web development roles2 topics

Understanding the core components of web development.
Exploring the roles of frontend and backend development.

02Environment and assisted coding workflow2 topics

Installing a text editor for coding.
Setting up a web browser for testing.

Frame a prompt with the desired page behaviour, relevant code and constraints. Ask for an explanation, inspect changes, run the example in the browser and revise when results differ from expectations.

03HTML structure3 topics

Introduction to HTML: Hypertext Markup Language.
Creating the basic structure of an HTML document.
Adding headings, paragraphs, and line breaks.

04CSS styling3 topics

Introduction to CSS: Cascading Style Sheets.
Applying inline and internal styles.
Changing font styles, colors, and backgrounds.

05JavaScript interactivity3 topics

Introduction to JavaScript and its role in enhancing web interactivity.
Adding JavaScript to HTML documents.
Creating interactive buttons and simple event handling.

06Responsive layouts3 topics

Understanding responsive web design principles.
Using media queries to adapt layouts to different devices.
Creating a mobile-friendly navigation menu.

07Forms and user feedback3 topics

Creating HTML forms to gather user input.
Validating form data using HTML attributes and JavaScript.
Handling form submission and displaying user feedback.

This exercise validates and displays feedback in the browser; server-side validation and persistence are separate responsibilities, not implemented as a backend module here.

08Portfolio project3 topics

Combining HTML, CSS, and JavaScript to build a portfolio page.
Showcasing your work using images, text, and links.
Implementing interactivity to enhance user experience.

A programme built around your team.

Share your training goals and requirements.