{"id":20168536,"url":"https://github.com/sainingo/linters-tutorials","last_synced_at":"2026-02-27T15:44:10.418Z","repository":{"id":44554230,"uuid":"456862315","full_name":"sainingo/linters-tutorials","owner":"sainingo","description":null,"archived":false,"fork":false,"pushed_at":"2022-02-08T09:43:15.000Z","size":5520,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-05T05:46:48.922Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","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/sainingo.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}},"created_at":"2022-02-08T09:20:01.000Z","updated_at":"2022-03-23T17:29:46.000Z","dependencies_parsed_at":"2022-07-20T20:19:06.931Z","dependency_job_id":null,"html_url":"https://github.com/sainingo/linters-tutorials","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sainingo/linters-tutorials","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sainingo%2Flinters-tutorials","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sainingo%2Flinters-tutorials/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sainingo%2Flinters-tutorials/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sainingo%2Flinters-tutorials/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sainingo","download_url":"https://codeload.github.com/sainingo/linters-tutorials/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sainingo%2Flinters-tutorials/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29902669,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-27T14:46:13.553Z","status":"ssl_error","status_checked_at":"2026-02-27T14:46:10.522Z","response_time":57,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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-14T01:08:20.809Z","updated_at":"2026-02-27T15:44:10.402Z","avatar_url":"https://github.com/sainingo.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# HTML \u0026 CSS3 Course\n\nIf you are not familiar with linters, read [root level README](../README.md).\n\n## Set-up GitHub Actions\n\nPlease do the following **steps in this order**:\n\n1. In the first commit of your feature branch create a `.github/workflows` folder and add a copy of [`.github/workflows/linters.yml`](.github/workflows/linters.yml) to that folder.\n   - **Remember** to use the file linked above\n   - **Remember** that `.github` folder starts with a dot.\n2. **Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.**\n   - If you think that change is necessary - open a [Pull Request in this repository](../README.md#contributing) and let your code reviewer know about it.\n3. When you open your first pull request you should see the result of the GitHub actions checks:\n\n![gh actions checks](../assets/images/gh-actions-html-css-checks.png)\n\nClick on the `Details` link of each action to see the full output and the errors that need to be fixed:\n\n![gh actions failing checks](../assets/images/gh-actions-html-css-failing-checks.png)\n\n## Set-up linters in your local env\n\n**Note**: The `npm` package manager is going to create a `node_modules` directory to install all of your dependencies. You shouldn't commit that directory. To avoid that, you can create a [`.gitignore`](https://git-scm.com/docs/gitignore) file and add `node_modules` to it:\n\n```\n# .gitignore\nnode_modules/\n```\n\n### [Lighthouse](https://developers.google.com/web/tools/lighthouse)\n\nAn open-source, automated tool for improving the quality of web pages. It has audits for performance, accessibility, progressive web apps, SEO and more.\n\nYou can get the Lighthouse report by any of the following ways:\n\n- [In Chrome DevTools](https://developers.google.com/web/tools/lighthouse#devtools)\n- [From the command line](https://developers.google.com/web/tools/lighthouse#cli)\n- [As a Node module](https://developers.google.com/web/tools/lighthouse#programmatic)\n- [From a web UI](https://developers.google.com/web/tools/lighthouse#psi)\n\nTo access the report generated by Lighthouse on your pull request, click the `Details` link for the `Linters/Lighthouse` check and you will see the full output of the action:\n\n![lighthouse report](../assets/images/lighthouse-report.png)\n\n### [Webhint](https://webhint.io/)\n\nA customizable linting tool that helps you improve your site's accessibility, speed, cross-browser compatibility, and more by checking your code for best practices and common errors.\n\n**NOTE:** If you are running on Windows, you need to initialize npm to create `package.json` file. \n   ```\n   npm init -y\n   ```\n\n1. Run\n   ```\n   npm install --save-dev hint@6.x\n   ```\n   *not sure how to use npm? Read [this](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).*\n2. Copy [.hintrc](.hintrc) to the root directory of your project.\n3. **Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.**\n   - If you think that change is necessary - open a [Pull Request in this repository](../README.md#contributing) and let your code reviewer know about it.\n4. Run\n   ```\n   npx hint .\n   ```\n5. Fix validation errors.\n\n### [Stylelint](https://stylelint.io/)\n\nA mighty, modern linter that helps you avoid errors and enforce conventions in your styles.\n\n1. Run\n\n   ```\n   npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x\n   ```\n\n   *not sure how to use npm? Read [this](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).*\n\n2. Copy [.stylelintrc.json](./.stylelintrc.json) to the root directory of your project.\n3. **Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.**\n   - If you think that change is necessary - open a [Pull Request in this repository](../README.md#contributing) and let your code reviewer know about it.\n4. Run `npx stylelint \"**/*.{css,scss}\"` on the root of your directory of your project.\n5. Fix linter errors.\n6. **IMPORTANT NOTE**: feel free to research [auto-correct options for Stylelint](https://stylelint.io/user-guide/cli#autofixing-errors) if you get a flood of errors but keep in mind that correcting style errors manually will help you to make a habit of writing a clean code!\n\n## Have you already completed the Sass lessons?\n\nIf you completed the Sass lessons you may prefer to work with SCSS files, if that's the case you need to perform\na few modifications to the linter configuration files.\n\n1. In the file `.github/workflows/linters.yml` [line 48](https://github.com/microverseinc/linters-config/blob/master/html-css/.github/workflows/linters.yml#L48) replace `\"**/*.{css,scss}\"` with `\"**/*.scss\"`\n2. Use `npx stylelint \"**/*.scss\"` to lint you SCSS files and not the generated CSS\n\nOnce you've done the previous steps you can focus on your SCSS files and not in fixing the generated CSS output\nevery time.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsainingo%2Flinters-tutorials","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsainingo%2Flinters-tutorials","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsainingo%2Flinters-tutorials/lists"}