You can view the project live here: Natours
A company specialized in organizing and offering adventure tours for people who love nature. The site has modern animations, fluid design and optimal performance.
-
Sass Mastery: Learn the ins and outs of Sass, including variables, nesting, mixins, extends, and functions.
-
CSS Architecture: Implement the 7-1 CSS architecture for better organization and maintainability.
-
BEM Methodology: Embrace the Block Element Modifier methodology for clear and scalable class naming, fostering maintainable and modular code.
-
Responsive Design: Understand the principles of responsive design and build custom grids for various sections.
-
Media Queries: Desktop-first approaches, writing effective media queries with Sass mixins.
-
Responsive Images: Handling responsive images in HTML and CSS.
-
Final Considerations: Wrap up the Natours project with insights and best practices.
sass/
|-- abstracts/
| |-- _functions.scss
| |-- _mixins.scss
| |-- _variables.scss
|
|-- base/
| |-- _animations.scss
| |-- _base.scss
| |-- _typography.scss
| |-- _utilities.scss
|
|-- components/
| |-- _bg-video.scss
| |-- _button.scss
| |-- _card.scss
| |-- _composition.scss
| |-- _featured-box.scss
| |-- _form.scss
| |-- _popup.scss
| |-- _story.scss
|
|-- layout/
| |-- _footer.scss
| |-- _grid.scss
| |-- _header.scss
| |-- _navigation.scss
|
|-- pages/
| |-- _home.scss
|
|-- main.scss
To install dependencies, run these commands
npm i
To run tests, run these commands
npm run start
For additional questions, contact me at the email provided below.
- GitHub Dusan Madjar
- Email [email protected]