Frontend Mentor - Fylo dark theme landing page solution

This is a solution to the Fylo dark theme 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
• Author

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
• Tailwind CSS
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library

What I learned

React is a popular JavaScript library for building user interfaces. Components are the building blocks of a React application and allow you to split your UI into reusable, isolated pieces. In my project, I learned how to use components in React to create a modular and maintainable codebase.

To create a React component, you can write a JavaScript function that returns a React element. The function can take in props, which are data passed down from a parent component, and use them to render the UI.

import React from 'react';

function Heading({ text }) {
  return <h1>{text}</h1>;
}
}

Tailwind is a utility-first CSS framework that provides a set of pre-defined CSS classes for rapid styling. I learned how to use Tailwind with React by installing the tailwindcss and @tailwindcss/react packages and setting up the CSS in my project.

Tailwind makes it easy to add styling to your components by using classes in the HTML elements.

Responsiveness is an important aspect of modern web design, and it refers to the ability of a website to adapt to different screen sizes. I learned how to make a website responsive by using the clamp CSS function.

The clamp function allows you to set a range of font sizes for a given element, and it will choose the appropriate font size based on the available space. For example, you can set the font size to be between 12 and 18 pixels:

.text-responsive {
  font-size: clamp(12px, 4vw, 18px);
}

In this project, I learned several important concepts in web development, such as using components in React, using Tailwind with React, and using responsive fonts and spacing. By applying these learnings in your projects, you can build fast, scalable, and maintainable web applications.

Author

• Frontend Mentor - @jjalbuenacabuyao