Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Landing Page using Tailwindcss

Ibrahim Herithโ€ข 150

@ibrahimherith


Design comparison


SolutionDesign

Solution retrospective


Hello,

Recently I started to learn Tailwind CSS, after a few tutorials I built this landing page to challenge my self if I understood the classes.

I found it difficult to upload my solution on Github through drag and drop but git got my back but at the cost of learning more docs and tutorials on git and Github.

What are the best practices of organizing the code files when dealing with many code files in Tailwind CSS?

Thank you. :)

Community feedback

@MelvinAguilar

Posted

Hello again ๐Ÿ‘‹. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

  • You forgot to upload an important file to GitHub, the gitignore. gitignore is a file that tells Git which files or folders to ignore when committing changes to a repository. It is usually used to avoid committing transient files from your working directory that are not useful to other collaborators, such as compilation files, temporary files IDEs create, etc.

    For example, the node_modules folder should not be uploaded to your repository because they are usually large and contain many dependencies that are specific to the project. Additionally, these files can be easily regenerated by running npm install.

  • Social media icons, which are often used to link to a company's social media profiles, should typically be anchor elements because anchor elements allows users to easily click on the icon and be taken directly to the company's social media profile page. This makes it easy for users to connect with the company on social media

    Additionally, you should use the aria-label attribute to describe the links if they don't have visible text, this will help screen reader users to understand the purpose of the link.

    e.g. <a href="#" aria-label="Facebook"><i class="fa-brands fa-facebook fa-xl"></i></a>

I hope you find it useful! ๐Ÿ˜„

Happy coding!

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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