Vanza Setia• 27,795
@vanzasetia
Posted
👋 Hi Nerdytoo!
I would recommend removing all the tags that you are using since you are only using plain HTML and CSS. In case you don't know, you can leave the tags empty 😉
Anyway, here are my feedback:
- Accessibility
- All the page content should live inside landmark elements (
header,nav,main, andfooter). By using them correctly, you can make users of assistive technology navigate the website easily. In this case, you can wrap all of it withmaintag.
- All the page content should live inside landmark elements (
<body>
<main>
page content goes here...
</main>
</body>
Note: Swap the div with an id of main with
main tag
- Every page should contain one
h1. In this case, you can make<h2 class="obj_2">Order Summary</h2>ash1. - The text below the Order Summary should not be a heading. It should be a paragraph. Also, don't use
brelements for presentational purposes. Read what MDN documentation says about it. I would recommend controlling the text with thepaddingof the parent element. - Don't make all the text content as
h2🙂 - Use interactive elements (e.g.
a,button, etc) for any elements that have:hoveror:activestates. - FYI, anchor tags are for navigation - moving to different pages or content on the same screen, while the
buttonelements are for actions like opening a modal, submitting a form, toggling element, etc. <div obj_1>is not a valid HTML. See the validator<div class = "container">There's no need to put a space before and after the equal sign.- For any decorative images, each
imgtag should have emptyalt=""andaria-hidden="true"attributes to make all web assistive technologies such as screen reader ignore those images. In this case, all images are decorative only. - Best Practice (Recommended)
- Write your code with consistent style (e.g. the indentation, quotes, whitespace, etc). If you write your code with consistent style, it will make it easier to read for everyone (including you, yourself).
- Always use classes to reference all the elements that you want to style. Using
idis going to make your stylesheet have high specificity (hard to maintain).
That's it! Hopefully, this is helpful!
Marked as helpful
0
