Design comparison
Solution retrospective
Please give a feedback on my card especially on the responsive design CSS
Community feedback
- @somecallmejoshPosted almost 5 years ago
Hey there, this looks great. It loads fast, too. I think you've done a great job here. Here's some thoughts regarding your HTML here for your consideration.
In the following section
<div id="sec1">
:<h2>Monthly Subscription</h2> <h3>$29 per month</h3> <h3>Full access for less than $1 a day</h3>
You have an
<h2>
immediately followed by two<h3>
's. While this won't return a validation error, an<h3>
or any header element, should be followed by some content—like a paragraph, or list, or tabular data. So, in order to keep the HTML semantically correct, I'd recommend converting those H3's to<p>
's.You could also consider replacing the
<div class="header">
with the HTML5<header>
element. The<main>
element could be used to include your two divs,id="sec1"
andid="sec2"
So, a structure like
<header>... all your header content </header> <main> <div id="sec1">...</div> <div id="sec2">...</div> </main> <footer> ... all your footer content </footer>
One recommendation regarding your responsive design:
You may consider using a width and a max width on your container element. For instance:
.container { width: 100%; max-width: 720px; }
This will help ensure your content doesn't get cut off when resizing the browser.
I hope this helps. Again, super job. Keep up the fantastic work.
1@LinyThomasPosted almost 5 years agoThank you so much for the valuable feedback. I have rewritten my code as per your suggestion. This feedback isvery much valuable to a person like me who is new to front end web development. Thank you once again.
1@somecallmejoshPosted almost 5 years ago@LinyThomas That's so awesome! It's great that you're taking full advantage of the opportunities that this site offers. We can all grow together!
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord