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

Newsletter sign-up form with success message

Caramello• 180

@BuzzFizzer

Preview site(opens in new window)View code(opens in new window)
Desktop design screenshot for the Newsletter sign-up form with success message coding challenge

This is a solution for...

Newsletter sign-up form with success message
  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison

SolutionDesign

Solution retrospective

console.log("Hello Programmers"),

This is my first project ever using TypeScript and Vue.js, and I hope I did a decent job.

Technologies Used:

Naming Convention:

  • BEM (Block Element Modifier)

Difficulties Encountered:

  • Media queries: I always find working with media queries to be a pain, especially with Vue components that are reliant on one another. Any suggestions on how to better tackle this are greatly appreciated.
  • Linear-gradient: linear-gradient does not play nice with the transition property, if you have any work around please leave me a comment.

Questions:

  • Does Vue.js scoped styles make the BEM naming convention redundant ?

If you have any suggestions on how I can improve my code, I would greatly appreciate it if you could leave a comment. Thank you in advance. (✿◠‿◠)

Community feedback

Gus• 60

@angusgee

Posted

Caramello, your feed is great! Your solutions are on point and your use of Vue and TS is something I can only aspire to. 🙌

I do have one small suggestion for this project. On both the standard Desktop view and Success state, I think the UX could be improved slightly by removing the ugly blinking caret: caret-color: transparent;

Marked as helpful

1
Caramello• 180

@BuzzFizzer

Posted

@MaltaWebDev, I really appreciate you taking the time to review my solutions.

Regarding the caret, I also agree that it looks better without it. I'll certainly make that adjustment once I'm at my computer.

1
Wladimir Sanvicente• 80

@Wladi1000

Posted

Hello Caramello.

To have a better experience with the Responsive web design I recommend using Mobile-First. A methodology for styling starting from the smallest to the largest screen, this way your projects, if they grow, will have a good scalability.

https://www.youtube.com/watch?v=0ohtVzCSHqs

Marked as helpful

1
Haiko• 200

@Haiko-E

Posted

He there, wanted to give you an answer on the scoped style and BEM. When using scoped styling, BEM is not necessary. Just back to writing short classes 🤙

about media queries, i also think its a pain in the ass. But if your trouble is to handle it with different components. the new container queries is gonna be a nice solution. still not fully supported by browsers but think its gonna be very helpfull in future.

Marked as helpful

1
RiveN• 60

@rivenintech

Posted

I was also looking for a workaround to create a transition between gradients on my second challenge. I found these interesting:

I didn't test them yet. I had enough "fun" after trying to match gradients on my second challenge.

I hope one of these works. 😀

Marked as helpful

1
Sean Hill• 200

@seanhillweb

Posted

I had a similar difficulty with transitions and CSS gradients. I found this article to be helpful and informative: https://fjolt.com/article/css-animating-transitions-gradients

However, I didn't use this approach for my solution either. This feels over engineered.

Marked as helpful

1
David Rocha• 20

@davidrockkj

Posted

Your main-board have the exact size from design's main-board. How did you do that?

1
Caramello• 180

@BuzzFizzer

Posted

hello there @davidrockkj,

I use the PerfectPixel extension to get my code looking as close as possible to the design, highly recommend checking it out.

1
Ignacio Spreafico• 590

@nachospreafico

Posted

Hey Caramello! Really loving your feed. Although I don't use TS or Vue, I find your work nicely organized and the designs really on point.

Keep it up, you are really on to something! Happy coding.

1
c3c3c5• 60

@c3c3c5

Posted

i see u understand the concept of over shooting and under shooting. master is proud of you.

1
Arman karimi• 80

@iArmanKarimi

Posted

Impressive solution! Your use of TypeScript and Vue.js for the Newsletter sign-up form is commendable. The form looks clean and user-friendly. Keep up the great work! 👍

1
Nikhil Tanwar• 260

@NikNT

Posted

An excellent job, Caramello!

If possible please checkout my YouTube video where I undertake this challenge using ReactJS and CSS. Any feedback would be highly appreciable.

https://youtu.be/B9T_yjWqZtk

Keep Coding.

1

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