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

QR Code Component Project

@forhisglory85

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


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

What I'm proud of:

When first seeing the project, I immediately began to figure out in my head the layout of the page, breaking down each element visually. That process gave me the framework to begin building the structure in HTML/CSS.

What would I do differently:

At first, I didn't format the page properly, instead of using multiple elements, I used one for the whole container, and tried creating a border to contain the content. It was a mess. No shame, I decided to try and pick up some hints from a YT video of someone else doing the project. After seeing they had multiple elements, it clicked and I realized what I was doing wrong. From that point, the process was much smoother.

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

My biggest challenge was going through what seemed like an endless tweaking of values in CSS and using the process of elimination to get the content as close as possible to the original design. It felt like I was just throwing stuff at the wall til something stuck.

While that wasn't ideal, it helped me figure out what DIDN'T work, and I found that to be just as valuable as figuring out what DID work.

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

I would like help getting a better understanding of the CSS Box Model and its function in relation to HTML elements. Looking at my CSS file, it feels like I have too many margin properties and values. I'm not sure if it needed to be quite that complicated.

Community feedback

@DanijelAdrinek

Posted

to start off, your body and html tags should be 100% of the height of the screen, you need to use one of the methods of vertically and horizontally centering the card inside the body, the card itself should prolly be the main tag, or if you're going to keep it outside the card, then make it so card is a section tag, you didnt add the colors for the texts, title being dark-blue, and paragraph being grey, the size of the card doesnt match the size of the card in the design, the space between the card and the content design would be more clean if it was padding on the card instead of margin of the content inside it, if you were using figma design, you can select and element, and hold alt to see how big the space between 2 elements is, you should also see how big the design in figma is, lower the size of your screen to that size, and take a screenshot (ctrl + shift + s) then you can paste that screenshot in figma, add 50% transparency to it, and put it on top of the design to see if it matches or not, thats how you will do the job once you are a frontend web developer.

You should also get familiar with css variables, on small projects like these, they dont make that big of a difference, but on big projects, they are a life saver!

anyway, it is still a good project, and I hope you found this helpfu, in case you want to check my solution out and learn from it, here is the link: https://www.frontendmentor.io/solutions/just-css-and-html-its-too-small-of-a-project-to-need-ro-add-anything-Lo9rFod9_5

if you have any questions or need any additional help, feel free to reach out, I'm here to help :)

Hope you found this comment helpful, and happy coding :D

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