edsoncamargo/alura-hzc-lp

🏬 HZC Store - Elevate your web design and development skills. Crafted with the power of display: flex and display: grid, HZC showcases modern and responsive layouts. Dive into this fictitious store project, born from Alura's course teachings, and elevate your expertise. Join us in shaping the future of web design 🌟

HZC (exploring flex and grid with Alura)

HZC is the project, developed as part of the Alura course focused on improving skills in display: flex and display: grid. HZC is a fictitious store design aimed at demonstrating the practical application of these concepts in responsive and modern layouts.

Credits

This project was developed based on the knowledge acquired through courses and educational materials provided by alura. Rockseat offers a wide range of high-quality courses and content for developers in various areas, including design, programming, and app development.

We would like to thank the Rockseat team for providing valuable educational resources that contributed to the development of this project.

For more information about the courses and materials offered by Alura, please visit the official website at alura.

🎨 Figma do projeto

Objective

The objective of this project is to practice and enhance the use of flexbox and grid layout to create flexible and dynamic user interfaces. Throughout the course, we explore advanced techniques for organizing elements on the page, adapting them for different devices and screen sizes.

Features

• Responsive layout using flexbox and grid layout
• Modern and intuitive design
• Demonstration of best practices in organizing HTML, CSS code, and possible integrations with JavaScript for interactive functionalities.

Technology

The following are the key technologies and tools used in the development of this app:

• HTML/SCSS: Used for structuring and styling the page.
• Grid: Set the elements as a grid container.
• Flexbox: Set the elements as a flexbox container.
• Icomoon: A platform where you can create icon packs, and use icons as fonts.

How to View HZC

To view this HZC locally, follow these steps:

1. Clone the repository:

    git clone https://github.com/edsoncamargo/alura-hzc-lp.git
    cd your-path/alura-hzc-lp

2. Install Node.js: Sass is built with Node.js, so you need to install it first. You can download and install Node.js from the official website: Node.js.

3. Install Sass globally via npm:

    npm install -g sass

4. Compile scss in project root:

    sass --watch ./assets/styles/scss/main.scss:./assets/styles/css/styles.css

5. Install the Live Server extension in VS Code, and GO LIVE!

Contribution

You are welcome to contribute to the development of this project. If you find bugs, wish to add new features, or improve usability, feel free to open an issue or submit a pull request.

Contact

• Name: Edson Camargo Menezes
• Email: contact@edsoncamargo.dev

Acknowledgments

Special thanks to everyone who contributed to making this app a reality, especially Alura for their invaluable support and guidance throughout the development process. Your expertise and dedication have been instrumental in bringing this project to fruition.

Enjoy using HZC!