Skip to content
OverviewSolutions
10
Comments
5
Jordan Bugglin
@Jbugglin

All comments

  • Jordan Bugglin•170
    @JbugglinPosted 24 days ago

    If you give the body element width:100dvw and height:100dvh, you can use flex to justify-content: center and align-items: center. This will bring your main element to the center of the display area. Otherwise, looks good and keep it up!

    Marked as helpful
    1
  • Jordan Bugglin•170
    @JbugglinPosted about 2 months ago

    When uploading your initial commit to GitHub, just copy/click and drag to the file area on screen the contents of your qr-code-component-main file. That might be the reason why nothing is appearing on the screen for your submission. Also, I would put the style.css file in the same folder as your index.html instead of in the design folder.

    Once I was able to open it (via cloning and opening in vs code), it looks good! The border around the qr-code image is a little bit thick, just an adjustment to the qr-code-container padding would do it.

    You may want to use the <main> and <footer> semantic HTML5 tags as well. I would use main as the main container instead of section. That way it'll be the main focal point of the website and helps out on the report. I included a quick link to the tags and how best to use them, you may have came across it, if not it's a good reference: https://www.w3schools.com/html/html5_semantic_elements.asp

    I would also adjust the QR-Description class, to the border-radius of 1rem instead of matching the qr-code's border-radius of 0.5rem. You'll have a consistent radius that will keep the appearance of the border around the image to be the same thickness.

    Overall, you did a great job, keep learning and good luck in future endeavors!

    0
  • Jordan Bugglin•170
    @JbugglinPosted 3 months ago

    Add a width: 100dvw; and height: 100dvh; to your stylesheet to fix the issue where the main card isn't fully centered to the screen. The parent container needs to have a specified size in order for flex to fully work.

    It also appears that the border-radius might be a bit off, to get the main card's border radius to look uniform with the <img> border-radius, I would just double the <img> border-radius and set that to the main.

    You might want to stylize the fonts for the different elements individually, that'll fix the size and weight issue of your <h1> element.

    Last, but not least, use semantic HTML. Use the <main></main> elements instead of creating a div with class of main. Link to semantic HTML elements: https://www.w3schools.com/html/html5_semantic_elements.asp

    Marked as helpful
    0
  • Jordan Bugglin•170
    @JbugglinPosted 3 months ago

    Make sure you use semantic HTML, utilize the <main></main>, <footer></footer>, etc...elements, it'll be a lot easier for others to read, and you could have stylized 1 element as opposed to having 2 div elements that were stylized separately.

    Marked as helpful
    0
  • Eneyee•60
    @EneyeeSubmitted almost 2 years ago
    • How much of the code is usless or repeats what was already stated earlier?
    • How to aproach positioning of the elements better?
    • Please recomend some resourses for learning front-end for an abslute beginner and maybe provide a general roadmap of front-end developer

    QR code component solution with basic HTML/CSS

    2
    Jordan Bugglin•170
    @JbugglinPosted almost 2 years ago

    In your index.html file, the main tag within the body should utilize the h1 tag instead of <div class = "title">, which would do away with the level 1 heading error. Just as a quick suggestion, lookup semantic HTML5, there are updated element tags that do away with the use of utilizing <div> tags for headings, paragraphs, articles, asides, etc. A website that I used when learning this: https://www.w3schools.com/html/html5_semantic_elements.asp

    The alternate text error regarding the QR code image is an accessibility issue, where if the image can't load or if the user is utilizing a screen reader, it will read that alt text, all that needs to be done with that is just adding the alt="" attribute in the <img> tag along with a quick summary of the image.

    As for the landmarks warning, the attribution div at the end of the index.html file should be changed to the footer element to be semantically correct for html5. I think it's a bit odd that they would include code in the startup file that throws warnings.

    As for the styling side of your project, the one thing that jumps out at me just looking at the preview is the border radius of the QR code image, looks a bit off. I try to match whatever the main card's border radius is and halve it. That way the rounded corners look a bit closer to the given sample. So for the main card you have a border radius of 15px, if you gave the image a radius of 7.5px, the corners look a bit more nestled in and the spacing around more uniform. Also, do not need to specify in the image to display as block, instead try to give it a width and height of 100%. That will make it "fill" the area in your main card element. To make it more responsive, look into using rem/em units in place of pixels. This resource kinda helped me when I started out trying to produce more responsive css: https://www.w3docs.com/snippets/css/which-is-better-to-use-in-css-px-em-or-rem.html

    You could take the margin: 0; and padding: 0; for the body and main and add them as a reset at the beginning of the styling file as a reset such as: body, main, h1, p {margin: 0; padding: 0; } . Since you already have display: flex; in the body and have it justified and aligned to center, you don't really need the position: absolute; in the main as well as setting the margin to auto since that already takes care of it for you. Position absolute only works in a child element if you specify a position relative in the parent element. Also, you can drop the display block in the main element. Some CSS resources to help learn more that I would recommend would be to check out the front end development course for freecodecamp.org or check out the Odin project, there is also tons of great resources on Youtube (i.e.: Kevin Powell's channel)

    I know this is a pretty lengthy post, but I implore you to continue on and keep learning, you're doing great!

    Marked as helpful
    1