Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jomagene/four-card-feature-section
A nice layout-based challenge from frontend mentor, to test multi-column and responsive layouts, using Sass, flex and grid
https://github.com/jomagene/four-card-feature-section
flexbox-grid media-queries sass
Last synced: 2 months ago
JSON representation
A nice layout-based challenge from frontend mentor, to test multi-column and responsive layouts, using Sass, flex and grid
- Host: GitHub
- URL: https://github.com/jomagene/four-card-feature-section
- Owner: Jomagene
- License: mit
- Created: 2024-08-12T21:45:34.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-08-21T18:48:22.000Z (5 months ago)
- Last Synced: 2024-08-21T21:14:21.919Z (5 months ago)
- Topics: flexbox-grid, media-queries, sass
- Language: SCSS
- Homepage: https://jomagene.github.io/four-card-feature-section/
- Size: 321 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
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)
- [Useful resources](#useful-resources)
- [Author](#author)
- [Acknowledgments](#acknowledgments)
## Overview
### The challenge
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
### Screenshot
### Links
- Solution URL: [My solution Url](https://www.frontendmentor.io/solutions/responsive-four-card-feature-section-using-sass-grid-and-flex-box-lay-3etg4Un1yt)
- Live Site URL: [Four card section](https://jomagene.github.io/four-card-feature-section/)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Sass/SCSS
### What I learned
I have learned to use Sass mixins and variables to streamline my CSS and create reusable styles. I also explored how to integrate CSS Grid and Flexbox within media queries to create responsive layouts that adapt smoothly to different screen sizes.
To see how you can add code snippets, see below:
```scss
@mixin set-grid-area($row-start, $column-start) {
grid-area: #{$row-start}/#{$column-start}/ span 2;
}
@media (min-width: 42.5rem) {
.articles-section {
grid-template: repeat(4, 1fr) / repeat(3, 1fr);
.builder {
@include set-grid-area(1, 2);
}
.karma {
@include set-grid-area(3, 2);
}
.supervisor {
@include set-grid-area(2, 1);
}
.calculator {
@include set-grid-area(2, 3);
}
}
}
```
### Continued development
In future projects, I want to continue exploring advanced CSS techniques such as more complex grid layouts and improving my understanding of responsive design. Additionally, I plan to delve deeper into Sass optimizing performance in CSS and experimenting with newer CSS features.
### Useful resources
- [Sass Documentation](https://sass-lang.com/documentation/) - This helped me understand and effectively use Sass mixins and variables.
- [CSS Grid Garden](https://cssgridgarden.com/) - An interactive tool that helped me grasp CSS Grid concepts better.
## Author
- Frontend Mentor - [@Jomagene](https://www.frontendmentor.io/profile/Jomagene)
- Twitter - [@Jomagene](https://www.twitter.com/Jomagene)
## Acknowledgments
Thank you to the Frontend Mentor community for the inspiration and feedback on this project. Special thanks to anyone who provided guidance (Kevin Powel for example) and support during the development of this solution.