Submitted over 1 year ago

Age calculator app Using tailwind v3

Kuzitaa• 130

@Kuzitaa

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Age calculator app

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello everyone!

I have had a problem at the end of the solution. Originally I had the index.html in the public folder. But github pages opened the readme.md. So I had to move the html to the root folder. If anyone knows how to avoid that, I'd appreciate your feedback.

I also appreciate any other kind of comments!

Community feedback

Khawar Mehfooz• 530

@Khawarmehfooz

Posted over 1 year ago

Hello!

I understand the issue you encountered with GitHub Pages opening the readme.md file instead of the index.html file in the public folder. To avoid this, you can try the following steps:

Ensure that your repository's default branch is set to the correct branch containing your index.html file. You can check and update this setting in your repository's settings.
Verify that the index.html file is named correctly, as GitHub Pages looks for an "index.html" file by default to serve as the main page.
Double-check the file structure and make sure the index.html file is placed in the correct location within the repository. It should be in the root folder or in a folder named "docs" or "public" for GitHub Pages to recognize it as the main file.

By following these steps, you can help GitHub Pages properly display your index.html file as the main page. If you continue to encounter issues or have any further questions, feel free to ask.

Marked as helpful

Kuzitaa• 130

@Kuzitaa

Posted over 1 year ago

@Khawarmehfooz I'll write it down for the next one. It is a problem that breaks my head a lot 🤕

Thanks for taking the time!

Khawar Mehfooz• 530

@Khawarmehfooz

Posted over 1 year ago

@Kuzitaa if you're having issues with github pages, try Vercel or Netlify. The deployment is much easy on these services.

Abdul Khaliq 🚀• 72,660

@0xabdulkhaliq

Posted over 1 year ago

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have other recommendations regarding your code that I believe will be of great interest to you.

CSS 🎨:

Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using margin or padding.

We don't need to use margin and padding to center the component both horizontally & vertically. Because using margin or padding will not dynamical centers our component at all states

To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚.

For this demonstration we use css Grid to center the component.

<body class="grid place-items-center">
</body>

Now remove these styles, after removing you can able to see the changes

<div class="mx-auto mt-20">
</div>

And also change the h-full into h-screen to ensure the center placement of the component.

Now your component has been properly centered

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Marked as helpful

Kuzitaa• 130

@Kuzitaa

Posted over 1 year ago

@0xAbdulKhalid I completely missed centering the component! 😵

Thanks for taking the time to comment!

Please log in to post a comment

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