This is my solution to the Fylo landing page with two column layout challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
• Built with
• What I learned
• Useful resources
• Author

Note: Delete this note and update the table of contents based on what sections you keep.

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

Mobile screenshot is available here.

• Solution URL: Github Repo
• Live Site URL: Hosted on Netlify

1. Start by writing basic HTML structure.

2. Setup layout and containers using flexbox. In this stage, we try not to add any margin or padding because layout should not depend on those properties.

3. Import fonts and apply them by considering inheritance and cascading features in CSS.

4. (Optional) Apply fluid typography system. This project uses an excellent package from @davidhellmann for fluid types.

5. Style important elements like buttons and inputs. Make sure SVGs are in good shape. See if it's worth compressing them (don't forget images, either).

6. Style sections and prepare for desktop responsive design

7. (Optional) Customize scrollbar, but please note that Firefox and Chrome have different syntax, and you should be careful here.

8. Add spacing to elements. Prefer padding to margin if possible or use gap in flex containers because I believe in most cases there are better alternatives, read more here and also this article about margin collapse to get the full context.

9. Final touches and test on different browsers. Test with edge case scenarios to see if it still works. Catch any potential bugs.

10. Now it's time to write JavaScript. See what's needed and don't make a js-fatigue situation please :)

11. Refactor code and reuse any code if feasible.

12. Write good documents (also can be written as project progresses).

13. Deploy and go online.

• Semantic HTML5 markup
• Mobile-first workflow
• Flexbox
• TailwindCSS - Main framework for CSS styling
• TailwindCSS Fluid Type - Bring fluid typography to TailwindCSS
• PostCSS - Post process styles
• Vite - Next Generation Frontend Tooling (Builder)

This project has a convention in naming CSS classes.

Tailwind custom class names must start with an asterisk (*).

For example, this project has a *bar class:

/* only tailwind classes are allowed */
/* `\` is used to escape `*` character */

.\*bar {
  @apply rounded px-6 py-3 shadow-lg
}

This convention makes it much easier to debug styles because we know when a class name starts with * it must be a custom tailwind class.

All CSS styles should use vanilla tailwind but, if for some reason we want to write vanilla CSS then here's the second convention:

Vanilla CSS class names must be prefixed with an underline (_) to indicate this class is not comming from tailwind.

/* notice the "_" sign to differentiate from a custom tailwind class */

._visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

With this rule in mind, no one should mistake tailwind's hidden class with _visually-hidden since it starts with _ character.

If you want to learn how to create a beautiful scrollbar, then read this great blog post from Ahmad Shadeed.

For SVG compression, I used SVGOMG.

Looking for a good SVG icon? Then check out Icônes built by Anthony Fu. This project's brand icons are designed by Ionicons (the original repo).

• Frontend Mentor - @devmor-j