Submitted 5 months ago

QR code with HTML and CSS

Rodney-Mokenyu•270

@Rodney-Mokenyu

A solution to the QR code component challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am proud of my color picking for the backgrounds

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

i found it hard to set the background to exactly the same color as specified.

I finally used Adobe photoshop to upload the sample image for the project so that i can copy its color code and paste into my css. I also had difficulties in arranging the container with the image within to fit to the screen when reduced to mobile vie.
I still think my final solution did not really get the job done.

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

i would like help in the css particular with setting the container, so that it gets really centered as shown in the sample. in all screen sizes

Code

Please log in to post a comment

Community feedback

P
Matthieu Bonjour•270
@Matthieu83600
Posted 5 months ago
HTML Semantics

You can test your HTML code on the W3C Validator: W3C Validator

HTML Tags
- Language Attribute: Add the language attribute to your HTML tag, for example: <html lang="en">
- Main Container: Wrap your code inside a <main> tag with the class container before any <div> tags:
```
<body>
<main class="container">
<div class="card"></div>
</main>
</body>
```
- Heading: Replace the <h3> tag with <h1>: <h1>Improve your front-end...</h1> Document Structure: The <h1> tag should be used for the main title of your page. It helps to create a clear and logical structure for your document. Using <h1> ensures that your content is well-organized and easy to navigate.
- Classes: Use classes to make your code more understandable. For example, for your <div> tag, use class="card" instead of class="container":
```
<div class="card"></div>
```
Design
- Download the starter files again. Inside, you will find a style-guide.md file that indicates the correct colors to use, text sizes, and fonts.
- Fonts: Use Google Fonts to apply the correct font.
- Design File: Download the design file and create a Figma account to open the .fig file. You will find all the necessary information to achieve the same design.
Marked as helpful
ChrisTariah•80
@ChrisTariah
Posted 5 months ago
The QR-Code card is very nicely done, although the design is not centralized vertically on the page, this can be accomplished by using Flexbox/Grid → If you want the easiest & most modern way. Absolute Positioning → If the element has a fixed size.

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