Homework 1: Development Environment & HTML Practice

In this exercise, you'll set up the development environment needed to program websites in this course. You'll also practice using these tools.

Learning Objectives

• Set up a web development environment using GitHub Codespaces.
• Practice structuring content with HTML.
• Validate HTML.
• Escape special/reserved characters in HTML.
• Reference the documentation when using unfamiliar HTML elements like lists.
• Submit assignments via Git.

Help & Support Resources

We want you to get the help and support you need. Use the course's support resources for help with this assignment.

Instructions

Follow the instructions below to complete this assignment.

Part I: Course Web Browsers

Install the web browsers you'll need to use for assignments in this course.

Google Chrome, Microsoft Edge, Safari, and Mozilla Firefox are the most popular web browsers used by millions of people worldwide today. While most people today use Chrome, it is important that we test our websites on different browsers to ensure compatibility with all the browsers in use today.

Because Chrome, Edge, and Safari use similar rendering engines, you will test all your websites this semester in both Chrome and Firefox. Both Chrome and Firefox use distinctly different rendering engines and evaluating websites in both browsers is reasonably sufficient to test your websites for most users.

Install Firefox

Firefox is an open-source web browser that is created by the not-for-profit Mozilla foundation. Mozilla takes privacy and the security of your data extremely seriously.

Download and install Firefox.

Install Chrome/Chromium

Chrome is a proprietary web browser created by Alphabet Inc. Google profits off the information it learns about you when using its browser. It shares this information with third parties, including governments, without notice nor transparency.

You may install Google Chrome or the open source version, Chromium. Chromium is privacy preserving, like Firefox.

Download and install Chrome.

Part II: GitHub Copilot Pro Account

You'll need an active GitHub account to complete your assignments in this course. If you already have an account, you may use it; skip this part if you already have a github.com (not github.coecis.cornell.edu) account.

1. Visit https://github.com and create an account if you don't already have one. We suggest using your Cornell email address. But you can use email address that you prefer.

   Tip: Choose a professional username you will be happy with until the end of time.

   danger

   You will use this GitHub account for the entire semester. Do not change your username during the semester. If you change your username, you will be locked out of your assignment repositories.

2. Upgrade your account to a GitHub Copilot Pro account.

   GitHub Education provides free access to GitHub Copilot Pro for students so long as you verify your student status.

   Otherwise, GitHub Copilot Pro is a paid service. You will need to pay for it if you are not a verified student.

   tip

   Some students report that taking a photo with your camera, rather than using a screenshot helps with the verification process.

   Your GitHub Education benefits may not be approved right away. You can continue working on the remaining parts of the assignment while you wait for approval. Alternatively, you can purchase a GitHub Copilot Pro subscription.

Part III: Grant Access to the Course GitHub Organization

We'll need to create your assignment repositories for you. In order to do that, you'll need to grant this course permission to create repositories for you. (This is the only permission you are granting us; we cannot access your private repositories or any other information in your GitHub account.)

Join the GitHub organization for this course:

1. Visit https://landrace.infosci.cornell.edu/courses/info1300-2026fa in your web browser.

2. Authorize landrace.infosci.cornell.edu to access your GitHub account in order to join the cornell-info1300-2026fa GitHub organization.

   Login with the GitHub.com account that you want to use for all assignments this semester.

   Once you authorize the access, you may not change or switch your GitHub account for this course. You will need to use this account for the entire semester.

   danger

   Do not change your username during the semester. If you change your username, you will be locked out of your assignment repositories.

3. Accept the invitation to join the cornell-info1300-2026fa GitHub organization.

   Once you've authorized landrace.infosci.cornell.edu to access your GitHub account, you will be invited to join the organization.

   You will receive an email from GitHub inviting you to join the cornell-info1300-2026fa organization. Click the link to accept this invitation.

   tip

   Check your spam folder for the organization invitation.

Part IV: Homework Repository

Each student will submit their homeworks to a private repository created specifically for them.

danger

To submit your homework for credit, follow these instructions; you must submit your homework to the repository created through landrace.infosci.cornell.edu to receive credit.

Do not create your own repository on github.com. We will be unable to grade a manually created repository.

Do not rename the repository we create for you. If you rename the repository, we will be unable to grade it.

1. Create your homework repository.

   Visit https://landrace.infosci.cornell.edu/courses/info1300-2026fa/repos/hw1 in your browser to create your homework repository.

2. Open your homework repository in GitHub.

   After creating your repository, visit https://landrace.infosci.cornell.edu/courses/info1300-2026fa/repos/hw1 in your browser and follow the link to open the repository on github.com

Part V: GitHub Codespaces

You will edit your code in GitHub Codespaces this semester. Codespaces is a cloud-based development environment that is hosted by GitHub. This means you can access your development environment from any computer with an internet connection and a web browser.

tip

You may work on your assignments this semester from any computer, including lab computers or library loaner laptops. You only need a web browser and an internet connection to access your development environment.

1. Open the repository in a codespace.

   First, click the "Code" button, then open the "Codespaces" tab, lastly click the "Create codespace on main" button.

   

2. If prompted to trust this workspace, trust it.

   

3. The Codespace can take a while to initialize. Wait until the status bar at the bottom of window stops updating before you do anything else.

Part VI: Structure the Content in HTML

Credit: 5 points. Completion credit for reasonably structured HTML. No partial credit.

In this part you'll finish the in-class activity from the previous class and submit it for your homework credit.

1. As a reminder, in the previous class we practiced identifying an audience and structuring content using HTML.

   Review:

   The Ithaca Zoo has contracted with your web design firm. They would like you to design a new website for them.

   Assume you have identified "Area Tourists" (Goals: visit the zoo, often for the first time; etc.) as a primary audience for the new Ithaca Zoo website.

2. Create a new HTML file called index.html in the root of your repository.

   The root of the repository is the top-most folder in the repository. (The root of your repository is the folder that contains the content file.)

   Note

   The file must be named exactly index.html. The file name must be all lowercase. (Index.html, INDEX.HTML, etc. are invalid file names for a website's homepage.)

3. Added HTML boilerplate to the index.html file.

   I suggest using GitHub Copilot to help you generate the boilerplate code. But you can also copy this boilerplate code too:

   <!DOCTYPE html>
   <html lang="en">
   
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">
   
       <title>TODO: tab title</title>
   </head>
   
   <body>
       TODO: content
   </body>
   
   </html>

   tip

   If you're not sure how to use GitHub Copilot, in Codespaces, use the Chat side panel in Codespaces or ask a course assistant for help.

4. Copy the content from content.txt into the <body> element of your index.html file.

   All content must be inside the <body> element.

   For example:

   <body>
       Welcome to the Ithaca Zoo
   
       We are excited to have you visit us!
   </body>

5. Structure the content in index.html.

   Using HTML elements, structure the content inside the <body> element.

   Review the reference documentation to select the HTML elements that best describe the content's structure.

   Caution

   Do not add any style; just add structure! HTML is about the structure and semantic meaning of content; HTML is not about style. You should avoid style focused elements like <b>, <i>, <u>. Only use <br> for semantic meaning (e.g. line breaks in an address or poem). Never use <br> for adding space to the design of your web page. That's what CSS is for!

Part VII: HTML Validation

Credit: 5 points. Completion credit for valid HTML. No partial credit.

Your HTML must be correct. Valid HTML improves both the usability and accessibility of a web page. Every HTML file you submit must be validated for full credit.

1. Open the file you wish to validate in your Codespace.

2. Click "W3C validation" in the bottom status bar.

   

   Note

   If you do not see the validator in the bottom status bar, please refresh your codespace. Sometimes your codespaces fails to initialize correctly if your internet connection was interrupted while it was loading.

3. Open Codespace's Problems tab: From the View menu, select Problems.

   Alternatively, you can open the Problems tab clicking the problems icon in the bottom status bar:

   

4. If your code is valid, you will see 0 errors in the Problems tab.

5. If there are errors listed in the Problems tab, fix the invalid HTML code and revalidate.

   Try and fix the errors yourself. (This is a learning objective of this course.) Try and explain to yourself what you think the error is saying and then review reference documentation to help you fix it.

   tip

   If you used genAI for the boilerplate, check your boilerplate against the sample provided to check for differences. (DOCTYPE must be all uppercase, for example.)

   If you're stuck, please work with a peer to fix it. After that, if you're both still stuck, ask a course assistant for help, and they will ask you a few questions to try and help you fix the error yourself. Please remember that TAs cannot tell you what's wrong with your code or fix it for you.

Part VIII: Development Web Server

Once you've got your HTML structured and validated, it's time to view it in a web browser. We'll use a development web server to test our web pages this semester.

1. Start the web server by clicking "Go Live" in the bottom right-hand corner.

   

2. Once the web server has started, you'll be able to view your website in a web browser by clicking "Open in Browser."

   

3. View your HTML file in a browser by starting the web server.

   Important!

   Ignore all styling in the browser!

   Reminder: Your web page is currently styled using your browser's default styling. Ignore it! It means nothing for this assignment. Concern yourself only with the structure of the content, not how it looks in the browser.

Part IX: HTML Escape Characters

Credit: 5 points. Completion credit for valid escaped characters. No partial credit.

Try adding the following text to your index.html (don't forget to structure it!):

Jeff, like all giraffes, sleeps very little (< 30 minutes a night) in make sure he is alert & ready to avoid predators. No wonder he eats so much every day (> 50 pounds of leaves)!

The page might look okay in your preview, but when you try to validate the page, validation fails. And depending on the browser you use, you might also get a very weird looking page.

Read Chapter 8: Extra Markup: "Escape Characters" (p193-194) from "HTML & CSS: Design and Build Websites" to understand why this is happening, and what you can do to fix it. (To access the online version of the book, tap the "Connect to full text" link in the "Availability" pane on the right-hand side of the site.)

Now, use your knowledge of HTML escape characters to change your HTML code so that the website properly displays the paragraph above without any validation errors. Ask your peers for help if you get stuck or come to office hours!

Part X: Using Reference Documentation

Credit: 5 points. Completion credit for reasonably structured lists. No partial credit.

Professional web developers can't remember all the HTML elements, rather they frequently use reference documentation! To be a successful web developer, you need to learn how to use the reference documentation!

1. Read Chapter 3: Lists from "HTML & CSS: Design and Build Websites".

2. Visit the Mozilla's Element Documentation and review the documentation for each list type from the reading. (<ul>, <ol>, <dl>)

3. Add a section to your page for "Sections of the Zoo", and create a list with the following zoo sections:

   Indoor Ocean, Tangled Swamp, Hidden Jungle, Alpine Mountains, Central Savanna, Arid Desert

   Properly structure your content! It's up to you to decide what kind of list (ordered, un-ordered, data) makes the most sense (review the reference documentation if necessary).

   tip

   If the content doesn't have a natural order (e.g. 1, 2, 3 or a, b, c), then using an ordered list is probably inappropriate.

4. Add a section to your page for "Featured Animals", and create a list with the following animal names and descriptions:

   Cryptopsaras Couesii:
   Commonly called the Triplewart Seadevil, this angler fish that uses a glowing lure on its head to attract prey.

   Ailurus Fulgens:
   Commonly called the Red Panda, this fluffy creature is actually more closely related to raccoons than giant pandas.

   Giraffa Camelopardalis Reticulata:
   Although there are many kinds of giraffes in the wild, this is the kind most commonly found in zoos around the world.

Submission

You will submit your coding assignments using Git and a submission form.

warning

Important! You must stage, commit, and push your submission via Git and then complete the submission form to receive credit. The graders cannot grade what they cannot see; the graders cannot see any code in your codespace. When you stage, commit, and push, the graders will be able to see your code in their own codespace to grade your work. When you complete the submission form you notify the graders that your work is ready to be graded.

Failure to submit via Git and complete the submission form will result in 0 credit for the assignment. No leniency is provided, you must do both for credit.

1. First, open Source Control in your codespace. Next, you need to stage your changes. To stage your changes you need to tell Git which files you want to keep a version of.

   Open Code's Source Control pane from the Activity Bar. Then click the + button to stage each file you want to submit.

   

2. Next you'll need to commit your changes. Write a message about what you are committing and then click the ✓ button to commit your changes. Now your changes are stored as a version in your local git repository.

   tip

   In a version control tool sometimes you need to go back and find a previous revision. Writing accurate commit messages can later help you find that revision.

   

3. Sync your commits to the Git server (GitHub). Once you commit, Codespaces will give you the option to Sync. Click the Sync Changes button.

   After committing your changes, keep in mind that the commit is currently only on your computer. You'll need to send these changes back to GitHub so that you can share them with the course staff. This process is known as "syncing changes".

   

   note

   If you have trouble syncing, do not ask ChatGPT for help. It does not understand our course infrastructure and has misled students from previous semesters in destroying their repositories. If you use ChatGPT, please think about what it is asking you to do. No extensions are provided due to being misled by ChatGPT.

4. Complete the submission form to submit the assignment.

   warning

   All files must be in the location specified in this document for credit. No leniency is provided for files not in the correct location. Please check your work.

   info

   The submission form asks you to check your submission. Checking your work will ensure you receive credit for this assignment. We ask you to check your submission because this is where some students lose points. It's easy to forget something and checking your work prevents the heartache of getting a 0 because your submission wasn't submitted in a way that we can access and grade it.

   danger

   Important! You are required to complete the submission form to submit your assignment. No submission form = no submission = 0 credit.

Contributors

The following individuals made contributions to this assignment:

• Kyle Harms
• Benjamin Soltoff
• Grant Storey
• Sharon Jeong
• Ada Luo