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
Oops! You need to be logged in to do that
Not Found

Submitted

Responsive landing page with curved sections

#sass/scss
Andrew Ezeaniβ€’ 250

@Andrew-ezeani

Desktop design screenshot for the Huddle landing page with curved sections coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View Challenge

Design Comparison

SolutionDesign

Report

5

Accessibility Issues

1

HTML Issues

View Report

Andrew Ezeani’s questions for the community

Any suggestions on how I can Improve my code is welcomed

Community Feedback

P
Vanza Setiaβ€’ 14,885

@vanzasetia

Posted

Hi! πŸ‘‹

I notice that the font family is not the same as the design. So, my first recommendation is to use the correct font family.

Here are several suggestions from me.

  • I suggest wrapping the logo img element with an anchor tag. It's a common thing that the logo will navigate the user to the home page. For example, clicking the Frontend Mentor logo will navigate you to the /home page. But, if you are not logged in, it will navigate you to the root page (https://www.frontendmentor.io/).
  • I would expect the "Try It Free" button as a link element. As a user, I think the button is going to navigate me to another webpage. The same goes for the other buttons.
  • header should not contain the page content. So, I suggest moving the page content inside the main element. As a result, the only things that live inside the header are the logo and the "Try It Free" button.
  • I suggest leaving the alt="" empty for all decorative images, like the illustrations, background images, and icons. A page full of decorative images with excessive alt-text adds noise to the page.
  • Always specify the type of the button if you ever need to use it.
  • Add aria-label to the social media links. Screen reader users won't be able to know those social media links if there's no text content or label.
  • Remove all the styling from the html element. Setting max-width: 100vw and font-size: 16px is not necessary because by default the page is 100% width and has 16px. Also, it's not recommended to change the html or :root font size. By doing that, you won't allow the user to change the font-size based on their needs.

For your information, the sizes on the style-guide.md have nothing to do with the media queries. They are telling you that "this is how your website should look like at these screen sizes". As frontend developers, we should keep making your website looks good in between those screen sizes.

Currently, on mobile landscape view, the site is not looking well.

That's it! Hope this helps.

Marked as helpful

1


Robin Dela Cruzβ€’ 80

@robin-dc

Posted

Hi @vanzasetia πŸ‘‹, I would love if you could review my coding techiques so I can improve more. Thank you!

0

P
Vanza Setiaβ€’ 14,885

@vanzasetia

Posted

@robin-dc Sorry, what do you mean by "coding techniques"?

0

Robin Dela Cruzβ€’ 80

@robin-dc

Posted

@vanzasetia, suggestions or recommendation for my html and css codes😊

0

Andrew Ezeaniβ€’ 250

@Andrew-ezeani

Posted

@vanzasetia Thanks for the feedback, it was really helpful and I have implemented most of it. Please, I'm having problems making the desktop view on mobile responsive any tips on how I can go about it?

0

P
Vanza Setiaβ€’ 14,885

@vanzasetia

Posted

@robin-dc Sorry, I thought this is your solution page. πŸ˜…

So, if you want me to give feedback on your solution as well, give me the link to your solution. I would be happy to give some feedback on yours. πŸ˜‰

0

P
Vanza Setiaβ€’ 14,885

@vanzasetia

Posted

@Andrew-ezeani You're welcome! πŸ‘

Sorry, I don't understand your question. Are you asking for tips to make the site looks good on mobile view or on desktop view?

Also, there are some things that I need to clarify.

  • The logo and the "Try It Free" button should live inside the header element.
<header>
  <a href="/">
    <img src="images/logo.svg" alt="Huddle - Home" class="navigation__logo">
  </a>
  <a href="#" class="btn btn--small">
    try it free
  </a>
</header>
  • For the h1 and the rest of the content should live inside the main element as the first child element of the main element.
<main>
  <section class="hero">
     <h1 class="heading-primary">
      build the community your fans will love
    </h1>
    The content of the first section goes here...
  </section>
  the rest of the section...
</main>

0

Robin Dela Cruzβ€’ 80

@robin-dc

Posted

@vanzasetia sorry, I'm a new user πŸ˜… https://www.frontendmentor.io/solutions/responsive-fylo-landing-page-desktopfirst-workflow-_IqAYvSQ5l This is my latest solution

0

Please focus on giving high-quality, helpful feedback and answering any questions Andrew-ezeani might have. Here are some key points to consider:

  • Does the solution include semantic HTML?
  • Is it accessible, and what improvements could be made?
  • Does the layout look good on a range of screen sizes?
  • Is the code well-structured, readable, and reusable?

You can read our community guidelines if you're unsure what to post.

Slack logo

Join our Slack community

Join over 100,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!