Assignment 1
Part 1 - Semantic HTML
Choose an interview or article from The Creative Independent, one with multiple levels of hierarchy and images. Translate this article into HTML. Focus on hierarchy and using the most specific elements to organize the content.
Include:
- Prelude and artist photo
- Interviewer/author name
- Date of publishing
- Article text
- “Some Things” portion
Resources
Part 2 - Figma design & CSS
Now that we're familiar with our article's content, use Figma to design your the visual language. Consider these questions while working:
- There are multiple interactive elements (links and highlighted sections), so how could I differentiate these while keeping things clear?
- Does every instance of an element need look the same? For example, what could it mean if one highlight looks unique in some way?
- What is size of type range in your design — what are the biggest and smallest sizes used?
- How does the content dictate the choices you make? For example, could someone who's work is based on future-thinking be design to look retro? What would that mean for the reader?
Using your Figma design as a guide, add CSS to the article.
Resources
- MDN CSS reference