Creating our web page

Now that everything is set up, let's get started with putting together our images folder and installing our fonts.

Images folder

I have prepared a folder with all the images that you'll need to do this exercise. Those images can be found in Resources | Image Web project. You can simply copy all the images and assets to the img folder in our new project folder.

Installing our font

If you have a second look at the website, you can see that we're using custom fonts, which means that we're not using web safe fonts. Web-safe fonts are the fonts pre-installed on every device. They appear on all operating systems. This collection of fonts is used by Windows, Mac, Google, Linux, Unix, and so on.

There may be a few more, but this is a list of the common web-safe fonts:

• Arial
• Helvetica
• Times New Roman
• Courier New
• Courier
• Verdana
• Georgia
• Comic Sans MS
• Trebuchet MS
• Arial Black
• Impact

Not super appealing; let's be honest.

But, with CSS3, we can now add our own custom fonts, by using @font-face. Let...