What are you most proud of, and what would you do differently next time?
Well, one thing I'm proud of is that I have been doing this since the first challenge so I already know where I was headed, that way it wasn't hard to handle. Also I want to give a quick thanks to the developers that helped me with my last solution on flexbox (@MohammadSoleimanikia and @mahbt) I didn't have an issue using flex-box this time due to your suggestions on my previous project and it saved me a lot of build time :)
What challenges did you encounter, and how did you overcome them?
For my challenges on this project, I had issue making each buttons seat on their own line.. I was using flex but they were all seating close to each other.
How'd I overcame this? Well I opened my chrome developer's tool to mess around with the display positioning a little, I was trying out different options then when I tried 'Grid' it worked perfectly.
So instead of [display: flex] I did [display: grid] and it worked perfectly for me! :)
What specific areas of your project would you like help with?
Any is fine, more tips and tricks to make build faster is highly appreciated thank you. :)
@MikDra1
Posted
If you want your solution to be just like the design shows I encourage you to use Pixal Perfect extension
Hope you found this comment helpful 💗💗💗
Good job and keep going 😁😊😉
Marked as helpful
@popcorn150
Posted
@MikDra1 preciate :♥
@TedJenkler
Posted
Hi @popcorn150,
Nice project! Here are a few additional recommendations:
OG Meta Tags: I strongly recommend using OG (Open Graph) meta tags to improve SEO and the shareability of your site. Proper OG tags can significantly impact how your site appears when shared on social media and can make a difference in search engine ranking, potentially even affecting whether your site appears in search results.
Footer Positioning and Text Size: Consider positioning your footer absolutely at the bottom of the page using position: absolute and bottom: 0. This will ensure it stays at the bottom regardless of the page content length. Additionally, increasing the text size in the footer can improve readability, especially on desktop screens.
ARIA Labels: When semantic HTML elements aren't applicable, make sure to add aria-label attributes to your <div> elements. This practice enhances accessibility and contributes positively to SEO by helping screen readers understand the content and purpose of these elements.
Keep up the great work!
Best, Teodor
Marked as helpful
@popcorn150
Posted
@TedJenkler Yup, this was definitely helpful. Who wants to build a site that'd be hard to search, I love your advice on SEO and positing. I'll start using these on my projects for better practice. Preciate ❤️
@mkboris
Posted
Nice work @popcorn150, here are a few things to review
tag around the .main-container and a footer for the attribution.a (anchor) tag instead of the button tag. The a tag is used for navigation to other pages, while the button tag is designed for interactive actions like submitting forms or for events like toggling content. Also, using an unordered list ul to group the social media links is a better approach for both semantics and accessibility.rem not px. This article explains it better Why font-size must NEVER be in pixels.Good luck!
Marked as helpful
@popcorn150
Posted
@mkboris awesome, thanks for the feedback.. I've always wondered why I was getting those warning signs but now I know why, preciate ❤️. Also I was just focusing on designers view which is wrong, that was why I wasn't using the anchor tag and ul or li tags.. if it was an actual project I'm sure I'd have been scolded 😅 thanks for correcting me beforehand. Also I love helpful links, like articles and solutions, they help for a faster build time preciate you sharing some.. 🙏🏽
@mkboris
Posted
@popcorn150 I'm glad the feedback was helpful! Keep going 🙌
@cas1092
Posted
overall the design is correct, aparently we both had issues with the sizing (your's too small, mine too big), maybe add some padding to your card i fell it's a little 'skynny'.
Sorry for the slim feddback but i'm very junior on this
Marked as helpful
@popcorn150
Posted
@cas1092 yup you're correct, if you've checked all my designs they're always so "skynny" let me use your term 🌚. Idk why but I really don't like making them bigger than I'm expecting but I his is a part I should really explore so it doesn't become a bother later on.. junior or not your feedback was very well appreciated ❤️🙏🏽
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
