P
@jguleserian
Latest solutions
Photosnap multi-page website | React/React-Router/TailwindCSS
#react#react-router#tailwind-cssSubmitted about 2 years agoGitHub user search app | React Query/TailwindCSS
#react#tanstack-query#tailwind-css#axiosSubmitted over 2 years agoDictionary Web App | React Query/Tailwind
#axios#tanstack-query#tailwind-css#reactSubmitted over 2 years ago
Latest comments
- @jhellard
Hey Jeff! The solution looks great, I like the drop-down (or drop-up? 😂) menu a lot.
The CSS is very well structured, I will say the selector approach used is not one I see often. I gravitate towards the Block, Element, Modifier (BEM) approach myself, It's a more concise way of writing class names that I believe makes it easier to maintain in the long run, especially using something like Sass for nested selectors. Native CSS nesting is a thing now but it still very early, I'd take a look at THIS video for more information.
HTML structure looks good, great use of semantic tags. There are a few containers that aren't necessary but nothing excessive.
If you are not opposed to importing libraries, there is a great one called Moment.js that I often use for getting dates formatted, it is super simple to work with.
As for the CSS hover question, you could change the 'fill' on the SVG to 'currentColor' and when you modify the 'color' in CSS it will change accordingly. You could then use a custom CSS class to modify the div and the svg on hover to the desired colors. Here's an ARTICLE more about this. I'd be happy to throw a CodePen together for you to demonstrate this if you'd like, I know it can be a bit confusing.
Keep up the great work! Happy coding!
Marked as helpful - @imtiazraqib@jhellard
Hey Imtiaz! Storing the prop data in variables is a good idea, for this app it's not a big deal but if you were rending multiple cards you could have an array of data and map over it to easily pass the different values to the component.
Great solution, happy coding!
- @marisfreire@jhellard
Hi Mariana, great solution!
You can use a img element and pass in the svg as the src, that would allow you to set an alt tag for your images. Utilizing this approach you could change your container-image from a div to an img and just apply the same CSS.
Here's an article that describes this in more detail. Happy coding!
Marked as helpful - @OnealSpain@jhellard
Hi Wilson! It looks like your images aren't loading properly, if you can get that fixed I'd love to give some feedback!
- @ProwlingLynx@jhellard
Generally most people do a 'Mobile First' approach, styling out the page for mobile viewports and then adding breakpoints when scaling up as needed. Some frameworks have preset breakpoints you could look at to get some ideas of what to use.
Not sure if it's the best practice but I'll generally get my full page looking good and committing that CSS, with a commit message of like 'Mobile design completed'. Of course, you never catch everything the first time so I'll add minor updates to design with future commits as a side-note.
Testing CSS can be tedious, you can edit the CSS properties in dev tools and get it right then change it in your editor once you get your desired effect.
I hope I could provide some insight :) Keep on coding!
Marked as helpful - @Strocs@jhellard
Looking good! I'd suggest refactoring your handleCounter function to check if the message is read, it will continue to run even when the message is marked as read. Good use of useState, this is a good challenge for learning React for sure!
A fun challenge for this one I'd say is to make your data rendered dynamic, maybe pulling in from a .json file and mapping over it with your Notification component.
Keep on coding! ✌️
Marked as helpful
