huddle-landing

Frontend Mentor - Huddle Landing Page Solution

This is my solution to the Huddle landing page with single introductory section challenge on Frontend Mentor. I'm super thankful to have found Frontend Mentor as a great way to confidently grow in my coding skills with real-life projects.

Table of contents

• Overview
  • Project Brief
  • Mobile View
  • Desktop View
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

Project Brief

Your challenge is to build out this landing page from the designs provided in the starter code.

You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.

Your users should be able to:

• View the optimal layout for the page depending on their device's screen size
• See hover states for all interactive elements on the page

Want some support on the challenge? Join our Slack community and ask questions in the #help channel.

Mobile View

Desktop View

Links

• Solution URL
• Live Site URL

My process

Built with

• React - JS library
• Next.js - React framework
• HTML5
• CSS
• Tailwind CSS - CSS framework
• Mobile-first workflow
• VS Code

What I learned

This small landing page was great practice for using Tailwind in tandem with Next.js - I am greatly enjoying using this framework to write CSS within my HTMl. The challenge is to keep the utility classes as concise as possible because it's easy to add too many and add clutter to the code; as I keep working on these projects I'm aiming for functionality and readability. The trickiest part was handling the separately sized background images, and I decided on using a single background CSS class which changes the image source depending on screen size.

Here are a few code samples from this project:

<!-- Main tag showing background settings and intro image -->
<main className="p-12 w-full h-full bg-violet bg-illustration bg-cover bg-top bg-no-repeat font-poppinsRegular text-white-100 text-center">
  <div className="flex">
    <Image src={Logo} alt="logo" width={175} height={125} />
  </div>
  ...
</main>

/* CSS for switching between the two background images depending on screen size */
.bg-illustration {
  background-image: url(../../public/bg-mobile.svg);
}

@media (min-width: 768px) {
  .bg-illustration {
    background-image: url(../../public/bg-desktop.svg);
  }
}

Continued development

As a starter developer, I want to keep growing in working as a team and learning how to deliver smaller packages of code at a time, such as components like this one. I thought this project was a good way to get back into React and begin doing just that!

Useful resources

• CSS Formatter - I found this helpful site when I'm feeling lazy and don't want to format my CSS code, I can have this do it for me, especially putting everything in alphabetical order.
• Tailwind Responsive Classes - Tailwind makes it easy to add specific CSS code for screen size break points.

Author

• Website - Garrett Becker
• Frontend Mentor - @gdbecker
• LinkedIn - Garrett Becker

Acknowledgments

Thank you to the Frontend Mentor team for providing all of these fantastic projects to build, and for our getting to help each other grow!