Hello World

  1. Open a terminal, navigate to ~/SD/HTML/, create an HTML file and a CSS file, and edit these two files with atom.
cd ~/SD/HTML/
touch index.html
touch myStyles.css
atom .

  1. Once in Atom, open index.html. At the very top of this file, type html and press return. This should create a basic, well-formed, HTML document for you.

  2. Inside of the <head> of your HTML document add the following:

<title> Hello World </title>
<link rel="stylesheet" type="text/css" href="myStyles.css">
  1. Inside of the body of your document:
  2. Create two <p> elements (with brief text of your choice).
  3. Create two unordered lists (each with a few <li>s of your choice).
  4. Create two <h1> elements (with brief text of your choice).
  5. Assign the class font40 to the first <p> tag and to the first <h1> tag.
  6. Assign the id header2 to the second <h1> tag.

  7. Assign the ids list1 and list2 to the two <ul> tags.

  8. Open up a new Browser Tab and navigate to ~/SD/HTML/index.html (Command-O).

  9. In your CSS document:

  10. Target all of the <h1> tags and give them the property color: red.
  11. Target the font40 class and give them the property font-size: 40px;.
  12. Target the header2 id and give it the property color: #29c2d4;.
  13. Target the list1 id and give it the property font-weight: bold;.

  14. Target the list2 id and give it the property font-family: cursive;.

  15. Refresh your Browser Tab.

  16. When finished, leave atom open with these two files. We will be editing them throughout this section.

Prev -- Up -- Next