This is a web project that uses Bootstrap, jQuery, and SCSS to create a responsive and interactive website.
Make sure you have the following tools installed:
- Node.js (preferably the LTS version)
- npm (included with Node.js)
- Git (to clone the repository)
- Live Server (to start a live server for debugging)
- Editor Config (to have the correct style of code)
git clone <repository-url>
cd <project-folder>Make sure you are in the project folder and run:
npm installThis command will install all the dependencies listed in the package.json file, including Bootstrap, jQuery, and the necessary packages for SCSS.
The project structure should look like this:
CardMarket/
├── src/
│ ├── css/ # Generated CSS files
│ ├── js/ # JavaScript files
│ ├── scss/ # SCSS source files
│ └── index.html # Main HTML file
├── package.json # Project configuration and scripts
├── package-lock.json # Dependency lock file
└── README.md # Project documentation
The scripts defined in the package.json file allow you to perform various development and build operations.
To compile scss run:
npm run scssCreate a new html file in the scr/html folder. Possibly name the file with the name of the page.
Then create a js file in the src/js folder. This file will handle the logic of the page.
The file must follow this structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title of page</title>
<link rel="stylesheet" href="../css/index.css" />
</head>
<body>
<!-- content -->
</body>
<script src="../../node_modules/jquery/dist/jquery.min.js"></script>
<!-- This is for jquery -->
<script src="path/to/js/of/the/page"></script>
</html>To give the style to the page create a scss file in src/scss and the name of the file must be: _{nameOfThePage}.scss.
Then put this line in src/scss/main.scss file:
@import "nameOfThePage";If you want to contribute to the project:
- Fork the repository.
- Create a branch for your changes:
git checkout -b feature/feature-name. - Commit your changes:
git commit -m "Description of changes". - Push the branch:
git push origin feature/feature-name. - Open a pull request.
If you encounter any issues, open an issue in the repository.