Exercise: Sample HTML Assignment

In this exercise you will learn to operate with assignments of the HTML&CSS curriculum.

If you are not using VSCode you can install and run the "live-server" npm package following the list of commands:

• Use npm i live-server to install the live-server package
• Use npm run live-server or npx live-server --port=5551 to run the live-server. The port number should be 5551 strictly.

The live-server installation video: Video
The live-server NPM package page: Link

Learning objectives

This assignment should prove that a student is able to:

• Fork from the project repository
• Clone the project to your computer
• Install dependencies
• Run tests
• Read and understand test results
• Check the status of the local git repository
• Add changed files to staging
• Commit git repo changes
• Push code updated to the remote repository
• Submit assignments as Github repo URLs

Standard requirements

• Fork the project to your github account
• Clone the project to your computer
• Open the project in VSCode with code <cloned_repo_folder_name>
• Initialize playwright and install project packages
  • Use npm i to install packages
  • Use npm run browser-install to install the browser environment for testing (131mb will be downloaded)
  • (Windows users only) Use npm run deps-install to install playwright additional dependencies (160mb will be downloaded)
• All the tasks of the "Specific requirements" section MUST be solved
• All the tests MUST pass. Fix the errors in case any tests don't pass BEFORE you submit (acceptance criteria)
  • Use npm run test to run all tests in the terminal
  • (Optional) Use npm run test-ui to run all the tests with GUI
  • (Optional) Use npm run show-report to see the latest report in the browser
• VSCode IDE MUST have 0 code problems listed (spelling problems are fine)
• The code MUST be formatted with Prettier
• Push the changes to the Github repo, when finished.
• Submit a txt file with the Github repo url.

Specific requirements

• Create an html file with the name of "index" in the root of the project
• Add HTML Boilerplate to the document
• Set the document title to be "Sample project"
• Set the page heading to be "Sample project"
• Add a paragraph of text (20 words at least). You can use random text for the paragraph content.