rmcg.dev/projects/FrontendMentor/newbie/equalizer-landing-page/README.md

98 lines
3.7 KiB
Markdown
Raw Normal View History

2022-10-10 01:15:11 +02:00
# Frontend Mentor - Equalizer landing page solution
2022-10-12 17:47:33 +02:00
This is a solution to the [Equalizer landing page challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/equalizer-landing-page-7VJ4gp3DE). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
2022-10-10 01:15:11 +02:00
## Table of contents
2022-10-12 17:47:33 +02:00
- [Frontend Mentor - Equalizer landing page solution](#frontend-mentor---equalizer-landing-page-solution)
- [Table of contents](#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)
2022-10-10 01:15:11 +02:00
**Note: Delete this note and update the table of contents based on what sections you keep.**
2022-10-10 01:15:11 +02:00
## Overview
2022-10-10 01:15:11 +02:00
### The challenge
2022-10-10 01:15:11 +02:00
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
2022-10-10 01:15:11 +02:00
### Screenshot
![](./screenshot.jpg)
Add a screenshot of your solution. The easiest way to do this is to use Firefox to view your project, right-click the page and select "Take a Screenshot". You can choose either a full-height screenshot or a cropped one based on how long the page is. If it's very long, it might be best to crop it.
2022-10-12 17:47:33 +02:00
Alternatively, you can use a tool like [FireShot](https://getfireshot.com/) to take the screenshot. FireShot has a free option, so you don't need to purchase it.
2022-10-10 01:15:11 +02:00
Then crop/optimize/edit your image however you like, add it to your project, and update the file path in the image above.
2022-10-10 01:15:11 +02:00
**Note: Delete this note and the paragraphs above when you add your screenshot. If you prefer not to add a screenshot, feel free to remove this entire section.**
2022-10-10 01:15:11 +02:00
### Links
2022-10-10 01:15:11 +02:00
- Solution URL: [Add solution URL here](https://your-solution-url.com)
- Live Site URL: [Add live site URL here](https://your-live-site-url.com)
2022-10-10 01:15:11 +02:00
## My process
2022-10-10 01:15:11 +02:00
### Built with
2022-10-10 01:15:11 +02:00
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- [React](https://reactjs.org/) - JS library
- [Next.js](https://nextjs.org/) - React framework
- [Styled Components](https://styled-components.com/) - For styles
2022-10-10 01:15:11 +02:00
**Note: These are just examples. Delete this note and replace the list above with your own choices**
2022-10-10 01:15:11 +02:00
### What I learned
To only be so beholden to the design. If I was in a position to I would be actively going to the designer to ask why certain padding areas are uneven (for instance the product card, the left/right padding is odd / unbalanced. Particularly around the price block, where for tablet and mobile its more indented)
2022-10-10 01:15:11 +02:00
### Continued development
2022-10-10 01:15:11 +02:00
### Useful resources
2022-10-12 17:47:33 +02:00
This article for reminding me how to do a fake background card
https://chenhuijing.com/blog/css-card-shadow-effects/#%F0%9F%A6%8A
2022-10-10 01:15:11 +02:00
- [Example resource 1](https://www.example.com) - This helped me for XYZ reason. I really liked this pattern and will use it going forward.
2022-10-10 01:15:11 +02:00
## Author
- Website - [Robert McGovern](https://tarasis.net)
- Frontend Mentor - [@tarasis](https://www.frontendmentor.io/profile/tarasis)
- Twitter - [@tarasis](https://www.twitter.com/tarasis)
2022-10-10 01:15:11 +02:00
## Acknowledgments
2022-10-10 01:15:11 +02:00
This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got some inspiration from someone else's solution. This is the perfect place to give them some credit.
2022-10-10 01:15:11 +02:00
**Note: Delete this note and edit this section's content as necessary. If you completed this challenge by yourself, feel free to delete this section entirely.**
----
NOTES
Lighthouse notes that the offwhite on redish isn't a good contract.