https://github.com/timbar09/fem-four-card-feature-section
This is a four card feature section challenge from frontendmentor.io which I will be attempting to solve.
https://github.com/timbar09/fem-four-card-feature-section
css3 front-end grid html5
Last synced: 8 months ago
JSON representation
This is a four card feature section challenge from frontendmentor.io which I will be attempting to solve.
- Host: GitHub
- URL: https://github.com/timbar09/fem-four-card-feature-section
- Owner: Timbar09
- Created: 2022-08-31T15:54:24.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-09-07T15:02:14.000Z (over 3 years ago)
- Last Synced: 2025-02-04T10:49:00.212Z (about 1 year ago)
- Topics: css3, front-end, grid, html5
- Language: HTML
- Homepage: https://mt-four-card-feature.netlify.app/
- Size: 306 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)
- [Acknowledgments](#acknowledgments)
## Overview
This is the second challenge from Frontend Mentor that i have completed. It was a bit more difficult than the last one but I took less time to complete it than I initially anticipated.
### The challenge
The site is responsive and viewers can view the optimal layout of the site accross multiple screen sizes such as mobiles phones, tablets and destktops.
### Screenshot
### Links
- Solution URL: [https://github.com/Timbar09/four-card-feature-section.git]
- Live Site URL: [https://mt-four-card-feature.netlify.app/]
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- [SASS](https://sass-lang.com/) - CSS3 extension
### What I learned
I have learned to use Github (Desktop version) for thje very first time with this challenge. I have also learned that I can insert SVG code of an image directly into the html markup as opposed to linking the image to html with css as well as interchanging flexbox and grid for the same elements within different viewports.
See snippets below:
```html
Some HTML code I'm proud of
```
```css
.proud-of-this-css {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
justify-content: center;
align-items: center;
@include breakpoint-up(large) {
display: grid;
grid-template-columns: repeat(3, auto);
grid-template-rows: repeat(4, auto);
}
}
```
### Continued development
I want to continue using Github as it is relatively new to me and I am beggining to see the benefits of it in my coding development. I would also like to use javaScript and javaScript frameworks such as React in future challenges in oder to add to my skills.
## Author
- Frontend Mentor - [@Timbar09](https://www.frontendmentor.io/profile/yourusername)
## Acknowledgments
Firstly I would like to thank muself for copleting this challenge and I also want to thank Frontend Mentor for helping me and so many others by giving us access to these challenges and helping us develop our coding skills.