SD-40: AI Programming in HTML/CSS/JS

3-Day Intensive Course for Beginners and Web Professionals

3 Intense Days
7 Hours per Day (Split into two 3.5-hour sessions)

Learning Path Visual

Your structured journey from markup to polished web pages:

Day 1: HTML Fundamentals — Structure, Tags & Semantic Layout
Learn how websites are built from the ground up. Explore HTML syntax, structure, and best practices for writing clean, accessible markup.

Day 2: CSS Styling — Design, Layout & Responsive Techniques
Dive into CSS to control visual style and layout. Style text, apply colors and spacing, and build responsive page structures using Flexbox and Grid.

Day 3: Web Page Integration — Components, Forms & Deployment
Combine HTML and CSS into full webpages. Build reusable UI components, structure forms, and publish your mini-site with basic file management and optimization.

Course Overview

HTML and CSS are the foundation of every modern website. This course takes you from zero to production-ready — teaching you how to build structured, styled, and responsive pages using the latest web standards.

Ideal for beginners, designers, and junior developers, this workshop focuses on clean code, layout logic, and visual consistency — not just theory, but real browser-ready skills.

You’ll learn how to:

• Write semantic, accessible HTML for modern browsers

• Style elements using CSS selectors, declarations, and classes

• Design consistent page layouts using Flexbox and Grid

• Create responsive designs for desktop and mobile

• Use forms, images, links, and common web components

• Organize files and folders for real-world web projects

• Publish static websites using GitHub Pages or Netlify

Whether you’re pursuing front-end development or just need a solid web foundation, this course is your starting point.

What’s Inside Each Day

Day 1 — HTML Fundamentals: Structure, Tags & Semantic Layout

• HTML syntax and structure (doctype, html, head, body)

• Text elements: headings, paragraphs, lists

• Grouping and layout tags: div, section, article, nav

• Links, images, tables, and media embeds

• Accessibility and semantic HTML practices

• Hands-on: Build a personal webpage using structured markup

Tools: VS Code, browser dev tools
Focus: Structure • Syntax • Web Standards

Day 2 — CSS Styling: Design, Layout & Responsive Techniques

• CSS syntax and linking (style, link, class, id)

• Color, fonts, spacing, borders, and box model

• Flexbox and Grid layout systems

• Pseudo-classes, hover effects, media queries

• Browser compatibility and normalization

• Hands-on: Style a multi-section website with custom layout

Tools: CSS, Live Server extension, Chrome DevTools
Focus: Styling • Layout • Responsive Design

Day 3 — Web Page Integration: Components, Forms & Deployment

• Navigation menus, buttons, cards, and page templates

• HTML forms: input, select, textarea, validation basics

• Code organization: folder structure, external CSS files

• Deployment with GitHub Pages or Netlify

• Bonus: CSS animation intro (transition, keyframes)

• Hands-on: Final project – multi-page responsive website

Tools: HTML/CSS, GitHub Pages or Netlify
Focus: Components • Forms • Publishing

Course Goals

By the end of this course, you’ll be able to:

• Build and style accessible, standards-compliant webpages

• Apply layout systems (Flexbox, Grid) to structure content

• Create interactive forms and basic UI elements

• Deploy a static website publicly with your own code

• Understand the web dev workflow from file to browser

Who Should Take This Course?

• Beginners learning to code for the first time

• Designers who want to understand front-end structure

• Marketing and content teams maintaining websites

• Students preparing for front-end or full-stack paths

• Non-technical professionals who want basic web literacy

Class Reference: SD-40
Form Updated on: 06/16/2025 (Version 1)
Last Modified on: 06/16/2025

Program Note

This course uses modern HTML5 and CSS3 practices, is screen-reader tested, and includes responsive techniques for mobile-first design.

Use the links for more tutorial:

Tutorial point: https://www.tutorialspoint.com/css/index.htm

W3school: https://www.w3schools.com/html/html_css.asp

HTML.com: https://html.com/

Brief pédagogique en français

SD-40: AI Programming in HTML/CSS/JS est présenté ici en version synthétique française afin que les équipes pédagogiques puissent évaluer rapidement l'intérêt du module.

Le module s'inscrit dans la famille Analytics et intelligence artificielle. Il peut être adapté au calendrier de l'école, au niveau Tous niveaux, au volume horaire 21 h et aux modalités d'évaluation prévues.

Objectif d'intervention

Ce module vise à relier les outils data, IA et automatisation à des usages professionnels concrets.

Livrables et activités possibles

• cas d'usage, prompts, scénarios d'automatisation ou analyses data
• évaluation critique des résultats, limites et risques
• communication claire des choix techniques et business

Adaptation école

LC peut ajuster le déroulé, la langue d'enseignement, les supports, les exercices et les critères d'évaluation selon la promotion, le diplôme, le niveau d'autonomie attendu et les contraintes de planning.

Pour une version détaillée du syllabus en français, LC confirme le programme final après cadrage du niveau, des heures, du calendrier et des livrables attendus.