This is a solution to the Blog preview card challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- See hover and focus states for all interactive elements on the page
- Solution URL: Github Link
- Live Site URL: Live Site
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- React - JS library
I learnt about using the concept of fluid typography and how it can be achieved by using units like vw
, vh
, vmin
, and vmax
. You can also achieve fluid typography by making use of CSS properties such as min()
, max()
, and clamp()
Example of the usage is below:
body{
font-size: min(3.2vw, 14px);
line-height: 150%;
}
This allows the browser to pick the smaller of the two units
I also learned about when to use ease-in and ease-out for transitions. The general βruleβ (in quotes) is to use them opposite of how they are named:
ease-in: when things are moving out. ease-out: when things are moving in.
- Usage of min(), max(), and clamp() - This helped me in creating fluid typography without the use of media queries
- When to use ease-in and ease-out - This is an amazing article which helped me finally understand usage of ease-in and ease-out. I'd recommend it to anyone still learning this concept.
- Website - Achigyus
- Frontend Mentor - @Achigyus
- Twitter - @LaAnbuUchiha