Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jomagene/recipice-page
Stylish and Responsive Recipe Page
https://github.com/jomagene/recipice-page
flexbox font-face marker media-queries
Last synced: 3 days ago
JSON representation
Stylish and Responsive Recipe Page
- Host: GitHub
- URL: https://github.com/jomagene/recipice-page
- Owner: Jomagene
- License: mit
- Created: 2024-08-09T18:42:26.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-08-21T18:40:20.000Z (3 months ago)
- Last Synced: 2024-08-21T20:25:02.300Z (3 months ago)
- Topics: flexbox, font-face, marker, media-queries
- Language: HTML
- Homepage: https://jomagene.github.io/Recipice-page/
- Size: 2.21 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Frontend Mentor - Recipe Page Solution
This is a solution to the [Recipe page challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/recipe-page-KiTsR8QQKm). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Overview](#overview)
- [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
### Screenshot
### Links
- Solution URL: [My solution](https://www.frontendmentor.io/solutions/stylish-and-responsive-recipe-page-cXGtx2bWEY)
- Live Site URL: [Live link](https://jomagene.github.io/Recipe-page/)
## My Process
### Built With
- Semantic HTML5 markup
- CSS custom properties (e.g., `@font-face`, CSS variables, utility classes)
- Flexbox
- Mobile-first workflow with media queries
### What I Learned
In this project, I gained a deeper understanding of the following concepts:
- **Font Integration:** Learned how to use `@font-face` with `font-display: swap` for better web performance.
- **Custom List Markers:** Implemented personalized list markers using the `::before` pseudo-element in CSS.
Here's a sample of code I'm proud of:
```html
```
```css
@font-face {
font-family: "Outfit";
src: url("./assets/fonts/outfit/Outfit-VariableFont_wght.ttf") format("truetype");
font-weight: 400 600;
font-display: swap;
}
@font-face {
font-family: "Young Serif";
src: url("./assets/fonts/young-serif/YoungSerif-Regular.ttf") format("truetype");
font-weight: 400 600;
font-display: swap;
}
ul {
padding-bottom: 25px;
list-style-type: none;
}
ul li::before {
content: ". ";
color: var(--rose-800);
margin-right: 20px;
font-weight: 600;
}
```
### Continued Development
In future projects, I plan to:
- Improve accessibility features, such as ARIA roles and more semantic HTML.
### Useful Resources
- [MDN Web Docs](https://developer.mozilla.org/) - A comprehensive resource that helped me better understand `@font-face` and CSS custom properties.
- [CSS-Tricks](https://css-tricks.com/) - This site provided useful tips on how to improve the layout using Flexbox and media queries.
## Author
- Frontend Mentor - [@Jomahene](https://www.frontendmentor.io/profile/Jomagene)
- Twitter - [@Jomagene](https://www.twitter.com/Jomagene)
## Acknowledgments
I would like to thank the Frontend Mentor community for providing feedback and suggestions that helped me refine our skills.