Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/gatoreducator/html-assignment-starter-302-03

:bulb: HTML Starter Assignment
https://github.com/gatoreducator/html-assignment-starter-302-03

Last synced: about 1 month ago
JSON representation

:bulb: HTML Starter Assignment

Awesome Lists containing this project

README 

          



![Image of Logo](.github/gatorgrader-example-html.png)







Automated assessment for an assignment on HTML programming and technical writing in Markdown






# html-assignment-starter-302-03



## Table of Contents



* [Table of Contents](#table-of-contents)

* [Introduction](#introduction)

* [Continuous Learning](#continuous-learning)

* [System Commands](#system-commands)

  + [Using Docker](#using-docker)

  + [Using Gradle](#using-gradle)

* [Expected Program Output](#expected-program-output)

* [Automated Checks with GatorGrader](#automated-checks-with-gatorgrader)

* [Downloading Project Updates](#downloading-project-updates)

* [Using Travis CI](#using-travis-ci)

* [System Requirements](#system-requirements)

* [Reporting Problems](#reporting-problems)

* [Receiving Assistance](#receiving-assistance)

* [Project Assessment](#project-assessment)



## Introduction



Designed for use with [GitHub Classroom](https://classroom.github.com/) and

[GatorGrader](https://github.com/GatorEducator/gatorgrader/), this repository

contains the starter for a laboratory assignment in an introductory computer

science class that uses the HTML and CSS programming language. The Travis CI builds

for this repository will pass, as evidenced by a green ✔ instead of a red

✗ appearing in the commit logs. An instructor would use this repository

to start a repository with purposefully omitted features that a

student would then need to add in order to achieve the stated learning

objectives. Please bear in mind that much of the content in this document is

written in its current form under the assumption that it will also accompany the

"starter" repository that an instructor shares with a student through the use of

[GitHub Classroom](https://classroom.github.com/).



This assignment requires a programmer to implement a static web site using the

HTML programming language. Specifically, you will create a travel photography

web site that is an extension of the one in Figure 3.9 of the textbook. For this

laboratory assignment, you will link to a locally stored image that was

downloaded from the Flickr Archive of photographs under a Creative Commons

license. You will also learn how to program in HTML5 using tags. Next, you will

learn how to reference local cascading style sheet (CSS) files and include an

emoji in your web site. Then, you will run a web server to provide local access

to the static web site, specifically loading the default document. Finally, you

will continue to practice using the [HTMLHint](http://htmlhint.com/) static

analysis code tool that can check HTML files for potential errors.



The programmer is also responsible for writing a reflection, stored in the file

`writing/reflection.md`, that responds to the questions in the assignment sheet

and explains the challenges that you faced and the solutions you developed.

Please note that this is also a Markdown file that must adhere to the standards

described in the [Markdown Syntax

Guide](https://guides.github.com/features/mastering-markdown/). Remember, you

can preview the contents of a comitted Markdown file by clicking on the name of

the file in your GitHub repository. Finally, don't forget that your

`writing/reflection.md` file and the file mentioned in the previous paragraph

should both adhere to the Markdown standards established by the [Markdown

linting tool](https://github.com/markdownlint/markdownlint) and the writing

standards set by the [Proselint tool](http://proselint.com/).



The source code in the `index.html` file must also pass additional tests set

by the [GatorGrader tool](https://github.com/gkapfham/gatorgrader). For

instance, GatorGrader will check to ensure that your main file contains the

required header and that, for instance, it contains the correct number of `time`

tags. GatorGrader will also check that you made the required number of

commits to your repository and that your writing contains the specified number

of paragraphs. More details about the GatorGrader checks are included later in

this document and in the assignment sheet.



When you use the `git commit` command to transfer your source code to your

GitHub repository, [Travis CI](https://travis-ci.com/) will initialize a build

of your assignment, checking to see if it meets all of the requirements. If both

your source code and writing meet all of the established requirements, then you

will see a green ✔ in the listing of commits in GitHub. If your

submission does not meet the requirements, a red ✗ will appear instead.

The instructor will reduce a programmer's grade for this assignment if the red

✗ appears on the last commit in GitHub immediately before the

assignment's due date.



A carefully formatted assignment sheet for this project provides more details

about the steps that a computer scientist should take to complete this

assignment. You can view this assignment sheet by visiting the listing of

laboratories on the course web site.



## Continuous Learning



If you have not done so already, please read all of the relevant [GitHub

Guides](https://guides.github.com/) that explain how to use many of the features

that GitHub provides. In particular, please make sure that you have read the

following GitHub guides: [Mastering

Markdown](https://guides.github.com/features/mastering-markdown/), [Hello

World](https://guides.github.com/activities/hello-world/), and [Documenting Your

Projects on GitHub](https://guides.github.com/features/wikis/). Each of these

guides will help you to understand how to use both [GitHub](http://github.com) and

[GitHub Classroom](https://classroom.github.com/).



Students who want to learn more about how to use

[Docker](https://www.docker.com) should review the [Docker

Documentation](https://docs.docker.com/). Students are also encouraged to review

the documentation for their text editor, which is available for text editors

like [Atom](https://atom.io/docs) and [VS

Code](https://code.visualstudio.com/docs). You should also review the [Git

documentation](https://git-scm.com/doc) to learn more about how to use the Git

command-line client. In addition to talking with the instructor and technical

leader for your course, students are encouraged to search

[StackOverflow](https://stackoverflow.com/) for answers to their technical

questions.



If you are a student working to complete this assignment, you should also read

Chapters 1 and 2 in the course textbook, paying particularly close attention to

Sections 1.5 and 2.1. Please see the course instructor or one of the student

technical leaders if you have questions about any of these reading assignments.



## System Commands



This project invites students to enter system commands into a terminal window.

This assignment uses [Docker](https://www.docker.com) to deliver programs, such

as `gradle` and the source code and packages needed to run

[GatorGrader](https://github.com/GatorEducator/gatorgrader), to a students'

computer, thereby eliminating the need for a programmer to install them on their

development workstation. Individuals who do not want to install Docker can

optionally install of the programs mentioned in the [Project

Requirements](#requirements) section of this document.



### Using Docker



Once you have installed [Docker

Desktop](https://www.docker.com/products/docker-desktop), you can use the

following `docker run` command to start `gradle grade` as a containerized

application, using the [DockaGator](https://github.com/GatorEducator/dockagator)

Docker image available on

[DockerHub](https://cloud.docker.com/u/gatoreducator/repository/docker/gatoreducator/dockagator).



```bash

docker run --rm --name dockagator \

  -v "$(pwd)":/project \

  -v "$HOME/.dockagator":/root/.local/share \

  gatoreducator/dockagator

```



The aforementioned command will use `"$(pwd)"` (i.e., the current directory) as

the project directory and `"$HOME/.dockagator"` as the cached GatorGrader

directory. Please note that both of these directories must exist, although only

the project directory must contain something. Generally, the project directory

should contain the source code and technical writing of this assignment, as

provided to a student through GitHub. Additionally, the cache directory should

not contain anything other than directories and programs created by DockaGator,

thus ensuring that they are not otherwise overwritten during the completion of

the assignment. To ensure that the previous command will work correctly, you

should create the cache directory by running the command `mkdir

$HOME/.dockagator`. If the above `docker run` command does not work correctly on

the Windows operating system, you may need to instead run the following command

to work around limitations in the terminal window:



```bash

docker run --rm --name dockagator \

  -v "$(pwd):/project" \

  -v "$HOME/.dockagator:/root/.local/share" \

  gatoreducator/dockagator

```



Here are some additional commands that you may need to run when using Docker:



* `docker info`: display information about how Docker runs on your workstation

* `docker images`: show the Docker images installed on your workstation

* `docker container list`: list the active images running on your workstation

* `docker system prune`: remove many types of "dangling" components from your workstation

* `docker image prune`: remove all "dangling" docker images from your workstation

* `docker container prune`: remove all stopped docker containers from your workstation

* `docker rmi $(docker images -q) --force`: remove all docker images from your workstation



### Using Gradle



Since the above `docker run` command uses a Docker images that, by default, runs

`gradle grade` and then exits the Docker container, you may want to instead run

the following command so that you enter an "interactive terminal" that will

allow you to repeatedly run commands within the Docker container.



```bash

docker run -it --rm --name dockagator \

  -v "$(pwd)":/project \

  -v "$HOME/.dockagator":/root/.local/share \

  gatoreducator/dockagator /bin/bash

```



Once you have typed this command, you can use the [GatorGrader

tool](https://github.com/GatorEducator/gatorgrader) in the Docker container by

typing the command `gradle grade` in your terminal. Running this command will

produce a lot of output that you should carefully inspect. If GatorGrader's

output shows that there are no mistakes in the assignment, then your source code

and writing are passing all of the automated baseline checks. However, if the

output indicates that there are mistakes, then you will need to understand what

they are and then try to fix them.



## Expected Program Output



To see the expected output of the HTML static website, a screenshot of what it

should look like is in the images directory.



## Automated Checks with GatorGrader



In addition to meeting all of the requirements outlined in the assignment sheet,

your submission must pass the following checks that

[GatorGrader](https://github.com/GatorEducator/gatorgrader) automatically

assesses:



- The command `htmlhint src/www/index.html` executes correctly

- The command output has exactly 1 lines complete

- The command output has exactly 1 of the `no errors found` fragment

- The file index.html exists in the src/www/ directory

- The file reflection.md exists in the writing directory

- The file travels_submission.png exists in the images directory

- The file writing/reflection.md passes mdl

- The file writing/reflection.md passes proselint

- The index.html in src/www/ has at least 5 of the `
` fragment

- The index.html in src/www/ has at least 5 of the `