Skip to content
OverviewSolutions
17
Comments
9

JunoField

@JunoField310 points

CS student at the University of Birmingham, currently trying to learn web development among other things.

Latest solutions

View more solutions

Latest comments

  • JunoField•310
    @JunoField

    Hello, congrats on your first project!

    Here's some tips that may help you for your next project:

    • The layout does not work on mobile devices. Generally, you should code the mobile version of the site first, then use media queries to make modifications for the desktop version. Thankfully, the differences for this project are very minimal.
    • The sizes and colours do not match with the design. Colours can be found in the style-guide.md file.
    • As for sizing, I recommend zooming to 100% on the design files then use a tool (such as PowerToys Screen Ruler, if you're on Windows) to measure sizes.
    • Finally, I see you're currently using the default font and not the one recommended by the style guide. Thankfully, adding a font from Google is very easy: here's a tutorial.

    Good luck with your next project!

  • JunoField•310
    @JunoField

    Hi,

    This was a great attempt, just a few suggestions:

    Some of the CSS "tweaks" you've added aren't necessary for this project - sections 7 and 8 for example. There's no real need to remove these - just thought I'd make you aware.

    Ideally the main element should be centered - another commented mentioned a grid solution, but personally I'd just use absolute positioning. This can be done by adding this to the centre card's CSS:

    position: absolute;
left: 50%;
top: 50%;
transform: translateXY(-50%, -50%);

    Also, take note of the issues raised in the FM report:

    • Alt text: Personally I'd either make it empty or add a link, but neither are ideal solutions in production so it's really up to you.
    • Main tag required: This one's simple: just change your section tag to main and update the CSS to suit.
    • Attribution section: Personally I'd replace div with footer for the attribution to fit this requirement.

    Speaking of the attribution section, don't forget to fill it out with your name and profile. I also like to move its styling from the HTML file to the CSS file but that's down to preference.

    Good luck!

  • JunoField•310
    @JunoField

    Hi,

    Your CSS and images are not linked as of right now. To fix this, simply change href="/styles.css" to href="./styles.css" (with a period before the slash), and the same for all your images.

    Good luck!

    Marked as helpful
  • jwalczak94•810
    @jwalczak94
    What are you most proud of, and what would you do differently next time?

    I would probably use classes or IDs to select individual elements.

    What challenges did you encounter, and how did you overcome them?

    Nothing, it was an easy challenge.

    What specific areas of your project would you like help with?

    I don't need a help with this project.

    QR code component using Flexbox

    1
    JunoField•310
    @JunoField

    Hi,

    Congrats on your first project - you've got it looking very close to the design with 0 HTML/accessibility faults!

    The only things I'll mention are:

    • On mobile the card is not centred in the visible screen area and requires scrolling - it should be reasonably easy to centre it though.
    • When only styling a single element, use IDs and not classes. Classes are typically used when you want multiple elements styled consistently.

    Good luck!

    Marked as helpful
  • JunoField•310
    @JunoField

    Hi,

    I'm assuming you intended to centre the .main-container component vertically as well as horizontally. If this is the case, simply add this to its CSS on the desktop version:

            position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

    Also, I noticed that you only used classes and no IDs for your HTML/CSS. The general rule is to use classes when they are applied to multiple elements, and IDs if they are for a single element - which is the case for most of yours.

    Hope this helps!

    Marked as helpful
  • JunoField•310
    @JunoField

    Hi,

    It seems that while trying to offset the review sections horizontally, you have accidentally offset the contents inside them instead by using justify-content. Fortunately this is very easy to fix - simply remove that line and add a margin-left instead.

    In terms of their width, if you want to add a fixed width simply add width: ___px to their CSS.

    Hope this helps!

View more comments