Skip to content

Collaboration exercise to replicate an html-css website and rebuild it using bootstrap

Notifications You must be signed in to change notification settings

RileyManda/bootstrap-website

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

46 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

📗 Table of Contents

📖 [Portfolio-website]

[Portfolio-website-replica] Pair programming bootstrap project designed to equip us with Bootstrap skills by rebuilding an existing HTML CSS website with bootstrap.

🛠 Built With

Tech Stack

Javascript runtime environment Version control Github Pages Boostrap

Key Features

  • [BootsrapWebsite]
  • [WorksSection]
  • [AboutSection]
  • [ContactSection]

(back to top)

🚀 Live Demo

(back to top)

💻 Getting Started

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:

  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 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.
  4. Run
    npx hint .
    
  5. Fix validation errors.

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.

  1. Copy .stylelintrc.json to the root directory of your project.

  2. 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.

  1. Fix linter errors.

  2. 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!

(back to top)

👥 Authors

👤 Riley Manda

🤝 Contributing

🔭 Future Features

  • [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.

(back to top)

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

⭐️ Show your support

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!

🙏 Acknowledgments

We are grateful to microverse for giving me this opportunity to grow into my full potential through continuous learning and practical challenges.

❓ FAQ

  • [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?

📝 License

This project is MIT licensed.

(back to top)

About

Collaboration exercise to replicate an html-css website and rebuild it using bootstrap

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published