This is a solution to the Workit landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- Eleventy
- Tailwind
- CUBE CSS
Tailwind! I used it quite conservatively in conjunction with CUBE CSS, which means I still wrote component-based classes instead of taking a utility-first approach. But I definitely see the benefit of using Tailwind, especially for rapid UI development during the early phases of a project. I especially like how it can process design tokens and convert them into CSS custom properties that I can use in my code.
The source code of Build Excellent Websites is my primary inspiration for this project. I tried my best to practice the principles in that site, which is why I only used 2 media queries for this solution (not counting the ones in resets and config files). The rest of the layout are handled by utility classes, such as the Switcher a.k.a. the Flexbox Holy Albatross by Heydon Pickering.
I also gained more confidence working with SVG:
- For the logos, I used inline SVG in the header and footer instead of <img> tags.
- I combined the social media icons into an icon sprite embedded in the page, which avoids extra HTTP requests.
- Be consistent on how to implement fluid sizing. In Tailwind config, I defined fluid sizes for text, but not spacing because they're more varied. Because of this, I often get lost trying to find the right CSS file where I set a value. Better if there's a single source of truth.
- The Flexbox Holy Albatross and The Flexbox Holy Albatross Reincarnated by Heydon Pickering
- Build Excellent Websites by Andy Bell