Welcome to the Advanced CSS Practice repository! This repository is designed to help students apply their knowledge of advanced CSS concepts such as creating variables, nesting, and using imports to modularize CSS files.

The purpose of this repository is to provide students with a hands-on learning experience where they can practice applying advanced CSS techniques including CSS variables, nesting, and imports in a practical project scenario. By working on this project, students will reinforce their understanding of CSS styling principles and gain confidence in using advanced CSS features.

To get started with this project, follow these steps:

1. Clone the repository: Clone this repository to your local machine using the following command:

git clone [email protected]:turingschool-examples/advanced-css-ecommerce-dashboard.git

2. Navigate to the project directory: Move into the cloned repository directory:

cd advanced-css-ecommerce-dashboard

3. Open the project in your code editor: Use your preferred code editor to open the project files and start working on the exercises.

The project contains the following files and directories:

• index.html: HTML file containing the dashboard layout for an e-commerce website.
• styles.css: CSS file containing the initial styles for the dashboard.
• README.md: Markdown file providing setup instructions and project context.

Once you have set up the project, you can start practicing advanced CSS techniques by completing the following iterations:

Enhance the styling of the product items on the dashboard by utilizing CSS variables. Define variables for colors, font sizes, and other common styles to maintain consistency and facilitate easier customization.

Refactor the CSS code to leverage nesting for better organization and readability. Use nesting to target nested elements within the HTML structure and apply styles more efficiently.

Break down the CSS code into modular files based on different components or sections of the dashboard. Use @import to import these modular CSS files into the main stylesheet, keeping the codebase organized and manageable.

A solution branch named solution is available for reference. You can check out this branch to compare your implementation:

git checkout solution