Module 1

Module 1 introduces the fundamentals of HTML and CSS. You will first make a static document using HTML and CSS, and then you will make a portal to a DuckDuckGo search. This module is worth 50 points.

Reading

The following articles on the online class wiki textbook contain information that will help you complete the assignment.

• Git
• HTML and CSS
• HTML Forms

Assignments

Write a Birthday Card

Write a birthday card to a friend or family member using HTML and CSS. Use HTML to define the content of the card (like the headings and the paragraphs), and use CSS to define the appearance. Some ideas:

• Make the background-color of the page baby blue and use purple ink to write a card to a little boy
• Make the text big and include pictures of hearts
• Use a font with text shadows (more advanced)

Use this opportunity to experiment with the plethora of CSS properties. Remember that you're in a computer science class (not an art class), so we don't care if your card looks ugly. The main thing is that you learn HTML and CSS and use them appropriately.

How to Edit Your File

Starting in Module 2, we will be using Komodo Edit as our primary development tool. However, for the purposes of this exercise, we want you to edit your HTML file using a more basic text editor. If you already have a text editor that works for you, like Sublime Text, Atom, Vim, or Emacs, feel free to use it for the entirety of this course. The same is true if you're already a fan of an IDE - you don't have to use any of the suggestions below.

• On Windows, consider Notepad++. This is already installed for you in the CEC labs. If you prefer to use your personal computer, you can download it from here.
• On Mac OS X, consider TextWrangler. You can download it from here or from the Mac App Store.
• Most Linux distributions come with gedit pre-installed, which you can use for this lab.

Please save your file as birthday.html from the plain text editor of your choice.

Important Note: Writing your web page in a word processor like Microsoft Word or even WordPad or TextEdit will not work. You need a plain text editor.

How to View Your HTML Document

Once you have birthday.html, you can open it using your favorite web browser (like Firefox). For the purposes of this exercise, it suffices to right-click the file and tell it to "open with" Firefox. When the file opens, it should be under the file:/// protocol.

In Module 2, we will install a web server that serves up pages on the http:// and https:// protocols.

Validation

Your birthday card must pass the W3C Validators for both HTML and CSS with no errors. You can upload your HTML to the HTML validator and your CSS to the CSS validator.

For more information on validation, see the HTML and CSS guide: HTML and CSS#Validation

Make a Portal to a DuckDuckGo Search

Write an HTML document containing a form that searches DuckDuckGo's web site. You should be able to type in a search term and have your form load the DuckDuckGo search page.

1. Visit www.duckduckgo.com. Search for something easy to spot in the URL, like "QUERY".
2. Look at the URL of the search page. What is the script URL? What is the query variable?
3. Make an HTML document containing a text field and a submit button. Typing a search query into the text field and pressing the submit button should load the DuckDuckGo search page.

Grading

We will be grading the following aspects of your work. There are 50 points total.

Assignments (including code) must be committed to Bitbucket by the end of class on the due date. Commit early and often. Failing to commit by the end of class on the due date will result in a 0.

1. Birthday Card (30 Points):
   • Correct usage of HTML and CSS in your birthday card (10 points).

     Make sure that you use HTML for "content" and CSS for "appearance." Don't write inline styles: use a separate stylesheet and link your HTML file to it.

   • Experimenting with at least 5 different CSS properties in your birthday card (10 points).
   • Birthday card passes the W3C validation for HTML 5 and CSS. (10 points).
2. Search Portal (10 Points):
   • DuckDuckGo search portal is functional (10 points).
3. Account Creation and Version Control (10 Points):
   • Bitbucket account created (2 Points)
   • Module 1 repo created using the link provided on Piazza (2 Points)
   • Account created on Amazon Web Services and an image file containing a screenshot of your account page pushed to Bitbucket. (4 Points)
   • Files pushed to repo on Bitbucket using Git (2 Points)