Build semantic structure
Create a small institute page with header, navigation, main and footer landmarks. Use headings to describe the document hierarchy and labels for form controls. Choose links for navigation and buttons for actions so keyboard users receive predictable behaviour.
Make layouts responsive
Start with a single-column layout and add wider layouts when content needs them. Use flexible images and grids, then test long headings and narrow screens. Fix the element that causes horizontal overflow instead of hiding overflow across the entire page.
Design usable interactions
Provide visible keyboard focus, clear form errors and sufficient text contrast. Keep important actions easy to tap. Show loading and error states for network-dependent interactions, and respect reduced-motion preferences when introducing animation.
Practice project
Build a three-page training website with a course listing, details page and enquiry form. Test keyboard navigation, 320-pixel width, image loading and readable text at zoom. Submit screenshots and an explanation of layout, typography and accessibility decisions.
Web design lab: complete the form by keyboard
Open the enquiry form and complete it using only the keyboard. Check that focus order follows the visual reading order and remains visible. Submit an invalid email and a missing required name, then verify that errors identify the field and explain the correction. Repeat at a narrow viewport with long course names. Keep labels visible instead of relying only on placeholders. Document one accessibility issue you found and the change that resolved it.
Check your progress
Keep your working files, test cases and notes together. Explain one design decision, demonstrate a failure case and list what you would improve next. These concrete outputs make it easier to identify the next skill to practice.