Problem Set 01
- Due Jan 10 by 11:59pm
- Points 5
- Submitting a text entry box
- Available until Feb 9 at 11:59pm
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:
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.
Metadata that gives your name as its author Links to an external site..
A top-level heading Links to an external site. with the character's name.
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..
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 calledimg/
(if you want you can create this folder from the command line using themkdir
command!). Do not "hotlink" the image! That's rude. That means that thesrc
attribute will need to use the relative path to the file... and it's inside theimg
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.
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!
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!
The content of the page's
body
should have a font size Links to an external site. of16px
(making that a "default" for the page).Similarly, the page's
body
should have a font Links to an external site. of'Helvetica Neue'
, followed byHelvetica
,Arial
, and finallysans-serif
if the others aren't available.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).
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.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)!
If you want to make any further changes to your site, you must switch back to the main
branch, make the changes there, and then merge them into gh-pages
(which you can then push). This does make quick changes a bit awkward, so be sure to test your work before you publish it!
Using a separate branch for the published version allows you to make additional (possibly breaking) changes to the source code without messing up th page that users can visit. This division will be important when completing the multiple stages of your course project.
NEVER MAKE CHANGES ON THE gh-pages
BRANCH! ALWAYS SWITCH BACK TO main
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:
push
your completed work to your GitHub repository (we will be grading the code on themain
branch).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 thegh-pages
branch.
- Yes, that means you need to push to both the
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).
Rubric
Criteria | Ratings | Pts | |
---|---|---|---|
Git/GitHub Usage
Includes multiple commits, with effective commit messages
threshold:
pts
|
pts
--
|
||
Passes Jest Checks
threshold:
pts
|
pts
--
|
||
Published to Github Pages
threshold:
pts
|
pts
--
|
||
Total Points:
5
out of 5
|