Alrighty then! We’re going down the home stretch. Let’s take a look at our remaining errors.

Screen Shot 2017-07-07 at 4.01.48 PM

Much better!

And this is what our clone looks like…

Screen Shot 2017-07-07 at 4.04.47 PM

This is what Carbon Five’s site actually looks like…

Screen Shot 2017-07-10 at 10.37.59 AM

Right off the bat, we can see that our fonts are not the same and we need the Carbon Five logo. Looking at the errors above tells us the same story. Let’s dig in and tackle each one of these errors. The first error is for a JS file called ‘v2.js’. After searching our index.html file, we’ll find the JS file being referenced in the footer as:

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>

All we have to do is prepend the src link with ‘http:’. After refreshing our index.html file in Chrome, the error is gone. Easy peasy:) Next on our error list is for ‘file:///fonts/c5-logo.woff’. If we search our index.html file, we’ll find two lines of code referencing the styles for the font/logo. So that means we’ll search the app.css file. We’ll find this block of styles:

/* c5 icon font styles */
@font-face {
  font-family: 'c5-logo';
  src:url('/fonts/c5-logo.eot');
  src:url('/fonts/c5-logo.eot?#iefix') format('embedded-opentype'),
    url('/fonts/c5-logo.woff') format('woff'),
    url('/fonts/c5-logo.ttf') format('truetype'),
    url('/fonts/c5-logo.svg#c5-logo') format('svg');
  font-weight: normal;
  font-style: normal;
}

Let’s go check the sources in our console at carbonfive. When we click the images folder, there are two files – c5-logo.woff & pentel.woff. The ‘woff’ extension stands for Web Open Font Format. This file type for fonts is compressed so websites using these file formats should load faster. We can append ‘/fonts/c5-logo.woff’ to ‘carbonfive.com’ in Chrome and the file will download to our computer. All we have to do is make a ‘fonts’ folder in Atom and drag our recently downloaded file over and drop in. When we refresh the browser we’re still getting the error. So we probably have to change the way it’s being referenced.

Let’s prepend all of the urls from the c5 icon font styles above with ‘..’. This will bring us up two the root directory and then we’ll be able to access our fonts folder. Let’s refresh Chrome and see if we’re down a couple more errors. We are! We only have three errors to go:)

Screen Shot 2017-07-10 at 11.12.44 AM

Two of the errors look very similar to the ones we just took care of. Let’s try the same steps. First, append carbonfive.com with ‘/fonts/pentel.woff’ and open in Chrome. That should download the file. Next drag it over to Atom and place in the fonts folder. Now let’s do a search in our app.css file for ‘pentel’. We should find this block of code:


@font-face {
  font-family: 'pentel';
  src:url('/fonts/pentel.eot');
  src:url('/fonts/pentel.eot?#iefix') format('embedded-opentype'),
    url('/fonts/pentel.woff') format('woff'),
    url('/fonts/pentel.ttf') format('truetype'),
    url('/fonts/pentel.svg#pentel') format('svg');
  font-weight: normal;
  font-style: normal;
}

Looks very familiar! I think you’ll know what to do next. If you said ‘prepend the urls with two periods’, you are correct! After refreshing the browser we’re left with one error! Sweet!

**Just a note – the ‘pentel’ font is an Adobe font, which you’ll need a typekit password for. This is not a free font. It will work locally, but if you publish to github pages or something similar it will break.**

The last error has something to do with a Google API and from the look of the link, it’s specific to Carbon Five. This means only their devs have access to the API. In that case we’re done! Feel free to change images, fonts and styles. If you see a cool feature, try to figure out how they’re doing it – you have the code in your hands! I hope this was enjoyable for you. If you’re ever on a cool website and you want to see what’s going on under the hood, command + option + i. What did the world look like before Dev Tools? I don’t want to know!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s