Skip to content
Submitted about 2 years ago

Responsive Huddle landing page using HTML and CSS

Swaraj•110
@swarajzz
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with alternating feature blocks
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

It was my first junior project, in the beginning it felt quite easy but got arduous for me in the footer section the responsive design also took a lot of time, but I guess somehow it turned out pretty well and I practised HTML structuring on a different level than I'm used to and I also learnt text-underline-offset: property. I feel like many things can be improved and I would love to hear feedback and advice on them.

Community feedback

  • David•8,000
    @DavidMorgadePosted about 2 years ago

    Hello Swaraj, congrats on finishing the challenge, your project have responsiveness and the layout is very clean in my opinion, great job!

    The only thing that bugs me a bit is that you put your section-hero inside of the header, I think that it feels more semantically to just use your logo and the 'try free' button there, then add that section into your main as a separated section! Another thing that can give even more semantically meaning, would be to set the container-text-box into article tags since the content inside of them are related!

    Apart from that, no comments on your CSS, you did a great job there, the html suggestions were just minor things!

    Hope my feedback helped you!

    Marked as helpful
    1
    Swaraj•110
    @swarajzzPosted about 2 years ago

    @DavidMorgade Thanks a lot for the feedback, I just updated it. But after adding article tags I was getting a warning: Article lacks heading. Consider using h2-h6 elements to add identifying headings to all articles, but it got fixed using aria-label="article" (I'm not sure why).

    And can you tell me what is this accessibility issue of Ensures landmarks are unique?

    1
    David•8,000
    @DavidMorgadePosted about 2 years ago

    @swarajzz That error is probably being cause by your aria-label wich is the landmark that is refering, the article thing should get fixed if you add headings.

    1
    Swaraj•110
    @swarajzzPosted about 2 years ago

    @DavidMorgade That accessibility error was still there before updating to article tags and adding aria-label.

    0
    David•8,000
    @DavidMorgadePosted about 2 years ago

    @swarajzz Do you mean the 'article needs a heading error' or the 'ensures landmarks are unique?'

    1
    Swaraj•110
    @swarajzzPosted about 2 years ago

    @DavidMorgade The article error got fixed after using aria-label:article, I'm talking about the ensures landmarks warning in accessibility issues.

    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