Latest solutions
Testimonials Grid Section w/ Astro + Tailwind
#astro#tailwind-cssSubmitted about 2 months ago- Did I use
<header>
correctly? - Any suggestions on how best to organize the css? Does putting the
grid-column:
in a style tag on the element being placed make the most sense? I could write a class (e.g..daniel-card
or something more semantic.col1-span2
), but this seemed the neatest for organization.
- Did I use
Four Card Feature w/ Astro + Tailwind
Submitted about 2 months agoIs there a more efficient way to organize the code / implement the grid?
Product preview w/ Astro + Tailwind
#astro#tailwind-cssSubmitted about 2 months agoIs there a better way to deal with the nested grid issue?
Recipe Page w/ Astro + Tailwind
#astro#tailwind-cssSubmitted about 2 months ago- Code organization: I'm not a huge fan of the code in several different places. I put the base-layout in a @component for tailwind to pick up, but perhaps it would be better in the scoped style in the index page?
- I went with @apply rules in for styling the scoped styles. I could write vanilla css. Not sure if there's pros/cons one way or another? I went with @apply so I didn't have to hardcode sizes and could use tailwinds utility sizing.
Social Links Page using Astro + TailwindCSS
#astro#tailwind-css#typescriptSubmitted about 2 months agoIt was a pretty straightforward project. Perhaps checking for DRY code (i.e. could I avoid repetition by styling the container / writing better html)? I'm aware I could have used js map for calling to SocialLink component. But anything else?
Blog Preview Card w/ Tailwindcss
#tailwind-css#nodeSubmitted about 2 months ago- Is there a better way to do the animation? Maybe something cool for the hover of the article title as well?
- How could I best organize the tailwind styles? I used @layer components for the text styles to try to organize / group them, but the class lists in the html still feel cluttered. Should I put everything in a component (e.g. .article) and use @apply?
- I wasn't sure how to do smaller text on mobile without @media queries. Ideas?
- What is the best way to size the width of the <article>? I have it set with width:px, but I'm wondering if there's a better way to get the proper width?
Latest comments
- @ImMushroomsWeTrust@tmykkanen
Nice work on the project!
- FYI, you've got an error in your readme that's preventing it from rendering in markdown on github. I suspect it's the extra # heading at the end of the file, but I'm not sure.
- You missed the colored borders on the design brief.
- You can select which fonts to include from the google font api embed, that way you're not asking the site to load what you don't need.
- I noticed you used an h3 for the summary of the testimonial. Not great semantic practice. Put an h1 on the page with an overall title and use tailwinds srhidden class to hide it. Then use h2 for your next headings. I'd suggest wrapping the name of the person in h2, since semantically that's the overall heading for the card (even though what's visually emphasized is the testimonial summary. See this css-tricks article for more info.
- Better to wrap everything in a
main
than adiv
.
- @EniloladeWhat are you most proud of, and what would you do differently next time?
Effectively using CSS grid, I haven't used it in a long time. Combining it with flexbox, chef's kiss.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
@tmykkanenLooks good! I like the idea of the intermediate media query at 640px.
You could look into semantic containers rather than divs. I'm no expert, but I think you could use
main
andsection
for better accessibility.Also, since you mention grid, check out Kevin Powells videos.
Two that I think would be pretty helpful and give you some ideas are:
Marked as helpful - @DamjanTropcicWhat are you most proud of, and what would you do differently next time?
I am proud that i finally pushed myself to start working on my designs and that I managed to challenge myself with it. It is also very close to the Mockup, but I still didnt figure out how to import the fonts and the image in the mobile view is not zoomed in as well as the height of the container is not correct, but it looks pretty tho.
What challenges did you encounter, and how did you overcome them?Mobile view, I always hated it but I managed to make it look like something except a couple things that I couldnt figure out like the image size in mobile view and the container height
What specific areas of your project would you like help with?Mobile view feedback would be awesome.
How do I make an image zoom in or focus on the image object better when in mobile view. I would also want to know when should i make fixed widths and heights while using flex boxes and when should i keep it on auto.
@tmykkanenGood job overall. The layout looks pretty close.
Best way to include the fonts in my opinion is to download them and use @font-face to load them (https://tailwindcss.com/docs/font-family#customizing-your-theme). You can see how I did it in my solution here (https://github.com/tmykkanen/fm-product-preview-component-main).
Looks like your problem with the mobile layout is you didn't realize there was a mobile and a desktop image. I see just the desktop image in your code. One way to approach it is to use a media query or container query to show/hide the different images depending on which one you want visible. Again, you can see in my code how I approached it. The rest of your mobile layout looks ok to me.
Hope that helps! Keep at it!
- @GustavoGigaczWhat are you most proud of, and what would you do differently next time?
Fiz esse site simples, versão mobile e desktop funcionando 100%, não adicionei as fontes pois achei bem feias.
What challenges did you encounter, and how did you overcome them?Estou acostumado já a fazer páginas só com html e css, então achei fácil.
What specific areas of your project would you like help with?Quero uma review simples de como posso melhorar meu HTML e CSS, não deem atenção as fontes, pois foi escolha minha não adiciona-las.
@tmykkanenLooks like you're no longer active on here and I couldn't access your sourcecode, so I can't really provide feedback. Sorry!
- @cevdetarda@tmykkanen
Nice work.
I love using astro; used it for my solution as well.
-
You could have used a component for each of the links (if you did more with adding targets).
-
Your css looks good. Nice use of variables.
-
I think the design brief is supposed to be slightly responsive (expanding to 40px padding on desktop), but I don't see any responsiveness in yours, perhaps you missed it.
-
- @jrramoncpWhat are you most proud of, and what would you do differently next time?
I'm proud of how much I've improved my use of TailwindCSS and how quickly I've been able to layout this. I have also learned to create custom classes that I can reuse to write less code.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?I'd like feedback on my Tailwind CSS and if I can change anything to improve the project. Thanks!
@tmykkanen- Good work overall
- Good call on tailwind classes for text.
- You can use text-<size>/<leading> for line height. Tailwind normal is 1.5 aka 150%, so I think you could have written
@apply text-[clamp(0.875rem,3.5vw,1rem)]/normal
for example. - I wonder if there's a better semantic tag to use for the "leading" than <button> (though in an actual functional component, it may indeed be a button). I found <small> in the HTML docs. That might work here. You could also consider <time> for the date, since its not really a paragraph.
- React is super overkill for this. Check out Svelte, or even Astro, if you still want to use a framework. But that's more of a preference thing.
Marked as helpful