Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/gardimy/gardimy-project

This project was a requirement of module one, where we learned HTML, CSS and JavaScript, also the importance of git workflows following best practices of committing early and often. The use of linters to ensure code quality follows the HTML and CSS best practices.
https://github.com/gardimy/gardimy-project

bootstrap5 css eslint html javascript lighthouse stylelint webhint

Last synced: 29 days ago
JSON representation

This project was a requirement of module one, where we learned HTML, CSS and JavaScript, also the importance of git workflows following best practices of committing early and often. The use of linters to ensure code quality follows the HTML and CSS best practices.

Awesome Lists containing this project

README

        

# Capstone project
A Microverse exercise to use animation on a website

Capstone project

# πŸ“— Table of Contents

- [πŸ“– About the Project](#about-project)
- [πŸ›  Built With](#built-with)
- [Tech Stack](#tech-stack)
- [Key Features](#key-features)
- [πŸš€ Live Demo](#live-demo)
- [πŸ’» Getting Started](#getting-started)
- [Setup](#setup)
- [Prerequisites](#prerequisites)
- [Install](#install)
- [Usage](#usage)
- [πŸ‘₯ Authors](#authors)
- [πŸ”­ Future Features](#future-features)
- [🀝 Contributing](#contributing)
- [⭐️ Show your support](#support)
- [πŸ™ Acknowledgements](#acknowledgements)
- [πŸ“ License](#license)

# πŸ“–Capstone Project
Capstone project This project was a requirement of module one, where we learned HTML, CSS and JavaScript, also the importance of git workflows following best practices of committing early and often. The use of linters to ensure code quality follows the HTML and CSS best practices. It is based on specific settings and requirements to ensure proper structure and best practices. By cloning this repo and running npm install we will have a basic Capstone project with properly configured linters, eslint and the correct initial file structure.

## πŸ›  Built With

### Tech Stack

> This project focuses only on `linters` and `.gitignore`. and JS or Server are included in this repo.

Client

Server

### Key Features

- **Linters**: [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/), [Webhint](https://webhint.io/), and [Stylelint](https://stylelint.io/.)
- **A `.github/workflows/linters.yml`** file to run linters on GitHub Pull Request.
- **A** `.gitignore` file including `node_modules/`.
-**Eslint**npm install --save-dev [email protected] [email protected] [email protected] [email protected]
[ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.eslintrc.json
- name: ESLint Report

## πŸš€ Live Demo

- [Live Demo Link](https://gardimy.github.io/Gardimy-project/)

## πŸš€ Video

- [Video Presentation Link](https://www.loom.com/share/5aeaad2512b94418b4ba02715231964c)

(back to top)

## πŸ’» Getting Started

>If you are a new developer and would like to have a basic project to start practicing your code or creating your first portfolio app-features using good practice JavaScript ,HTML and CSS : Cloning this project will give you what you need!

> To get a local copy up and running, follow these steps:
### Prerequisites

In order to run this project you need:

- Have [npm](https://www.npmjs.com/package/npm) installed in your project:
`curl -qL https://www.npmjs.com/install.sh | sh`

### Setup

Clone this repository to your desired folder:

`git clone https://github.com/Gardimy/Mobile-first`

or

`git clone https://github.com/Gardimy/Mobile-first` <-- _Only if you have [SSH keys configured](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/adding-a-new-ssh-key-to-your-github-account) on your GitHub account_.

### Install:

run the `npm install` command in your console.

### Usage

To run the linters before committing any changes to your code, execute the following commands:

`npx hint .`
`npx stylelint "**/*.scss"` <--_NOTE: this repo is set up to use with SCSS. If you would like to use CSS, you must replace `"**/*.scss"` with `"**/*.{css,scss}"` in **line 48** of the `.stylelintrc.json` file, and run the linter with:_

`npx stylelint "**/*.{css,scss}"` _instead_.

(back to top)

## πŸ‘₯ Authors

> πŸ‘€ **Gardimy Charles**
- GitHub: [@Gardimy](https://github.com/Gardimy)
- Twitter: [@gardyelontiga45](https://twitter.com/gardyelontiga45)
- LinkedIn: [Gardimy charles](https://www.linkedin.com/in/gardimy-charles)

## πŸ”­ Future Features

- [ESLint](https://eslint.org/).

## 🀝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the [issues page](https://github.com/Gardimy/Gardimy-project/issues/2).

## ⭐️ Show your support

> If you like this project please give me a star on GitHub.And Don't hesitate to follow me on github, you will have the opportunity to get all updating available for this project.

## πŸ™ Acknowledgments

> I would like to thank [Cindy Shin](https://www.behance.net/adagio07) for Preparing this guideline which help me build my Website.

## πŸ“ License

This project is [MIT license](https://choosealicense.com/licenses/mit/) licensed.

_NOTE: we recommend using the [MIT license](https://choosealicense.com/licenses/mit/) - you can set it up quickly by [using templates available on GitHub](https://docs.github.com/en/communities/setting-up-your-project-for-healthy-contributions/adding-a-license-to-a-repository). You can also use [any other license](https://choosealicense.com/licenses/) if you wish._

(back to top)