Responsive Landing Page Utilizing SCSS/SASS

Community feedback

• 

  P

  Emmilie Estabillo•5,540

  @emestabilloPosted 11 months ago

  Hi @MeltedGreenVelvet, congrats on completing this challenge! A few suggestions:

  • The challenge has 3 major parts: header, image, text with form. On mobile, they will naturally stack (no need for flex). On desktop, use grid. You can create a 2 column grid with template areas:

  header image 
  text image
  

  • Why is the header tag empty? .logo-container must be placed inside it and its contents not absolutely positioned to the body.
  • There’s a duplicate link that goes to the homepage inside the logo-container
  • For the logo - Alt text are not used by svgs. Better to use the img tag and the logo as src, with proper alt text ‘Base Apparel logo’ or ‘Base Apparel | Home’.
  • For the woman image, look into the <picture> tag instead of duplicating img depending on screen width.
  • Avoid hardcoding height and width. It can lead to content overflow or elements getting cut off
  • JS: For every incorrect email entry, the document adds another error icon. Once the user input passes validation, only the last error icon is removed.

  Housekeeping tips:

  • Default font sizing for browsers is 16px. Line 8 font-size: 16px can be deleted. Line 9 box-sizing: border-box is usually grouped together with the reset styles at the top.
  • The default value for font-style is normal. No need to declare it each time unless you need to change value to italic or oblique.
  • Avoid nesting selectors to keep specificity low. Nest your selectors only when needed (usually it’s done to override a style declared previously). Keep them all at one level if possible.

  As far as pixel-perfection, it’s a myth :-) Instead, get as close as you can to the design while keeping your markup accessible. Check out this great article.

  Hope this helps!

  Marked as helpful

  1

  ---

  

  P

  MELT•170

  @MeltedGreenVelvetPosted 11 months ago

  Oh, @emestabillo! You're absolutely amazing for this thorough critique. Thank you for taking the time to look through my code. I'm going to save this comment and give this challenge another go with your suggestions in mind.

  Regarding the pixel-perfection: As part of my day job, I create designs in Figma and build them in Webflow. I still have a lot to learn. I would get very close, but not exactly, to the original design. I'm not looking for a new job currently, but seeing job listings mention how we must be "pixel perfect" fills me with a lot of anxiety. And, I'm like-- How though??

  The linked article definitely address these concerns. I'm going to read more about this topic and the transition from design to live site.

  1

  

  P

  Emmilie Estabillo•5,540

  @emestabilloPosted 11 months ago

  @MeltedGreenVelvet Haha I totally get what you mean about the word 'pixel-perfect' in job descriptions. The translation for that is that you can understand and 'read' design specs, and are able to get as close as you possibly can with the live site. So don't stress, as the article says, there are so many variables at play with different browsers and devices that it's not realistic to be completely 1:1 with the comps. Best of luck with future projects! :-)

  0