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;
}
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="https://fonts.google.com/specimen/Outfit">
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;
}
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)