Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Huddle Landing Page || HTML CSS Grid

Kayβ€’ 460

@ofthewildfire


Design comparison


SolutionDesign

Solution retrospective


Hi-yo, this is my solution for the Huddle landing page

I used Grid and Flexbox and I did my best to make it function as it is supposed to. I had issues with the background image for a bit as well as the hover states.

Any advice appreciated

Community feedback

Hussein Samyβ€’ 360

@HusseinSamy

Posted

Hello @ofthewildfire, πŸ‘‹πŸ»

Awesome job on taking the first steps towards your dream!

I'm thrilled to see your engagement with this platform to enhance your design skills. However, I have some suggestions for you:

  • Adding meta tags to enhance the SEO, such as:
<meta name="title" content="My Website">
<meta name="description" content="My Website Description">
<meta name="keywords" content="Some, Keywords, Here">

  • Correct me if I am wrong, but I think that you are using the modifiers (in BEM naming convention) at the wrong place – they should be used to changes the appearance of the block. Here is their docs

  • Leaving some space and writing comments in your HTML can save you sometime when navigating your code, something like this:


< ========== >
< Left Section >
< ========== >
<section>

<-- Left Image -->
<img>

<-- Attribution --> 
<div>
</div>

</section>


< =========== >
< Right Section >
< =========== >
<section>
...
</section>

Hope you find it useful!πŸ˜‡

Keep up the fantastic work, and happy coding! πŸš€

Marked as helpful

0

Kayβ€’ 460

@ofthewildfire

Posted

@HusseinSamy Thank you for the suggestions and corrections :) I wasn't using BEM at all πŸ˜‚but you've reminded me I do have to learn it, so I'll learn the BEM method and implement it ASAP.

I'll also add comments ✨β™₯️

1
Hussein Samyβ€’ 360

@HusseinSamy

Posted

@ofthewildfire Actually, you're using it in your own way πŸ˜‚, it's easy don't worry. Wish you all the luck ✨

1

Please log in to post a comment

Log in with GitHub
Discord logo

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