React and Next.js 13.4 landing page using sass, grid and flex

Community feedback

• 

  P

  Emmilie Estabillo•5,540

  @emestabilloPosted about 1 year ago

  Nick!!! Good to see you here! The project looks great!

  For your questions:

  1. Social logos - I would use svgs for this instead of img tags. That way, you can manipulate the fill property depending on the pseudoclass.
  2. Mobile menu - When using visibility: hidden, have you tried adding pointer-events: none to hamburgerContainer (which should be a button btw for accessibility)? I usually hide mobile menus with a combination of positioning, opacity, and then adjusting top/left/right depending on the design. This approach makes transitions possible.
  3. I see your point about the images 😄. Maybe I’ll have @mattstudert weigh in. My two cents is that a well-written readme with good UI and accessibility will often turn heads than the images in your project.
  4. A few more things:

  • Use one menu for both mobile and desktop, and adjust their UI with CSS. It’s best for accessibility and maintenance.
  • You could use the nav tag as a parent for Header contents, instead of nesting another div.
  • Learn More is most likely a link.
  • Images could use a more descriptive alt tag. The logo for example, could have Sunnyside logo, and the client images alt=“Jennie” for the Jennie block.
  • Client Testimonials is a section heading, so h2 is more appropriate. Use CSS classes to change text appearance.

  Hope this helps and lmk if anything!

  Marked as helpful

  1

  ---

  

  Nick Carlisi•180

  @nickcarlisiPosted about 1 year ago

  @emestabillo,

  Hey Em, I thought I might run into you here! 😄 Thanks for the feedback. I did this one fairly quickly. I've been working on a bigger FEM project (Scoot), but it's been taking longer than anticipated (as is often the case) and I just wanted to have something new to throw on the portfolio. Ironically, I've built close to a dozen full sites over the last year and a half, but due to copyright issues, I don't think I can use them for my personal portfolio.

  • I'll try using svg instead of image for the social links. I feel like I've done this in the past actually, using font awesome icons, but that was a while ago.

  • I think I did try using 'pointer-events: none' for the mobile menu, but it still seemed to block the clickable elements below. Generally, with a mobile menu, yeah, I would have it positioned off screen when it's closed, but in this case with the design, it seemed like it should just pop up like a modal. I suppose if I move it off screen and then back on with no transition, by the time the transitions (opacity, etc.) take place, the menu will already be in place. I know I've done this kind of thing before. I'll just need to look back at some previous projects to refresh my memory.

  • I'll go through your other comments as well. Some, such as the 'learn more' link and alt tags, were probably due to me rushing a bit.

  • Admittedly, I tend to ignore the readme, which I realize is a no-no. I guess, I just find the actual coding more fun than writing about it, but I need to remedy that.

  Thanks again and hope you're well!

  1

  

  P

  Emmilie Estabillo•5,540

  @emestabilloPosted about 1 year ago

  @nickcarlisi Yeah, wish we could see what you've been up to with the bigger sites....I've seen your work on production, so I know it's 👌.

  I've been working on the same project...and just like you, finishing it and not getting distracted is another story lol. I'll be on the lookout for your next one! 👀 Hope you're doing great as well!

  Marked as helpful

  0