Lesson 4

Your site gets online!

FTP – File transfer protocol

In order to get our files accessible around the world – yes, online, in the web, the internet 🙂 – we need a hosting (a server that delivers the files). Remember the lesson #1 when we discussed how the internet works? That’s it!

Each of you will have your own subdomain (yourname.hackingheroes.org) – try it!


First, we need a good app to allow us to connect to the server. We suggest Filezilla.

Then, with the account details provided you will be able to see the files hosted:

Here you can upload your files (HTML, CSS and images), give it a try and see your site online. Remember, when you access you site name.hackingheroes.org your browser will look for your index.html

CSS – Display property

Let’s talk about one of the most important CSS properties: display! There are a few valid display values, the most important ones are:

  • none – hides the element
  • block – displays the element as a block (like <p> or <div>)
  • inline – the element stays inline with the content (like <a>)
  • inline-block – displays an inline block

See some examples:


See the Pen apRxWe by HackingHeroes.org (@hackingheroes) on CodePen.


See the Pen MJPRvz by HackingHeroes.org (@hackingheroes) on CodePen.


See the Pen apRxEo by HackingHeroes.org (@hackingheroes) on CodePen.


See the Pen ygRrKG by HackingHeroes.org (@hackingheroes) on CodePen.

A nice example to see the same element with different display values.


Google fonts

Fonts play a very important role on site designs. Different fonts give us different emotions and help us to better interact with websites.

The standard web fonts (or safe fonts) are very limited and sometimes we need better ones. Google fonts can help us.

After we select a font from the long google fonts list, we can add it to our site:

Let’s take Bungee font as example, we need to add the following to the <head>:

And then use the given font-family wherever we want in our CSS:

See the Pen OWZyWv by HackingHeroes.org (@hackingheroes) on CodePen.

« Lesson 3 Index Lesson 5 »