Features • Demonstration • Tech Stack • Color Reference • Environment Setup • Run Locally • Lessons Learned • Future Work • References • Author • Acknowledgement • Feedback
Natours is an exemplary web project that seamlessly combines advanced technologies, superior coding practices, and captivating design aesthetics to deliver an outstanding user experience. It represents a fictional company specializing in nature tours, hence the name, NaTours.
The project's attention to detail, coupled with its advanced validation mechanisms and seamless responsiveness, ensures a secure and visually stunning journey for every user.
- Implementation of the 7-1 Sass Architecture.
- Utilization of the BEM model for class naming conventions.
- Construction based on Fluid Float Layouts.
- Integration of Responsive units for optimal adaptability.
- Incorporation of techniques such as Resolution switching, Art Direction, and Density Switching to ensure image responsiveness.
- Comprehensive User Registration and Login system with User Account Authentication through email and mobile number verification using Firebase.
- Adherence to the principles of color theory in its design, creating visually harmonious and engaging experiences.
- Implementation of modern cutting-edge CSS techniques such as clip-path, background-clip, mask-image, background-blend-mode, shape-outside, filter, backdrop-filter, object-fit, transform, column-count, hyphens, perspective, calc(), and custom CSS properties.
- Provision for browsers that do not support specific styles, ensuring a consistent experience across different platforms.
- Advanced CSS animations with @keyframes, animation, and transition, bringing dynamic and engaging elements to the website.
- Built on the NPM ecosystem, leveraging the power of a vast collection of open-source packages and libraries.
- Codebase designed to be reusable, maintainable, and scalable, allowing for easy expansion and updates.
- Meticulously crafted using a Desktop-first approach, ensuring full responsiveness across various devices such as mobile phones, tablets (both in portrait and landscape orientations), and larger screens.
| Color | Hex |
|---|---|
| Primary Color | |
| Primary Color Light | |
| Primary Color Dark | |
| Secondary Color Light | |
| Secondary Color Dark | |
| Tertiary Color Light | |
| Tertiary Color Dark |
Clone the project
git clone https://github.com/sugamphirke016/NatoursGo to the project directory
cd NatoursInstall dependencies
npm install live-server -gStart the server
npm run devserver-
How CSS works behind the scenes: the cascade, render tree, specificity, inheritance, value processing, the visual formatting model, the box model, box types, positioning schemes, stacking contexts, and CSSOM.
-
Advanced responsive design workflows: mobile-first vs desktop-first strategies, selecting breakpoints, em vs rem units and feature queries to test for browser support.
-
Videos in HTML and CSS: building a background video effect.
-
Responsive images in HTML and CSS for faster pageloads: resolution switching, density switching & art direction.
-
7-1 Sass Architecture, component-based design and BEM model.
- User profile page
- User should be able to search or filter out the tours
- User should be able to book a tour
- Payment checkout with real-time payment system
- Admin portal
- Improve overall UX/UI and fix bugs
- And more!
Sass Guidelines
Sass 7-1 Architecture
BEM Model
Statcounter
Can I Use
Sizzy
Firebase Docs
PHPMailer
Linea Icons
Google fonts
Font Awesome
Coverr
Unsplash
MDN Docs
Polypane
The Home page design of this project is a course-work for the course Advanced CSS and Sass by Jonas Schmedtmann on udemy.
If you have any feedback, queries or suggestions, please reach out to me at projects@sugamphirke.com
