Build and publish a responsive, accessible portfolio using standards-based HTML and CSS. The course moves from document structure through layout, accessibility, performance and release evidence.
Web developmentTool stack
HTML5CSS
Technology marks for HTML & CSS Foundations, sourced from the CC0-licensed Simple Icons project.
Use the cascade, box model, Flexbox and Grid deliberately.
Test responsive behavior, accessibility and performance.
Publish a portfolio with reproducible release evidence.
Course outline and revision prompts
Module 1
HTML foundations
Create meaningful, interoperable documents.
Lesson
Key terms
Revision question
Build a valid HTML document
doctype, head, body
Which combination gives a mobile browser and assistive technology essential document context?
Structure content with semantic HTML
landmarks, headings, source order
Why should a section normally have a heading?
Write links, lists, images and media
link purpose, alternative text, list semantics
What is the best alt value for a purely decorative divider image?
Instructional figureProcess flow
Build a valid HTML document
Build a valid HTML document: doctype to head to body.
1doctype
Explain the browser-facing purpose of the document skeleton.
then
2head
Create a valid page with language, character encoding, viewport and title metadata.
then
3body
Inspect parsing and metadata with developer tools.
Takeaway: For build a valid html document, retain observable browser evidence and record any limitation before accepting the result. Inspect the result in the browser and accessibility tree, not only in the source file.
Module 2
Forms and CSS foundations
Build interaction and control styling and sizing.
Lesson
Key terms
Revision question
Create an accessible contact form
label, fieldset, validation
Which attribute makes an input value available under a key during form submission?
Control the CSS cascade
cascade, specificity, inheritance
When two same-origin, unlayered class rules have equal specificity, what normally decides the winner?
Size and space elements predictably
box model, box-sizing, overflow
With box-sizing:border-box, what does width:300px include?
Instructional figureProcess flow
Create an accessible contact form
Create an accessible contact form: label to fieldset to validation.
1label
Associate every control with a persistent label.
then
2fieldset
Group related choices with fieldset and legend.
then
3validation
Use native input types and understandable validation.
Takeaway: For create an accessible contact form, retain observable browser evidence and record any limitation before accepting the result. Inspect the result in the browser and accessibility tree, not only in the source file.
Module 3
Modern layout
Use Flexbox, Grid and responsive constraints.
Lesson
Key terms
Revision question
Lay out one dimension with Flexbox
main axis, cross axis, wrapping
In the default flex-direction, which property distributes free horizontal space?
Build two-dimensional layouts with Grid
grid tracks, minmax, auto-fit
What does 1fr represent in a grid track?
Design responsive pages around content
viewport, media query, reflow
When should a new breakpoint normally be introduced?
Instructional figureProcess flow
Lay out one dimension with Flexbox
Lay out one dimension with Flexbox: main axis to cross axis to wrapping.
1main axis
Choose Flexbox for row or column distribution.
then
2cross axis
Control growth, shrinking and alignment.
then
3wrapping
Preserve usable source order and wrapping.
Takeaway: For lay out one dimension with flexbox, retain observable browser evidence and record any limitation before accepting the result. Inspect the result in the browser and accessibility tree, not only in the source file.
Module 4
Production quality
Audit accessibility, optimize delivery and publish defensible work.
Lesson
Key terms
Revision question
Test keyboard, focus, contrast and reflow
keyboard, focus indicator, contrast
Why is an automated accessibility scan insufficient on its own?
What is the purpose of the sizes attribute when srcset uses width descriptors?
Validate, test and publish the portfolio
validation, cross-browser testing, deployment
What is the strongest evidence that a release is ready?
Instructional figureProcess flow
Test keyboard, focus, contrast and reflow
Test keyboard, focus, contrast and reflow: keyboard to focus indicator to contrast.
1keyboard
Complete the interface using only a keyboard.
then
2focus indicator
Provide visible, unobscured focus.
then
3contrast
Measure contrast and test reflow.
Takeaway: For test keyboard, focus, contrast and reflow, retain observable browser evidence and record any limitation before accepting the result. Inspect the result in the browser and accessibility tree, not only in the source file.
Course practical outcome
Design, build, test and publish a professional one-page portfolio.
Expected output: A deployed portfolio, editable source, accessibility audit and versioned release record.
Tools: Text editor, Modern browsers and developer tools, Nu HTML Checker, Accessibility and contrast testing tools
Production steps
Define audience, content and success criteria.
Create semantic HTML and an accessible contact form.
Build fluid CSS with Flexbox and Grid.
Test keyboard, focus, zoom, reflow, contrast and reduced motion.
Optimize images and measure loading behavior.
Publish a preview and complete the release record.
Success criteria
HTML validation has no unresolved errors.
The complete journey works with keyboard alone.
Content reflows at 320 CSS pixels and 400% zoom without loss.
Text and component contrast meet the selected WCAG 2.2 target.
Images have correct alternatives, dimensions and responsive candidates.
Release evidence names environments, results and limitations.
Self-review
Can a new visitor identify the owner, work and contact action?
Does source order remain logical without CSS?
Can every action be completed by keyboard?
Which measured limitation should be fixed next?
Next step: Ask two representative users to complete the portfolio journey, record observations and revise the highest-impact barrier.
Glossary
doctype
Declaration that selects standards mode for an HTML document.
semantic
Meaning communicated by an element and its relationships.
cascade
Algorithm that resolves competing CSS declarations.
specificity
Selector weight considered within the applicable cascade step.
flexbox
One-dimensional CSS layout model.
grid
Two-dimensional CSS layout model.
reflow
Content adapting without loss or unnecessary two-dimensional scrolling.
This guide is generated from DigiLearn course material. Product versions, regulations and professional standards can change; consult the linked authoritative source before applying version-sensitive guidance.