Simple Card using Tailwind Compiled by GULP JS
Design comparison
Solution retrospective
The major target of this task was to get the TailwindCSS running on GULP so I don't have to use Webpack for simple tasks as that felt like overkill (Although the GULP.js file seems overkill too π )
If you see a way for me to optimize things please let me know :)
Community feedback
- @grace-snowPosted over 3 years ago
I also recommend you change the html elements you've chosen for those stats.
If you think about a document outline, headings are used to create the structure. What would you understand about the contents if you saw the document outline as:
H1 - Get insights to help your business grow H2 - 12k+ H2 - 361 H2 - 12m+
As soon as you think about that, I hope you see that headings dont make sense for those numbers. It would be better to have
12k+ companies
in a list item or paragraphThat's all from me. Good job on the styling on this it looks great
1@grace-snowPosted over 3 years agoI'm not sure about the inclusion of
postcssFlexbugsFixes
in your grunt file. Has that been recommended for a reason? I've not noticed any bugs before with flexbox, and the build on that package is failing according to npm so I'd be wary using it.0@Sumner-DavidPosted over 3 years agoThanks Grace! I agree with what you said. I've been trying to up my HTML semantics so this advice is helpful π
I initially tried using dl, dt, & dd tags but then thought "12k doesn't describe a company", etc. so switched them over to UL & li tags.
I'm about to look deeper into the
postcssFlexbugsFixes
but so far i think you're right in that I don't need them0 - @MaryEhbPosted over 3 years ago
I don't know if you previewed the site on an mobile view or not but the text is really squashed in the middle it will be better if you decreased the padding on smaller screens π Otherwise great workππ€©
1@grace-snowPosted over 3 years agoI was going to suggest the exact same as @MaryEhb! π
Maybe limit the max width of the content for larger screens too. It looks a little wide in that preview
0@Sumner-DavidPosted over 3 years agoGood Catch Mary & Grace! Kinda got a bit overexcited that the GULP file (Spent like 2 hours banging my head on it) finally worked i forgot to make it responsive haha. I've updated the challenge to be responsive
0@MaryEhbPosted over 3 years ago@grace-snow hello grace ππ Hope you're doing well. can you please review any of my solutions if you have time π₯ΊYour comments are really precious and helpfulππ
0
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