All solutions

Hello! This is my solution to the Newsletter Sign Up with Success Message challenge.

Built With:

• HTML
• CSS
• Pure JS
• Mobile first workflow approach

This was a really fun challenge. Trying to figure out how to create a message was very fun. Surprisingly, the most challenging thing was trying to position the list markers correctly. I learnt that using the ::before pseudo element allows for more flexibility than using ::marker pseudo element.

Please let me know if I could make any improvements. Feedback is always welcome!

Hello! Is there a way to increase accessibility for the table component?

Is there a way to make the transition between display: hidden and block to be more smooth?

I am also having an issue where the answer will only appear when I click on the text, but not the "plus" image. Is there a way to have it so that the accordion opens when I click the entire div?

Thank you in advance!

Is there a standard on how to organize and name CSS? Also, sometimes my text spacing is off depending on the screen size. Is there a way to make text sizes more responsive asides from media queries?

Is there a standard on how to organize and name CSS? Also, sometimes my text spacing is off depending on the screen size. Is there a way to make text sizes more responsive asides from media queries?

Is there a way to ensure that the "Add to cart" button always remains at the bottom, even with varying screen heights?

Is there a better way to style the red, yellow, green, and blue boxes so that the spacing remains more consistent with varying screen sizes?

How do you determine what html tag to use with text (eg. p vs. h1 vs. div vs. etc...)?

I used transform: translateY() to vertically center my div, is there a standard way to vertically and horizontally center divs?