Skip to content
Submitted 11 months ago

HTML and CSS basics

Rolands Vels-Zviedris•40
@RolandVels
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I would like to know is it even correct ? Personally for me look similar as example picture give but not sure if code is correct

Community feedback

  • Tom•120
    @l3lazePosted 11 months ago

    An excellent first shot for a beginner :) Did you use something to help build it, or is this all by hand? Curious because of the CSS in particular - seems like there are both unused and advanced selectors in the top section, and then basic selectors which are all used in the bottom.

    If you haven't already, make sure to scroll near the bottom of the page on your FM solution and look for the automatically generated accessibility and HTML reports as they can find things that many humans may miss.

    The only issue I can see with the HTML seem like nitpicks:

    • The outer div is indented one extra space. Easily fixed, and could be automated by a code formatter or warned about by a lint tool.

    • class=main-border seems like a bad identifier for the main container. A main element, or class of main or main-container, may be better.

    CSS (ignoring top half, as it seems generated):

    • Designs on FM seem to all be vertically and horizontally centered. Easiest way I've found is to use flexbox, but there are people doing it with grid, and obviously it'd be possible to simulate with %, though it'd be harder and possibly less user-friendly.

    • The style guide includes a width for the designs, which have all been 375px for mobile and 1440px for desktop so far. Your content (other than the attribution) is 417px wide in total, and does crush well to fit the minimum but outgrows the desktop design. Designs can be opened in an image editor to "reverse engineer" many measurements, or opened in an image preview and carefully placed to lineup with the browser window by using alt + tab to switch between the browser and image. I've been eyeballing it, but measurements would be more accurate of course.

    • The font-family should include a generic fallback in case a user block Google Fonts or it doesn't load for any reason.

    • Repeated colors, e.g. hsl(0, 0%, 100%) would be more readable as named CSS vars.

    Marked as helpful
    1
    Rolands Vels-Zviedris•40
    @RolandVelsPosted 11 months ago

    @l3laze I uses css "reset" that some youtube tutorial used. Thanks you for your feedback.

    1
    Tom•120
    @l3lazePosted 11 months ago

    @RolandVels Ohh, interesting - must be something like a normalizing reset.

    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