I made this by referencing the image provided in the project so there are a few inconsistencies. I would like to know what can be done better here. In terms of responsiveness and stylization. How can the style be more optimized. Thank You!
Hey Philip, Using React JS for small project is not necessary. Try to use Vanilla js.
Replace <h3 class="title">annual plan</h3> with h1 tag.
Heading always start with h1 per page.
Don't jump directly h3 tag. It gives Accessibility issue.
I create solution of this project you can look https://www.frontendmentor.io/solutions/order-summary-_IZQGKWPI
It may help you.
Did I over do it in HTML? I feel like I have overcomplicated it.
Try to use Semantic HTML like header, main, section and do not wrap <main> with <div class="container">
Not so sure about making it mobile responsive - Any direction about what I should work on in that area would be great. Thank you.
In your coding you put <h1>Order Summary</h1> and <h4>Annual Plan</h4> It give accessibility issue, heading always increment by one. Remove <h4>Annual Plan</h4> with
<h2>Annual Plan</h2>Use Semantic HTML e.g. header, main, section, aside. Remove <div id="flex-container"> with <main>
Any Feedback would be appreciated
Try to use Semantic HTML like header, main, section. Replace <div class="container"> with <main>
Any Feedback would be appreciated
replace <h3> Order Summary</h3> with <h1> Order Summary</h1> It gives accessibility issue.
First heading always start with h1 not h3.
Order matter h1, h2, h3, h4, h5 Don't use h3 then h5. Use like this h3 and h4. One heading incremental is consider good.
