Design comparison
Solution retrospective
Landing page only with Tailwind, this is my second attempt with the framework and I am still learning how to use it. Please, leave free to tell how to improve my code :)
Community feedback
- @VCaramesPosted about 2 years ago
Hey @walterfolk, some suggestions to improve you code:
- To give you HTML code structure, you want to set up your code in the following manner (only did parent containers):
<body> <header> <nav></nav> <section class="hero-section"></section> </header> <main> <section class="grow-together"></section> <section class="flowing-conversations"></section> <section class="your-users"></section> <section class="ready-to-build"></section> </main> <footer></footer> </body>
-
The Alt Tag description in the logo needs to be improved upon. The logo is arguably the most important image in you page. So the description should state the company name and what it is.
-
The headings are being used incorrectly. When using headings, you cannot skip heading levels, e.g., using and <h2> heading and then jumping to <h5> heading.
In your case, you went from <h1> to <h3> then to <h2>. All the headings after <h1> should be an <h2> heading since they are have the same level of importance.
The <h3> Heading is mainly for sub-headings.
- The phone and email on the footer should be wrapped in Anchor Tags and set the href in the following manner so users can click on them and the phone/email app can open automatically:
Phone:
<a href="tel:+1-543-123-4567">Phone: +1-543-123-4567</a>
Email:
<a href="mailto:[email protected]">[email protected]</a>
Happy Coding! 👻🎃
Marked as helpful0@walterfolkPosted about 2 years ago@vcarames thanks for you comment, i make the changes you tell me, very helpfull!!
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord