Design comparison
Solution retrospective
I'm honestly proud of the desktop design. I feel like its very similar to the original design
The only mistake I made was to make desktop version first which made it really difficult to convert it to mobile version
I didn't do the mobile version as I don't want to spend too much time on it
I now understand why people do mobile first as its easy to expand to a bigger site. I will do that with the next project
What challenges did you encounter, and how did you overcome them?I was trying to show my email address that I entered in the success page but, it wasn't showing up.
After a lot of digging I found that my script was running before the DOM was loaded
So to overcome that I used DOMContentLoaded to ensure that my DOM loads first and then the script
I used localStorage to store the value from the input field and updated the textContent of the field where the value should go and fetching that value from localStorage
What specific areas of your project would you like help with?I would like to have just overall feedback about my code and what can be improved
I know I didn't do the mobile version so I would like some feedback without that
Also another thing, I used BouncerJS to validate my email but I couldn't get the error message to be displayed as an inline.
Community feedback
- @Alex-Archer-IPosted 5 months ago
Hi!
Neat work! I like that you manage to match design almost perfectly. And that's cool that you are practicing such thing like
localStorage
- it could be very useful =)But I need to warn you that in real project it'll be a bit of bad UE if the page have to reload just to show modal window. So, better approach will be to switch
display
between two windows via JS.Error message takes another line for two reasons. At first, it's a block element, so it tends to get all the line width, and second - the parent element of
label
,input
and error message have adisplay: flex
with aflex-directuion: column
. To fix it you can put error message into thespan
insidelabel
and set label to flex.<label for="email">A label <span>An error message</span></label>
Or you can wrap
label
and error in the flexbox.Oh, and a couple of semantic tips - you should use
main
tag for every page, and.benefits
element is a list, so it's better to useul
andli
here.Hope that could help, good luck =)
P.S. I too began to understand benefits of mobile-first when I started bigger projects. That's one thing which come with exp =)
0
Please log in to post a comment
Log in with GitHubJoin 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