@FarrelPSubmitted over 1 year ago
Working on this challenges makes me want to learn more about CSS Variables, such as on how to make and use global scoped variable and etc. Other than w3schools, are there any good resource to learn this? Thank you
P
BigDaddyFlo
@FloRiouffreytAll comments
- @FloRiouffreytPosted over 1 year ago
Take a look at Kevin Powell's channel on Youtube, this guy is a super good tutorial maker, has plenty of super interesting videos, and A LOT of things to learn! https://www.youtube.com/@KevinPowell/videos CSS Custom Properties are really powerful and useful, for example on multi-theme pages. Check out KP's videos on the subject, and the rest too, it goes from super simple to mind blowingly clever. Hope this helps! And good job on the challenge, by the way :)
Marked as helpful0 - @matiasluduena23Submitted over 1 year ago
My image on the Github page is not showing. Can someone check the reason? Thank you
@FloRiouffreytPosted over 1 year agoHi @matiasluduena23, just remove the first "/" in front of the URL. This one gets you back to the root of your github folder, and that is not what you want. You want to stay in the folder containing the index.html file, so simply write "url("images/image-product-desktop.jpg")", I believe that should do it. https://www.w3schools.com/html/html_filepaths.asp Also try to pay attention in HTML to the order of your headings (h1, h2 ...). It is not good practice to have any other "hX" before the "h1" (in your case, "Perfume" is h4, and "Gabrielle eau de parfum" is h1). Hope this helps! EDIT: @Titodelux is right, you actually need to go back one folder, so "../images/[...]", my bad
Marked as helpful2 - @Darren-Code34Submitted over 1 year ago
This project allows me to work with the Date object. The tricky part is to calculate the exact age. If you have a tool or the best way to do that, please help me.
@FloRiouffreytPosted over 1 year agoHi! It's tough to work on dates and time with vanilla JS, good work! Take a look at the Day JS library, great for manipulating time! https://day.js.org/docs/en/installation/installation. FrontEndMentor wants me to write a longer feedback to validate the post, so here are a few useless words... but still, Days JS is awesome
Marked as helpful0 - @KayGeorgesonSubmitted over 1 year ago
Overall I didn't find this project too difficult, but weirdly, out of everything, the one thing that gave me a slight-headache, was trying to figure out how to turn the social media icons from green to white on hover.
I thought it would work with simple CSS, but nope, that apparently won't work in Firefox or Chrome, so I had to do what might be considered to be quite 'hacky' and have more than one set of icons in different colours and use z-index to hide the green on hover.
This challenge looks quite basic to look at, but definitely quite a challenge for a beginner.
@FloRiouffreytPosted over 1 year agoIt's definitely possible to do the color change with CSS, by using directly the <svg> and not an <img> tag. Feel free to check to way I did it, it works perfectly fine.
Import the <svg>, add the "fill" attribute with the default green color on it, and then in CSS, locate your svg and create the hover rule.
It's even better to put the <svg> inside an element which will be the one pointed by the hover. If you hover an SVG, every part that is not filled will not be considered "hovered" (like the hollow part of the F of Facebook for example".
If you put it inside an <ul> then each <svg> in <li>, give a common class to all your <li>, and in CSS, simply add " .your-li-class:hover > svg { fill:#yourcolor }. Hope this helps!
Marked as helpful0 - @Yup03Submitted over 1 year ago
Fun Challenge ✔
@FloRiouffreytPosted over 1 year agoGreat job! A bit of feedback, regarding date verification: 31st July for example returns an error, but not 31st August which is correct. Also, you can have a 29th February on non-leap years, and actually a 30th February every year... If you manage to get around that, it will be pretty much flawless! Hope this helps
Marked as helpful0 - @sezimarjrSubmitted over 1 year ago
A project where I had a little difficulty with hovers, I would like to know if the organization of the html and css is correct
@FloRiouffreytPosted over 1 year agoHi there! Noob answer, I'm not an expert but here are my 2 cents: use a CSS "width: max-content;" on your <h1>Equilibrium #3429</h1>, this way the hover will not happen when you're not directly on the text. I also used an ::after pseudo-element for the hover on the image, don't know if it's a better practice... The rest looks really good to me, good job (but again, I'm no expert) Hope this helps!
Marked as helpful0
