All solutions

Hi everyone :)

I am amazed at how varied all these challenges can be, hence pretty much always making us work on different and new things. On completing this challenge I would specifically like to thank Frontend Mentor for the endless opportunity to practice, train and get better.

More context on the github repo.

My questions are:

• On the subject of modifying the color of svg elements without having to copy paste the whole svg code into html markup in order to access the fill property with css, that I find cumbersome : do you have any resources on the subject that could enlighten me.
• Also, I did get through quickly on the matter of styling the background image on mobile view and did not quite matched the expected design with my use of background-blend-mode property. Any advice on that part?

Thanks!

Hi everyone!

I am continuing my exploration of newbies challenges. This one allowed me to discover more about linear gradients, use custom properties, and test a particular layout system.

More context on the github repo.

My questions are:

• Was there a more straightforward way of positioning hero images while keeping them in the markup? I feel that my solution is a little far fetched.
• I have the feeling that the way I did the layout (namely site wrapping with calculated paddings on each section) isn't appropriate for bigger projects. However, it was needed here in order to set the background linear gradient not on the body but on the courses-section only. How could I have acheived that differently, with a more suitable layout system?
• Any other feedback is greatly appreciated!

Thank you, have a good day!

Hi everyone, hope you are well!

For this challenge I chose to stay away from javascript as I thought there was an easier solution.

More context on the github repo.

My questions are:

• As this is the first time that I was using :valid and :invalid pseudo selector, I am wondering if I have done things the proper way or not?
• Any additional feedback is highly appreciated!

Many thanks!

This is my first premium challenge. It is nice to work with Figma files!

My questions are:

• In a feedback on a previous challenge, I was recommended to add the focusable HTML attribute to false along with aria-hidden='false'. While trying to implement that in this challenge, I read that the focusable HTML attribute is not well supported by all browsers and the use of javascript is recommended. Is there a best practice here ?
• Any feedback are appreciated, especially on the layout strategy or better ones that I could have thought of.

For more context see the github readme file.

Thank you all!

Any feedback is welcome. I don't see any particular oversight on my part, but there certainly is! Thanks :)

Hi everyone,

I am pretty satisfied with the outcome, but unsure whether I have used proper or common approches on these three subjects :

• Styling <hr> elements : the problem being that mine without the opacity: 30% seems too wide (in comparison to the design expectations) even after reducing its height to the minimum of 1px. So I am wondering is there exists some sort of a css one liner that would render a thin line (thinner than 1px ?) without having to use all those border and opacity properties.
• Adding the hover effect on the image (background + icon triggering on hover).
• The circle around the avatar.

Any feedback on those or any other part of the challenge is welcome !

Thank you all.

I am using the background-image: url("images/image-product-desktop.jpg"); css property for displaying the image both in desktop and mobile view. Is it considered bad practice since it causes accessibility issues ?

Thanks for the feedback !

Any feedback greatly appreciated, especially in regards to my use of HTML semantic elements. Thanks.

Hi everybody,

You'll find details about the project on the github repo.

Here are some of my questions :

• About my use of mix-blend-mode :

  • The use of mix-blend-mode here is some sort of a hack because it does not render the button background as expected : --very-ligh-gray-color (initial button background-color) is not exactly white hence the sreen value for mix-blend-mode blend it with the background color of the parent that is orange or blue, resulting in a slightly colored button background color. Of course in this case this not visible, but say we change the button background color to some other shade of gray, it could became problematic.
  • So first question : is there a way to overcome this using mix-blend-mode ? It would be great to be able to nest a paragraph inside the button (<a href="#" class="btn hello card-item__btn"><p>Learn More</p></a>) and apply mix-blend-mode on that paragraph, but blending with second parent in the hierarchy.
  • Second question : any other way to match the color of the button with the background-color of the parent automatically, without having to hard-code the color for each button ?
    • (I am thinking of using scss or sass, but not willing to dive in those at this stage.)

• Every other feedback are much appreciated ! Especially about my use of HTML semantic elements. Should I use header, section, ..., what are best practices to divide such card-items into semantic parts ? What about the h1, are h2 better in this case ?

Thank you very much !