This is the ARTG 405 class' first attempt at creating something with newly acquired semantic HTML and CSS skills. The student has to think about how the user will use the information displayed on the card, present that information in an order that makes sense using intuitive UI guidelines from their reading and class discussions, then translate that design from sketches and XD to HTML and CSS.
- Reading from chapters 1-4 of Designing with the Mind in Mind
- Hand Drawn sketches/wireframes
- Adobe XD prototype
- HTML
- Containers (section, article, aside, div)
- Text information hierarchy (h1, h2, h3, p)
- Images (including images in the HTML)
- CSS
- Classes (styling text and other elements)
- Text element sizes
- Importing fonts
- Background images (importing images through CSS)
- Element height and width determination
- Flexbox (arranging elements)
