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 states for all interactive elements on the page.
- Solution URL: My solution
- Live Site URL: Live site
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
For this project, I leveraged the :hover
pseudo-class to provide users with a more interactive experience. By doing so, I was able to showcase clickable links and enhance the overall interactivity of the project.
I utilized the :hover
pseudo-class on the H1, button, and author's name to enhance user interactivity and display clickable links.
button:hover {
background-color: var(--black);
color: var(--yellow);
cursor: pointer;
}
h1:hover {
color: var(--yellow);
cursor: pointer;
caret-color: var(--black);
}
.author p:hover {
color: var(--yellow);
cursor: pointer;
}
I feel that there is still room for improvement in my understanding of certain concepts. Specifically, I would like to gain a better grasp on the Mobile-first workflow, CSS Grid Layout Module, and Flexbox, and incorporate more advanced techniques into my CSS usage.
- MDN Web Docs - This helped me on my CSS.
- Frontend Mentor - @Jesschuck