Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

news-letter-sign-up using CSS and Javascript

@shinhosuck

Desktop design screenshot for the Newsletter sign-up form with success message coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


On this project the hardest part was adjusting the height for the image on sign up page/index page when transitioning from mobile to large screen. I eventually figured it out by using flex-box and grid. Also, on success.html on mobile, the success card gave me some issues. As the screen got smaller, the card height would shrink and the card parent container would show with dark background. I fixed this issue with little bit of JavaScript.

I have some question regarding CSS.

  1. What is the best practice when working with images?
  2. How to organize CSS?
  3. Best practice for naming selectors?

Thank you very much for your help!

Community feedback

@antoebtfr

Posted

Great job ! 👍

  • Missing the cursor: pointer on the subscribe button
  • [email protected] is static in the success modal. Try to set it dynamically. Ask me if you need help

Answering questions

  1. Depends of the project and of the situation
  2. In the project architecture or in a CSS file ?

Architecture :

Depends of the structure, frameworks, CMS used but essentially you regroup them in style folder with different files like style/main.css, style/card.css

Ex : https://github.com/antoebtfr/fM_TODO_list/tree/master/styles

File :

No organisation needed, it's not like scss. Just try to not duplicate the selector like .news-container at line 34 and the same .news-container at line 356 so try to search ( with the command ) in the file if there is no selector yet. If there is media queries in the file try to place them at the end but it's not a "rule"

3.Make it obvious, and use kebab-case

It triggers me so much to see the "Challenge by" like this. So ugly😂

0

@shinhosuck

Posted

@antoebtfr Thank you very much. Are you saying do not include "Challenge by" or place it some where else? Yeah, the email is not dynamic. I just realized that. Thank you again.

0

@shinhosuck

Posted

@antoebtfr I fixed the dynamic email issue. Can you see please. Also, I added redirect to index.html/signup page, if the user tries to skip the signup and go directly to success page. Thank you again.

0

@shinhosuck

Posted

@antoebtfr thanks

0

@shinhosuck

Posted

@antoebtfr How are you Antonain? Can I asked you a favorite? Currently I'm working on a e-commerce website and I'm looking for someone to browse through my site and give me some feedback. Man I try to get some feedback from reddit r/webdev and r/web-design, but no avail. Did not get any feedback. Can you give me some feedback when you have some time. I'm asking you because I like the way critique. Any feedback will be greatly appreciated. Thank you very much. Here is the site: https://aiaimarket.pythonanywhere.com/

You can you - username:test_user, password:NewUser123 or create new account.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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