{"id":19184652,"url":"https://github.com/gatoreducator/html-assignment-starter-302-03","last_synced_at":"2026-06-23T05:31:33.603Z","repository":{"id":88342994,"uuid":"213431107","full_name":"GatorEducator/html-assignment-starter-302-03","owner":"GatorEducator","description":":bulb: HTML Starter Assignment","archived":false,"fork":false,"pushed_at":"2019-10-23T22:48:37.000Z","size":1371,"stargazers_count":0,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-23T02:41:32.434Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GatorEducator.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-10-07T16:20:48.000Z","updated_at":"2019-11-11T01:37:22.000Z","dependencies_parsed_at":null,"dependency_job_id":"077d2ed0-724a-44cb-ae00-d53882db1d2b","html_url":"https://github.com/GatorEducator/html-assignment-starter-302-03","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/GatorEducator/html-assignment-starter-302-03","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GatorEducator%2Fhtml-assignment-starter-302-03","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GatorEducator%2Fhtml-assignment-starter-302-03/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GatorEducator%2Fhtml-assignment-starter-302-03/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GatorEducator%2Fhtml-assignment-starter-302-03/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GatorEducator","download_url":"https://codeload.github.com/GatorEducator/html-assignment-starter-302-03/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GatorEducator%2Fhtml-assignment-starter-302-03/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34677382,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-23T02:00:07.161Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T11:07:45.374Z","updated_at":"2026-06-23T05:31:33.596Z","avatar_url":"https://github.com/GatorEducator.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!---\n\nGatorGrader example that contains a solution to a HTML programming project:\nhttps://github.com/GatorEducator/html-assignment-solution-302-03\n\nThis is the companion \"starter\" repository (i.e., the repository given to students):\nhttps://github.com/GatorEducator/html-assignment-starter-302-03\n\nLearn more about GatorGrader and its supported checks by visiting this web site:\nhttps://github.com/GatorEducator/gatorgrader\n\nProblems? Raise an issue in the issue tracker for this assignment!\n\n--\u003e\n\n![Image of Logo](.github/gatorgrader-example-html.png)\n\n\u003cp align=\"center\"\u003e\n\u003cb\u003e\nAutomated assessment for an assignment on HTML programming and technical writing in Markdown\n\u003c/b\u003e\n\u003c/p\u003e\n\n# html-assignment-starter-302-03\n\n## Table of Contents\n\n* [Table of Contents](#table-of-contents)\n* [Introduction](#introduction)\n* [Continuous Learning](#continuous-learning)\n* [System Commands](#system-commands)\n  + [Using Docker](#using-docker)\n  + [Using Gradle](#using-gradle)\n* [Expected Program Output](#expected-program-output)\n* [Automated Checks with GatorGrader](#automated-checks-with-gatorgrader)\n* [Downloading Project Updates](#downloading-project-updates)\n* [Using Travis CI](#using-travis-ci)\n* [System Requirements](#system-requirements)\n* [Reporting Problems](#reporting-problems)\n* [Receiving Assistance](#receiving-assistance)\n* [Project Assessment](#project-assessment)\n\n## Introduction\n\nDesigned for use with [GitHub Classroom](https://classroom.github.com/) and\n[GatorGrader](https://github.com/GatorEducator/gatorgrader/), this repository\ncontains the starter for a laboratory assignment in an introductory computer\nscience class that uses the HTML and CSS programming language. The Travis CI builds\nfor this repository will pass, as evidenced by a green \u0026#x2714; instead of a red\n\u0026#x2717; appearing in the commit logs. An instructor would use this repository\nto start a repository with purposefully omitted features that a\nstudent would then need to add in order to achieve the stated learning\nobjectives. Please bear in mind that much of the content in this document is\nwritten in its current form under the assumption that it will also accompany the\n\"starter\" repository that an instructor shares with a student through the use of\n[GitHub Classroom](https://classroom.github.com/).\n\nThis assignment requires a programmer to implement a static web site using the\nHTML programming language. Specifically, you will create a travel photography\nweb site that is an extension of the one in Figure 3.9 of the textbook. For this\nlaboratory assignment, you will link to a locally stored image that was\ndownloaded from the Flickr Archive of photographs under a Creative Commons\nlicense. You will also learn how to program in HTML5 using tags. Next, you will\nlearn how to reference local cascading style sheet (CSS) files and include an\nemoji in your web site. Then, you will run a web server to provide local access\nto the static web site, specifically loading the default document. Finally, you\nwill continue to practice using the [HTMLHint](http://htmlhint.com/) static\nanalysis code tool that can check HTML files for potential errors.\n\nThe programmer is also responsible for writing a reflection, stored in the file\n`writing/reflection.md`, that responds to the questions in the assignment sheet\nand explains the challenges that you faced and the solutions you developed.\nPlease note that this is also a Markdown file that must adhere to the standards\ndescribed in the [Markdown Syntax\nGuide](https://guides.github.com/features/mastering-markdown/). Remember, you\ncan preview the contents of a comitted Markdown file by clicking on the name of\nthe file in your GitHub repository. Finally, don't forget that your\n`writing/reflection.md` file and the file mentioned in the previous paragraph\nshould both adhere to the Markdown standards established by the [Markdown\nlinting tool](https://github.com/markdownlint/markdownlint) and the writing\nstandards set by the [Proselint tool](http://proselint.com/).\n\nThe source code in the `index.html` file must also pass additional tests set\nby the [GatorGrader tool](https://github.com/gkapfham/gatorgrader). For\ninstance, GatorGrader will check to ensure that your main file contains the\nrequired header and that, for instance, it contains the correct number of `time`\ntags. GatorGrader will also check that you made the required number of\ncommits to your repository and that your writing contains the specified number\nof paragraphs. More details about the GatorGrader checks are included later in\nthis document and in the assignment sheet.\n\nWhen you use the `git commit` command to transfer your source code to your\nGitHub repository, [Travis CI](https://travis-ci.com/) will initialize a build\nof your assignment, checking to see if it meets all of the requirements. If both\nyour source code and writing meet all of the established requirements, then you\nwill see a green \u0026#x2714; in the listing of commits in GitHub. If your\nsubmission does not meet the requirements, a red \u0026#x2717; will appear instead.\nThe instructor will reduce a programmer's grade for this assignment if the red\n\u0026#x2717; appears on the last commit in GitHub immediately before the\nassignment's due date.\n\nA carefully formatted assignment sheet for this project provides more details\nabout the steps that a computer scientist should take to complete this\nassignment. You can view this assignment sheet by visiting the listing of\nlaboratories on the course web site.\n\n## Continuous Learning\n\nIf you have not done so already, please read all of the relevant [GitHub\nGuides](https://guides.github.com/) that explain how to use many of the features\nthat GitHub provides. In particular, please make sure that you have read the\nfollowing GitHub guides: [Mastering\nMarkdown](https://guides.github.com/features/mastering-markdown/), [Hello\nWorld](https://guides.github.com/activities/hello-world/), and [Documenting Your\nProjects on GitHub](https://guides.github.com/features/wikis/). Each of these\nguides will help you to understand how to use both [GitHub](http://github.com) and\n[GitHub Classroom](https://classroom.github.com/).\n\nStudents who want to learn more about how to use\n[Docker](https://www.docker.com) should review the [Docker\nDocumentation](https://docs.docker.com/). Students are also encouraged to review\nthe documentation for their text editor, which is available for text editors\nlike [Atom](https://atom.io/docs) and [VS\nCode](https://code.visualstudio.com/docs). You should also review the [Git\ndocumentation](https://git-scm.com/doc) to learn more about how to use the Git\ncommand-line client. In addition to talking with the instructor and technical\nleader for your course, students are encouraged to search\n[StackOverflow](https://stackoverflow.com/) for answers to their technical\nquestions.\n\nIf you are a student working to complete this assignment, you should also read\nChapters 1 and 2 in the course textbook, paying particularly close attention to\nSections 1.5 and 2.1. Please see the course instructor or one of the student\ntechnical leaders if you have questions about any of these reading assignments.\n\n## System Commands\n\nThis project invites students to enter system commands into a terminal window.\nThis assignment uses [Docker](https://www.docker.com) to deliver programs, such\nas `gradle` and the source code and packages needed to run\n[GatorGrader](https://github.com/GatorEducator/gatorgrader), to a students'\ncomputer, thereby eliminating the need for a programmer to install them on their\ndevelopment workstation. Individuals who do not want to install Docker can\noptionally install of the programs mentioned in the [Project\nRequirements](#requirements) section of this document.\n\n### Using Docker\n\nOnce you have installed [Docker\nDesktop](https://www.docker.com/products/docker-desktop), you can use the\nfollowing `docker run` command to start `gradle grade` as a containerized\napplication, using the [DockaGator](https://github.com/GatorEducator/dockagator)\nDocker image available on\n[DockerHub](https://cloud.docker.com/u/gatoreducator/repository/docker/gatoreducator/dockagator).\n\n```bash\ndocker run --rm --name dockagator \\\n  -v \"$(pwd)\":/project \\\n  -v \"$HOME/.dockagator\":/root/.local/share \\\n  gatoreducator/dockagator\n```\n\nThe aforementioned command will use `\"$(pwd)\"` (i.e., the current directory) as\nthe project directory and `\"$HOME/.dockagator\"` as the cached GatorGrader\ndirectory. Please note that both of these directories must exist, although only\nthe project directory must contain something. Generally, the project directory\nshould contain the source code and technical writing of this assignment, as\nprovided to a student through GitHub. Additionally, the cache directory should\nnot contain anything other than directories and programs created by DockaGator,\nthus ensuring that they are not otherwise overwritten during the completion of\nthe assignment. To ensure that the previous command will work correctly, you\nshould create the cache directory by running the command `mkdir\n$HOME/.dockagator`. If the above `docker run` command does not work correctly on\nthe Windows operating system, you may need to instead run the following command\nto work around limitations in the terminal window:\n\n```bash\ndocker run --rm --name dockagator \\\n  -v \"$(pwd):/project\" \\\n  -v \"$HOME/.dockagator:/root/.local/share\" \\\n  gatoreducator/dockagator\n```\n\nHere are some additional commands that you may need to run when using Docker:\n\n* `docker info`: display information about how Docker runs on your workstation\n* `docker images`: show the Docker images installed on your workstation\n* `docker container list`: list the active images running on your workstation\n* `docker system prune`: remove many types of \"dangling\" components from your workstation\n* `docker image prune`: remove all \"dangling\" docker images from your workstation\n* `docker container prune`: remove all stopped docker containers from your workstation\n* `docker rmi $(docker images -q) --force`: remove all docker images from your workstation\n\n### Using Gradle\n\nSince the above `docker run` command uses a Docker images that, by default, runs\n`gradle grade` and then exits the Docker container, you may want to instead run\nthe following command so that you enter an \"interactive terminal\" that will\nallow you to repeatedly run commands within the Docker container.\n\n```bash\ndocker run -it --rm --name dockagator \\\n  -v \"$(pwd)\":/project \\\n  -v \"$HOME/.dockagator\":/root/.local/share \\\n  gatoreducator/dockagator /bin/bash\n```\n\nOnce you have typed this command, you can use the [GatorGrader\ntool](https://github.com/GatorEducator/gatorgrader) in the Docker container by\ntyping the command `gradle grade` in your terminal. Running this command will\nproduce a lot of output that you should carefully inspect. If GatorGrader's\noutput shows that there are no mistakes in the assignment, then your source code\nand writing are passing all of the automated baseline checks. However, if the\noutput indicates that there are mistakes, then you will need to understand what\nthey are and then try to fix them.\n\n## Expected Program Output\n\nTo see the expected output of the HTML static website, a screenshot of what it\nshould look like is in the images directory.\n\n## Automated Checks with GatorGrader\n\nIn addition to meeting all of the requirements outlined in the assignment sheet,\nyour submission must pass the following checks that\n[GatorGrader](https://github.com/GatorEducator/gatorgrader) automatically\nassesses:\n\n- The command `htmlhint src/www/index.html` executes correctly\n- The command output has exactly 1 lines complete\n- The command output has exactly 1 of the `no errors found` fragment\n- The file index.html exists in the src/www/ directory\n- The file reflection.md exists in the writing directory\n- The file travels_submission.png exists in the images directory\n- The file writing/reflection.md passes mdl\n- The file writing/reflection.md passes proselint\n- The index.html in src/www/ has at least 5 of the `\u003cblockquote\u003e` fragment\n- The index.html in src/www/ has at least 5 of the `\u003ctime\u003e` fragment\n- The index.html in src/www/ has at least 15 of the `\u003cp\u003e` fragment\n- The index.html in src/www/ has exactly 0 of the `TODO` fragment\n- The index.html in src/www/ has exactly 1 of the `\u003ch1\u003eShare Your Travels\u003c/h1\u003e` fragment\n- The index.html in src/www/ has exactly 1 of the `\u003ch3\u003eReviews\u003c/h3\u003e` fragment\n- The index.html in src/www/ has exactly 1 of the `\u003chead\u003e` fragment\n- The index.html in src/www/ has exactly 1 of the `\u003chtml\u003e` fragment\n- The index.html in src/www/ has exactly 1 of the `emoji.css` fragment\n- The index.html in src/www/ has exactly 1 of the `\u003cbody\u003e` fragment\n- The index.html in src/www/ has exactly 1 of the `\u003ctitle\u003eShare Your Travels\u003c/title\u003e` fragment\n- The index.html in src/www/ has exactly 1 of the `github.css` fragment\n- The repository has at least 15 commit(s)\n- The reflection.md in writing has at least 5 paragraph(s)\n- The reflection.md in writing has at least 100 word(s) in every paragraph\n\nIf [GatorGrader's](https://github.com/GatorEducator/gatorgrader) automated\nchecks pass correctly, the tool will produce the output like the following in\naddition to returning a zero exit code (which you can access by typing the\ncommand `echo $?`).\n\n```\n        ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓\n        ┃ Passed 23/23 (100%) of checks for html-assignment-solution-302-03! ┃\n        ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛\n```\n\n## Downloading Project Updates\n\nIf GatorGrader's maintainers push updates to this sample assignment and you\nreceived it through GitHub Classroom and you would like to also receive these\nupdates, then you can type this command in the main directory for this\nassignment:\n\n```\ngit remote add download git@github.com:GatorEducator/html-assignment-solution-302-03\n```\n\nYou should only need to type this command once; running the command additional\ntimes may yield an error message but will not negatively influence the state of\nyour Git repository. Now, you are ready to download the updates provided by the\nGatorGrader maintainers by typing this command:\n\n```\ngit pull download master\n```\n\nThis second command can be run whenever the maintainers needs to provide you\nwith new source code for this assignment. However, please note that, if you have\nedited the files that we updated, running the previous command may lead to Git\nmerge conflicts. If this happens, you may need to manually resolve them with the\nhelp of the instructor or a student technical leader. Finally, please note that\nthe [Gradle plugin](https://github.com/GatorEducator/gatorgradle) for\n[GatorGrader](https://github.com/GatorEducator/gatorgrader) will automatically\ndownload the newest version of GatorGrader.\n\n## Using Travis CI\n\nThis assignment uses [Travis CI](https://travis-ci.com/) to automatically run\n[GatorGrader](https://github.com/GatorEducator/gatorgrader) and additional\nchecking programs every time you commit to your GitHub repository. The checking\nwill start as soon as you have accepted the assignment \u0026mdash; thus creating your own\nprivate repository \u0026mdash; and the course instructor and/or GitHub enables Travis for\nit. If you are using Travis for the first time, you will need to authorize\nTravis CI to access the private repositories that you created on GitHub. If you\ndo not see either a yellow \u0026#9679; or a green \u0026#x2714; or a red \u0026#x2717; in your\nlisting of commits, then please ask the instructor to see whether or not\nTravis CI was correctly enabled.\n\n## System Requirements\n\nWe developed this assignment to work with the following software and versions:\n\n- Docker Desktop\n- Operating Systems\n  - Linux\n  - MacOS\n  - Windows 10 Pro\n  - Windows 10 Enterprise\n- Programming Language Tools\n  - Gradle 5.4\n  - MDL 0.5.0\n  - OpenJDK 11.0.4\n  - Proselint 0.10.2\n  - Python 3.6 or 3.7\n\n## Reporting Problems\n\nIf you have found a problem with this assignment's provided source code or\ndocumentation, then you can go to the [HTML Assignment Solution\n302-03](https://github.com/GatorEducator/html-assignment-solution-302-03)\nrepository and [raise an\nissue](https://github.com/GatorEducator/html-assignment-solution-302-03/issues).\nIf you have found a problem with the [GatorGrader\ntool](https://github.com/GatorEducator/gatorgrader) and the way that it checks\nyour assignment, then you can also [raise an\nissue](https://github.com/GatorEducator/gatorgrader/issues) in that repository.\nTo ensure that your issue is properly resolved, please provide as many details\nas is possible about the problem that you experienced. If you discover a problem\nwith the assignment sheet for this project, then please raise an issue in the\nGitHub repository that provides the assignment sheets for your course.\n\nWhenever possible, individuals who find, and use the appropriate GitHub issue\ntracker to correctly document, a mistake in any aspect of this assignment will\nreceive free [GitHub stickers](https://octodex.github.com/) and extra credit\ntowards their grade for the project.\n\n## Receiving Assistance\n\nIf you are having trouble completing any part of this project, then please talk\nwith either the course instructor or a student technical leader during the\ncourse session. Alternatively, you may ask questions in the Slack workspace for\nthis course. Finally, you can schedule a meeting during the course instructor's\noffice hours.\n\n## Project Assessment\n\nTaking inspiration from the principles of [specification-based\ngrading](http://rtalbert.org/return-to-specs-grading-calculus/), the grade that\na student receives on this assignment will have the following components:\n\n- **Percentage of Correct GatorGrader Checks**: Students are encouraged to\n  repeatedly try to implement a HTML program that passes all of GatorGrader's\n  checks by, for instance, creating a program that produces the correct output.\n  Students should also repeatedly revise their technical writing to ensure that\n  it also passes all of GatorGrader's checks about, for instance, the length of\n  its content and its appropriate use of Markdown.\n\n- **Travis CI Build Status**: Since additional checks on the source code and/or\n  technical writing may be encoded in Travis CI's actions and, moreover, all of\n  the GatorGrader checks are also run in Travis CI, students will receive a\n  checkmark grade if their last before-the-deadline build passes and a green\n  \u0026#x2714; appears in their GitHub commit log instead of a red \u0026#x2717;. As with\n  the previous grading component, students are encouraged to repeatedly revise\n  their source code and technical writing in an attempt to get their Travis CI\n  build to pass.\n\n- **Mastery of Technical Writing**: Students will also receive a checkmark grade\n  when the responses to the technical writing questions presented in the\n  `writing/reflection.md` reveal a mastery of both writing skills and technical\n  knowledge. To receive a checkmark grade, the submitted writing should have\n  correct spelling, grammar, and punctuation in addition to following the rules\n  of Markdown and providing technically accurate answers. Students are\n  encouraged to ask the course instructor or a student technical leader to use\n  the GitHub issue tracker to provide feedback on their mastery of technical\n  writing skills.\n\n- **Mastery of Technical Knowledge and Skills**: Students will receive also\n  receive a checkmark grade when their GitHub repository reveals that they have\n  mastered all of the technical knowledge and skills developed during the\n  completion of this project. As a part of this grade, the instructor will\n  assess aspects of the project including, but not limited to, the use of\n  effective source code comments and Git commit messages. Students are\n  encouraged to ask the course instructor or a student technical leader to use\n  the GitHub issue tracker to provide feedback on how well their work\n  demonstrates mastery of the assignment's technical knowledge and skills.\n\nAll grades for this project will be reported through a student's GitHub\nrepository using either messages in the GitHub commit log or issues raised in\nthe issue tracker. Students should ask questions about their grade for this\nproject in GitHub so as to facilitate an effective conversation about the\nsubmitted deliverables.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgatoreducator%2Fhtml-assignment-starter-302-03","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgatoreducator%2Fhtml-assignment-starter-302-03","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgatoreducator%2Fhtml-assignment-starter-302-03/lists"}