https://github.com/dedo-dev/four-card-feature-section

Second Challenge of Building responsive layout a path of Learning Path by Frontend Mentor
https://github.com/dedo-dev/four-card-feature-section

bem css custom-properties grid html logical-properties relative-un

Last synced: about 1 month ago
JSON representation

Second Challenge of Building responsive layout a path of Learning Path by Frontend Mentor

• Host: GitHub
• URL: https://github.com/dedo-dev/four-card-feature-section
• Owner: dedo-dev
• Created: 2024-08-04T19:41:34.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-08-06T02:17:15.000Z (9 months ago)
• Last Synced: 2024-08-06T22:13:42.039Z (9 months ago)
• Topics: bem, css, custom-properties, grid, html, logical-properties, relative-un
• Language: HTML
• Homepage: https://dz-four-card-feature-section.vercel.app/
• Size: 234 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Frontend Mentor - Four card feature section solution

This is a solution to the [Four card feature section challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/four-card-feature-section-weK1eFYK). Frontend Mentor challenges help you improve your coding skills by building realistic projects.

## Table of contents

- [Overview](#overview)

  - [The challenge](#the-challenge)

  - [Screenshot](#screenshot)

  - [Links](#links)

- [My process](#my-process)

  - [Built with](#built-with)

  - [What I learned](#what-i-learned)

  - [Continued development](#continued-development)

- [Author](#author)

## Overview

### The challenge

Users should be able to:

- View the optimal layout for the site depending on their device's screen size

### Screenshot

### Mobile Version

![](./images/mobile-version.png)

### Desktop Version

![](./images/desktop-version.png)

### Links

- Solution URL: [Frontend Mentor solution](https://www.frontendmentor.io/solutions/responsive-four-card-feature-using-css-grid-hgYwRLVXHV)

- Live Site URL: [Demo](https://dz-four-card-feature-section.vercel.app/)

## My process

### Built with

- Semantic HTML5 markup

- CSS custom properties

- Flexbox

- CSS Grid

- Mobile-first workflow

- BEM

- Logical Properties

### What I learned

This solution was my second submission to this challenge, more than learning I reinforced my knowledge.

I'm happy with how I improved my skills along the way, the journey is still long of course, but when you look back and you touch the improvement there are only three things to do:

- To be proud of themselves 🥲

- Keep learning 📖

- Keep coding 💻

### Continued development

Like this project, by the next one, I'll be focused on CSS Grid, Flexbox, Fluid typography, Fluid spacing, Custom properties and how to build responsive layouts without using media queries.

## Author

- Frontend Mentor - [@dedo-dev](https://www.frontendmentor.io/profile/dedo-dev)

- Linkedin - [@daniele-zeppieri](https://www.linkedin.com/in/daniele-zeppieri-0b1a36252/)