ttsoares/studiosLoop

frontendmentor.io challenges

Frontend Mentor - Loopstudios landing page solution

This is a solution to the Loopstudios landing 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

Screenshot

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

My process

Built with

• Semantic HTML5 markup
• TailwindCSS Grid
• Desktop-first workflow
• Next.js - React framework
• TailwindCSS - For styles

What I learned

Use two different typefaces configured via TailwindCSS.

Continued development

The layout.js approach of NextJS impose some complications as the one in this page where the background image in the Home must algo be below the Nav... My intuition is that there is a better way to solve it.

Useful resources

• NextJS 14 - Course from CodeEvolution

Author

• Website - Thomas Tschoepke Soares
• Frontend Mentor - @ttsoares

Acknowledgments

• Env. variables - Handling multiple environments is an essential part of any modern application. We don’t want to mix our secrets while developing and going to production.