Skip to content
Submitted 7 months ago

HTML and CSS

Nicholas Moser•40
@nrmoser50
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?

I took a bootcamp over a year ago. This was my first look at any sort of project since then. I'm most proud of the fact that I knew where to look and heeding the advice of my instructor "just break stuff and put it back together."

What I would do differently next time would be not making things more difficult than they need to be. That looked like extra divs and editing multiple parts that could have been condensed into one div.

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

The challenges were mainly in recalling the different parts of the HTML and CSS files. "Div" "class" and then how to style them in the CSS file ".class." I overcame them by digging into old homework and having "ah ha" moments.

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

I need help in all areas. Any and all feedback is welcome.

Community feedback

  • Bianca Albuquerque•120
    @BiancaAdSPosted 7 months ago

    Hello @nrmoser50,

    I have some suggestions about your code that might interest you.

    • You can invert the tag main and div with the .wrapper class, instead of placing the main inside the div, place the div inside the main, you can also remove the footer from inside main and div. To know more about semantic HTML, you can take a look at: https://www.freecodecamp.org/news/semantic-html5-elements/

    • And in the body CSS, you can use flex-direction: column, so that the elements are aligned according to the column and in the .qr-code, you can use witdh: 100% so that image occupies the entire size of the its parent component, making it easier when including page responsiveness.

    I hope you find this helpful!

    Happy coding!!

    Marked as helpful
    1
  • Daniel 🛸•44,250
    @danielmrz-devPosted 7 months ago

    Hello, @nrmoser50!

    Your project is looking fantastic!

    I'd like to suggest a way to make it even better:

    • Using margin isn't always the most effective method for centering an element.

    Here's a highly efficient approach to position an element at the center of the page both vertically and horizontally:

    📌 Apply this CSS to the body (avoid using position or margins in order to work correctly):

    body {
    min-height: 100vh;
    display: flex; 
    justify-content: center;
    align-items: center;
}

    I hope you find this helpful!

    Keep up the excellent work!

    Marked as helpful
    1
  • Sina Khodaparast•110
    @30vamPosted 7 months ago

    You could try changing the <body> font-family property to the font linked in style-guide.md:

    <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&family=Outfit:[email protected]&family=Rubik:ital,wght@0,300..900;1,300..900&family=Vazirmatn:[email protected]&display=swap" rel="stylesheet">

    Simply add these in your html file's <head> tag and set font-family property to 'Outfit'.

    Also to make the card smaller you can also change the width and height property of the QR code <img> I think.

    Marked as helpful
    1
  • Taylan Acikgoz•60
    @taylanacikgozPosted 7 months ago

    Congrats for your solutions. I have small suggestions for the styling to make your solution is better and more professional.

    1. Using units like em, rem instead of px are another options.Further informations >>

    2. Keep on checking to design files during the development process to catch what is asked from design team. For example, background color should be fixed according to colors title in the style-guide.md file. These small details also helps you to be ready for working within more professional teams.

    Good luck with your learning process!! :)

    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