Skip to content

Latest commit

 

History

History
71 lines (49 loc) · 2.37 KB

README.md

File metadata and controls

71 lines (49 loc) · 2.37 KB
Raw

Creative Bakery Landing Page

Project Description

CreativeBakery is an attractive landing page for a bakery specializing in creative cupcakes, cakes, cookies, and other baked goods. The project is designed with responsive design in mind for mobile devices, tablets, desktops, and large screens. The technologies used include HTML5, SCSS (SASS preprocessor), BEM (Block Element Modifier) methodology.

Technologies Used

  • HTML5
  • SCSS (CSS preprocessor)
  • BEM (Block Element Modifier) methodology

Project Features

  • Responsive Design: The site is optimized for mobile devices, tablets, desktops, and large screens, ensuring the best user experience on any device. The supported screen sizes are:
    • Design: 1440px
    • Desktop: 1280px
    • Tablet: 640px
    • Mobile: from 320px
  • Style Organization: Styles are organized into blocks, making the project easy to maintain and expand.
  • BEM Methodology: The layout was built using the BEM (Block Element Modifier) methodology, improving code readability and modularity.
  • Use of SCSS: Using mixins and variables in SCSS allows for easy style maintenance and modification, increasing development efficiency.
  • Combination of BEM and SCSS: The combination of BEM and SCSS sped up the development process and allows for quick changes to the project when needed.
  • Image Optimization: Images have been optimized (size reduced without quality loss) to ensure fast page loading and a better user experience.
  • No JavaScript: No JavaScript was used to achieve the project goals, ensuring fast page loading and high performance.

Preview Link

CreativeBakery Demo

Design Link

Figma Design

Additional Instructions for Launch

  1. Clone the repository:

    git clone https://github.com/SrTrace/creativeBakery-landing

  2. Navigate to the project directory:

    cd creativeBakery

  3. Install the necessary dependencies:

    npm install

  4. Start the project:

    npm start

  5. Open your web browser and go to:

    http://localhost:3000

Project Structure

  • index.html - main HTML file
  • styles/main.scss - main SCSS stylesheet
  • styles/blocks/ - block-based styles
  • images/ - images and icons directory