Skip to content
OverviewSolutions
8
Comments
2
Giedrius
@giedrius-zavisa

All comments

  • Arnold Ho•20
    @arnoldboy123Submitted about 3 years ago

    I have wrangled with the CSS of this page till it looks kind of similar to the original design. However I feel like the way I did it is probably not the best code. Any suggestions would be highly appreciated!

    First FEM challenge (purchase summary card)

    1
    Giedrius•120
    @giedrius-zavisaPosted about 3 years ago

    Hello, @arnoldboy123!

    Took a look at your solution and came up with some suggestions you could consider to improve your work. First of all, there are a few HTML and accessibility issues in your report, which you might want to look at. Here's a simple breakdown of the issues:

    Accessibility:

    There are people who use assistive technology to navigate through websites, so you should keep them in mind when designing your web page. To help these people navigate easier, landmark elements are used to breakdown a webpage into different parts with specific purposes (you can read more here, if you are interested: https://www.w3.org/TR/wai-aria-practices/examples/landmarks/HTML5.html). For this challenge, it's fine to just wrap the HTML in your <body> inside a <main> element. You can also wrap your 'attribution' div inside a <footer> element.

    HTML issues:

    Your HTML issues refer to your <img> elements. Alternative text refers to the 'alt' attribute inside an <img> element. Alternative text is a piece of text that is displayed when an image fails to load, so it's best to fill it out with a short, concise description of the image itself. It's usually structured like this: <img src="image.png" alt="very descriptive text of the image">. If you are curious to see it in action, add some alternative text and leave your src attribute empty. The alternative text should show up in its place.

    Furthermore, It still needs some work for responsive design as a mobile screen can't contain your card. Feel free to look up these resources for responsive design guides:

    https://www.w3schools.com/css/css_rwd_intro.asp

    https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design

    All in all, the desktop view of your work looks great, and all the comments I said until now are merely suggestions to improve it further. Nice work on this and I wish you the best of luck on your next challenge! :)

    Marked as helpful
    1
  • Jose Susanto•20
    @ItsjosesSubmitted about 3 years ago

    Hai guys, please give a tips for the website like the responsive and anything else. any video or tutorial web to get better in html css and js? please give that link :vvvvvvvvvvv have a nice day gais

    Stats-preview-card-component(flexbox and css)

    2
    Giedrius•120
    @giedrius-zavisaPosted about 3 years ago

    Hello, @Itsjoses!

    Took a look at your solution and I have a few suggestions you can look into. First of all, you might want to put your 'background' div inside a <main> element. This element represents the main content of your web page and is used to help people who are using reader mode. It also makes your web page structure clearer. The same can be said for your 'attribution' div (you can change the div into a <footer> element).

    Next, I would suggest putting some text inside you 'alt' attribute in your image. Yet again, it is used to help people who are using reader mode, and it's good to get into the habit of writing it, even if it seems redundant now.

    I also noticed that you haven't implemented any responsive design features. This challenge is perfect for practicing responsive design as the challenge is very simple, and it's easy to see if you implemented it correctly. I would highly encourage you to come back to this challenge and use it to practice responsive design.

    Here are some resources you can look up:

    https://www.w3schools.com/css/css_rwd_intro.asp

    https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design

    Also, the websites above provide tutorials and explanations on all of HTML, CSS, and Javascript features, so you might want to browse through them if you are looking for anything in particular. Another good way to search for inspiration is to look at other people's solutions, though avoid blindly copying and do your best to understand the code and implement your own version of it.

    In any case, you did very well on this challenge. Keep up the good work and I wish you good luck on your next challenge! :)

    Marked as helpful
    1