Skip to content
Submitted almost 3 years ago

3 Component Preview Card using HTML & CSS

Lubna Fathima N•120
@lubnafathima
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • Jonel Hatwell•585
    @hatwell-jonelPosted almost 3 years ago

    1. The HTML lang attribute is used to identify the language of text content on the web. This information helps search engines return language specific results, and it is also used by screen readers that switch language profiles to provide the correct accent and pronunciation. you can fix that by adding lang="en" (if your language is English) inside the html opening tag.

    2. you have one main landmark like <h1> tag to identify the main content. A main landmark provides a navigation point to the primary content of the page for users of assistive technologies. since there is no page title visible in the design, you can make the h1 not to be visible on your page.

    3. In your html code you used role="row" this landmark can be used only within the grid container.

    suggestion:

    1. change your container div to main tag. so you don't need to use role="main"

    2. get rid of role="row" if you do not want to grid your container.

    3. please click the Generate New Report button inside the Report page to know if there is still some issues in your work.

    :) :) :)

    Marked as helpful
    0
  • Jonel Hatwell•585
    @hatwell-jonelPosted almost 3 years ago

    Hey! congratulations for finishing this challenge. there are some problem the i saw in your work.

    1. when you view the the solution on the small screen device the cards is scrollable.

    2. the cards is too stretch when you view it in the portrait screen.

    3. you use <button> tag instead of <a> tag in learn more button.

    4. the accessibility and HTML issue

    suggested solution: to utilize the size of the cards you can use max-width or max-height to it. and for the <button> tag you must change it to <a> tag because when you are linking content in the website its ideal to use <a> tag than <button> tag. as for the accessibility and html issue you can check it in report page.

    articles:

    https://medium.com/design-code-repository/a-vs-button-b859547cae4d

    https://ishadeed.com/article/min-max-css/

    https://www.google.com/amp/s/www.freecodecamp.org/news/css-properties-examples/amp/

    Marked as helpful
    0
    Lubna Fathima N•120
    @lubnafathimaPosted almost 3 years ago

    @hatwell-jonel Hey thank you so much! It was really helpful I still don't know why it isn't absolutely responsive tho also these warnings:

    1. <html> element must have a lang attribute
    2. Document should have one main landmark
    3. All page content should be contained by landmarks i do have a long attribute in my code :(
    0

Please log in to post a comment

Log in with GitHub

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