nabi-cloud / tea-cozy

Fictional tea shop website based on a provided design spec and image assets

Tea Cozy: A Virtual Tea Shop

Project Overview

Tea Cozy is a fictional virtual tea shop, created as a part of the required Codecademy projects. The aim of this project is to design and build a website for a tea shop using the provided design spec. This project aims to demonstrate my web development skills, particularly in CSS flexbox to accommodate different screen sizes.

Design Spec

This design spec is provided by Codecademy.

Project Requirements

The main focus of this project is to utilize flexbox for creating a responsive layout.

To achieve a responsive design with flexbox, the following was implemented:

• Organize the website's layout into flexible containers and items.
• Use flexbox properties to distribute space, align items, and create a consistent flow of content.
• Implement media queries to apply specific styles based on different screen sizes, optimizing the website for various devices.

Going the Extra Mile: Organized CSS

Created a CSS codebase that is easy to manage and extend, allowing myself or other developers to work efficiently and contribute to the project seamlessly. I have organized the CSS file into different sections to maintain a clean and manageable codebase. The CSS file follows the following structure:

1. Global Styles: Contains styles that apply globally to the entire website, such as the background, color schemes, and box-sizing rules.

2. Typography Styles: Includes styles related to fonts, font sizes, line heights, and any text-related properties.

3. Structure Styles: Handles the layout and positioning of major structural elements of the main content area.

4. Module Styles: Houses styles for reusable components or elements like the header, navigation bar, and footer.

5. Page Styles: Contains specific styles for each section of the site, targeting unique elements and layout adjustments as needed.

Reflection

As with any project, I encountered moments where the outcome did not meet my initial expectations. However, these perceived setbacks became valuable opportunities to hone my problem-solving skills as a developer.

At times, the layout appeared misaligned or distorted on certain devices. Through research and experimentation, I identified the areas that needed adjustment and gradually refined the responsive design.

I realized the importance of resilience and patience in problem-solving. It is natural for projects to encounter roadblocks, but learning to persevere and approach issues with a problem-solving mindset is crucial.

In cases where I encountered problems that was detrimental to my productivity, I sought guidance from professionals in web development communities and forums. Reaching out for help not only expanded my knowledge but also exposed me to alternative perspectives and solutions.

@Mar 2023