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: Code solution.
- Live Site URL: live example.
At first I had to create the full html base. after that I started making the style. using tailwind css. But for some reason I had to use simple CSS component or let's say custom css because you have to use the same colour that they give you for the challenge and the same font.
- Semantic HTML5 markup
- CSS custom properties
- Tailwind CSS - For styles
Note: These are just examples. Delete this note and replace the list above with your own choices
Things that I've learned from this project is that I'm trying to master tailwind css because it's light, it's beautiful and it's easy to use Initially on a big scale apps. so I'm trying to master this for. bigger project.
So. what I'm going to try to focus next is making this same design, but using astrobuild and tailwind css and hopefully I can add a light and dark. theme I want to make it interactive so it can take you to another pages for a real blog.
- Tailwind CSS. - I'm not gonna lie in some parts, especially when it comes to text and other stuff like that. I had to check the tailwind documentation. It truly helped me.
- Website - Ziane Maamar
- Frontend Mentor - @drxdesign
- Twitter - @drxdesign