Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Would Like feedback please :) !!

#sass/scss

@Aleroms

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


between 1000px to 800px it looks like the middle card is being squished. This forces the middle paragraph text to become longer.

I was wondering how I could approach this issue so that all flex-items are the same width or setting some type of max height for the paragraph div (text-box)

Community feedback

PhoenixDev22 16,990

@PhoenixDev22

Posted

Hi @Aleroms.

Glad to help.

For your question about screen readonly class .sr-only , you can find more here.

Action where users affect the website itself is where you use a button. For example, sign-up and purchase actions are often buttons. The user in these situations are creating a new account and completing a monetary transaction, which are actions that affect the website’s back-end. Creating new posts or making comments are actions that change a website’s content and what the user sees.

Actions where users won’t affect the website are where you use a link. These actions that take users from one page to another without changing anything on the website’s back or front-end.

Hopefully this feedback helps

Marked as helpful

0
PhoenixDev22 16,990

@PhoenixDev22

Posted

Hi Santiago Morales,

Congratulation on completing this challenge. Your solution looks great. I have some suggestions regarding your solution if you don’t mind:

  • About <h1>it is recommended not to have more than one h1 on the page. Multiple <h1>tags make using screen readers more difficult, decreasing your site’s accessibility. In this challenge, as it’s not a whole page, you can have<h1>visually hidden with sr-only. Then you can swap those <h1> with <h2>
  • In my opinion, the images are much likely to be decorative. For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images.
  • What would happen when the user click those learn more? In my opinion, clicking those "learn more" would likely trigger navigation not do an action so button elements would not be right. So you should use the <a>. For future use , it's a good habit of specifying the type of the button to avoid any unpredictable bugs.
  • There are some unnecessary div’s need to be HTML.
  • On your buttons, add border: 2px solid transparent; to the regular state. This way when the hover on the buttons , it doesn't add an additional 4 pixels to the height and width making the elements shift.

hopefully this feedback helps.

1

@Aleroms

Posted

@PhoenixDev22 thank you for your feedback. Nice catch on the <h1> tag, I usually do that but I started on one card and copied the rest. I was wondering, what do you mean by sr-only? I've been looking on google for what that is.

Also, when do we use buttons vs <a> ?

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord