Fylo Landing Page With Two Column Layout Using Tailwind CSS
Design comparison
Solution retrospective
I did this using Tailwind CSS. I'd like feedback and comments on the overall project and design layout.
Community feedback
- @MelvinAguilarPosted about 1 year ago
Hello there ๐. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
- The best way to code a navigation is to use an unordered list (
<ul>
) inside a navigation (<nav>
).
- For the company logo you should use the company name as the
alt
attribute value. The word "logo" is not necessary, The screen reader users will hear "Link, Graphic, Company name" and they will understand that the image is a logo.
- Consider using Prettier with a Prettier plugin for Tailwind CSS to automatically format and organize your classes, enhancing code readability. Learn more about automatic class sorting with Prettier in this Tailwind CSS blog post.
-
I noticed you haven't used the colors from the style-guide.md. In Tailwind CSS, you can easily define custom colors to ensure consistency throughout your design.
In your Tailwind CSS configuration file (usually tailwind.config.js), you can define custom colors under the extend section. For example:
/** @type {import('tailwindcss').Config} */ module.exports = { content: ['*html'], theme: { extend: { fontFamily: { 'Open': ['"Open Sans"', 'sans-serif'], 'Raleway': ['Raleway', 'san-serif'] }, colors: { 'custom-blue': '#007acc', 'custom-green': '#00b894', // Add more custom colors as needed }, }, }, plugins: [], }
Once you've defined your custom colors, you can use them in your HTML just like any other Tailwind utility class:
<p class="bg-custom-blue text-custom-green">Custom Colors</p>
For a more detailed guide and additional options, I recommend checking out this resource on Tailwind's official documentation: Using Custom Colors.
I hope you find it useful! ๐ Above all, the solution you submitted is great!
Happy coding!
Marked as helpful1 - The best way to code a navigation is to use an unordered list (
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