Skip to content
OverviewSolutions
2
Comments
1

Gazdik Tamas

@tamasgazdikHungary40 points

Complete front-end development newbie figuring out if this is the field that he wants to spend most of his waking hours dealing with.

I’m currently learning...

CSS basics and responsive design.

Latest solutions

Latest comments

  • Gazdik Tamas•40
    @tamasgazdik

    Good job on completing the challenge! A couple of tips that could be beneficial in the long run:

    index.html

    • use main element instead of <div class="main">. main has actual semantic meaning and therefore better in terms of accessibility. div doesn't have any semantic meaning whatsoever
    • since the content within the <h3> is the only title, you can instead include it in <h1> and then style it as you'd like it to appear

    style.css

    • at body selector adding min-height: 100dvh; is generally a good idea, since for mobile devices it takes into account different controls, that might pop in during scrolling (you know, that button triplet - background apps, exit to start screen of mobile, go back, or the address bar at the top)
    • middle part can be positioned centrally by setting display: flex; and justify-content: center; on the body, then margin: auto; on the .main
    • position: relative; is unnecessary for the img, as you don't specify either top, bottom, left, or right
    • padding: 1px 20px; - 1px is basically invisible, that can be removed. If you want to do padding only on left and right side, you can instead do: padding-inline: 20px; (for setting top and bottom padding you can do padding-block: 20px;)
    • also the style-guide.md specified the paragraph font-size to be 15px. Since by default most browsers use 16px, setting font-size: 0.9375rem; on p should do the trick.

    Once again, great work, good luck going forward! :)

    Marked as helpful