@haquanq
Posted
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
transitionfor 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
headerlandmark 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 withainstead. - As you can see, there are 2 sections in the
mainlandmark and each of them is numbered which make them related to each other so it does not make sense to keep one in themainand one infooter, maybe keeping them insidemainto improve the flow of content.
Have a nice day and enjoy coding!! 😁😁
Marked as helpful
@jaceleedev
Posted
@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! 😊
@haquanq
Posted
@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
headerhaving only animg - These above is my suggestion to move the introductory section inside
headerbecause it is currently inmainand i'm not talking about why you marked it withh1but talking about CTA buttons (download, what is it).
Nice commit messages btw, i'm practicing this too 😊
@jaceleedev
Posted
@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 👍
