Web Design with AI: HTML, CSS, JavaScript and Web Images
Programming
Web Design with AI: HTML, CSS, JavaScript and Web Images
12 Modules
83 Lessons
A beginner course in HTML, CSS, JavaScript and web images, for learners with no prior coding experience. Built for learners who will go on to use web frameworks.
Satisfaction guarantee · Lifetime access
Course Curriculum
1
Unit 1 - Getting Started: How the Web Works
3 activities
1.1b How the web works - quick check
Quiz
1.2 One page, three files
Codewalk
1.3 Why we build pages carefully
Quiz
2
Unit 2 - Your First Page
11 activities
Building Your First Page, Live
20m
Video
2.1a Arrange the HTML document skeleton
Codewalk
2.1b Type the document skeleton from memory
Codecoach
2.2a Predict what the broken page shows
Codecoach
2.2b Tags, attributes and nesting - quick check
Quiz
2.3a Read a page that was marked up by meaning
Codewalk
2.3b Mark up a page by meaning
Codecoach
2.4a The AI page that looks right
Codecoach
2.4b Fix the AI's markup
Codecoach
2.5a Debug a broken page with a tutor
Codecoach
2.5b Find and fix every mistake
Codecoach
3
Unit 3 - Marking Up Text
8 activities
3.1 Build a correct heading outline
Codecoach
3.2 Arrange a nested navigation list
Codewalk
3.3 Replace the boxes with real page regions
Codecoach
3.4a Choosing text elements by meaning
Quiz
3.4b What the screen reader announces
Codecoach
3.5 When a plain box is the right answer
Codewalk
3.6a Landmarks and special characters
Quiz
3.6b Fix the labels and the special characters
Codecoach
4
Unit 4 - Links and Site Structure
3 activities
4.1 Trace where each link goes
Codecoach
4.2 Wire up the navigation
Codecoach
4.3 Link types and link text
Quiz
5
Unit 5 - Images in HTML
5 activities
5.1a Good alt text and bad alt text
Codewalk
5.1b Write the alt text yourself
Codecoach
5.2 Why the page jumps while loading
Codecoach
5.3a Build a picture element
Codewalk
5.3b Choosing the right image markup
Quiz
6
Unit 6 - Tables, Forms and Media
8 activities
6.1a Build an accessible data table
Codewalk
6.1b When is a table the right choice
Quiz
6.2a The label, for and id chain
Codewalk
6.2b Build a booking form
Codecoach
6.3 Fix the inaccessible form
Codecoach
6.4 Embed a video properly
Codecoach
6.5 Explain accessibility to a client
Airoleplay
Capstone 1 - Build a three-page semantic website
Assignment
7
Unit 7 - CSS Fundamentals
9 activities
7.1a Build a CSS rule and link it
Codewalk
7.1b Link a stylesheet and write your first rules
Codecoach
7.2a Target exactly the right elements
Codecoach
7.3 Which rule wins
Codecoach
7.4a Trace how em sizes compound
Codewalk
7.4b Choosing CSS units
Quiz
7.5 Trace the real width of a box
Codewalk
7.6 Colour with enough contrast
Codecoach
7.7 Simplify the AI's over-specific CSS
Codecoach
8
Unit 8 - Layout with Flexbox and Grid
8 activities
8.1a How the browser lays out a page by default
Codewalk
8.1b Predict where the flex items land
Codecoach
8.2a Build a flexbox navigation bar
Codewalk
8.2b Build a card row with flexbox
Codecoach
8.3 Build a page layout with grid
Codecoach
8.4 Flexbox or grid - choosing
Quiz
8.5a Trace which media query applies
Codewalk
8.5b Make a fixed layout responsive
Codecoach
9
Unit 9 - CSS Polish and Modern Techniques
4 activities
9.1a Add a transition that respects the user
Codecoach
9.2 Read a keyframe animation
Codewalk
9.3 Refactor into custom properties
Codecoach
9.4 Resets, frameworks and modern CSS
Quiz
10
Unit 10 - JavaScript Basics
11 activities
10.1a Read your first script
Codewalk
10.2 Trace what each variable holds
Codewalk
10.3a Assemble a function
Codewalk
10.3b Predict what each function call returns
Codecoach
10.3c Write a function that returns a value
Codecoach
10.4a Predict which branch runs
Codecoach
10.4b Write a function with conditions
Codecoach
10.5a Trace a loop, one pass at a time
Codewalk
10.5b Write a loop over an array
Codecoach
10.6a Fix the AI's off-by-one bug
Codecoach
10.6b Debug this function with a tutor
Codecoach
11
Unit 11 - The DOM, Events and Frameworks
7 activities
11.1 Select elements and change the page
Codecoach
11.2a Create and insert an element
Codewalk
11.3a Read a working toggle button
Codewalk
11.3b Build a counter with events
Codecoach
11.4 Make the JavaScript UI keyboard accessible
Codecoach
11.5 From plain JavaScript to frameworks
Quiz
Capstone 2 - Build a responsive interactive page
Assignment
12
Unit 12 - Web Images
6 activities
12.1 Choosing an image format
Quiz
12.2 Resolution, transparency and favicons
Quiz
12.3a Build a responsive image set
Codewalk
12.3b Write a responsive image set
Codecoach
12.4a Read an SVG - it is just markup
Codewalk
12.4b Advise a client about AI-generated images
Airoleplay
Join this Course
This course requires a payment for entry
Cost: INR 399.00
This course includes
- 83 on-demand lessons
- 12 learning modules
- Certificate on completion
- Access on any device
- Lifetime access