Build a single-page website about your personal hero with a nav, images, headers, text and a contact form, using the accessible techniques you’ve learned.

ASSIGNMENT

You’ll be learning how to create HTML elements and style them with CSS, all with fully accessible features by making a single-page website all about your personal hero.

DELIVERABLES

Share a link to your website and also add a screenshot to the gallery. It would be great if you check out what others have done and also leave some feedback. Sharing is caring! The finished project should include at least the following:

A semantically correct navigation
An image with an alt tag
An H1 and H2 header
A contact form with labels and fields

Bonus points:

Include a transition or animation with a reduced motion media query
Include some semantic tags not shown in the course
Include an accessibility feature that I’ve not mentioned in the course

RESOURCES

MDN Accessibility docs - Use this website for all useful accessibility references
WCAG Guidelines lays out the official W3C accessibility guidelines

APPS

Here are some links to apps and websites that I used in this class:

GitHub pages - where you can host your website
Github desktop - where you save various versions of your website
VS Code - the IDE I used in this class
Lighthouse - Accessibility auditing tool

REFERENCE

My website - Here is my class project.
My code - Feel free to check out my finished code!

Shelby Arnett

--

11