Project Name

Microverse-ToDo-list

Built With

CSS, HTML
Frameworks-none
Technologies use- Git, npm

About

"To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. I will build a simple website that allows for doing that, and I will do it using ES6 and Webpack!

To get a local copy up and running follow these simple example steps.

Getting Started

WebPack

First let's create a directory, initialize npm, install webpack locally, and install the webpack-cli

npm init -y
npm install webpack webpack-cli --save-dev

Loading CSS

npm install --save-dev style-loader css-loader

Loading Data

npm install --save-dev csv-loader xml-loader

HtmlWebpackPlugin

npm install --save-dev html-webpack-plugin

Using webpack-dev-server

npm install --save-dev webpack-dev-server
npm install --save-dev express webpack-dev-middleware

Set-up GitHub Actions

create a .github/workflows folder and add a copy of .github/workflows/linters.yml (https://github.com/microverseinc/linters-config/blob/master/html-css/.github/workflows/linters.yml) to that folder.

Setup & Install

Set-up linters in your local env

Webhint

you need to initialize npm to create package.json file. npm init -y
Run npm install --save-dev [email protected]
Copy .hintrc (https://github.com/microverseinc/linters-config/blob/master/html-css/.hintrc) to the root directory of your project.

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]
Copy .stylelintrc.json (https://github.com/microverseinc/linters-config/blob/master/html-css/.stylelintrc.json) to the root directory of your project.

ESLint

Run npm install --save-dev [email protected] [email protected] [email protected] [email protected]
Copy .eslintrc.json(https://github.com/microverseinc/linters-config/blob/master/html-css-js/.eslintrc.json) to the root directory of your project.

Run tests

Run npx hint . to Fix Web validation errors.
Run npx eslint . --fix on the root of your directory of your project to Fix linter errors.
Run npx stylelint "**/*.{css,scss}" . --fix on the root of your directory of your project to Fix linter errors.