[DRAFT:] Styled headings and form

[YuriDevAT]

Description

I started applying the styling we decided in Figma.

Current state

• Logo
• Heading 1
• Heading 2
• Form (label, input, button)
• Progressbar
• List

Link to Figma File: https://www.figma.com/file/FnY3XGLmYCSpMKoEDEqcPF/HTML-Tag-Quiz?type=design&node-id=0%3A1&mode=design&t=yayElEf78YayM21g-1

Related Issue

Closes #35

Acceptance Criteria

Type of Changes

	Type
	🐛 Bug fix
	✨ New feature
x	🔨 Refactoring
	💯 Add tests
	🔗 Update dependencies
	📜 Docs

Updates

Before

After

Checklist before requesting a review

• I have performed a self-review of my code.
• Followed the repository's Contributing Guidelines.
• I ran the app and tested it locally to verify that it works as expected.
• I have checked my code with an automatic accessibility tool such as Axe Dev Tools or Wave
  and it shows no errors.

Testing Steps / QA Criteria

• I am not satisfied with the names I came up with for the CSS variables
• I got rid of the class names and using tags instead. Reason for this is, that the app is small, and I wanted to take the chance to learn more about parent / child / element relations and using +, > and such, as well as [type=""]

[netlify]

✅ Deploy Preview for html-tag-quiz ready!

Name	Link
🔨 Latest commit	06c4ef7
🔍 Latest deploy log	https://app.netlify.com/sites/html-tag-quiz/deploys/6592e39ab124b200087c4ae0
😎 Deploy Preview	https://deploy-preview-58--html-tag-quiz.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[CorinaMurg]

This looks great! I was able to make sense of the css variables (but I understand the pain of coming up with good names!)

I'm also excited about the change from classes to tags! It just so happens that I am using the same approach on a project right now (it's a bigger code base, so I am still using quite a lot of classes) but instead of a class for everything (like I used to) I'm relying more on parent-child relationships and nth-of-child / :not() etc. As someone whose never been a big fan of CSS, I am starting to understand it and like it more this way.