๐ Table of Contents
- ๐ค Introduction
- โ๏ธ Tech Stack
- ๐ Features
- ๐คธ Quick Start
- ๐ Links
Develop a sushi website showcasing popular food, trending sushi, and drinks using HTML and CSS with smooth subtle animations.
- HTML 5
- CSS 3
- Vite
๐ CSS Variables: Utilize CSS variables to maintain a consistent and easily adjustable styling approach throughout the project
๐ Importing CSS Files: Import CSS files into others, promoting modularity and organization in styling.
๐ Flex and Position Properties: Use of flex and position properties in CSS to create responsive and well-structured layouts.
๐ Rendering HTML through JavaScript: Rendering HTML through JavaScript using reusable functions, enhancing code efficiency.
๐ Smooth Animations: Smooth and subtle animations to enhance the overall user experience, focusing on fluid transitions.
๐ BEM Method: Follow the Block Element Modifier (BEM) methodology for naming classes, promoting a clear and maintainable structure.
๐ Organized File and Folder Structure: Maintain a well-organized file and folder structure for easy navigation and management of project assets.
๐ Responsive Design: The application is completely responsive across all devices, employing responsive design techniques such as media queries and fluid layouts.
all these while creating the sushi website with,
- Navigation Bar
- Creative Hero Section
- About Us Section
- Popular Food, Trending Sushi, and Drinks Sections
- Newsletter Signup and Footer
Follow these steps to set up the project locally on your machine.
Prerequisites
Make sure you have the following installed on your machine:
Cloning the Repository
git clone https://github.com/Abduraxmonnn/sushi-eat-ui
cd project_html_css_website
Installation
Install the project dependencies using npm:
npm install
Running the Project
npm run dev
Open http://localhost:5173 in your browser to view the project.
Assets used in the project are here