@yfeienzo
What are you most proud of, and what would you do differently next time?
how do i add custom font to next.js tailwind????
Micah Sells
@MicahtronAll comments
- @Micahtron
Are you using our own CSS in addition to Tailwind? Sorry, I don't know anything about adding fonts to that particular stack (only used Tailwind once, and that was for a tutorial), but I maybe a few custom utility classes using margin-block would help the elements' spacing better match up to the design.
Other than that it looks right on. Nice work.
- @LorenzoBrugalliWhat are you most proud of, and what would you do differently next time?
I'm proud of how I implemented the hover effect. It added interactivity and improved the visual feedback for user interaction. Next time, I would approach the CSS with more structured classes and perhaps utilize more efficient selectors or frameworks to streamline the styling process. This would ensure cleaner code and easier maintenance in the future.
What challenges did you encounter, and how did you overcome them?Adjusting the positioning of elements, especially text sizes, posed a challenge. To overcome this, I utilized CSS properties such as margin, padding, and flexbox for layout adjustments.
@MicahtronGood work, every element's size looks almost exactly like it should relative to each other.
For the background shadow I saw you're using thicker borders on the right and bottom. A cleaner and more flexible way to achieve this would be to use a CSS drop-shadow. This way you can position the BG shadow anywhere you want relative to the card and the offset will match the design better. This also enables you to change the effects if you ever want to use this in another design (color, blur, etc.)
- @JOAN-96@Micahtron
Great work, however it looks like you're using id attributes for the styling (id="weight-700"). This is better done using classes since you could have multiple elements on a page with that same styling class such as cards, headings, teasers, etc. The id attribute names are meant to be unique and used only once per page.
Since this is a single component by itself it doesn't matter too much, but if multiple QR cards of this type were used in a full page this would need to be changed to classes. Plus using classes for your styling system attributes makes them useable on any element so it wouldn't be limited to just this card type.
Marked as helpful - @MicahtronWhat are you most proud of, and what would you do differently next time?
I've been dabbling with Frontend Mentor for a while now, but only on my local computer. This is my first time doing a push using modern (post 2015) CSS practices. this is also my first public push to GitHub; figured I'd use this basic project as a test drive for other challenges.
Also I made a point to time myself and keep it short. Overshot the timeframe but learned quite a bit about debugging image styling (i.e. that un-asked for whitespace at beneath an image).
Now that I have the process down I'll run a few other timed basic challenges before moving on to full complex templates.
@MicahtronHey Daniel, Thank you for your help! Getting "demo divs" to behave in the past has always involved a bit of janky CSS.
I've already implemented your advice in another challenge and it works far easier. Thanks.
