Frontend Mentor - Base Apparel coming soon page solution

This is a solution to the Base Apparel coming soon page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

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

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page
• Receive an error message when the form is submitted if:
  • The input field is empty
  • The email address is not formatted correctly

Screenshot

Links

• Solution URL: Github
• Live Site URL: Netlify

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Styled Components - For styles

What I learned

I learned more about CSS grid and how to use it. I also learned how to use the overlay on CSS. I really liked this pattern and will use it going forward. I also learned how to use the form and how to validate it.

To see how you can add code snippets, see below:

<h1>Some HTML code I'm proud of</h1>

.submit {
  width: 100%;
  height: 54px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  margin-left: -123px;
  width: 142px;
  background-image: linear-gradient(135deg, hsl(0, 80%, 86%), hsl(0, 74%, 74%));
  box-shadow: 2px 4px 14px hsla(0, 36%, 70%, 0.8);
  transition-duration: 0.3s;
  transition-property: transform, box-shadow;
  transition-timing-function: ease-in-out;
  color: white;
  font-weight: var(--fw-regular);
  font-size: 20px;
}

Continued development

I want to continue focusing on CSS grid and how to use it. I also want to learn more about advanced concepts of Javascript and CSS. I will continue practising and building projects to improve my skills.

Useful resources

• Color overlay on hover image - This helped me to understand how to use the overlay on CSS. I really liked this pattern and will use it going forward.

• How to validate forms in React - This is an amazing video tutorial which helped me finally understand how to validate forms in React. I'd recommend it to anyone still learning this concept.

Author

• Website - Elisabeth Erkekoglou
• Frontend Mentor - @elic4vet
• Instagram - @elisa.codes23