I'm having trouble getting started with the 'Host your own font files' challenge, help?!

So many things here to unpack. To start, this is a challenge rolling together everything you have learned. The box model is really important to understand and this project is heavily based on understanding it. If you are finding it difficult to space things on the page, review Lesson 1 3 in 101 on the box model. Floats are also important and if you’re having challenges with them, review Lesso n 15 in 101 on floats and layouts.

Text header tags (h1-h6) have default styling that you cannot remove (such as automatically bolded letters) so it’s best to use the <p> tag for all of your text so that you have more control over how your site will look in the browser.

Also, just know there are tons of ways to do the same thing. So your code may not look like your classmates. That’s ok!

It's very important to get the font, Abril Fatface, loaded before you start adjusting the layout. The font is very different from the default browser fonts and if you don't load it first, you could end up adjusting the layout twice.

Speaking of the layout, always use floats to position the items on the screen instead of large margins/padding. Avoid using a negative margin if at all possible.

Handling the ampersand: One option is to include two ampersands (you’ll see how to do that in the Slack Overflow links below). Another option is to use a linear-gradient to create the dual colored ampersand (take a look at the linear-gradient Codepen) it. Lastly, you can use a combo of positioning + z-index to get it above the other div's on the page (take a look at the final Codepen on z-index + positioning.

Links to learn more about all of the above!

Still need help? Contact Us Contact Us