Equalizer-landing-page using CSS

Community feedback

• 

  Vanza Setia•27,715

  @vanzasetiaPosted almost 3 years ago

  Excellent work on this challenge, SuKyung! Your solution is responsive and looks great! 👍

  Regarding changing the icon color, I recommend using inline SVG instead of img element. This way, you can manipulate the color in the CSS by using fill property and svg path selector. However, I prefer making the SVG element inherit the color of the parent element. This way, if the color of the parent element on :hover state is changed. I don't have to change the color of the SVG.

  svg path {
    fill: currentColor;
  }
  

  I used also absolute and relative positions a lot when aligning the card and the images to the exact position. So, I think there's nothing wrong with that. 😅

  Now, for the feedback.

  • Alternative text for images should not be hyphenated (like code). Also, it shouldn't contain any words that are related to "image" because it's already an image element (you've done it so well for the social media icons 😉). So, I recommend for the logo, the company name would be a good alternative text.
  • For the download buttons, they should be link elements with download attribute.
  • header inside the main element has no role so, I highly recommend using either section or div instead.
  • There should not be text in span and div alone; instead wrap the text with a meaningful element.
  • There's no need to use aria-label if the text content is present.

  Hope this helps. 😊

  Marked as helpful

  1

  ---

  

  SuKyung Kim•60

  @sukyungdevPosted almost 3 years ago

  Hi! @vanzasetia

  Your comments are very helpful to me!😊
  I read your comment and solved the problem about icon hover.(used svg) I could learn about svg this time.

  Your feedback is really nice. So I fixed lots of part in my code.

  Thank you for your comment. Have a nice day!💕

  0

  

  Vanza Setia•27,715

  @vanzasetiaPosted almost 3 years ago

  @sukyungdev You're welcome! Glad you found it to be helpful! 😄

  I took a look at the site and I noticed that there's no hover effect on the social media icons. Are you having a problem making it?

  1

  

  SuKyung Kim•60

  @sukyungdevPosted almost 3 years ago

  @vanzasetia I made hover-effect only in desktop size.(1440px and above). Is there no hover-effect when the desktop size?😳

  And I have another question! Accessibility error appears because there is <a> tag in the download button(download ios, download-android). What should I do in this case?

  0

  

  Vanza Setia•27,715

  @vanzasetiaPosted almost 3 years ago

  @sukyungdev Yes, there's no hover effect on it. I used a developer tool and forced the a, svg, and path elements to be in a hover state but nothing was changed. Also, the hover effect should exist for all users. 🙂

  Like I said earlier, those download buttons should link elements (not a button that wraps the link element). You can't make the button element with an anchor tag and vice versa. In general, you should decide whether it is a button or a link element.

  Pro tip: Use Can I Include if you have a doubt or issue like this. For example, you might wonder whether or not it is allowed that an anchor tag wraps a h1 then you can use it to check whether it is allowed to make the h1 as a child element of an anchor tag.

  Marked as helpful

  1

  

  SuKyung Kim•60

  @sukyungdevPosted almost 3 years ago

  @vanzasetia Thank you for your reply!😊 I solved my curiosity about button and a tag. Your tip was useful to me.

  I checked the hover, It looks like it's working. I think I need to check my code again.

  Thank you so much!! Have a nice day.🥰

  0

  

  Vanza Setia•27,715

  @vanzasetiaPosted almost 3 years ago

  @sukyungdev You're welcome! 👍

  Now, the hover effect is working, good job! 🙌

  Have a nice day too! 😄

  1
• 

  Kamasah-Dickson•5,570

  @Kamasah-DicksonPosted about 3 years ago

  Your solution looks great on smaller devices, good job. On thing that I will say is that you can't change the color of an img specifically the one given to you. you can manipulate it though with some overlays. But relating to your question, you can use a font awesome Icon or another icon library which can offer you the same icon you are looking for an the ability to change it color you want.

  Besides your solution looks great👍👍 Good job there, happy coding👍👍

  Marked as helpful

  1

  ---

  

  Vanza Setia•27,715

  @vanzasetiaPosted almost 3 years ago

  @Kamasah-Dickson The color of the img element actually can be changed by using filter property but it would be a hard thing to do.

  Marked as helpful

  2

  

  Kamasah-Dickson•5,570

  @Kamasah-DicksonPosted almost 3 years ago

  @vanzasetia yeeahh filter to can be used I forgot that😂😂

  2

  

  SuKyung Kim•60

  @sukyungdevPosted almost 3 years ago

  Hello!@Kamasah-Dickson

  I learned that it is difficult to change the color of the image
  through this challenge.

  So I used svg instead of img tag!

  I am glad your comment.🥰 Thank you!

  Have a good day!😄

  0