Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive QR Code Component built with basic CSS properties

#accessibility#foundation#semantic-ui

@chiamaka-ugwu

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


All corrections have been made. Kindly check this out!

Community feedback

optimusprime202β€’ 1,220

@optimusprime202

Posted

Hey @chiamaka-ugwu, Keep up the good work.

Marked as helpful

1

Naveen Gumasteβ€’ 10,480

@NaveenGumaste

Posted

Hay ! Chiamaka Mary-Anne Ugwu Good Job on challenge

These below mentioned tricks will help you remove any Accessibility Issues

-> Add Main tag after body <main class="container"></main>

-> Always use the "alt attribute" and write what img is , and if the img is for decorative then leave it empty but always add it with img tag.

-> Learn more on accessibility issues

If this comment helps you then pls mark it as helpful!

Have a good day and keep coding πŸ‘!

Marked as helpful

1

Dev Rathoreβ€’ 2,600

@GitHub-dev12345

Posted

In image accessibility give the image alternative name likeπŸ‘‡

<img src="./image/bill.jpg" alt="bill gates">

Marked as helpful

1

Dev Rathoreβ€’ 2,600

@GitHub-dev12345

Posted

Reduce accessibility to change this code πŸ˜ŠπŸ‘‡

<div class="box"> to <main> ( used main tag). <div class="attribution"> to <footer> ( Uses footer tag for footer design)

Marked as helpful

1

Dev Rathoreβ€’ 2,600

@GitHub-dev12345

Posted

Congratulation Nice Work Keep it up πŸ˜‰πŸ‘

Used this code want your card in center position :

in body tag Used this CSS Code: body{ display : flex; justify-content: center; align-item: center; }

in Card Design CSS Code used this property: align-self: center;

Marked as helpful

1

Oldβ€’ 6,240

@Old1337

Posted

Hello there! πŸ‘‹

Congratulations on finishing your challenge! πŸŽ‰

I have some feedback on this solution:

  • Always Use Semantic HTML instead of div like <main> <header> <footer> , etc for more info
  • All Images must have alternate text

i hope this is helpful and goodluck!

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

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