Frontend Mentor - Insure landing page solution

This is a solution to the Insure landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Links

• Live on GitHub Pages

Showcase

Desktop preview

Mobile ligthouse stats

Built with

• Astro - Static Site Generator
• Tailwind - For styles

Areas that could be improved

• Implement social's svg's active state
• Improve semantics & accesibility
• Organization for the images folder
• Separate HTML into Astro components
• Better coude reusability on the outlined buttons
• Asset compression
• Make it pixel-perfect
• Consistent mt-pt and mb-pt for spacing
• Deeper Astro's GitHub actions deployment understanding
• Better default font handling
• Use css grid auto-fit for columns
• Better color inheritance/cascade separation
• Improve image attributes
• Better way to import fonts via link tag
• Better TypeScript and prop spreading
• Use em media queries instead of px for consistency across browsers
• Use exact design colors
• Enable on-load event for NavBar
• Fix Layout shifting
• Understand difference between hover and focus
• Better navbar layout design
• More consistent media breakpoints
• Add more HTML comments
• Add hover state to mobile nav outlined button
• Handle zoom-in issues
• Make footer grid more responsive
• Make intro-section more resposive in-between transitions

Acknowledgments

• Kevin Powell's YouTube Channel helped me a lot
• Kevin Powell's Responsive Design Article
• Theo Brownlee's YouTube Channel
• Adam Wathan's YouTube Channel
• Workation Repo Repo
• Tons of help from StackOverflow
• Help from Web.dev
• MDN Mozilla Documentation
• W3Schools
• Tailwind CSS best practices
• Image alt accessibility
• CSS Tricks
• Spacer WebFlow Class Article
• Git conflicts
• SVG best import method comparison
• SVG loader
• More git conflicts
• Typescript issues
• Using markdown