You’re the CSS to my HTML
Outline of this tutorial:
- What is web development?
- HTML tags and images
- Adding in CSS
- Using Github Pages to host your website!
There are developers who have the sole job on working with software designed for the web. Coding for websites uses different languages, and a unique setup — people usually refer to this practice as web development.
Frontend & Backend
Web development is often divided into two distinct parts: frontend and backend. A good analogy to describe these roles is a house:
Frontend is what the user interacts with; one might say, “This living room looks like it could belong in Better Homes and Garden”, AKA“That website’s design really fit the flow of the company”. A frontend developer is like an interior decorator, matching color palettes and placement, while also taking into account how a person might live and move in the space as well.
A backend developer works with the inner working of a how a website works and loads data. One might say, “Wow, this house has really efficient storage space and holds really well in a windy storm.” AKA “The database for this site scales really well.” Similar to houses, both of these sides are equally important, and use a variety of different tools and methods.
If someone does both frontend & backend development, they are called full-stack developers.
We are not going to go too in depth about either side in this tutorial; we simply want to show you how to make a simple web page. First, we are going to start with HTML (Hyper Text Markup Language). A markup language is characterized by its use of tags, which are basically a way to describe various parts of your content. Tags always have an opening and closing, and the type of tag is characterized by a label. What lies in between the tags is your content.
Examples of Tags:
<h1> </h1>
<p> </p>
<body> </body>notice that closing tags are almost always denoted with a slash
Creating A Website starting with index.html
Ok, let’s start creating a website!
First, create a new repository on Github; you can name it something like, <your name>.me
You can add a description below (or not I guess), and leave it “Public”. Remember to leave “Initialize … README” checked.
Next, clone the repository you just created onto your local machine using git (see instructions from our previous tutorial, Git it Together, on how to do this). Open your repository folder on a text editor, such as Sublime.
If your file automatically opens with Notepad, then you can right-click, and go to “Open with”, and then select “Other Applications”, and find your favorite text editor there.
Create a file called index.html; this will be the HTML file where you make the website. (Why is it called index.html you may ask? On most web servers, if the browser requests a URL that maps to a local directory, the server will check for an index.html file)
Note: having the correct filetype suffix (i.e. .html, .css, etc.) tells the computer what type of file it is, so make sure not to accidentally save it as “.index.html.txt”
Place the following HTML code in your index.html file; we’ll go through what each tag means.
<!DOCTYPE html>
<html>
<head>
<title> Fruthie Codes </title>
</head>
<body>
<h1>Welcome to Fruthie Codes!</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperidiet.</p>
</body>
</html>The <!DOCTYPE html> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in. Always add the <!DOCTYPE> declaration to the beginning of your HTML files, so that the browser knows what type of document to expect.
The <head> tag defines information about this index.html file
The <title> tag defines a title for the document. This is not text that will show visibly on your webpage, but it will be the text that shows on the tab where you open your index.html file.
The <body> tag defines the document’s body.
The <h1> tag is a heading tag. Headings go from <h1> to <h6>, they define the headings for the HTML, with h1 giving the largest headings, and h6 giving the smallest.
Notice that the head and body tags are nested inside the html tag
The <p> tag is a paragraph tag. It allows you to add a paragraph to your website. (What is ‘lorem ipsum…’ you may ask? It is a filler text commonly used to demonstrate the graphic elements of a document or visual presentation. You can replace the text later, it is there only for display purposes. Check out this cool lorem ipsum generator)
Great! If you have understood and done all that above, congratulations! That was a lot of information at first, but trust us, it will get easier the more you practice!
For a list of complete resource on what each HTML tags mean, go here
Adding Images
What’s a website without an image?! Let’s add one! Add the following line below your </p> tag.
<img src=”https://upload.wikimedia.org/wikipedia/en/d/dc/Perry_the_Platypus.png">Notice that img tags don’t follow the usual convention of <tag></tag>, but instead has the content inside solely the beginning tag: <img … >
In context of the whole code, it will look like this:
<!DOCTYPE html>
<html>
<head>
<title> Fruthie Codes </title>
</head>
<body>
<h1>Welcome to Fruthie Codes!</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperidiet.</p>
<img src=”https://upload.wikimedia.org/wikipedia/en/d/dc/Perry_the_Platypus.png">
</body>
</html>The <img> tag will load an image that is specified by the src attribute. You can set the value of src to any valid URL that links to an image! If you wanna get your own image off the internet, simply go:*right click*> copy image address>paste!
URL stands for Uniform Resource Locator; it is a reference to a web resource that specifies two things: its location on a computer network, and a mechanism for retrieving it. In our case, a URL, when pasted onto a browser, can link us an image.
Cool! Now it’s time to see how your website looks like so far! Navigate to where your index.html is stored on your local machine, and click on it, or you can go to where your index.html file is located in your folder, and click and drag it to the url bar on the top of your internet browser (sounds weird dragging text to the net, but it works!). Your website will show up on your default browser. If you used our example, it might look something like this:
Don’t worry, we know it doesn’t too too fancy right now. Hang in there, and we will be sure to make it look pretty, both in this tutorial later with CSS, and in the next tutorial, where we bring in a framework like Bootstrap.
Adding CSS
Pure HTML is kind of like a very generic house with no color and no fancy doors or windows. Adding CSS to HTML is like adding paint and new, unique designs to a generic house to make it look prettier. We will make our website look prettier by changing the font and color.
There are three different kinds of CSS styling: Internal, External, and Inline. For the purpose of this tutorial, we will make an external CSS, which means that it will be placed in a different file than the html code. This will come in handy when we add more html files and when we add in a framework like Bootstrap later.
CSS stands for Cascade Style Sheets. For external CSS styling, we will write CSS code in files with a .css file ending; these files will typically be stored in a separate folder. Internal and inline CSS are written directly in the HTML file, such as index.html. Once again, for the purpose of this tutorial, we will be doing external CSS styling.
Let’s get started! In your repository folder, create a folder named css. This folder will hold all your CSS files.
Create a file inside your css folder called style.css (usually, this is what you name your default CSS file).
Next, we need to let our index.html file know that our style.css exists. We will connect them together by adding the following line in the <head> tags on our index.html file.
<link rel=”stylesheet” href=”css/style.css”> Now your code should look like this:
<!DOCTYPE html>
<html>
<head>
<title> Fruthie Codes </title>
<link rel=”stylesheet” href=”css/style.css”>
</head>
<body>
<h1>Welcome to Fruthie Codes!</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperidiet.</p>
<img src=”https://upload.wikimedia.org/wikipedia/en/d/dc/Perry_the_Platypus.png">
</body>
</html>We can now add some css! CSS works primarily by manipulating the various tags we have in the body tags of our HTML file. We are going to change the style of our <h1> and<p> tag.
Add the following lines to your CSS file:
h1 {
font-family: "Roboto", Roboto, sans-serif;
color: #3498db;
font-weight: 300;
text-align: center;
} p {
font-family: "Roboto", Roboto, sans-serif;
font-weight: 200;
text-align: center;
}
In CSS, you want to specify the tag that you want to manipulate, followed by the curly braces. Inside your curly brace, you can add lines of code such as font-family or color; they are called attributes. Each attribute had a variety of options for you to choose from.
For example, we set our font-family to Roboto, a popular website font. The color attribute changes the color of the tag you are manipulating, the font-weight attribute changes how thick your font letters are, and the text-align attribute changes how you align your text in a given tag (we wanted to center it).
Centering the image
Now, the last thing we want to do for styling is centering our image, we will now introduce another way to manipulate our tags. Since we may have many images on our HTML file, we don’t want to modify every img tag with the same CSS; rather, we may want every image to have different styling. In CSS, we can add an id to a tag, and call CSS code on that id.
First, add an id to your image tag in your index.html:
<img id="platypus" src="https://upload.wikimedia.org/wikipedia/en/d/dc/Perry_the_Platypus.png">Add the following code to your style.css:
#platypus {
display: block;
margin-left: auto;
margin-right: auto;
}Notice that you had to add a ‘#’ sign to the front of your id in your CSS file, and your id has to match your id in your image tag.
Kinda how like hashtags are unique links to a certain topic! Coincidence…yeah, probably.
Now, your index.html should look something like this:
<!DOCTYPE html>
<html>
<head>
<title> Fruthie Codes </title>
<link rel=”stylesheet” href=”css/style.css”>
</head>
<body>
<h1>Welcome to Fruthie Codes!</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperidiet.</p>
<img id="platypus" src=”https://upload.wikimedia.org/wikipedia/en/d/dc/Perry_the_Platypus.png">
</body>
</html>
Your style.css should look something like this:
h1 {
font-family: "Roboto", Roboto, sans-serif;
color: #3498db;
font-weight: 300;
text-align: center;
}p {
font-family: "Roboto", Roboto, sans-serif;
font-weight: 200;
text-align: center;
}#platypus {
display: block;
margin-left: auto;
margin-right: auto;
}
Trying loading your index.html again! This time, it should look something like this:
Much better! Now let’s follow the same instructions from Git it Together to push your files to Github! In your terminal, navigate to your repository folder using the command ‘cd’ , and run the following commands:
git add --all
git commit -m “added index.html, style.css”
git push origin master 
Great! Now your code is on Github! Next, we’ll show you how to host your website so you can share it with others!
Hosting, Domains, and the Github Solution
What does hosting mean?
So we created our website, and now we want to share it with everyone! Unfortunately, simply copying the link that is associated with your local index.html on your browser, and sending that to your friends won’t do it. While you can view your index.html yourself, it is considered to be a local file, which means it only exists on your own computer. In order to share your website with others, you need a place to host it.
There are third-party companies out there that can “host” your website; AKA they will allocate space on the Internet for your website so that other people can search and view your site.
What is a domain?
Notice when you want to go to the Google search page, you type ‘www.google.com’? That is actually an example of a domain; A domain is the name for the website that is yours on the Internet. Some names are more popular than others, so oftentimes you have to pay a fee to associate a domain name to your website. For our example, we won’t be buying a domain name, but instead, we will be using the free Github hosting method for the website we created.
Hosting your website on Github
Fortunately, Github offers a free solution to hosting your website, provided that you do the following:
- Have a repository that contains your index.html, along with all your other files (css, images etc)
- Create a gh-pages branch for that repository on Github.
We’ve done number 1, since we pushed our code to our repository; now, we will do number 2.
Creating gh-pages
We won’t go into too much details about the nitty-gritty Git and Github features and capabilities, but just know this: in addition to all the version control capabilities you learned for Git, you should also know that Git gives you the option to create branches. Branches are kind of like small roads breaking from the main, big road.
When you first created a git repository, remember how you had to run the command git push origin master? The ‘master’ part of that command actually means the master branch, your default branch for your repository. Creating another branch allows you to make a change in your codebase without affecting your master branch. We are going to create a branch called gh-pages; this will allow Github to host your index.html file online.
In your repository on your terminal, run the following line of code
git checkout -b gh-pages
git push origin gh-pagesThe command:
git checkout -b <insert branch name> creates a branch and changes you into that branch, so we would do:
git checkout -b gh-pagesWhen you push, you specify your branch name to push into that branch on Github.
That’s it! Now, go to the following URL (use your own username and your own project name):
https://<username>.github.io/<projectname>You should be able to see your website live, and you can now share your website with anyone!
You can look at all of the code here! Or look at the site online here at : https://fruthiecodes.github.io/fruthiecodes.me/
Congratulations! This concludes our second tutorial. Once again, we encourage you to tinker with your index.html. Add more images! Create more headings! Style your text! Check out this CSS Reference Guide for more attributes and styling you can do. Next week, we will go over how to add Bootstrap to your website, stay tuned!
