Part 1 - HTML
Choose an interview or article from here, ideally 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. If the original article does not have images, add a few relevant images throughout.
- Prelude and artist photo
- Interviewer/author name and date of publishing
- “Some Things” portion
Part 2 - CSS
Now, add CSS styling to the article. Focus on improving clarity, organization, and hierarchy. Make sure that the style is distinctly different from the Creative Independent’s visual style.
Look through the w3schools CSS Reference and play around with different properties——there’s a lot and many will probably seem too daunting or confusing, but don’t let that deter you! Each reference has a tutorial for implementing the property and using it. Try to get used to navigating the w3schools site and following tutorials.
Part 3 - Variants
For this part, create 2 new versions using different CSS stylesheets for the article. You’ll want to treat these as separate websites, with new distinct folders. You can copy the HTML document that you wrote in Part 1, but for each variation you’ll have a different stylesheet (though you may need to or want to alter parts of the HTML document to work with the CSS).
For the first variation:
- Use another existing website as inspiration for styling this variation (again, not Creative Independent).
- Use the Chrome devtools to inspect the model site’s styling and structure for implementation on your article.
- Reference the inspiration website somewhere on the page.
For the second variation:
- Style this one however you like, but this time privilege experimentation over legibility, hierarchy, etc.
- Keep looking through the w3schools CSS Reference and try to implement some new properties.