netlify[bot]
commented
1 year ago Deploy Preview for html-tag-quiz ready!
| Name | Link |
|---|---|
| Latest commit | b50aaf6566ac5f368010f9028133a1abd40620b1 |
| Latest deploy log | https://app.netlify.com/sites/html-tag-quiz/deploys/653f336e326dda0008694db3 |
| Deploy Preview | https://deploy-preview-44--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.
Description
For this PR, I refactored all files in this code base except
filename.jssince this would be too much to handle in one PR.Related issue
closes #32
Acceptance Criteria
<head>to<html>Thoughts on main changes
For better understanding why I did certain changes, I try to explain by differentiating into smaller pieces.
Change of
idtoclassThe thought on this is that as for me I think it makes HTML more understandable why id's or classes are added to the element. id's are added to manipulate the element element using JS, while classes are added to update its styling.
Change position of class attribute on element
To see immediately what the classname is and IF there even is one, I positioned the class as the first attribute to each element.
CSS props
To avoid looking and foremost overlooking if certain props exist on this element, I sorted the props alphabetically. 👉🏽 and some point this can be added into an eslint to force this behavior. I would prefer it.
CSS values
For certain props I changed values to more dynamic ones, using var(--color), rename var declaration to be more descriptive, using inherit at some points instead of color itself, ..
SVG HTML logo
I moved the SVG to its own file in a folder called
assetsfor better readability of theindex.html. Even though it is recommended to add arole="img"on SVGs because of poor VoiceOver support I refused to do so since the img is decorative.❗ Problem format in
index.htmlWhen saving the indent of 2 is being deleted so the children
<head>and<body>are having the same position in the file as its parent<html>. In the workbenchsettings.jsonI could not find the correlated setting 😞