Frontend Mentor - Modern Art Gallery Website Solution

Summary

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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

Users should be able to:

• 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

Screenshots

Desktop

<Home/>

<Location/> with Leaflet JS Map

Links

• Solution URL: View Solution here
• Live Site URL: View live site here

My process

Built with

• 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

What I learned

• This is my first project using React Styled Components. I started building this project, and once I came to the <Footer/> I realized that the background-color and the font color 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 send background-color and font color to the <Footer/>. Also, figuring out how to conditionally change the color of an <svg/> with props 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

  

• 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

  

Continued development

• 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.

Useful resources

• StackOverflow - This project would not be possible without StackOverflow. 🤣
• MDN - MDN was a great reasource for whatever CSS issues I encountered.

Author

• Frontend Mentor - @Chanda-Abdul
• Website - Chanda Codes
• GitHub - github.com/Chanda-Abdul