HTML, CSS and JavaScript To Do List Project
[To_Do_List] is a simple a simple web page that displays a list of To Do tasks inserted by a user. It is built using webpack and served by a webpack dev server.
</details>
Creating your first “To DO List” project
To get a local copy up and running, follow these steps.
In order to run this project you need:
-A Git hub account -Git bash -Node JS -Webpack -Visual Studio Code as your code editor
Clone this repository to your desired folder:
cd my-folder
git clone[(https://github.com/joyapisi/To-Do-List.git)]
Since this code is using webpack, run npm start in your terminal to run it instead of using the live server.
webpackis a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static assets to serve your content from.
A linter is a tool to help you improve your code. You can learn more about Linters here: (source: (https://www.testim.io/blog/what-is-a-linter-heres-a-definition-and-quick-start-guide/)).
Linters for various programming languages are available for use, e.g. Rubocop for Ruby or ESLint for JavaScript.
There are many ways you can integrate a linter in your workflow:
-text editor plugin -GitHub Actions -GitHub apps
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:
node_modules/
Run
npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x
This is 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 using Windows, make sure you initialize npm to create package.json file.
npm init -y
npm install --save-dev hint@7.x
how to use npm: (https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).
npx hint .
Copy contents of .eslintrc.json to the root directory of your project
A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
npm install –save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x 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. 4. 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!
👤 Joy Phoebe
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
If you like this project, kindly leave a comment below and share it with someone who enjoys coding! Coding is all about continuous learning and allowing yourself to be a beginner. Keep going!
I’m thankful to Microverse for providing a study platform which guided me through this project.
[Question_1] An easier and quicker way to understand webpack?
[Question_2] Where can I download node JS for installation?
</ul>
This project is MIT licensed.