Overview
During this workshop, you'll build your own personal website using HTML and CSS. HTML is like the outline, elements, and structure. CSS is the style, organization, and colors. We will walk you through each step along the way, ask if you have questions at any point. See the example site that you will be creating: durhamka.github.io
Getting Started
When writing code, remember that you have to be very precise. Spelling mistakes or extra spaces can mess up your work, so pay attention to little details! Copy and Paste whenever you can.
Divide into groups, and open your text editor. You will have different text editors depending on what computer you are using. Your instructor will help you find your editor and open it. A text editor is where you will be typing all of the code that you will be writing today! So when you are prompted to copy and paste during this workshop, you will be putting all of that code in your text editor.
Next, let's open the browser you will be using today. Depending on what computer you are using will determine what application you will be using. It will either be Chrome, Firefox, Safari or Internet Explorer. A browser is where you will view your work as you make changes in your text editor.
Creating Your Files
Let's create a directory that will hold both your HTML and CSS file.
If you are using a Mac, open an application called 'Finder'. Follow these instructions: Click on 'Desktop' on the left list. In the upper left hand corner, click 'File', then 'New Folder'. Create a new folder and name it 'personal_site'. Press Enter to save the new folder.
If you are using a PC, create a new folder and name it 'personal_site'. Ask an instructor if you have any trouble doing this.
In your text editor, click on 'File' in the upper left hand corner and select 'New File'. To name the file, click 'File', then click 'Save'. Save this file to your 'personal_site' folder. Call this file 'index.html'. Click 'Save'. This will be your file where all of the HTML for your site will live. Your text editor, depending on which one you are using, might working differently than this. If so, ask an instructor for help.
Now, create an images folder inside of your 'personal_site' folder. This is where all the images for your website will be stored. Show your instructor the folder structure to make sure it is correct. Then move on to the next section!
Setting up your HTML Page
Let's start by building out the skeleton of our web page with HTML. This means there will be no style, but just the structure and elements. HTML stands for Hyper Text Markup Language. Notice the structure of what you are pasting. At the top of the page, we are telling the computer what type of document we are creating; an HTML document. Notice that we are creating both 'head' and 'body' elements to tell the browser that we have a header and a body. We will continue to learn more about elements during the exercise. Elements tell the browser what we want, whether it's smaller text, larger text or a specific part of the page.
In your index.html file that you already created in your text editor, copy and paste the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Add your page title here</title>
<link href='https://fonts.googleapis.com/css?family=Muli:400,300italic,300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Alex+Brush' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="index.css">
<link rel="shortcut icon" href="images/logo@2x.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
FILL IN CONTENT HERE
</body>
</html>
Remember, don't delete any of this code, it's what makes your website show up correctly in the browser, connecting the style guide, and linking to fonts.
Type in your own name where it says 'Add your page title here'. Also, make sure you save the file after editing it by pressing 'command + s'. It does not save automatically.
Now we are going to see what you just did. Open the browser (Chrome, Safari, or Firefox). Click 'file' in the upper left hand corner. Click 'Open File' and select your index.html file from your 'personal_site' folder on the desktop. You should see a blank page. If you don't see a blank page, it could just be because you are using a different text editor. Keep this page open, we will be using this throughout the workshop to view your website as you make changes.
Navigation
Now we're going to start adding HTML for our navigation - this will go at the top of the website. Navigation allows viewers of your site to easily move from section to section. We will build the functionality for that later, but just want to add the basic structure.
Copy and paste the following code into Sublime text. You will paste this code in between the '<div id="body">' and closing '<div>' tag. You should be replacing the text that says "FILL IN CONTENT HERE" Always leave the opening and closing tags at the top and bottom of your code. (container div, body tag and html tag).
<div id="container">
<nav>
<a href="#resumen">Resumen</a>
<a href="#fotos">Fotos</a>
<a href="#contacto">Contacto</a>
</nav>
</div>
The keyword 'href' and 'a' tag creates a link that someone can click on. We will make these links function later. Take a moment to play around with this. Change words like 'Resumen' to something else. Save the file in your text editor, and refresh the Chrome browser. Notice how it changes to whatever you typed. Ask your instructor if any questions come up.
Your HTML code, so far, should look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Your Name</title>
<link href='https://fonts.googleapis.com/css?family=Muli:400,300italic,300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Alex+Brush' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="index.css">
<link rel="shortcut icon" href="images/logo@2x.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="container">
<nav>
<a href="#resumen">Resumen</a>
<a href="#fotos">Fotos</a>
<a href="#contacto">Contacto</a>
</nav>
</div>
</body>
</html>
Header Section
This will be the main focal point for your site. We will add an image and styles later, but for now, we are just building the outline. Copy and paste the following code right underneath your closing nav tag (</nav>). If this is confusing, your instructor can show you.
<header>
<div id="image-container"></div>
<h1>Your name</h1>
<div class="divider"></div>
<h2>Write a sentence about yourself here.</h2>
</header>
Be sure to change the text to show your name and your tagline!
Resume Section
Now, let's add our first section, the resume section. Copy and paste the code below into your html file.
<section id="resumen" class="resumen">
<h1>Mi Experiencia</h1>
<h3>Current Job</h3>
<p>Current job description.</p>
<p class="detail">Date Range you worked here</p>
<div id="line-break"> </div>
<h3>Past Job</h3>
<p>Past job description.</p>
<p class="detail">Date Range you worked here</p>
<div id="line-break"> </div>
<h3>Another past job.</h3>
<p>Another past job description.</p>
<p class="detail">Date Range you worked here</p>
<div id="line-break"> </div>
<h3> Activities, awards, hobbies, etc. </h3>
<p>Description.</p>
</section>
Notice how this section has an "id". The "id" will allow us to link to this part of the page from the navigation section, when you click on the link. Feel free to add and change any info you want. To challenge yourself, try adding another secton under my experience that talks about your future goals. Rememeber to keep refreshing your browser to see the your outline grow!
Your code up until this point, should look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Your name</title>
<link href='https://fonts.googleapis.com/css?family=Muli:400,300italic,300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Alex+Brush' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="index.css">
<link rel="shortcut icon" href="images/logo@2x.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="container">
<nav>
<a href="#resumen">Resumen</a>
<a href="#fotos">Fotos</a>
<a href="#contacto">Contacto</a>
</nav>
<header>
<div id="image-container"></div>
<h1>Your Name></h1>
<div class="divider"></div>
<h2>Personal Description</h2>
</header>
<section id="resumen" class="resumen">
<h1>Mi Experiencia</h1>
<h3>Job or School | Name of Company or School</h3>
<p>Description</p>
<p class="detail">Time Period</p>
<div id="line-break"> </div>
<h3>Job or School & Title | Name of Company or School</h3>
<p>Description</p>
<p class="detail">Time Period</p>
<div id="line-break"> </div>
<h3>Title| Job or School</h3>
<p>Description</p>
<p class="detail">Time Period</p>
<div id="line-break"> </div>
<h3> Other Experience, hobbies, etc. </h3>
<p>Description</p>
<p class="detail">Time Period</p>
</section>
</div>
</body>
</html>
Photos Section
Now we'll move on to your photos. But before we write any more code, pick out eight photos that you have taken or that represent you that you would like to have on your site.
Save each of your images in the 'images' folder that you previously created. If you don't have images easily available, you can just keep the ones we already have. Rename each photo something that represents your image. Make sure that your file names do not have any spaces. For example, you could name a file 'my_dog_is_cool.jpg'.
Copy and paste the code below into your html file under the closing tag of your resumen section - </section>.
Paste the name of each of your images into your html file where it says 'your_image_name' below.
<section id="fotos" class="fotos">
<h1>Mis Fotos</h1>
<div class="foto_container">
<img src="images/your_image_name.jpg" alt="image_name">
<img src="images/your_image_name.jpg" alt="image_name">
<img src="images/your_image_name.jpg" alt="image_name">
<img src="images/your_image_name.jpg" alt="image_name">
<img src="images/your_image_name.jpg" alt="image_name">
<img src="images/your_image_name.jpg" alt="image_name">
<img src="images/your_image_name.jpg" alt="image_name">
<img src="images/your_image_name.jpg" alt="image_name">
</div>
</section>
Notice the 'img' tag. That tells the browser that you will be adding a picture here. The 'alt' name is what shows up if your picture happens not to load. Refresh your browser and notice all of your pictures show up!
Contact Section
We are at our final section! There are four images on the desktop of your computer that will be used for contact images. If you do not have them, we are passing around a thumb drive and your instructor can help you get them off of the thumb drive and onto your desktop. Take the four images and place them in your 'images' folder.
Copy and paste the following code underneath the images </section>.
<footer id="contacto">
<h1>Contacto</h1>
<a href="https://twitter.com/your_twitter_handle"><img src="images/twitter.png"></a>
<a href="https://facebook.com/your_facebook_name"><img src="images/facebook.png"></a>
<a href="https://linkedin.com/in/your_linkedin_name"><img src="images/linkedin.png"></a>
<a href="mailto:your_email_address"><img src="images/mail.png"></a>
</footer>
<div id="kubmo_info">
<a href="http://kubmo.github.io/" target="_blank" <p>Like this site? Build your own with the Kubmo Guides!</p> </a>
</div>
Notice the 'href' tag again. This means that these images link to your actual social profiles online. Put in the actual links to your social media sites, so people can contact you! Refresh your browser window and make sure that when you click on the images, they link to your social profiles correctly in a new page. If not, ask your instructor.
Your HTML code should look like this, at this point!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Your name</title>
<link href='https://fonts.googleapis.com/css?family=Muli:400,300italic,300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Alex+Brush' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="index.css">
<link rel="shortcut icon" href="images/logo@2x.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="container">
<nav>
<a href="#resumen">Resumen</a>
<a href="#fotos">Fotos</a>
<a href="#contacto">Contacto</a>
</nav>
<header>
<div id="image-container"></div>
<h1>Your Name></h1>
<div class="divider"></div>
<h2>Personal Description</h2>
</header>
<section id="resumen" class="resumen">
<h1>Mi Experiencia</h1>
<h3>Job or School | Name of Company or School</h3>
<p>Description</p>
<p class="detail">Time Period</p>
<div id="line-break"> </div>
<h3>Job or School & Title | Name of Company or School</h3>
<p>Description</p>
<p class="detail">Time Period</p>
<div id="line-break"> </div>
<h3>Title| Job or School</h3>
<p>Description</p>
<p class="detail">Time Period</p>
<div id="line-break"> </div>
<h3> Other Experience, hobbies, etc. </h3>
<p>Description</p>
<p class="detail">Time Period</p>
</section>
<section id="fotos" class="fotos">
<h1>Mis Fotos</h1>
<div class="foto_container">
<img src="images/your_image_name.jpg" alt="image_name">
<img src="images/your_image_name.jpg" alt="image_name">
<img src="images/your_image_name.jpg" alt="image_name">
<img src="images/your_image_name.jpg" alt="image_name">
<img src="images/your_image_name.jpg" alt="image_name">
<img src="images/your_image_name.jpg" alt="image_name">
<img src="images/your_image_name.jpg" alt="image_name">
<img src="images/your_image_name.jpg" alt="image_name">
</div>
</section>
<footer id="contacto">
<h1>Contacto</h1>
<a href="https://twitter.com/your_twitter_handle"><img src="images/twitter.png"></a>
<a href="https://facebook.com/your_facebook_name"><img src="images/facebook.png"></a>
<a href="https://linkedin.com/in/your_linkedin_name"><img src="images/linkedin.png"></a>
<a href="mailto:your_email_address"><img src="images/mail.png"></a>
</footer>
<div id="kubmo_info">
<a href="http://kubmo.github.io/" target="_blank" <p>Like this site? Build your own with the Kubmo Guides!</p> </a>
</div>
</div>
</body>
</html>
Styling the Page
Congratulations! You have the basic outline for your website! But, doesn't it look a little disorganized in the browser? Now, we are going to add all of the styles to make it pretty! First, we need to create another file, our CSS file. Like you did at the beginning, create a new file in your 'personal_site' folder, and call the file 'index.css'.
Open the CSS file and copy and paste the following code:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
font-family: 'Muli', sans-serif;
font-weight: lighter;
padding: 0;
margin: 0;
background-color: #F5F5F5;
}
h1 {
font-size: 30px;
margin: 0;
font-weight: normal;
text-align: center;
padding-bottom: 60px;
color: #400160;
}
h2 {
font-size: 25px;
font-weight: lighter;
text-align: center;
}
header h1 {
font-size: 75px;
font-family: 'Alex Brush', cursive;
border-bottom: none;
color: #ee1289;
}
header,
section,
footer {
padding: 60px 120px
}
.loves,
footer {
text-align: center;
}
p {
font-size: 18px;
line-height: 1.5;
color: #848484;
padding-bottom: 30px;
}
Refresh the page and notice what happens! Notice that we are targeting things in our HTML structure. For example, the h1 is targeting our header. Play around with changing things, like the font sizes. Refresh the browser and notice how things change! Ask your instructor if any questions arise.
Before we move onto styling the header section, pick out a picture that will be your background image. Make sure it's a big image! Save the image as 'hero.jpeg' in your images folder.
Once you have done that, copy and paste the following code beneath, directly after the existing CSS.
header {
margin-top: 70px;
position: relative;
display: block;
min-height: 500px;
overflow: hidden;
text-align: center;
}
#image-container {
position: absolute;
top: -10px;
left: 0px;
bottom: -10px;
right: 0px;
background: url(images/your_image_name_here.jpg) no-repeat center center fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
filter: blur(5px);
-webkit-filter: blur(6px) saturate(180%);
-moz-filter: blur(6px) saturate(180%);
-o-filter: blur(6px) saturate(180%);
-ms-filter: blur(6px) saturate(180%);
filter: blur(6px) saturate(180%);
}
header h1 {
position: absolute;
top: 140px;
font-size: 118px;
color: #ffffff;
left: 20px;
right: 20px;
}
.divider {
width: 100px;
height: 4px;
top: 220px;
background: #FFFFFF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
position: relative;
left: 46%;
}
header h2 {
position: absolute;
top: 290px;
font-size: 30px;
color: #ffffff;
left: 20px;
right: 20px;
padding-top: 4 0px;
}
Change the name of your image in the '#image-container' to be the name of the image file that you just saved (make sure you spell the file name correctly! You probably named it hero.jpeg). Save your file and refresh the browser. Look at your header with the background image! If it's not showing up, talk to your instructor
Next, copy the following code on the next line in your css file.
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 70px;
text-align: center;
z-index: 1;
background-color: white;
border-top: thick solid #AA00FF;
-webkit-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.2); /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.2); /* Firefox 3.5 - 3.6 */
box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.2);
}
nav a {
display: inline-block; /* changes links from default inline element to add padding properly */
text-decoration: none; /* removes underline */
margin: -5px 20px 20px 20px; /* adds space around each link */
color: #808080;
font-size: 20px;
font-style: normal;
font-weight: lighter;
padding: 25px;
}
nav a:hover {
background-color:#AA00FF;
color: #FFFFFF;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
Notice how when you hover over the navigation links at the top. Now it should be changing color! That is done with the 'nav a:hover', the very last thing that you pasted.
Finish your desktop style
Copy and paste the remaining CSS at the bottom of your css file, to finish up your desktop css. Feel free to mess around in the code, and make changes to personalize your site. If something doesn't look right or you want help personalizing, just ask your instructor. Also, you should be able to click on each navigation link and have it bring you to the correct section on your site!
.resumen {
overflow: hidden;
}
.resumen h1 {
font-weight: 600;
border-bottom: 1.5px solid #ccc;
}
.resumen h3 {
padding-top: 30px;
color: #400160;
font-weight: 600;
}
.resumen p {
color: #848484;
font-weight: 100;
}
.detail {
margin-top: -30px;
font-style: italic;
opacity: .5;
}
#line-break {
width: 100px;
height: 1px;
background: #ccc;
}
.fotos {
margin-top: -100px;
}
.fotos h1 {
border-top: 1.5px solid #ccc;
padding-top: 60px;
}
.fotos img {
width: 286px;
}
footer {
margin-top: -100px;
}
footer h1 {
margin-top: 30px;
border-bottom: 1.5px solid #ccc;
}
footer img {
width: 50px;
margin: 60px 30px 0px 30px;
}
/* BOTTOM BAR - kubmo info
-----------------------------------------*/
#kubmo_info a {
text-decoration: none;
font-weight: 600;
color: #FFFFFF;
}
#kubmo_info p {
font-weight: 600;
color: #FFFFFF;
}
#kubmo_info {
background-color: #AA00FF;
width: 100%;
text-align: center;
padding-top: 32px;
height: 82px;
}
#kubmo_info a:hover {
color: #400160;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
Making your Site Responsive
Now we are going to make it so that people can view your website on a mobile phone or tablet. This is done using media queries - you'll see text that says something like '@media only screen and (max-width: 1400px)'.
Copy and paste this code at the bottom of your CSS file, so that when someone looks at it on a mobile phone, it looks great!
/* MOBILE - responsive design
-----------------------------------------*/
@media only screen and (max-width: 1400px) {
.fotos img {
width: 260px;
}
}
@media only screen and (max-width: 1300px) {
.fotos img {
width: 320px;
}
}
@media only screen and (max-width: 1000px) {
header,
section,
footer {
padding: 60px;
}
h1 {
font-size: 30px;
}
h2 {
font-size: 18px;
}
header h2 {
margin-top: 20px;
}
header h1 {
font-size: 100px;
margin-top: 0px;
}
.divider {
top:200px;
left: 43%;
}
nav a {
margin: -5px 5px 5px 5px ; /* adds space around each link */
font-size: 18px;
padding: 25px;
}
}
@media only screen and (max-width: 800px) {
header h1 {
font-size: 100px;
margin-top: -60px;
}
header h2 {
margin-top: 80px;
}
.divider {
top:280px;
left: 43%;
}
}
@media only screen and (max-width: 600px) {
header,
section,
footer {
padding: 40px;
}
h1 {
font-size: 30px;
padding-top: 30px;
}
header h2 {
margin-top: 80px;
}
header h1 {
font-size: 60px;
margin-top: -30px;
}
header {
margin-top: 40px;
}
.divider {
top:260px;
left: 36%;
}
}
Woo hoo! Your site should look how you want it to! You just built your first website. What a huge accomplishment!
Hosting Your Site
We are going to host your site on something called Github. If we have good enough Internet, we will do it together. If not, we will do it for you when we have a better connection and send you an email with your site URL. Then you will be able to view it from any browser window, and you can share it with anyone.
Creating a Github Account
In order to host your site on Github, you need to create an account. It is free of charge. In your browser, go to 'www.github.com'. In the top right hand corner, click 'Sign Up'. Type in a username, email address and password and click 'Create an account'. If you need help translating, ask your instructor.
Creating a Github Page
Once you have your Github profile created, sign in to the main page. In the upper right hand corner there is a '+' sign. Click that and select the first option 'New repository'. In the 'Repository name' box type "'your_username'.github.io". Make sure that you type in your username that you just created your account with. And then click the green button, 'Create repository'.
Using a Github GUI
Open up the Github application on your computer. If your machine doesn't have it, we have a USB that has it on it so you can still download it. We will be using this application to push your work to the Github page. Then, anyone will be able to view your personal site. Using the Github application is complicated, so let your instructor know when you get to this point. She can help you clone the repository that you created in the step above. You can see the project you want to clone by pressing the '+' button in the upper left hand corner. You will, then, add all of your files and hit the 'commit' button that will push all of your code to your page.
The Finished Product
In your browser, go to http://your_username.github.io. You should see your finished site! You can visit this URL any time from any computer, as long as you have internet connection. Share with your family and friends and post about it on your social media sites! If the site does not show up, let your instructor know and they can help you debug.
If you don't want to use Github, we can push your site live later. Just put your information on our document.