Submitted almost 3 years ago

VS Code, HTML5, CSS3, JavaScript

Azubuike Njoku• 65

@DrZubby

Preview site View code

This is a solution for...

Intro component with sign-up form

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Update: After much research effort, I was able to solve most of the initial problems I encountered (especially with responsiveness) while solving this challenge.

I still need to be proficient with using regex for form validations though. I would appreciate suggestions that recommend very specific resources to help me improve.

Thanks.

Community feedback

Faris P• 2,810

@FarisPalayi

Posted almost 3 years ago

The problem here lies on the background-position property. For example, give it a value like center right 7px to always make it center on the vertical axis, and 7px far from the right.

Marked as helpful

Azubuike Njoku• 65

@DrZubby

Posted almost 3 years ago

@FarisPalayi

wow. great idea although I have already made some adjustments to my html, css and js files to fix these issues, however I'll sure experiment with this your suggestion. Meanwhile, can you recommend any resource(s) for learning validation with regex?

Faris P• 2,810

@FarisPalayi

Posted almost 3 years ago

@DrZubby Yeah sure, take a look at this guide from MDN Client-side form validation even though it doesn't focus on regex, it's a great article to learn client side validation. Also, take a look at, this article from sitepoint Client-Side Form Validation with HTML5

Fluffy Kas• 7,735

@FluffyKas

Posted almost 3 years ago

Hiyo,

Error symbol: I would use position: absolute instead of setting it as a background, so it always stays in the same place. I'd also play around with media queries and set a min-width for desktop view so it doesn't get too squished as you decrease the screen size. For email validation, I'd suggest looking it up on youtube, there are great step by step tutorials on this topic that helped me a lot. :)

Good luck!

Marked as helpful

Azubuike Njoku• 65

@DrZubby

Posted almost 3 years ago

@FluffyKas If I used position: absolute, I would be required to place it on a particular area using top xx right xx. Wouldn't that make all the images to overlap and stay at one area? Or should I give each image a separate Id and style individually?

Fluffy Kas• 7,735

@FluffyKas

Posted almost 3 years ago

@DrZubby Give its parent element position:relative. Then the absolutely positioned element will be relative to its parent, not the html element (which is the default I think).

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