Skip to content

Instantly share code, notes, and snippets.

@achavez
Last active February 25, 2017 17:25
Show Gist options
  • Save achavez/981f1614462468fffaddcb5688042324 to your computer and use it in GitHub Desktop.
Save achavez/981f1614462468fffaddcb5688042324 to your computer and use it in GitHub Desktop.

ONA DFW coding exercises

HTML exercise 1

Format the article below with HTML.

<html>
	<head>
		<title></title>
	</head>
	<body>

        <!-- Format the content below -->
        
		CIA Realizes It's Been Using Black Highlighters All These Years

		Director Demands Investigation 

		Adapted from The Onion

		[ Main image: http://o.onionstatic.com/images/articles/article/1848/CIA-Realizes-C_jpg_250x1000_q85.jpg ]

		LANGLEY, VA—A report released Tuesday by the CIA's Office of the Inspector General revealed that the CIA has mistakenly obscured hundreds of thousands of pages of critical intelligence information with black highlighters.

		According to the report, sections of the documents— "almost invariably the most crucial passages"—are marred by an indelible black ink that renders the lines impossible to read, due to a top-secret highlighting policy that began at the agency's inception in 1947.

		CIA Director Porter Goss lamented the fact that the public will probably never know the particulars of several historic events, such as: 
		    
		* the Cold War
		* the civil-rights movement 
		* the growth of the international drug trade

		You might also like

		CIA To Shift Focus To Greeting Cards [link to: http://www.theonion.com/articles/cia-to-shift-focus-to-greeting-cards,4312/ ]

		========

		EDITOR'S NOTE: 

		* Be sure to turn the bulleted historic events into a list. 
		* Bold Porter Goss's name on first reference
		* Turn this note into a comment

	</body>
</html>

HTML exercise 2

Correct the errors in the below HTML.

<html>
    <head>
    	<title>Greatest Tabloid Headlines</title>
    </head>
    <body>
    	
		<!-- 
		Hint: The first two items in this list are formatted correctly. List from <a href="http://nymag.com/nymetro/news/anniversary/35th/n_8568/"><em>New York</em> magazine</a>.)
		-->

		<h2>Greatest Tabloid Headlines</h2>    
		<p>
		    <strong>FORD TO CITY: DROP DEAD</strong> (<em>Daily News</em>, 1975)
		</p>
		<p>
		    <strong>KISS YOUR ASTEROID GOODBYE!</strong> (Meteor misses earth; <em>Post</em>, 1998)
		</p>
		<p>
		    <sstrong>SOMOZA SLAIN BY BAZOOKA</strong> (<em>News</em>, 1980)    
		</p>
		<p>
		    <strong><a href="www.capitalnewyork.com/article/media/2012/01/5137028/real-story-headless-body-topless-bar-argued-veterans-post">HEADLESS BODY IN TOPLESS BAR</strong> (<em>New York Post<em>, 1982)
		</p>
		<p>
		    <strong>‘I AM DEATH WISH VIGILANTE’ (Bernie Goetz turns himself in; <em>Post</em>, 1985)
		</p>
    </body>
</html>

CSS exercise 1

Using the Onion article you formatted earlier, create an external CSS file that does the following. If you don't know or remember the syntax of a property, practice looking it up!

  1. Make the main headline dark green.
  2. Use the font family "Georgia" for the main headline and the subheadline.
  3. Center the text of the main headline and the subheadline.
  4. Make the paragraphs have a line height of 19 pixels.
  5. Remove the underline from the links.
  6. Make the "You might also like" label all uppercase.
  7. Bonus: Make an underline appear when you hover over a link.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment