Skip to content
Submitted about 1 month ago

flex, position

Muhammet Yıldırım•20
@myildirimdev
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

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

In fact, there is nothing I am proud of, I have been developing back-end for a long time until today, I was sure that I could not develop front end, but while doing this project, I realized that I never needed help from the web, it seems that I will only need a little practice.

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

I had a bit of a problem with the padding, I think the content was slipping, but I couldn't understand the problem and it didn't cross my mind that there could be a problem with the padding because it looked very accurate, next time I will check the first padding.

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

As you can clearly notice, there is a problem with the fonts, I adjusted the fonts by paying special attention to the design details in the figure, but it didn't work very well and I didn't need to write responsive codes because when I checked it with the tool on chrome inspection, it had no problems with other device sizes.

Community feedback

  • Chamu•13,130
    @ChamuMutezvaPosted about 1 month ago

    Greetings.

    Congratulations for taking on your first challenge.

    HTML

    1. Do some research about landmark elements. The best resource will be Landmark elements. They are very important for the structure and organisation of your site. For this site , you need to have the main element which is responsible for identifying the primary content of the page. That is to say the div with the class container should be the main element . You can also use the footer element for the code with the class attribution
    2. All images in your HTML should have an alt attribute where , when the image is decorative the value should be alt="" , other than that , the value should be descriptive bringing out the message carried in the image.
    3. Use semantic elements always to improve the accessibility of your site, among others , you would need a heading element. Since this is just a component from the main page , you should have an h2 heading element instead of the span element with the class title. The other span should be a p element. Refer to the MDN docs for guidance

    CSS

    1. Seaprate your CSS from the HTML by creating a separate css file and then importing it into the HTML
    2. Do another research on a modern css reset stylesheet which you need to normalise your webpages. One common one is written by Andy Bell
    3. Other centering methods includes flex and grid , that is just to increase your choices when it comes to centering elements
    4. Avoid setting the height of containers as that can cause some issues if the content fails to fit . Let the content decides the height to use as for the width you would need to have a combination of max-width in rem so that the element can extend to a certain width and the width property can be a percentage.
    5. Line height should be unitless , so in this case instead of 140% it should be 1.4
    Marked as helpful
    0
  • Alexandre Escobar•50
    @AlexxLuisPosted about 1 month ago

    I'm still learning how to style my projects better and what has helped me a lot is remembering that even a simple button can have different techniques applied.

    Despite the difficulty with the padding, the design was very similar, good job.

    Marked as helpful
    0

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