Lab 13, Part 1 - HTML and CSS Review

Overview

• review HTML and CSS

Create Your Remote Repository

This will create a remote git repository on github.

1. Go to your account home (github.com/username).
2. Click on the Repositories tab.
3. Click the green New button on the right side.
4. Give your repository the name lab-13-remote
5. The repository should be public (the default).
6. Click "Initialize this repository with a README".
7. Click Create Repository.
8. Refresh your main GitHub page and you should see the new repository.

Cloning your repository

This will clone the repository you just created on GitHub on your local machine.

• open terminal
• (if doesn’t already exist) create a folder that consists of your first initial and last name in your home directory

cd ~
mkdir myname

• use pwd to verify that you’re in the correct folder
  • you should be in ~/myname/
  • if you’re not, cd into it
• to prove that this is not yet a repository, list all files in your current directory

ls -al

• it should contain only your previous labs
• it should not contain any .git folders

• Make sure again that you're in the correct directory! (/Users/student/myname or ~/myname)
• Clone the GitHub repository you just created: lab-13-remote

git clone https://github.com/your_username/lab-13-remote.git

• The output should be:

Cloning into 'lab-13-remote'...
remote: Counting ojects: 3, done.
remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
Receiving objects: 100% (3/3), done.
Checking connectivity... done.

• Check to make sure you've linked to your remote repository:
• Change into your repository directory (lab-13-remote).
• Use the git remote command.

cd lab-13-remote
git remote -v

• You should see:

origin https://github.com/your_username/lab-13-remote.git (fetch)
origin https://github.com:your_username/lab-13-remote.git (push)

• configure your name and email for your commits

# in the directory of your repository
git config user.name  "my first and last name"
git config user.email "my@email.address"

• finally, use git config again to see if this worked:

git config -l

• (use should see your name and email appear in the configuration)

Create a Two Page Site!

Home Page

• with SublimeText create a page called home.html in your lab-13-remote folder
• start with the basic structure needed for an html5 document
• put in a title called: Lab 13 Home
• create a heading, h1, with text: Lab 13, Part 1 - Review
• create a smaller heading, h2, with text: Home
• create a list under the heading
• in that list put two list items that are links:
  • home links to home.html
    • add a class to this list item called ‘active’
  • about links to about.html
• create a paragraph under that list
• in your paragraph tag, write in: Welcome to lab 13!!!! Our last lab!
• add an image at the end of your page
  • <img> (no closing tag)
  • add a src attribute, set it equal to an image
• use git to check the status, add to staging, and commit (don’t forget the -m ‘message’ part)… you can wait to use git push at the end of the lab

About Page

• with SublimeText create a page called about.html in your lab-13-remote folder
• start with the basic structure needed for an html5 document
• put in a title called: Lab 13 About
• create a heading, h1, with text: Lab 13, Part 1 - Review
• create a smaller heading, h2, with text: About
• create a list under the heading
• in that list put two list items that are links:
  • home links to home.html
  • about links to about.html
  • add a class to this list item called ‘active’
• create a paragraph under that list
• in your paragraph tag, write in: This is for MTEC1003
• use git to check the status, add to staging, and commit (don’t forget the -m ‘message’ part)… you can wait to use git push at the end of the lab

Style Your Pages

• with SublimeText create a stylesheet called mystyles.css in your lab-13-remote folder
• edit about.html so that it uses your stylesheet
• edit home.html so that it uses your stylesheet
• in your stylesheet, make sure that the entire page uses sans-serif fonts
• make your largest headings red
• put a black border around every element with a class of active
• put in this as a repeating background image!
• make the margins around your paragraphs 20px
• use git to check the status, add to staging, and commit (don’t forget the -m ‘message’ part)
• git push origin master!