01 - part 2: Creating your first website

Objectives

Create an html file with a basic content structure
Use html elements such as html, div, style, h1, p, and img
Cut and paste code from codepen.io to a file
Provide notes and reflective information inside the cards
Link an external css file to an html page
Store your files in a git repository
Store your repository on github
Use github pages to serve your web page on the intertubes.

Overview

Your client, who happens to be your instructor for this class, wants to get to know you better and see what you are picking up in the class. You will accomplish this by creating a web page. You will use the HTML & CSS you created in part 1 of this exercise and add information using HTML.

Please follow the instructions listed below as you work along with the instructor and the TA’s.

Resources

Beginning HTML and CSS
HTML First
What is CSS? Note: This is just one video in the CSS: Cascading Style Sheets badge

Things to do

Part 0 - Set up the assignment

Steps

Create a folder named “pcs” in your Documents folder.
Create a new folder inside the pcs folder and give it the name of this project. This name should be unique.
Open up your text editor (Sublime Text or Atom)
Create a new file [file, new-file or cmd n] and save [cmd s or file, save]. Name the file “index.html”. Be sure to save this file in the folder you created for this project.
If you are using Sublime Text, click on [view], find [sidebar] and select [show sidebar]. In Atom, use View>Toggle Tree view. Next, drag your new folder from the finder right into the sidebar.
One line 1, insert <!DOCTYPE html>.
On line 2 and 3, create an open and closing html tag.
Save your file. You should do this often. On the top of the screen, next to the file name you should see an X or a circle. If you see a circle, then you need to save your changes.

Part 1 - Start creating content structure

All tags after this point should be between the opening and closing html tag.
Create an opening and closing head tag with a opening and closing title tag. In between this title tag, type your name and something witty.
Save the file
Open the file in the Chrome web browser. You can do this by clicking on the icon where you saved the file, or you can locate the file on the terminal and type: open _fileName_. This should open up your default browser and show your content. If Chrome is not your default browser, make it so at least during this coding session.
There should be nothing but a white page, but on the top of the window, the tab will have your name and your witty comment. The browser address should also show something like this: file:///Users/yourUserName/pathToYourFile/index.html
Below the closing head tag, create an opening and closing body tag. At this point, all elements (except for the title tag) should have zero indentation.

Part 2 - Create header, footer, and content div

Inside the body tag, create opening and closing tags for the following elements: header, div, footer. Indent them one level because they are children of the body element.
Within the header tag, create an h1 tag and label this the same as your title that appears in the head element.
In the div element, assign the class attribute content so that the opening tag looks like <div class="content">
In the footer, create a paragraph element and use the content: “Copyright your name © 2015”. The html for the copyright symbol is ©
Your page in the browser should now show the h1 element for the header and the copyright notice in the footer and they should appear in the top left corner of the window.

Part 3 - create content in the main div

Copy the HTML from the codepen.io pen you created for the first part of this exercise and paste it inside the content div. This should include all the cards you created previously.
Create a new card in front of all the other cards and share your goals for this class. Answer questions like “Why are you taking this class? What do you hope to get out of it?” If you’ve sent this in email already, you can use the email text.
Create another card. In this card, the title should be “Concerns” and the content in the paragraph should address any concerns you have about learning. You can also address what you don’t know about css, javaScript, using a keyboard, working with technology, etc. The central question in you mind should be “What do you not know?” You will keep this up to date during the whole class.
In a third new card, find a profile picture of yourself, similar to what you would post in facebook, or some other picture that represents your learning journey.
Create an “img” folder and put the file for the image in that folder.
Use an img element. Identify the file using a relative URL as the src attribute. For example, if your image file is “myLovelyMug.jpg” then your image tag will look like:
If you are familiar with other attributes in the image tag, you can also put in an alt tag.
At this point, you should see a lot more content in the browser.

Part 4 - Styling with an external css file

Create a new subfolder called “css”.
In this folder, create a new file and save name this one “main.css”
Link this css file in your html. You can do this by creating a link tag inside the header, directly underneath the title element. Include the following attributes: rel="stylesheet" type="text/css" href="css/main.css". The link tag is a self closing tag, so type in a forward slash before the closing delimiter>
Test to see if main.css is loaded correctly into the html page. This can be done easily by selecting the content div and changing the background color to something different than white. If you see a change, then the css file is linking correctly into your html page.
Copy the CSS from your codepen.io pen into your main.css file.
Align the content in the footer so that the content appears in the center of the window.

Gitapalooza!!

Before you do the next part, work with the instructor & class to do the git installfest. Be sure to do these steps in class with the instructor and teaching assistants. Don’t do this at home (yet). There are just a lot of things that can go wierd and it’s nice to do it with help the first few times.

Part 5 - Convert your folder to a git repo

Work through the next part with the class.

Open the Terminal app
Change directory to your pcs folder. If you are following recommended practice, you can do this by typing into the terminal: cd ~/Documents/pcs
Verify that your project folder is in the current directory by typing ls and looking for the name of the folder
Change directory into your folder using the cdcommand
Use the command git status and read the error message.
Turn the folder into a git “repository” with the command git init
Use the command git status and read the response. Make a guess at what it means.
Add all your files to the “staging area” using the command: git add -A
Use the command git status and verify that all of your files have been moved to the staging area of git.
Commit all your files to the repository using the command: git commit -m"initial commit"
Use the command git status and verify that all your files are now in the repository.

Part 6 - Publish your site using github.com