Submitted 11 months ago

Mobile first solution using basic CSS

Brandon EB• 20

@bbuglz81

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Any tips on positioning the Attributions class? I got the job done, but it definitely isn't clean

Community feedback

Mennatallah Hesham• 1,490

@Mennatallah-Hisham

Posted 11 months ago

Hi Brandon,

Congratulations on completing your first challenge👏

You did great 👍

Here are some suggestions to improve your code:

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"

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

gfunk77• 1,200

@gfunk77

Posted 11 months ago

Nice job. I think what you did for the attribution was fine in this context. You could also try using position: absolute. Margin-left being half the width of whatever the content is. Make sure your parent element is position relative. Something like this:

position: absolute;
  bottom: 0.5rem;
  left: 50%;
  margin-left: -121.8px;

I hope this helps! Or at least something to play around with

Marked as helpful

Please log in to post a comment

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