@jhellard
Posted
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
@jguleserian
Posted
@jhellard Hey, Joshua,
Wow! Thank you for the awesome feedback. The video link you gave me was inspirational - I always wondered why nesting was not possible because it would make things so much easier. Well, and now here it is! I'm definitely going to try that on the next project.
I think I'll also try the BEM approach as well. It still feels weird when <p> elements or <img> elements are so far removed from their containers. It's so much more logical to put everything right next to the container itself. The only issue that has stopped me is if I am formatting something globally, for example an <h1> or a <p> or something like that; though, I guess, anything universal could always go in the <body>. Is that how you do it?
I also didn't realize you could set the fill color in the HTML as "currentColor." That's a neat trick. Then if I "join them" with a common CSS class, the hover effect would basically toggle everything in the <div> instead of each one separately (which is what I got at first). I'll check out the article in the link you gave me.
Once again, I am so appreciative of your help and direction - they were so valuable. I'm definitely going to give them all a try. Thank you for taking the time to look at my solution.
Sincerely,
Jeff
@jhellard
Posted
@jguleserian I'm not quite sure I fully understand what you mean in that second paragraph, could you elaborate? I assume you mean the HTML structure, having elements not nested in containers?
@jguleserian
Posted
@jhellard I think my second paragraph was confusing because I thought I understood what you were talking about with BEM. I assumed that it was merely a way of organizing the order of the CSS. However, now that I am diving into the article and doing some research, I realize that it is a system of nomenclature that is treated systematically to improve readability, even when looking only at the HTML.
So, please disregard that confusing paragraph while I swallow my piece of humble pie and use this as an opportunity to grow and accelerate forward. BEM methodology really opens up a whole new horizon to explore. Again, I really appreciate you pointing it out to me. I have already started another project, but I'm thinking of going back and trying to incorporate the new nomenclature as a way of learning it.
Thank you again for your help. I've looked at your comments on other novice coders in FM. It looks like you have some valuable experience and mastery over a lot of things. I hope to meet up again in the future and glean more of your wisdom. Thank you for investing in the lives of those on here trying to improve and make a difference!
Jeff
