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 (HTML | CSS | Vue JS Composition API + Vite )

Cheosphere 1,040

@Cheosphere

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


...made with a lot of love 🤘🏻🙂

Community feedback

Yabsira 710

@Yabsira21

Posted

Hello Cheosphere! All your Projects have been nothing short of perfection. but how do you know the exact size of everything? especially the big cards

2

Cheosphere 1,040

@Cheosphere

Posted

Hello @Yabsira21, I have some knowledge of graphic design, what I do is carefully examine the "desktop-design.jpg" file, using photoshop or illustrator, so I can measure the sizes, margins and padding of each element, and apply it to my development to achieve a result almost identical to the UI design that they give us in the project files folder. It's a bit stressful and time-consuming work, but I like seeing the end result.

12
Ryoshi1001 140

@Ryoshi1001

Posted

@Cheosphere

Good information here am sure all people here want work to be exactly like the designs made I have Figma and will try it thank you take care.

1

@aero-26

Posted

@Cheosphere Amazing bro, thank you for this info, do you have any resource that can explain your methods or the steps that you take ? I want to improve too ... It would be really helpful if you let me know how to get close to UI part..

1
idyllicly 40

@idyllicly

Posted

just curious did you finish this challenge in one sitting?

1

@mickewasowski

Posted

WOW! Literally pixel perfect!

1

@subodh16728

Posted

Hi, indeed a great project. I have a question. Recently I created a webpage using HTML and Tailwindcss. I am trying to deploy it on vercel. But when I'm hitting the deploy button only the HTML is getting displayed and not CSS. Can you help me with the same?

1

@eBeknur

Posted

my friend, there was a mistake in putting the picture, it was overlooked, but it won't hurt if you fix it. Thank you for understanding

0

Cheosphere 1,040

@Cheosphere

Posted

@eBeknur Hello EVGBeknurDev, the image in svg format that they provide us in the project files folder has that difference compared to the jpg file with the design view, if you look at other solutions that other users have made, they all have the same detail.

2

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