Skip to content
Submitted about 1 year ago

Responsive website using html and css

TemitayoGold•10
@TemitayoGold
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 found it difficult to center the card to the middle of the screen and how to make it responsive it also.

i am unsure of the media queries and height given to some of my cod

no i dont have any question about best pratices

Community feedback

  • Mennatallah Hesham•1,490
    @Mennatallah-HishamPosted about 1 year ago

    Hi TemitayoGold,

    Congratulations on completing your first challenge👏

    You did great 👍

    Here are some suggestions to improve your code:

    Centered Card

    • you can center the card both horizontally and vertically using flexbox
    .parent{

display:flex;
justify-content:center;
align-items:center;

}

    Semantic HTML

    • wrap your content in <main>,this element represents the dominant content of the <body>
    • wrap your card in <article>
    <main>
<article>
</article>
<div>
</div>
</main>

    Headings

    • each page should have one h1 tag,h1 helps the web understand the content. also skipping h1 may confuse assistive technology users.
     <h1>Improving your front-end skills by building projects</h1>

    ALT

    • images should have descriptive alt text, which is important for SEO and screen reader users,alt="QR code linking to Frontend Mentor challenges"

    Media Queries

    • the most common media queries are 480px , 768px , 950px , 1200px . you may not use all of them or you may need more breakpoints depending on your design.

    SEO

    • you can add meta description for better SEO, it provides a brief summary of a web page
    <meta name="description" content="..........."/>

    here are some helpful articles:

    Hope you find this helpful, Happy Coding

    Marked as helpful
    1
  • Christian joshua•240
    @thelastmediciPosted about 1 year ago

    to centre the card you can use margin: 0, auto; it automatically centres the card to the middle of the screen as regards responsiveness, you can use the developer tool to pick a suitable media query points Hope this was helpful

    Marked as helpful
    1

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