HTML & CSS3 & JavaScript Course
If you are not familiar with linters, read root level README.
Set-up GitHub Actions
Please do the following steps in this order:
- In the first commit of your feature branch create a
.github/workflowsfolder and add a copy of.github/workflows/linters.ymlto that folder.- Remember to use the file linked above
- Remember that
.githubfolder starts with a dot.
- 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.
- If you think that change is necessary - open a Pull Request in this repository and let your code reviewer know about it.
- When you open your first pull request you should see the result of the GitHub actions checks:
Click on the Details link of each action to see the full output and the errors that need to be fixed:
Set-up linters in your local env
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 file and add node_modules to it:
# .gitignore
node_modules/
Lighthouse
An open-source, automated tool for improving the quality of web pages. It has audits for performance, accessibility, progressive web apps, SEO and more.
You can get the Lighthouse report by any of the following ways:
To 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:
Webhint
A 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.
NOTE: If you are running on Windows, you need to initialize npm to create package.json file.
npm init -y
- Run
not sure how to use npm? Read this.
npm install --save-dev [email protected] - Copy .hintrc to the root directory of your project.
- 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.
- If you think that change is necessary - open a Pull Request in this repository and let your code reviewer know about it.
- Run
npx hint . - Fix validation errors.
Stylelint
A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
-
Run
npm install --save-dev [email protected] [email protected] [email protected] [email protected]not sure how to use npm? Read this.
-
Copy .stylelintrc.json to the root directory of your project.
-
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.
- If you think that change is necessary - open a Pull Request in this repository and let your code reviewer know about it.
-
Run
npx stylelint "**/*.{css,scss}"on the root of your directory of your project. -
Fix linter errors.
-
IMPORTANT NOTE: feel free to research auto-correct options for Stylelint 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!
ESLint
-
Run
npm install --save-dev [email protected] [email protected] [email protected] [email protected]not sure how to use npm? Read this.
-
Copy .eslintrc.json to the root directory of your project.
-
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.
- If you think that change is necessary - open a Pull Request in this repository and let your code reviewer know about it.
-
Run
npx eslint .on the root of your directory of your project. -
Fix linter errors.
-
IMPORTANT NOTE: feel free to research auto-correct options for Stylelint 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!
Initialize Form Validation
Basic Check✔
Project Requirements check ✔
Image Check ✔
Image lacks description
The image on line 111 of index.html file lacks a description.
I think it would be better if the author included a description for the
<img>tag located on line 111 of the index.html file.Set up Data storage feature
Basic Check✔
Project requirements check✔
When the user changes the content of any input field, the data is saved to the local storage. - Done. When the user loads the page if there is any data in the local storage the input fields are pre-filled with this data. - Done.
Set Up Dynamic feature to Portfolio Project
Basic Check✔
Project Requirements check ✔
Peer to Peer code Review
` document.addEventListener('click', (event) => { const targetId = event.target.id; //you get the id of the element that was pressed console.log(targetId); //print the element to see what it was
and then you can check ok my id is equals to the button of a project and use that to get the thata
const regex = /(?<=buttonProject)\d+$/; // regex to match the las number at the end, all my projects buttons has a number at the end
if (regex.test(targetId)) { // if the button presed was the button of any project we get the number and use that number to populate the modal event.preventDefault(); const match = targetId.match(regex)[0]; modalProject.style.display = 'flex'; populateModal(match, arrProjects); } }, false); `
Set up Mobile Menu features
Basic Check
Task checks
Accessibility changes to HTML structure and CSS file.
Basic check
Report check
Line changes links
Update README.md file
Add animations and transitions to Mobile and Desktop Version
Set up portfolio Desktop version
Set up Professional Portfolio last features.