HTML, CSS, TailwindCSS

Solution retrospective
Im feeling pretty confident now that Ive built out a few of these card components so this time, based on the advice of someone in the Slack channel, I decided to implement TailwindCSS into the project. I implemented using the CDN just to take it for a 'test drive' and after a little while was surprised at how effective (and simple) using it was. By the end, I sort of felt like I was cheating.
Aside from a few media queries (which Im sure I can use Tailwind for) I didn't use any of my own CSS which allowed me to get this project done in a timely manner and, well, it just worked! Barely any troubleshooting is needed.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @grace-snow
Hi
As well as the styling issues I raised on slack with the Screenshots, I notice problems with the html here
You have some text in divs and spans alone, not meaningful elements.
You also have what should be an interactive element as a div for cancel I think (?)
It's really important to choose the right elements and not neglect that. Right down to when you're using buttons vs anchor tags. Eg on this why is change an anchor link and proceed a button? What would you expect to happen if someone clicked each of these? That determines which element has to be used in each case
Make sure you don't remove the gitignore files from these challenges too. You get one in the starter files and need to keep that in your repo
Good luck with it
Marked as helpful - @isprutfromua
Hi there. You did a good job 😎
keep improving your programming skills
your solution looks great, however, if you want to improve it, you can follow these steps:
✅ place the Google import code such that it loads first directly after the html HEAD tag, EVEN before loading the CSS file. This ensures the fonts load before the CSS so there isn't any unexpected "jumping" of when the font finally loads.
@import url("https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap"); to <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap" rel="stylesheet">
✅ no reason to use universal selector twice
* { margin: 0; padding: 0; } *, *::before, *::after { box-sizing: border-box; }
✅ you have an separated tailwind config, but placed configuration into the html file.
tailwind.config = { theme: { extend: { colors: { "pale-blue": "hsl(225, 100%, 94%)", "bright-blue": "hsl(245, 75%, 52%)", "very-pale-blue": "hsl(225, 100%, 98%)", "desaturated-blue": "hsl(224, 23%, 55%)", "dark-blue": "hsl(223, 47%, 23%)", }, }, }, };
✅ remove an empty style.css file
✅ there is no reason to have separated css file at all. You can simply add this properties with tailwind.
I hope my feedback will be helpful. You can mark it as useful if so 👍
Good luck and fun coding 🤝⌨️
Marked as helpful
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