Newsletter sign up with success message using Flexbox

Please log in to post a comment
Log in with GitHubCommunity feedback
- @6alactico
Great job on the interactivity! I have a few suggestions to improve structure and responsiveness. When creating lists, consider using
<ul>
or<ol>
with<li>
elements instead of wrapping each item in<div>
and<p>
tags. You can still customize the bullets using the::marker
pseudo-element. Also, since each card functions as standalone content, using an<article>
tag instead of<div>
would be more semantically appropriate. Lastly, the current layout does not adapt well when the screen is scaled, so I recommend reviewing responsive design principles to improve adaptability.Marked as helpful - @Abimzz
First of all, congratulations on completing the project—it looks great!
I did notice a few minor issues that could be improved:
Desktop
- The
.card
element is not centered horizontally. - The padding at the bottom of
.card
is not visually balanced with the rest of the card.
Between 1020px and 430px viewport widths
- The
.card
does not fully cover the form area.
Mobile
- The page becomes scrollable, which may affect user experience.
General
- After dismissing the
.successCard
, the form fields do not reset. - Most of the ARIA roles used are either unnecessary or incorrectly applied.
- The
#resetBtn
button does not require atype
attribute.
Suggested Fixes
Desktop
- Replace
margin-top
withmargin: 2rem;
on.card
to properly center it. - Adjust padding to ensure visual uniformity at the bottom of
.card
.
Between 1020px and 430px
- Remove fixed height and width properties from
.card
to allow it to fully cover the form.
Mobile
- Remove
margin-bottom
from.container
to prevent unwanted scrolling. - For
.successCard
, setheight: 100vh;
to fill the viewport height. - Replace old padding with
1rem
for consistency. - Add
margin-top: auto;
to both.message
and#resetBtn
to improve layout spacing.
General
- In your JavaScript, add
emailInput.value = '';
to reset the email field when dismissing.successCard
. - Remove unnecessary or misused ARIA roles from
index.html
to improve accessibility. - Remove the
type="reset"
attribute from#resetBtn
since it is outside the form and does not require it.
- The
Join 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