Skip to content
Submitted over 3 years ago

html5 css write using visual studio

dex1989•20
@dex1989
A solution to the Order summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

that is my first proect, i just stat to code for the project i use html5 and css i have use visual studio for write the code. Every comment and advice is welcome to improve myself.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Ken•4,915
    @kens-visuals

    Hey @dex1989 👋🏻

    I've got some quick tips to help you fix the accessibility and HTML issues.

    • First, I suggest using <h2> or <p> instead of <h4>, because headings in HTML have to increase gradually, such as h1, h2, h3…..
    • Next, this piece of code dex1989</a>. --7>--></html> is causing some HTML issues, just because you didn't put the closing comment tag correctly, so the solution would be to either remove the code or remove the comment tags.
    • Hero image should have a display: block;, it removes the line underneath the image. If you want to know what's causing it, check out the 3rd section of this video.
    • For the music icon, add aria-hidden="true”, because it's for decoration. You can read more about aria-hidden here. Like this:
    <img src="./images/icon-music.svg" alt="" aria-hidden="true”>
    • Also, I suggest adding transition: all 0.2s; to the button and the links, this will make :hover smoother.
    • Lastly, I won't go into details about resetting CSS, but I'll leave this cool article here, which will make more sense than my brief explanation.

    I hope this was helpful 👨🏻‍💻 other than that, you did a good job for the first project, nicely done. Cheers 👾

    Marked as helpful

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