Transform templates and content into searchable and coherent pages.
These sheets describe activities and teaching exercises. They do not constitute job offers, certifying courses or recruitment promises.
All job descriptions
Turn content and mockups into consistent HTML and CSS while preserving reading structure, responsive presentation and the design system with real content.
Integration may include simple interactions; the boundary with front-end work varies by team. Assign API, application-state and server responsibilities explicitly.
Integrate a credited photo, table and form, then check mobile overflow and zoom.
This is an editorial description of common activities. Job titles and scope vary across teams; it is not a certification framework.
W3C: organising accessibility responsibilities across a team
Integrate an article with table, captioned image, links and translated version.
Work on a copy or demo environment. Define the data used and the expected result before you begin. Keep your decisions and the difficulties encountered in order to be able to explain the process.
Integrated pages and a reproducible verification statement.
The same page rules remain usable with content of different sizes and languages.
For each check, note the context, the action, the expected result and what has been observed. Distinguish a successful verification from a remaining hypothesis. Another person must be able to understand the deliverable without attending all its manufacture.
Use the Functional Validation BookThe actual content is often longer than that of the model. Do not reduce the information to hide a template problem.
Collaboration to explore: Webdesign.
Specify the sharing of responsibilities: who provides the information, who decides, who checks and maintains the result. A good handover retains the constraints and decisions, not just the final file.
Employment, trades and trainingIntegration turns content and design into a usable page. Assess it with real copy, authorised media and browser navigation, including changes in available space.
| Skill | Evidence to examine | Failure to spot |
|---|---|---|
| Structure | Headings and regions describe a logical hierarchy. | Visual heading size replaces its semantic level. |
| Adaptation | Tables remain usable and copy is not clipped. | Whole-page horizontal overflow hides controls. |
| Media | Dimensions, loading and alternatives match the purpose. | Decoration is described as information or a useful image lacks an alternative. |
Download the editable CSV checklist
The file contains this table and blank columns for the observed result, owner and follow-up. It opens in a spreadsheet; downloading it does not send your observations to the site.
Revisit a long page with a list, table and image. Check keyboard navigation, enlarged text and a narrow viewport; retain a defect example and the corrected result.
In-depth exercise: Turn a model into a structured page containing navigation, article, image and frame. Start with an understandable reading order without CSS, then add the columns. Test the zoom, keyboard and longer text. Compare calculated font sizes to the mockup's intentions. A layout obtained with fixed heights may seem correct on a capture and break as soon as a translation adds a few lines; Check this case explicitly.
These criteria are a working basis to adapt to the context. For each, note the action taken, the expected result, the observed result and the information remaining to be confirmed.
Attach files width rules, change points and cases that motivated an exception. Specify the shared styles and page ones to avoid competing corrections. A new file must be able to reuse the template without copying arbitrary values. Control integration into the browser after any changes to the content or common component.
Implementation turns visual intentions into rules. Compare a bespoke page with a reusable template according to content diversity and publishing frequency.
Fixed text heights can cut off translations or enlarged fonts. Use imposed proportions for media only when cropping is appropriate.
Create several content samples and compare them at different widths. Document shared rules before correcting exceptions.
It allows you to show an approach and its limits. It is neither a diploma, nor a certification, nor proof of a production experience.
Specify that this is an exercise, your role, constraints, decisions and checks. Use test data and media whose rights are established.
The same page rules remain usable with content of different sizes and languages. Add the difficulties encountered and what remains to be verified rather than presenting absolute validation.
Remove the block and redistribute space, or use a clearly identified placeholder. Do not keep a large empty column or imply that a generic image depicts the subject. Check alternative text.
