ResponsiveSunnyside Agency Landing Page - Vite+ React + Tailwind Css

Frontend Mentor - Sunnyside agency landing page solution

Hi everybody! 👋

This is a solution to the Sunnyside agency landing page challenge on Frontend Mentor.

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

Links 🔗

• Solution URL: Github Repository
• Live Site URL: Github Page

My process ⚙️

Built with 🛠️

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Vite - Build Tool for React
• React - JS library
• Tailwind CSS - CSS framework

What I learned 📚

This proyect was my first experience whith a build tool (vite) and a framework for javascript (React). Being my first steps with both technologies, it was a real challenge. Among the things I learned are: -Creation and management of components -operation and integration of html elements + jsx code and also its customization with tailwind css.

import { Header } from './assets/components/Header'
import { Main } from './assets/components/Main'
import { Service } from './assets/components/Service'
import { TestimonialContainer } from './assets/components/TestimonialContainer'
import { Gallery } from './assets/components/gallery'
import { Footer } from './assets/components/Footer'

function App() {
  return (
    <main className='relative max-w-[90rem] mx-auto'>
      <Header />
      <Main />
      <Service/>
      <TestimonialContainer/>
      <Gallery/>
      <Footer/>
    </main>
  )
}

export default App

Continued development 🔨

My goal from this challenge, is to deepen and master react, leaving, at least for a while, the use of basic technologies (html/css/javascript) to contribute to my growth as a frontend developer

Author 🙋🏻‍♂️

• Twitter/X - @agus_firpo
• Frontend Mentor - @Arfirpo
• Linkedin - Agustín Rodrigo Firpo