@pharaohmak
I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!
I’m currently learning...Practicing HTML + CSS. I want to become proficient at CSS before I begin applying basic concepts of JS= and moving from there.
Latest solutions
Latest comments
- @Jorgus1710
Hey! Good try on the challenge, it can be intimidating to start so honestly good for you for taking on the challenge. I'm not an expert by any means, but I have some suggestions which may help you.
For starters, your index.html has some things which need to be looked at. Your general structure seems to be laid out in a logical manner, but when you look closer you will notice you are missing some closing tags on your divs, which can make everything misbehave once you get to working on styling in CSS.
Line 27: <div class "details"> for example has no closing tag. Line 36: <div class "creator"> also has no closing tag.
Generally speaking just go over you're structure again, its common to miss a closing tag when your re-arranging your code, as it can easily get confusing. Once everything is wrapped with an opening and closing tag the way you intended it to be, then your CSS should behave in a much predictable fashion.
Hope this helps! Great try my friend! :)
Marked as helpful - @SaidAoussar@Jorgus1710
Excellent work!
The only nitpick I have here is that the card thins out ever so slightly when the screen size transitions beyond 992px width. That makes the card look a little too thin in desktop views. If you could remove that thinning that would make the card look perfect!
Marked as helpful - @PenaJ15@Jorgus1710
Hey Jose, nice work on the challenge! :)
There are some minor adjustments that you could make which will make the design more true to the original source material;
- Your headings for each card should use a different font than the main text underneath it. Have a look at the style guide and you will find it there.
- The main text in the cards should be a bit smaller.
- The design of the buttons you have displayed at the moment would be the desired result when you apply a ':hover' state to them. In the original design it is just a simple solid white background when not hovered on. As well you can try to reduce the padding on the top and bottom of the buttons to make them a bit thinner.
At the moment it looks like the challenge is not mobile friendly or responsive, I would highly recommend to get in the habit of designing for mobile first. It will be super beneficial and it will make things much easier in the future. I know this tip alone has helped me tremendously.
I hope this helps, you did an excellent job! Keep it up! 👏 👏
- @Jack-WebDev@Jorgus1710
Hey Jack, nice job on the challenge! 🙂
I can't speak much about Tailwind, however I would like to suggest some simple alterations to your design, so that it stays true to the original reference material.
- The heading to each card requires a different font than the text below it. The style guide will have the appropriate font which you can source from google fonts.
- On desktop view: The buttons should be closer to the bottom of each card, and the text within them should have less font-weight.
- On desktop view: Overall card thickness is a little too thick, try reducing the overall width of each card, as well you can play with each cards padding in effort to squeeze its inner content to better fit the original design.
Overall great job and keep up the good work!! 👏 👏
Marked as helpful - @raphaelrighetti@Jorgus1710
The picture comparison looks good but the solution is not mobile friendly unfortunetly :'(
You might find this guide useful to help get you started on front end mentor. 🙂
https://medium.com/frontend-mentor/a-complete-guide-to-submitting-solutions-on-frontend-mentor-ac6384162248
Marked as helpful - @kyleebustamante@Jorgus1710
Apply the following code to your "flex-item" div into CSS and it should do the trick:
display: flex; align-items: center;By setting display to flex, it sets the items to row by default, and then the "align-items: center" is what's going to line those items up the way you want them to.
Marked as helpful
