Problem Set 01

In this problem set, you'll practice creating a basic web page using HTML and CSS. Along the way, you'll practice with necessary development tools: working on the command line, using git and GitHub to manage, submit, and publish work, and running Jest to check your exercises.

Future problem sets will be structured more around specific web coding skills; this one has more explicit steps to practice with the command line and git work.

Step 1. Install Software

To complete this problem set, follow these steps. If you get stuck (particularly with installation issues), ask your professor or TA for help!

First, make sure you've completed the "Getting Started" steps on the course Canvas page. In particular, you'll need to have installed Visual Studio Code, Node/npm, git, and signed up for a free GitHub account.

Make sure you have the Node.js version 21+ installed!

Step 2. Cloning the Repo

Each of your assignments in this course will be completed in a private code repository provided by the GitHub Classroom service. You can create the repo for this problem set by visiting the following link:

https://classroom.github.com/a/KOwyU95L Links to an external site.

You will need to accept this assignment to create your code repo. This repo will have the name info340-wi25a/problem-01-yourusername, and you can view it online at https://github.com/info340-wi25a/problem-01-yourusername (replacing yourusername with your GitHub user name).

After you've accepted the assignment, clone the repo to your local machine so you can edit the files.

We will have a lot of repos in this course, and it's a good idea to put them all under a single subdirectory (e.g., info340-code) so you can find them. Change directories before you clone the repo, and make sure that you do not clone one repo into another!

There are a number of files already in the repo. Each problem is in an individual folder; this exercise has just one problem, which you can find in the problem-a folder.

Step 3. Making the Web Page

The next step is practice creating a basic web page! Your task is to create a simple web page that describes a fictional character that you admire. This can be any character from a movie, television series, book, comic, song, or story. The page will include the character's name, a short description of the character, a picture, some reasons you admire that character, and a link to another web page that provides more information about the character or the story. Choose your character and then continue with the rest of the steps.

3.1 The HTML

We have provided you the index.html file for you to use, but you will need to fill in its contents using VS Code (or your preferred text editor). You can start with the web page template Links to an external site., but be sure to include the following elements:

1. A title Links to an external site. for the page that is the name of your character—the browser will show this title in the browser tab, and search engine indexers will treat this as the title of the page.

2. Metadata that gives your name as its author Links to an external site..

3. A top-level heading Links to an external site. with the character's name.

4. A paragraph Links to an external site. with a short description of the character. This only needs to be a couple sentences.

   • Within that description, include the name of what movie/series/book/comic/song/story the character is from, and make that name be a hyperlink Links to an external site. to another existing web page that tells me more about the work (a Wikipedia or IMDB page is fine). Bonus: also use the proper element for the title of a work Links to an external site..

5. An image Links to an external site. of the character.

   You'll need to find an picture of your character on the Internet and download that image to the problem directory (so inside the problem-a folder). Save it in a new folder called img/ (if you want you can create this folder from the command line using the mkdir command!). Do not "hotlink" the image! That's rude. That means that the src attribute will need to use the relative path to the file... and it's inside the img folder!

   Long file names and spaces in file names are generally a bad idea when building web sites, as they make resources harder to refer to. If the file you just downloaded contains spaces in the file name, you should replace those spaces with hyphens (-) or just remove them. You should also make the file name all lower-case letters to reduce chances for errors, and shorten the name if it is excessively long. Lastly, pay attention to the file extension as well as the file name (e.g., .jpg or .png). When referring to image files in your web pages, you must specify the entire file name, including its extension.

   If the picture file is really big (larger than a megabyte), you might want to use a graphics tool to reduce it in size. If you are on a Mac, you can use the built-in Preview application Links to an external site.) to do that. On Windows, you can use the built-in Photo Gallery application Links to an external site.. Your target height is 400 pixels, so there's no need for the image to be any larger than that.

   Additionally:

   • Do not include a width or height attribute—use CSS to specify the image's appearance size instead.

   • Do include a description of the image in the alt attribute. This will be used by assistive technologies such as screen readers for the blind, as well as search indexers.

6. A list Links to an external site. of at least 3 reasons you admire this character. Your reasons can be as detailed and as serious or silly as you like. Your list can either be ordered or unordered (you could theoretically use a descriptive list Links to an external site., but it isn't supported by the grader).

As you're writing your HTML, be sure to check the content in the browser. Open up the index.html file in your browser (double-click on it in Finder/File Explorer) and see if the content looks correct (does the image show up? Are the words correct? Is your list a list)?

Once you've written the HTML, you will need to add and commit your changes to git. "Add HTML content" is a good commit message to use when you're done. It is okay to have multiple commits if you want to practice saving your work along the way—for example, a commit when you add the paragraph, a commit when you add the image, etc. But you will need to have an distinct commit indicating when the HTML has been finished. Remember to push your commits to GitHub!

• Remember that you can and should commit changes to multiple files at once! You're committing changes to the repo, not individual files. So you changes to the HTML and image (and CSS) can all be in the same commit.

• Be careful about using informative commit messages. It's okay if there are typos or mistakes (you're learning), but if there is lots of poor git hygiene we will ask you to redo the exercise. One good tip: avoid using the same message multiple times in a row!

DO NOT EDIT FILES DIRECTLY ON GITHUB! Edit your files locally and then push your changes! This is best practice (and will help you get more comfortable with git).

3.2 The CSS

You should also add some CSS to make the page look a little nicer. We have provided a css/style.css file for you to use, but you will need to fill in the rules. Again, edit the file in Visual Studio Code, and check your work in the browser to see if it looks okay!

1. You will need to link Links to an external site. the CSS file into the HTML. Be sure to use a relative path for the file!

2. The content of the page's body should have a font size Links to an external site. of 16px (making that a "default" for the page).

3. Similarly, the page's body should have a font Links to an external site. of 'Helvetica Neue', followed by Helvetica, Arial, and finally sans-serif if the others aren't available.

4. Paragraphs should have a line height Links to an external site. of 1.5x the font size. Note that this should be a unitless value (which is the normal way of specifying it).

5. Constrain the height Links to an external site. of the page images to be no more than 400 pixels. If your image is already smaller than that, you won't notice any difference in appearance, but this will ensure that the image is no more than 400 pixels tall, regardless of the actual size of the image file.

6. One item in your list (your choice) should be given a color Links to an external site. other than the default black to make it stand out. Use a class selector to apply this rule; this means you will need to modify the HTML to give one list element a class attribute. Be sure to use a semantic name for your class!

Once you've finished the CSS, you will need to add and commit your changes to git. "Add CSS styling" is a good commit message to use. Again it is okay to have multiple commits if you want to practice saving your work along the way. But you will need to have an distinct commit indicating when the CSS has been finished. Remember to push your commits to GitHub!

Step 4. Grading Your Work with Jest

The problem sets in this class will support a Test-Driven Development (TDD) Links to an external site. approach: you will be provided with a program that automatically grades (tests) your code for correctness, with your task being to fill in the code that makes the grading tests pass. Grading tests for each problem are defined in the problem.spec.js file found in each problem folder. These tests are written in JavaScript using the Jest framework. But you should be able to sort of make sense of the code if you look at it.

You will also need to install the Jest Links to an external site. test runner in order to check that your code meets specifications. You should install this program globally, since you will use it on multiple problem sets:

npm install -g jest

You can confirm that Jest has correctly been installed with

jest --version

You should see v29.7.0 or higher (if it is a lower version, use npm update -g jest to update).

Install Dependencies

In order to grade your work and run the included unit tests for this problem set, you will need to install a number of dependencies listed in the included package.json file. These are libraries/packages that the grading scripts needs in order to do its work.

From the root directory of the repo (outside of the problem-a folder), quickly install the dependencies using the command npm install. This will install the required files in the node_modules directory of this particular project. It may take a minute. Note that you may see some Warnings about peer dependencies; you can ignore those. But if you see any Errors, check in with us about how to fix them!

Running Jest

You can grade your work using the Jest test runner via the jest command, specifying as an argument that you want to run the grader tests for problem-a:

jest problem-a

It's likely that Jest indicates that there is a problem with your code when you first run it, and that's okay! Look carefully at what assertion Jest says its failing (you'll need to scroll down past the summary listing), and reason about why that might be occurring and what you should do to fix it.

Remember that if you get a "Cannot find module" error, that means that you haven't installed the dependencies yet!

When running the Jest grader for your HTML, you may get "HTML Validation" errors. The error codes specifying exactly what is wrong can be hard to understand at times. You can look up what those codes mean in the htmllint documentation Links to an external site.; search for the specific code to see a description of what it means.

Once you've fixed the problem, confirm that your page still looks correct in the browser (always double-check in the browser!), and then re-run Jest. You can run Jest as many times as you want (nothing is tracking how many times you do so), fixing errors as you find them.

After you've fixed your page so that all tests passed, remember to add and commit your changes to git. Be sure to use an informative commit message about changes you've made! Note that if your code passed the Jest tests the first time, then you won't need any additional commits.

Remember to push that commit to GitHub (to the main branch). We'll be grading your exercises by checking the main branch to see if the most recent commit on that branch passes the tests. Problem sets will be considered "complete" if all grader tests pass. To facilitate grading of these problem set, we have set up a continuous integration Links to an external site. system using Github Actions to automatically run Jest on GitHub when you push your work. If all the grader tests pass, a small green checkmark should appear next to your passing commit in the commit history on GitHub (e.g., at https://github.com/info340-wi25a/problem-01-yourusername/commits):

If you see a red x instead, that means that some of the grader tests did not pass. You may get an email from GitHub, but you can also click on the red x and then "Details" to see the the output of the Jest attempt. You can also access the grader results through the "Actions" tab.

A yellow circle means the grader is running, so check back in a few minutes.

A green check means that you'll get full credit for the problem set; anything else we'll try and check your work manually to give partial credit.

Make sure you're looking at the main branch. You're interested in getting a green check for the Jest Tests workflow, not for the GitHub Pages build!

IMPORTANT Github is checking the entire repository, not a particular commit. The green checkmark will only appear when you've completed all of the exercises in a problem set.

IMPORTANT: For all exercises in this course, work on and complete the problems while debugging your code in the browser (open up the index.html file and check that the output is what you want). Only once you've finished the entire exercise should you run the Jest grader. Do not use the Jest grader for debugging. Do debugging in the browser. Use the Jest grader only to confirm that your work is finished.

Step 5. Publish to GitHub Pages

Once everything is working and you are finished with your webpage—it looks great in the browser and passes all the tests—you can publish your page for the world to see using GitHub Pages. See the course text Links to an external site. for more details.

Create a new branch in your repo called gh-pages (using git checkout -b gh-pages). This branch will represent the "published" version of your page. You can then push this new gh-pages branch to GitHub (using git push origin gh-pages).

Be sure to switch back to the main branch (git checkout main) after you pushed to gh-pages! The process should always be (1) checkout gh-pages, (2) push, (3) checkout main.

After the push is complete, you should be able to see your page at the following URL, replacing yourusername with your GitHub user name:

https://info340-wi25a.github.io/problem-01-yourusername/problem-a/index.html

(remember to include the index.html in the URL so that GitHub Pages scans it)!

Note that you will not need to publish future problem sets to GitHub Pages; you're doing it in Problem Set 01 for practice (in preparation for project work).

Step 6. Submit Your Solution

In order to submit assignments in this class, you will need to:

1. push your completed work to your GitHub repository (we will be grading the code on the main branch).

2. For this problem set and for projects, you will need to publish your page by pushing your work to the gh-pages branch (what you did in Step 4).

   • Yes, that means you need to push to both the main branch and to the gh-pages branch.

3. Submit both (1) a link to the code repo and (2) a link to your published web site to Canvas using the button at the top of the page.

Before you submit this problem set, double-check the following:

• Confirm that all the grader tests pass.
• Confirm that you've committed all the required files.
• Confirm that you committed the final version of your work, and pushed your code to the correct branch of your GitHub repository.
• Confirm that you published your work via GitHub Pages (via a separate gh-pages branch).