Date created

2021-06-07

Project Title

MapStuff - personal blog example

Description

Utilize HTML and CSS skills to build out a personal blog website, including custom images, layout, and styling. Respect style guides and develop a design system.

Steps

1. Structure the project
2. Sketch the pages
3. Consider a design system
4. Build the HTML for the main page
5. Build the HTML for the example blog post
6. Formalize the design system
7. Style the pages with CSS; consider the following resources:

• Colors:
  • Paletton
  • Colorpicker for data
  • Elegant Figures
• Typography:
  • Type Scale
  • Google Fonts
• Accessibility:
  • tota11y
  • Axe

8. Compare to the initial sketches, and iterate
9. Set links between pages
10. Test and iterate

TODO

GDPR consent box, add comment form, categories dropdown, search by tags, another syntax highlighter.

Note

Using Chrome Dev Tools with Axe extension, there will be false positive results for the issue 'Elements must have sufficient color contrast', for elements that have gradients or images as background.

Disable the background gradient for links in typography.css, to test fewer issues.

Credits

Alexa Cristina