Design comparison
Solution retrospective
I love the transitions I really think it brought the design together well. I enjoyed this experience from start to finish it did take me a few hours to complete but by the end it was rewarding.
What challenges did you encounter, and how did you overcome them?I am having trouble properly organizing all the txt I am trying to use flex boxes but I somethings don't seem to be working correctly. For example using align-items property doesn't seem to move the items the way I intend them too, they don't move at all so I am not quite sure what I am doing wrong.
I am also having trouble with class names I just can't think of what good names to use that people would understand when they read my code. If there are standard names I would like to know.
What specific areas of your project would you like help with?I would like help with class names and understanding what good names to use so my code would be easier to read and understand, anyone's feedback would be greatly appreciated.
Community feedback
- @Alex-Archer-IPosted 6 months ago
Hi! It's a decent job, well done =)
If this can help - align-items define alignment along the cross axis and justify-content along the main. For example if direction of your flex is row (which is default value) you should use JC to arrange items left-center-right and AI to top-center-bottom. It may sound complicated right now, sorry, but you'll definitely understand it better via practice. And in your case you can add "align-items: center" to the body for the neat centralize.
As for class names - I recommend you to read some articles about common approaches - BEM, OOCSS or SMACSS (the last one is easier but a bit outdated). Well, those approaches are not quite noticeable on the small projects like this. So I can advice you to start like this - name your base element with a simple class and use this name with modifications inside it. Using your example it can look like this:
<div class="card"> <div class="card_panel"> <div class="card_link"><h4>Learning</h4></div> <div class="card_date"><p>Published 21 Dec 2023</p></div> <div class="card_title"><h2>HTML & CSS foundations</h2></div> <div class="card_text"> <p>These languages are the backbone of every website, defining structure, content, and presentation.</p> </div> </div> <div class="card_author"> <img src="./assets/images/image-avatar.webp" alt=""> <h5>Greg Hooper</h5> </div>It can help you while you are learning more complex approaches. Oh, and you don't have to wrap all in div - you can define classes inside any tag.
I hope some of this can help. Good luck =)
Marked as helpful0@RichardCastellanoPosted 6 months ago@Alex-Archer-I thanks so much for your feedback I will definitely look into BEM, OOCSS and SMACSS for a more in depth understanding. I will also practice on using the JC AMand AI more often to build that repatition. Thanksbfor your insights! :)
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord