https://github.com/dacardonac/fem-three-column-preview-card-component
This is a project for practice Forntend with Forntend Mentor
https://github.com/dacardonac/fem-three-column-preview-card-component
bem-methodology frontend-mentor html-css-javascript jsx react tailwindcss vite
Last synced: 4 months ago
JSON representation
This is a project for practice Forntend with Forntend Mentor
- Host: GitHub
- URL: https://github.com/dacardonac/fem-three-column-preview-card-component
- Owner: Dacardonac
- Created: 2025-06-11T13:29:02.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-06-12T16:16:34.000Z (4 months ago)
- Last Synced: 2025-06-12T17:27:53.285Z (4 months ago)
- Topics: bem-methodology, frontend-mentor, html-css-javascript, jsx, react, tailwindcss, vite
- Language: JavaScript
- Homepage:
- Size: 211 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Three Column Preview Card Component solution with React and Tailwind CSS ⚛️✅
This is a solution to the **[Three Column Preview Card Component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/3column-preview-card-component-pH92eAR2-)** by **[Dacardonac](https://github.com/Dacardonac)**. Frontend Mentor challenges help you improve your coding skills by building realistic projects with Frontend.
## Table of contents 📄
- **Frontend Mentor - Three Column Preview Card Component**
- **[Table of contents](#table-of-contents-)**
- **[Overview](#overview-)**
- [The challenge](#the-challenge-)
- [Screenshot](#screenshots-)
- [Links](#links-)
- [How to use](#how-to-use-the-project-)
- **[My process](#my-process-)**
- [Built with](#built-with-)
- [What I learned](#what-i-learned-)
- [Continued development](#continued-development-)
- [Useful resources](#useful-resources-)
- **[Author](#author-)**
- **[Acknowledgments](#acknowledgments-)**
## Overview
### The challenge 🧩
**Users should be able to see in this project:**
- View the optimal layout depending on their device's screen size only between mobile and desktop (Responsive)
- Styles with Taildwind CSS
- React Components
- Accessibility (a11y)
- BEM Methodology
### Screenshots 📷
Desktop 🖥️
****
Mobile 🤳
****
### Links 📍
- Solution URL: **[Frontend Mentor Solution 👨💻](https://www.frontendmentor.io/solutions/three-column-preview-card-component-with-react-and-tailwind-aIBrIkMIpf)**
- Live Site URL: **[Solution Deploy in Vercel 🚀](https://fem-three-column-preview-card-compo.vercel.app/)**
### How to Use the Project 💻
To use this project, you need to follow these steps:
1. **Clone the repository**:
```bash
git clone https://github.com/Dacardonac/fem-three-column-preview-card-component.git
```
2. **Navigate to the project directory 📂**:
```bash
cd fem-three-column-preview-card-component
```
3. **Install dependencies ⬇️: Make sure you have Node.js installed, then run**:
```bash
npm install
```
4. **Run the project ▶️: Start the development server with**:
```bash
npm run dev
```
This will start the project locally, typically accessible at `http://localhost:5173`.
5. **If you want to see a preview of the project ▶️**:
```bash
npm run build
npm run preview
```
**This will start the Preview server on `http://localhost:4173`.**
## My process 🎓
### Built with 🛠
- HTML5 - Structure
- CSS3 Custom Properties - Styles
- React JSX - Programming Logic and Components
- Mobile-first Workflow
- Flexbox - Spaces and Alignments
- Conventional Commits - Commit Specification
- [Vite](https://vitejs.dev/) - Frontend Tooling
- [Tailwind CSS](https://tailwindcss.com/) - Modules and Styles
- Markdown - README.md file (Documentation)
- BEM Methodology
### What I learned 🧠
With this project, I learned, implemented, and practiced **Basic accessibility practices**, **React - JSX**, along with its properties and methods like **Props**. I also reinforced and practiced my **CSS3** knowledge with **Tailwind CSS**, worked on semantic **HTML5** by applying the **BEM** methodology for class naming and **Components**.
**You can see an example below:**
``` JSX
import Card from '../card/Card';
import './Content.css';
const Content = () => {
return (
);
};
export default Content;
```
### Continued development 🔎
I want to continue learning more about **React** and **Props**, **Responsive Design** and how to work across different devices with **Flexbox** and **@media**, also I want continue using **BEM methodology** and perfect the technique in aspects like name the classes and components, also I want to improve with **Tailwind CSS**, learn about **Conventional Commits** and keep using **Vite**.
### Useful resources 🛠
- **[MDN](https://developer.mozilla.org/en-US/)** - This helped me with **Documentation** on many topics, mostly with **HTML** and **CSS** properties.
- **[ChatGPT](https://chatgpt.com/)** - This is an incredible **Artificial Intelligence (AI)** tool, **ChatGPT** helps me with **specific topics**, **errors in the project** and **investigations**.
## Author 👨💻
- Frontend Mentor - **[@Dacardonac](https://www.frontendmentor.io/profile/Dacardonac)**
- LinkedIn - **[@Daniel Alejandro Cano Cardona](https://www.linkedin.com/in/daniel-alejandro-cano-cardona/)**
## Acknowledgments 🙌
I want to thank **[Jairovg](https://github.com/jairovg)** for the teachings and his help to complete this challenge in a good way and with good practices.
**thank you frontend mentor for promoting learning and providing knowledge with these challenges** 🙌
**Have fun building!** 🚀
#