Newsletter sign-up form with success message
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. (✿◠‿◠)
Please log in to post a comment
Log in with GitHubCommunity feedback
- @angusgee
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 - @Wladi1000
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 - @Haiko-E
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 - @rivenintech
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 - @seanhillweb
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 - @davidrockkj
Your main-board have the exact size from design's main-board. How did you do that?
- @nachospreafico
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.
- @c3c3c5
i see u understand the concept of over shooting and under shooting. master is proud of you.
- @iArmanKarimi
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! 👍
- @NikNT
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.
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