Skip to content

kayashaolu/webarch-lab-2

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 

Repository files navigation

Lab 2: Create a simple web page

Getting your feet wet with HTML and CSS

In this lab you will accomplish the following:

  • Create a one page website using HTML
  • Style your website with CSS

Load up your vagrant box

  • Open a new terminal
  • Type the command cd i253 to open the i253 folder
  • Type vagrant ssh to log into your box
  • Navigate to cd /vagrant to change directory to your synced vagrant folder
  • Clone your repo in this directory

Note #1: Now you should have created a lab-2-[username] folder inside this vagrant folder

Note #2: Note that now that you cloned your repo in the /vagrant folder, your files should be synced to your host computer. So now if you go to the folder that contains the Vagrantfile that you created last week, you should see a lab2-[username] folder there. This is the same folder that was cloned in your vagrant box. So you can edit files here using tools like Sublime Text or Atom or any text editor you choose.

Note #3: This note was done in class, so don't freak out when you see this in your repo

Create a one page website

  • In this repository there is a file named index.html. This will be the file that contains the HTML of your one page website. You are tasked with adding the following content to the empty website:
    • The tab of the web page should say: "[your name]'s first website", i.e. my Chrome tab would say: "Kay's first website"
    • Think about the tags that you should use for each piece of content
    • The content of the website should be formated like the following (ignore the horizontal rules):

[your name]'s First website!

Created on [today's date]

[start of paragraph] Hello World! This is my first website and I am very excited. I've always wanted to learn how websites work and I'm well on my way to finding out! [end of paragraph]


Style your website with CSS

  • Edit the empty CSS style sheet file style.css in the CSS folder and do the following:
    • Make all headers pink
    • Make all paragraph text blue
  • Link your web page to your CSS page

And as always, commit and push your changes to your personal repository to submit your homework.

About

Create a simple web page

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published