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

html, sass, vuejs

Elise Rousseauā€¢ 685

@SarahHenriette

Desktop design screenshot for the Minimalist portfolio website coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello, I realized this challenge with VUEJS, all suggestions are welcome :)

Community feedback

P
ApplePieGiraffeā€¢ 30,545

@ApplePieGiraffe

Posted

Hey, Elise Rousseau! šŸ‘‹

Nice work on this challenge! šŸ™Œ Your solution looks pretty great! šŸ‘

Simply follow emestabillo's helpful suggestions and I think you'll be good to go! šŸ˜€

One other tiny thing I noticed is that the elements in the form "jump" a bit when one of the form elements is focused (I think that's due to a border being added to the focused form element, slightly increasing its width and height and therefore causing the other elements to be pushed away just a tiny bit). You can get rid of this behavior by adding an invisible border around the form elements and simply changing the color of those borders when the form elements are selected. šŸ˜‰

Keep coding (and happy coding, too)! šŸ˜

0

Elise Rousseauā€¢ 685

@SarahHenriette

Posted

Hey, @ApplePieGiraffe :-D,

Thank you very much !

Thank you also for your remark and your solution for the problem you have highlighted

I would apply the advice you and emestabillo gave me :-)

thanks again :-D

0
P
Emmilie Estabilloā€¢ 5,540

@emestabillo

Posted

Hey Elise, congrats on this project! Looks exactly like the design. Just noticed a few things.

  • I'm getting a horizontal scrollbar around 600-690px

  • The form needs a little adjustment:

    • It is using both the default and JS validation. Perhaps adding novalidate will leave the validation solely to Javascript

    • If the email input is empty, both errors for empty and invalid are shown

    • If the email format is invalid, the native error message is shown

    • If the email format is invalid and the other two fields are empty, there are no error messages for the two empty inputs

  • There's also a few things to address in the accessibility report

Hope this helps :-)

0

Elise Rousseauā€¢ 685

@SarahHenriette

Posted

Hello Emmilie :-),

Thank you for your very insightful comments :-) . It helps me a lot.

I admit I still have trouble with the forms !

Thank you again for your help :-)

0

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