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!
- Linear-gradient documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
- Z-Index documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
- Alternate options to style the ampersand via Stack Overflow: http://stackoverflow.com/questions/6488950/two-tone-font-coloring-in-css and http://stackoverflow.com/questions/34289603/text-with-two-colors
- Z-index requires positioning the parent element with absolute or relative positioning. You also have to position the element that you are trying to change the order of. Article on positioning
- Codepen with linear-gradient in action.
- Codepen on z-index + positioning!