DEV Community

Dwayne Lacey
Dwayne Lacey

Posted on

Front-end Mentor QR Code

Image description

Recently I found out about a site called Front-end Mentor. I've started finally learning front-end technologies in depth lately but I found that while HTML feels relatively straightforward, CSS seems a lot more difficult to code in because of the planning. This is the first project I've tackled from their site and it tasked me with creating a simple QR code webpage. One of the major things I struggled with on this project was the use of the box model to properly organize my elements on screen.

.main-container {
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    border-radius: 5%;
    padding-bottom: 2.5em;
    width: 100%;
    max-width: 360px;
    background-color: hsl(0, 0%, 100%);
    display: flex;
    flex-direction: column;
Enter fullscreen mode Exit fullscreen mode

While I previously had tried to manually set my margins, it felt like no matter what I'd made my margins there was no change. Eventually I learned that I needed to keep my left and right margins set to auto.

I also couldn't seem to get the included font family from google to display, so I was forced to use the fallback font. I linked my font within my html like so:

  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="">
Enter fullscreen mode Exit fullscreen mode

Then I also set the font family to Outfit in my css as shown:

h1 {
    font-family: 'Outfit', sans-serif;
    text-align: center;
    color: hsl(218, 44%, 22%);
    font-weight: 700;
    font-size: x-large;
    padding-left: 30px;
    padding-right: 30px;
    margin-top: 15px;
    margin-bottom: 0px;

p {
    font-family: 'Outfit', sans-serif;
    text-align: center;
    color: hsl(220, 15%, 55%);
    font-weight: 400;
    padding-top: 0px;
    padding-left: 40px;
    padding-right: 40px;

Enter fullscreen mode Exit fullscreen mode

In the future I would like to get better at planning out in advance how I'll organize my elements and I'd like to better understand how to get the most out of using flexbox. I also think that I still could use some more work on understanding how to effectively use the box model.

Top comments (0)