CS 1100: Web Development: Client-Side Coding

Instructions

The main goal of this assignment is to give you an opportunity to set up the software tools we will use in the course, and to begin to familiarize yourself with how they work. A second goal is to introduce you to the mechanics of future assignments: downloading code to work with and submitting your work for review.

If you have any questions, or if something doesn't work as expected, please let me know. We are all learning here. Let's figure it out.

Tasks

1. Download and install the software tools we need:
   • VS Code
   • Firefox
   • Chrome
   If you already have one or more of these programs installed on your computer, great! That step is done.
   If you don't have a laptop, you can go to one of the CHAS labs and use a computer there to complete the assignment. If possible, though, I hope you'll install these tools on your own computer so that have them available to work on the course any time that is good for you.
2. Download this zip file. You may need to control-click on the link and choose "Download Linked File".
   Unzip the file to create the hw01 folder. It contains a small HTML file and a small CSS file, similar to the ones we saw in Session 1.
3. Open the hw01-solution.html file in VS Code. Explore some of the features that we saw in Session 2, such as:
   • Place your cursor over a tag ('hover') such as h1 or blockquote. Read the description in the pop-up box. Click on the link to open the documentation.
   • If you are game, put your cursor on a blank line and start type a new p tag to see the editor close the tag for you. Type a few words.
     If you do change the file, you will need to reload the web page in your browser to see the effect.
4. Open the style.css file in VS Code to see how the editor presents the style sheet.
   If you are comfortable, try changing the color 'blue' to something different, like 'green' or 'magenta'. Don't worry... you won't break anything! We can always change the text back to the original with the 'Undo' command on the Edit menu.
   If you do change the style sheet, you will need to reload the web page in your browser to see the effect.
5. After exploring a bit, return to the tab for the HTML file. Replace the capitalized text in three spots: the name paragraph, the quote, and the final paragraph. Your answer in the third spot can be almost anything! I'd love to learn more about you, or to answer any questions you may have at this point in the course. But please don't feel any pressure; there are no right answers (or questions) here.
6. Reload the web page in your browser to review the changes. Feel free to fix anything you don't like.
7. Save the new version of the HTML file. This is the file you will submit for the assignment.
   If you changed the CSS file, save it, too. You can submit it along with your HTML file.

Submission

Please submit these files:

• required: the HTML file you edited. Please be sure it is named hw01-solution.html.
• optional: the CSS file, if you edited it. Please be sure it is named style.css.

Submit using your file(s) using the course submission system.

1. Log in to the submission system using your CatID username and password. The page will open in a new tab.
2. Select CS 1100 from the course menu.
3. Select hw01 from the assignment menu.
4. Follow the instructions to upload the required HTML file and, if you wish, the optional CSS file.
5. Review the Uploading the following files page to be sure that your files were uploaded.

Note: You may submit as many times as you like up to the deadline. Each time you submit a file, it replaces the file you submitted before.