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

Blog preview card Using tailwind css.

@drxdesign

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

What I am most proud of is that? it was easy for me to put the basic when it comes to the HTML. Not only that, but I also found myself that it's easy for me to get used to using Tailwind CSS. Things that I may would do differently next time is that instead of using hardcode html, maybe I'll use. something like Astro build framework. Maybe adding some Java script. and a dark theme.

What challenges did you encounter, and how did you overcome them?

The only challenge that I'm not going to lie that I had to use some. documentation about it was the shadow box.

What specific areas of your project would you like help with?

Well, if there is anything that can be improved from my work, I would love to hear it and I would love to have some criticism about this.

Community feedback

geomydas 1,330

@geomydas

Posted

Hi @drxdesign, your code and solution looks good but it has some few minor issues. Don't worry! Most of these issues are really easy to fix and are often done at this level. I used to do the same mistakes aswell in the past.

My Tips and Suggestions

  1. Use TailwindCSS via their NPM package. Using their CDN lacks their other features such as their arbitrary values. Therefore, you can remove the x </button>. For sighted people, it works fine. For unsighted people, they don't understand the meaning of x.
  2. Replace the first div with a main tag. Tag is self explanatory. Main content. A site should have atleast 1 main tag
  3. Consider self-hosting your fonts instead of using Google Fonts. Using Google Fonts is slower and also violates GDPR which is bad for privacy. You shouldn't really worry about this for now but in larger enterprise websites, you could get sued for that.

That is all. Don't feel demotivated by this as it is part of our learning. You can treat this as a checkbox and do them one by one. Have a nice day and have fun coding!

Marked as helpful

0

@drxdesign

Posted

Thank you for the feedback. I really appreciate it and when it comes to what you said. I'll try to do it next I did this because I'm trying to learn as much as I can in a short time So when it comes to using cdns and stuff like that, it's just to make things more quicker for myself But you are right overall. And I'll try to fix this later. So thank you again @geomydas

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