Meet Landing Page with Next.js, Tailwind CSS

Community feedback

• 

  haquanq ®️•1,585

  @haquanqPosted 4 months ago

  Hello JaceLee 💅💅

  Nice work there!! The solution looks almost the same to the design!

  Here is something you can improve on your solution:

  • Give your button hovering events a transition for smooth hovering effect. This is how to start:

  /* vanilla CSS */
  transition-property: background-color; /* list of properties that can be transitioned */
  transition-duration: 200ms; /* duration */
  transition-timing-function: ease; /* transition algorithm - determine how the transition feel */
  ----
  transition: background-color 200ms ease; /*  short-hand */
  
  /* tailwind CSS */
  class="transition-colors" /* tailwind default class, apply on colors related properties*/
  class="[transition:background-color_200ms_ease]" /* tailwind arbitrary value */
  

  • The section with "Group chat for everyone" title is often considered to be inside header landmark as introduction section with CTA (call to action) buttons or links (most of the time they are links to navigate user to different pages). Edit: and in your case, these button can be replaced with a instead.
  • As you can see, there are 2 sections in the main landmark and each of them is numbered which make them related to each other so it does not make sense to keep one in the main and one in footer, maybe keeping them inside main to improve the flow of content.

  Have a nice day and enjoy coding!! 😁😁

  Marked as helpful

  1

  ---

  

  JaceLee•240

  @jaceleedevPosted 4 months ago

  @haquanq Thanks, haquanq, for the great feedback. I’ve applied the transitions to the buttons as you suggested. These little details help creating a more polished project.

  Regarding the "Group chat for everyone" section, I've placed it in the header because I also felt it was an important introductory section for the service, which is why I marked it with an h1. However, I agree with you that creating a footer may not have been appropriate. Since this challenge is labeled as a landing page, I thought ending with a footer would provide a good structure. But your opinion is much more convincing. Given the numbering, it makes more sense for this challenge to not include a footer.

  Thanks again for sharing your great ideas. Have a wonderful day and happy coding! 😊

  0

  

  haquanq ®️•1,585

  @haquanqPosted 4 months ago

  @jaceleedev hey man, maybe we are misunderstanding each other 😬 (i have updated my comment to be more clear)

  • I am looking at your HTML structure and saw your header having only an img
  • These above is my suggestion to move the introductory section inside header because it is currently in main and i'm not talking about why you marked it with h1 but talking about CTA buttons (download, what is it).

  Nice commit messages btw, i'm practicing this too 😊

  1

  

  JaceLee•240

  @jaceleedevPosted 4 months ago

  @haquanq Haha, now I get it. You were talking about the page's header, while I was referring to the section's header. I think this is something that might vary from person to person. Let me share my thoughts with you.

  Semantic Structure: The <header> element is primarily intended for introductory information of a page or section. The "Group chat for everyone" section goes beyond a simple introduction, presenting the core value proposition of the product. As such, it may be more appropriate to treat this as a separate <section> element.

  Content Complexity: This section includes elements beyond simple CTA buttons (title, description, buttons, multiple profile images). Such a complex structure might be more clearly implemented as a separate <section> rather than within the <header>.

  I'm not saying my opinion is absolutely correct, so don't get me wrong. It's just that people might have different views on how to structure a page, and I wanted to share my thoughts. Thanks for your compliment 👍

  1
• 

  P

  Karol•1,990

  @VillageR88Posted 4 months ago

  Great job! I recommend also testing your solution on larger screens to ensure it scales well.

  1

  ---

  

  JaceLee•240

  @jaceleedevPosted 4 months ago

  @VillageR88 Thanks Karol! I've looked at views over 1440px, and the images on both sides end up quite far from the central hero content, which doesn't look great. However, it seems that the design intends for the faces to be slightly cut off at the edges of the viewport, so I'll leave it as is. Haha.

  0

  

  P

  Karol•1,990

  @VillageR88Posted 4 months ago

  @jaceleedev I think it should look more or less like this: https://villager88.github.io/Frontend_Mentor/meet-landing-page/

  1

  

  JaceLee•240

  @jaceleedevPosted 4 months ago

  @VillageR88 The responsive design is really well done. If I have the time later, I should challenge myself to create a natural responsive design using a mobile-first approach, just like your challenge.

  0