Submitted about 3 years ago

PING! First one done (HTML / CSS with BEM / Vanilla JavaScript)

drallas• 375

@Drallas

Preview site View code

This is a solution for...

Ping single column coming soon page

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

This was my first Frontendmentor Challenge and this is also the first solutions i submit. I tried to be as close as possible to the design without obsessing about pixel perfectness. Perhaps it's completely off since i struggled extracting the correct sizes from the jpeg files.

Some Feedback would be welcome on the project in general.

What is also weird is that the Media Queries seem the kick in a bit later / earlier than the value i set. I have no idea why this is.

PS : I have some (prf) HTML experience from the mid 90's; almost completely useless now i see! Then tables where abused for layout, CSS didn't exist (yet) and JavaScript was just invented still competing with VBScript for relevance.

Community feedback

Agata Liberska• 4,015

@AgataLiberska

Posted about 3 years ago

Hi @Drallas! Well done on this solution, it looks great! There's just a few minor things - on desktop, the font size of the placeholder text and the button becomes really small. The button could also use some hover styles.

Is the color of the error message right? It looks so light I'm struggling to read what it says, but I'm not familiar with this challenge, so don't know the design.

I also think you've got some <div>s within your form that are not entirely necessary, for example the button is wrapped in two divs. But I may be missing something, sorry if that's the case :)

drallas• 375

@Drallas

Posted about 3 years ago

@AgataLiberska Thanks for your feedback. I look into all the points; I'm here to learn so tweaking my solutions is going to be part of the fun.. :)

Agata Liberska• 4,015

@AgataLiberska

Posted about 3 years ago

@Drallas it really is :)

Please log in to post a comment

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