Skip to content
Submitted 21 days ago

Huddle landing page with alternating feature blocks – mobile first sol

Fernando Luis Pizarro•280
@fernandopizarrodw
A solution to the Huddle landing page with alternating feature blocks challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm proud of how I built the layout using a mobile-first approach and Flexbox to handle the alternating blocks. Next time, I would like to improve how I name my CSS classes by applying a consistent methodology like BEM from the start.

What challenges did you encounter, and how did you overcome them?

The biggest challenge was keeping the layout clean and readable while switching the order of text and images in each section. I used Flexbox and flex-direction to solve this without repeating code unnecessarily. Also, dealing with spacing and responsiveness required several iterations and testing across different screen sizes.

What specific areas of your project would you like help with?

I’d appreciate feedback on how to better structure my CSS using BEM, and how to make my code more maintainable and scalable. Also, if there are any best practices I'm missing regarding accessibility or semantic HTML, I'd love to hear suggestions.

Code

Please log in to post a comment

Log in

Community feedback

  • Andrey•4,140
    @dar-ju

    Hi Fernando!

    Great job! You did it well!

    I checked your work on BEM - everything is great, the only thing is header--hero - --hero can hardly be called a modifier, there is only one header, background-image can be moved to it, and the header--hero class can be deleted. But these are small things, basically everything is super!

    Your CSS structure using BEM is correct. In future projects, look at using SCSS, in conjunction with BEM it is a very convenient tool.

    See what can be fixed in project:

    • your task, as a frontend developer, is to make not only 2 options - desktop and mobile versions, but also the entire range from 320px to 1920px. Check the resolution 800-1360px there should be no horizontal scrolling, width 770px - the hero image is compressed, the columns with text below are too narrow. Everything needs to be checked.
    • press ctrl+wheel mouse down or increase the resolution in the browser - the footer background should really be the full width, but the content should be placed in a container and centered
    • I want to draw attention to your work with paddings. Using the hero block as an example. Paddings are used for indentation INSIDE the block. To indent the header from the hero, use margin-bottom for the header. Next, the indents of the child blocks should not regulate the indents of the parent, that is, H1 should not have padding on top, the hero should have padding, and H1 should not have padding on the right - for hero you use flex, so do gap: 8rem;

    Again - paddings for indentation INSIDE the block, margins for indentation BETWEEN the blocks

    • to make it convenient for users to call or write an email, it is better to make them active. For phone <a href="tel:+15431234567">+1-543-123-4567</a>. For mail <a href="mailto:example@fylo.com">example@fylo.com</a>

    Otherwise everything is great, good luck with the development!

    Marked as helpful

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