Frontend Mentor - Modern Art Gallery Website Solution
This is a solution to the Frontend Mentor challenge to recreate the Modern Art Gallery website challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
I built this project to practice my React skills.
- View the optimal layout for each page depending on their device's screen size
- Mobile First
- Tablet
- Desktop
- See hover states for all interactive elements throughout the site
- Buttons
- Social Media Icons
- Bonus: Use Leaflet JS to create an interactive location map with custom location pin
<Location/>
with Leaflet JS Map
- Solution URL: View Solution here
- Live Site URL: View live site here
- React - JavaScript Framework
- React Styled Components - For styles
- Leaflet JS - Interactive Map Library
- Sass/CSS
- Flexbox
- Mobile-first workflow
- Mobile breakpoint: 375px
- Tablet beakpoint: 768px
- Desktop breakpoint: 1275px
-
This is my first project using React Styled Components. I started building this project, and once I came to the
<Footer/>
I realized that thebackground-color
and the fontcolor
of the footer would change depending on which page is being rendered. So I did some research and Styled Components are a great solution for this issue. Overall, I really enjoyed working with Styled Components because they helped me organize my CSS styles, and quickly incorporate responsive media queries.- I used
props
to sendbackground-color
and fontcolor
to the<Footer/>
. Also, figuring out how to conditionally change the color of an<svg/>
withprops
was extremely challenging😣.
in
<Footer/>
<FooterStyled bgcolor={props.bgcolor} color={props.color} activecolor={props.activeColor} >
in the parent component
<Footer bgcolor="var(--almost-black)" color="var(--white)" activeColor="var(--gold)" />
and the styled component
background-color: ${({ bgcolor }) => bgcolor || "var(--almost-black)"}; color: ${({ color }) => color || "var(--white)"};
<Footer/>
in the<Home/>
component<Footer/>
in the<Location/>
component - I used
-
This is also one of the first projects where I used Sass. Sass is great, because it allows you to create resuable variables for fonts, colors, etc.
The given Figma specs for colors
And the Sass/CSS I came up with
:root { /* color palette */ --gold: hsl(24, 56%, 63%); --almost-black: hsl(0, 0%, 8%); --almost-grey: hsl(0, 0%, 27%); --white: hsl(0, 0%, 100%); }
and I incorporated these colors into the Styled Components using
color: var(--gold); color: var(--almost-black); color: var(--almost-grey); color: var(--white);
The given Figma specs for fonts
And the Sass/CSS I came up with
/* fonts */ @mixin heading-xl { font-family: "Big Shoulders Display", cursive; font-size: 96px; line-height: 88px; text-transform: uppercase; } @mixin heading-l { font-family: "Big Shoulders Display", cursive; font-size: 70px; line-height: 70px; text-transform: uppercase; } @mixin heading-m { font-family: "Big Shoulders Display", cursive; font-size: 60px; line-height: 50px; text-transform: uppercase; } @mixin heading-s { font-family: "Big Shoulders Display", cursive; font-size: 36px; line-height: 36px; text-transform: uppercase; } @mixin body-m { font-family: "Outfit", sans-serif; font-weight: 300; font-size: 22px; line-height: 32px; } @mixin body-s { font-family: "Outfit", sans-serif; font-weight: 300; font-size: 18px; line-height: 28px; } /* mobile */ .title { @include heading-m; }
-
I also played around with active states and stylings for the
<Button/>
Inactive
Active
- I would like to review the Social Media Icon active state color changes, they don't seem to be working at the moment.
- Maybe add some additional pages.
- StackOverflow - This project would not be possible without StackOverflow. 🤣
- MDN - MDN was a great reasource for whatever CSS issues I encountered.
- Frontend Mentor - @Chanda-Abdul
- Website - Chanda Codes
- GitHub - github.com/Chanda-Abdul