https://github.com/rileymanda/bootstrap-website
Collaboration exercise to replicate an html-css website and rebuild it using bootstrap
https://github.com/rileymanda/bootstrap-website
Last synced: 5 months ago
JSON representation
Collaboration exercise to replicate an html-css website and rebuild it using bootstrap
- Host: GitHub
- URL: https://github.com/rileymanda/bootstrap-website
- Owner: RileyManda
- Created: 2023-05-16T07:31:52.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-06-22T14:31:40.000Z (about 3 years ago)
- Last Synced: 2025-01-20T19:24:18.010Z (over 1 year ago)
- Language: HTML
- Homepage:
- Size: 1.3 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📗 Table of Contents
- [📖 About the Project](#about-project)
- [🛠 Built With](#built-with)
- [Tech Stack](#tech-stack)
- [💻 Getting Started](#getting-started)
- [Setup](#setup)
- [Prerequisites](#prerequisites)
- [👥 Authors](#authors)
- [🤝 Contributing](#contributing)
- [⭐️ Show your support](#support)
-- [🙏 Acknowledgements](#acknowledgements)
- [❓ FAQ](#faq)
- [📝 License](#license)
**[Portfolio-website-replica]** Pair programming bootstrap project designed to equip us with Bootstrap skills by rebuilding an existing HTML CSS website with bootstrap.
Javascript runtime environment
Version control
Github Pages
Boostrap
- **[BootsrapWebsite]**
- **[WorksSection]**
- **[AboutSection]**
- **[ContactSection]**
- [Live Demo Link](https://)
Creating your first "Boostrap-website" project
To get a local copy up and running, follow these steps.
### Prerequisites
In order to run this project you need:
-A Git hub account
-Node JS
-Visual Studio Code or any other code editor of your preference
-web browser
### Setup
Clone this repository to your desired folder:
```sh
cd my-folder
git clone gh repo clone RileyManda/bootstrap-website
```
Advantages of Linters:
1: improves readability-it will be easy to read and make adjustment if required easily.
2:removes silly errors before execution and code review.
3:Makes code look like written by a single person.
4:Spreads awareness and ownership over code quality
5:Having more secure and performant code.
## Install Linters
You can find linters for most of the programming languages, e.g. Rubocop for Ruby or ESLint for JavaScript.
Also, there are many ways you can integrate a linter in your workflow:
-text editor plugin
-GitHub Actions
-GitHub apps
## Set up Linters
**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/
## Web Hint
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
```
1. Run
```
npm install --save-dev hint@7.x
```
_how to use npm: (https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)._
2. Copy [.hintrc](.hintrc) to the root directory of your project.
3. **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](../README.md#contributing) and let your code reviewer know about it.
4. Run
```
npx hint .
```
5. Fix validation errors.
### [Stylelint](https://stylelint.io/)
A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
1. Run
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.
2. Copy .stylelintrc.json to the root directory of your project.
3. **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.
5. Fix linter errors.
6. **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!
👤 **Riley Manda**
- GitHub: [@RileyManda](https://github.com/RileyManda)
👤 **Sadaf Daneshgar**
- GitHub: [@sadaf-Daneshgar](https://github.com/sadaf-Daneshgar)
- [ ] **[Works Section]**
Works section: This section will consist of a card gallery featuring work project.
- [ ] **[About me Section]**
This feature will contain more details about me and the tech stack i am familiar with.
- [ ] **[Contact Section]**
This feature will comprise of a contact information.
- [ ] **[Boostrap]**
The site will be boostraped using Bootsrap.
Contributions, issues, and feature requests are welcome!
Feel free to check the [issues page](../../issues/).
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!
We are grateful to microverse for giving me this opportunity to grow into my full potential through continuous learning and practical challenges.
- **[Question_1]**
Do I have to use the vs code specifically?
- [Answer_1]
You can use any code editor of your chose.
- **[Question_2]**
Where can I download node JS for installation?
- [Answer_2]
Node Js can be downloaded here- https://nodejs.org/en/download/
This project is [MIT](https://choosealicense.com/licenses/mit/) licensed.