Base apparel - HTML, SCSS, Grid, JS & mobile-first!

Community feedback

• 

  Marlon Passos•940

  @MarlonPassos-gitPosted about 3 years ago

  Hello darry, good job. Her design was good, very flexible for all screen sizes. Now some of my suggestions for you to improve the project

  • I would add a background-position: top; to the girl's image because in some screen sizes her face is cut off, see https://prnt.sc/1tgybpj

  -I would put a larger left margin to look more like the original version

  • Add a more interesting hover effect to the button and input

  • In case of pages that fit on the user's screen without scrolling, I recommend putting your reference "Challenge by Frontend Mentor. Coded by @darryncodes." using a fixed placement as this prevents this from happening: https://prntscr.com/1tgz231

  • When you are going to put some content in the html that on loading the page is not to be displayed, put this content inside a <template> tag. In this case I mean the <p class="success"> and <p class="error">

  • The image in the desktop version does not occupy 50% of the screen but a little less (42.361% to be more exact), that the subtlety in the visual that also helps to leave more space for the text (but this is the least significant point)

  Marked as helpful

  1

  ---

  

  darryncodes•6,370

  @darryncodesPosted about 3 years ago

  Hi @MarlonPassos-git thanks for taking the time to feedback, much appreciated.

  I've updated my design accordingly, here are some responses:

  • bg position top added
  • left margin added, good call
  • box-shodow added on hover of the submit btn
  • i'm okay with the position of the attribution footer, very valid feedback and would definitely help
  • I didn't know about the <template> tag, really interesting - i'll be mindful of this next time
  • updated the hero mage to account for 60/60 split, i didn't seem to notice the subtlety in the design - good spot

  0
• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted about 3 years ago

  Hiya, it looks very good on all screen sizes! The only problem I'd say I have with your solution is with the JS part as it lets me submit an invalid email address. I'm really not an expert at JS myself but I think the most common way to do this would be to actually add the eventlistener to the button, listening for submits (so you don't get the error messages while you're typing) and then test the email input against a regex.

  edit: If I remember correctly, it was this video that helped me a lot with validations: (https://www.youtube.com/watch?v=rsd4FNGTRBw&t=1104s)

  Marked as helpful

  1

  ---

  

  darryncodes•6,370

  @darryncodesPosted about 3 years ago

  Hi @FluffyKas thanks for the YouTube link, it was really helpful.

  I've updated my solution and learnt a little more!

  Happy coding 🤙

  0