Skip to content
OverviewSolutions
4
Comments
2
Denisa Orlikova
@denisaorlikova91

All comments

  • Denisa Orlikova•80
    @denisaorlikova91Posted 3 months ago

    *missing hover state for the heading *h5 and p should only be used for actual headings and paragraphs. Better tag for author name and article date would be span *missing mobile media class *pay more attention to correct dimensions of white space

    Marked as helpful
    1
  • Shane William Miller•10
    @TheOmegaFettSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I feel proud to accomplish my first project based on someone else's design. I feel I did a good job.

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

    I couldn't get my card to appear in the centre of the screen at first until I set the body to nearly maximum viewport height.

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

    If there is something I missed or could improve on, any redundant code or simpler method of achieving things would be helpful or any general feedback is also welcome.

    QR Code Page using HTML and CSS including Flexbox

    2
    Denisa Orlikova•80
    @denisaorlikova91Posted 3 months ago

    Even though placing your styles within a `` tag for the main content, however the <article> tag is not semantically correct. A better solution would be to use <div class="card"> and using .card selector in your CSS for styling. This makes both your HTML and CSS easier to understand, maintain and reuse.

    Although at first glance your solution might seem visually correct, at the closer look your paddings within the card are off. It's important to inspect the design in detail and calculate correct dimensions for all white space. Example: the card width is 320px, the QR img width is 288px. (320-288)/2=16 So the correct padding for your card is 16px. From here you can work out the white space between the rest of the elements within the card which is usually in multiples of the same number, in this case 16px. Don't forget to double check your font-sizes too. In this case the correct h1 size would be 22px.

    Overall a good job for a first project, though! It takes time to train your eye for all the details and to take up the habits that promote well readable and reausable code. Hope this feedback helps & good luck!

    Marked as helpful
    0