While you can write web applications and text-based ensembles in Repl.it, sometimes it's nice to be able to just put together a simple HTML/CSS website using the same awesome editor!

Making your first website tutorial!

This is a guide for making your very first website using HTML and CSS and, if you follow the tutorial, you should end up with something that looks like this:

Though, to succeed with this tutorial, your final website should not look like that. To succeed at this tutorial, you should branch off and get creative with the code you write because you won't be just making just a website but your website!

The first thing we're going to do is go to https://repl.it and, where it says "Search for a Language", start typing "HTML" then select the HTML, CSS, JS option that comes up.

If you have another screen come up (where your url ends with /repls, /teacher, or /student), you can head over to https://repl.it/languages and select the HTML, CSS, JS option that way.

Now that the environment's loaded, it should look something like this:

If you press the run button right now with the code inside the editor, you won't see much because, well, there isn't much to display. However we can change that!

In the area that starts with <!DOCTYPE html>, select all the text and delete it. In the blank space, put the following code in

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

Now when you press "Run", you should see the following come out.

Or, if you want to view the website in a separate tab, just click on the preview button!

You've successfully put together a "Hello World!" program in HTML! (Out of tradition, people start learning a new language by first learning how to say "Hello World!")

Let's figure out what's going on in this program before we add more ~~bugs~~ features.

The very first line

<!DOCTYPE html>

tells the browser that we want to display an html file, which it gladly does.

The following lines consist of words inside angle brackets that are called "tags" and are often grouped in pairs like

<html></html>

where the first tag is referred to as the "opening tag" and the second is referred to as the "closing tag" (an element without the opening/closing pair is then a "self-closing tag").

The set up we have with indents and opening and closing tags is not something I came up with randomly, if you inspect the element of the page (or right click and "View page source"), you should see a similar structure to this

Getting back the code we have, at the top, we have a <head> tag, which you can think of as being the head of the website but we don't usually see things in here but, instead, in the <body> tag, which has all the juicy stuff.

Inside our <body> element, we have an <h1> tag, which displays text. The 1 in the tag refers to the size, see what happens when you change the "1" to other numbers like "2" or "3". Which numbers work? Which numbers don't work? There are plenty of elements and tags that can display text so, to mix things up, let's try the <p> tag out!

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>I love coding!
      I also love tiny plastic hands!</p>
  </body>
</html>

Once that's in, press "Run" and then:

As you can see, simply pressing enter or line break doesn't separate the two lines so, to fix that, let's put the two lines into their own <p>, or paragraph, tags so that your code looks like the following.

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>I love coding!</p>
    <p>I also love tiny plastic hands!</p>
  </body>
</html>

Let's run to make sure that the two lines are separated this time...

The reason we had to do that is because HTML does not change the spacing on content on the page, regardless of how many extra spaces or newlines there are.

Now that we've got text rolling, let's add in some images!

First thing you want to do is find an image that you want to put into your website. Feel free to use Google Images, Facebook, or some other site but, when you find the desired image, right click on it and select "Copy Image Address".

Images are inserted into webpages by using the image tag, or <img>. This element has an attribute or inner field called "src" that tells the browser where to find the image. Since we're using images from the internet with some url, what that will look like is (using the actual url instead of just the text url)

<img src="url"/>

As you can see, there's no </img> tag and I put a slash before the second angle bracket, so this is a self closing tag. The image tag is a self-closing tag because it does not actually store any content besides, with the src attribute, we wouldn't have anything to put inside the opening/closing tags so we're good the way it is.

The quotes are important because the url isn't actually important to the structure of the website, it's only a specific thing about the image element. For this, I want to use the beautiful face of the Zucc, which I've stored at the url https://repl.it/public/images/blog/website_workshop/zucc.png. So, with that image, my image tag will look like

<img src="https://repl.it/public/images/blog/website_workshop/zucc.png"/>

Once you have your image tag set, put it right in before the <h1> tag so that you get the following result.

Well done, you've just used HTML in order to make a fantastic website!

However, don't you wish it had just a bit of help looking presentable?

Thankfully, there is CSS, which is short of Cascading Style Sheets. CSS is a language that allows you to style the tags and elements in the webpage.

When we were using HTML to make the website, we were using it to introduce structure and content whereas the CSS will allow us to introduce visuals and design for a more complete website.

What's nice is that we already have an "index.css" file as you can see in the file tree on the left but, if we were to put styling in there right now, nothing would change because we haven't told the browser to look at that file.

To include a CSS file, we'll need to link to it with a, you guessed it, <link> tag. We will be needing two attributes in this tag to include the CSS file.

<link rel="stylesheet" href="index.css"/>

The "rel" attribute tells the browser what the importance of this file is relative to the html which, in this case, is a stylesheet and then the "href" attribute tells the browser where to look for the stylesheet, which is at index.css.

As said before, the <body> element has all the juicy content but the <head> element is where the metadata goes, which is data that refers to other data. In this case, we're putting in CSS, which is refers to the content inside the body. And. so, we put the link tag inside the head like so

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="index.css"/>
  </head>
  <body>
    <img src="https://repl.it/public/images/blog/website_workshop/zucc.png"/>
    <h1>Hello World!</h1>
    <p>I love coding!</p>
    <p>I also love tiny plastic hands!</p>
  </body>
</html>

Now that the link tag is there, we can start putting things into our styles.css file!

The way css works is by statements comprised of selector, property, and value in the following format

selector {
  property: value;
}

The selector refers to the element or type of element you're looking to modify and then the property is the specific property of the desired element and the value is the value you're setting that property to.

The first thing I'm going to do is change the background to be a different color. This will mean I'm taking the body element and modifying the background-color property to the value grey so, following that intuition, we get

body {
  background-color: grey;
}

When you press run, you should see the following

Now let's change the font of the text to something truly beautiful, Comic Sans. For this, we will be changing the "font family" of the elements inside the body so I'll add on the following to our CSS file.

body {
  background-color: grey;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
}

The reason for the multiple quotes and words after the colon is because different browsers actually behave differently from each other so, by adding commas, we assure that this code will be sufficient. When run, it looks, without a doubt, gorgeous.

One thing that's stuck out the entire time is that the text was the color black. Let's change the color of the "Hello World!" to something more lively, like perhaps green. We know that the text is an <h1> tag so we can target that and then style it's "color".

h1 {
  color: green;
}

By selecting only the <h1> tag, you only apply whatever styles you wish to it so, if you wanted to, you could apply a "color" style to the <p> tag as well. The last thing I want to do before finishing this project is align everything in the center so that it stands out more properly. The style we're looking for is the "text align" style and, so, we get the following

body {
  background-color: grey;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  text-align: center;
}

Running our webpage we now have

However, if you followed the instructions in the very beginning you would have not made the exact same website as me but, rest assured, these are not the only things you can do with HTML and CSS and, as a matter of fact, this is now the point where you take your webpage to new levels and add in whatever it is you like! The internet is your friend and resource for the rest of this journey. If you are looking for sites for inspiration, here are a few:

Thu Mar 21 2019 by Amjad Masad

Thu Dec 06 2018 by Faris & Amjad Masad

Fri Nov 02 2018 by Rob Blanckaert

Mon Oct 22 2018 by Amjad Masad

Tue Oct 16 2018 by Faris Masad

Tue Sep 25 2018 by Amjad Masad

Mon Sep 24 2018 by Nathan Zilora

Fri Sep 14 2018 by Rob Blanckaert

Thu Sep 13 2018 by Tim Chen

Fri Aug 10 2018 by Tim Chen

Fri Aug 10 2018 by Yev Barkalov

Thu Jul 26 2018 by Yev Barkalov

Thu Jul 19 2018 by Yev Barkalov

Thu Jul 19 2018 by Amjad Masad

Mon Jul 16 2018 by Yev Barkalov

Wed Jun 27 2018 by Yev Barkalov

Mon Jul 02 2018 by Faris Masad

Mon Jul 02 2018 by Tim Chen

Wed Jun 27 2018 by Yev Barkalov

Fri Jun 15 2018 by Tim Chen

Thu Jun 14 2018 by Yev Barkalov

Wed Jun 13 2018 by Amjad Masad

Wed Jun 13 2018 by Yev Barkalov

Thu Jun 07 2018 by Amjad Masad

Mon Jun 04 2018 by Amjad Masad

Thu May 03 2018 by Ollie Parish

Mon Mar 19 2018 by Tim Chen

Tue Mar 13 2018 by Amjad Masad

Mon Mar 12 2018 by Amjad Masad

Fri Mar 09 2018 by Faris Masad

Thu Mar 08 2018 by Amjad Masad

Thu Mar 08 2018 by Tim Chen

Wed Mar 07 2018 by Amjad Masad

Mon Feb 26 2018 by Amjad Masad

Wed Feb 14 2018 by Mason Clayton

Mon Feb 05 2018 by Amjad Masad

Mon Feb 05 2018 by Tim Chen

Tue Jan 30 2018 by Tim Chen

Fri Jan 26 2018 by Haya Odeh

Mon Jan 22 2018 by Amjad Masad

Mon Dec 11 2017 by Amjad & Faris Masad

Sun Nov 12 2017 by Haya Odeh

Fri Sep 08 2017 by Mason Clayton

Wed Aug 23 2017 by Haya Odeh

Wed Jul 05 2017 by Amjad Masad, Haya Odeh, and Mason Clayton

Thu Jun 01 2017 by Amjad Masad

Tue May 30 2017 by Amjad Masad

Mon May 29 2017 by Haya Odeh

Thu May 18 2017 by Amjad Masad

Tue Apr 25 2017 by Alek Hurst

Fri Apr 21 2017 by Vitaly Pavlenko

Tue Mar 28 2017 by Amjad Masad

Mon Mar 27 2017 by Amjad Masad

Mon Mar 20 2017 by Amjad Masad

Fri Mar 03 2017 by Amjad Masad

Mon Feb 27 2017 by Mason Clayton

Wed Feb 15 2017 by Alek Hurst

Fri Jan 27 2017 by Haya Odeh

Mon Jan 23 2017 by Amjad Masad

Thu Jan 19 2017 by Haya Odeh

Fri Dec 23 2016 by Mason Clayton

Fri Dec 02 2016 by Amjad Masad

Mon Nov 28 2016 by Amjad Masad

Debug your Python3 programs from your browser

Sat Nov 12 2016 by Amjad Masad

Mon Nov 14 2016 by Amjad Masad

Or, what I wish you I knew before building Repl.it's code execution service

Tue Oct 25 2016 by Amjad Masad

Import any Python Package

Tue Oct 04 2016 by Amjad Masad

Fri Sep 30 2016 by Faris Masad

Wed Sep 28 2016 by Amjad Masad

Thu Jul 28 2016 by Haya Odeh

Thu Jul 21 2016 by Amjad Masad

Sat Jul 02 2016 by Faris Masad

Wed Jun 29 2016 by Haya Odeh