Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted almost 4 years ago

Responsive website using HTML & CSS

Medjahdi Islem•275
@IslemMedjahdi
A solution to the Huddle landing page with curved sections challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


this my first complete landing page , What do u think ? should I start learning JS ???

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Raymart Pamplona•16,040
    @pikapikamart
    Posted almost 4 years ago

    Hey, awesome work on this one. Layout in desktop seems fine, though it is much shorted than the original, some elements as well are missing like the background-wave-images. The mobile layout seems fine as well I think but I don't know if the text are supposed to have those huge gap between them.

    Well you can learn js, but do not be derailed like going through the data structures and algorithm right now, you can learn those later but for now, go with just basic, with dom manipulations. Learning algo-ds right now will just confuse you to where to use them, dom manipulations should be first because you will very much use them.

    Some other suggestions would be:

    • The huddle-website-logo-link, the img should have alt="huddle" on it, since the logo itself have the text, better use it as the alt value when it is an img.
    • The a tag as well that holds the logo-link should have aria-label="homepage". This aria-label is an attribute that is used to an element who doesn't have any text inside it that could describe what is the element is all about. Since as you can see, the a tag have an img inside it, but there is no text, so when you use aria-label on the a tag, the value of that attribute serves as the text for it. You will use a lot of this on a tags especially when the content inside it have no text. The reason that it should be aria-label="homepage" is because, typically the website link points the user to the homepage right, this way, users will know that this link will lead them to the homepage.
    • Do not remove the outline property on elements, outline serves as a visual indicator for users, for example, try using the tab keys in your keyboard, you should navigate the button or a tags with it, but since the outline: none is present, there is no indication to where you are at right now. If you removed it, better use some visual in the :focus-visible state of the element in the css.
    • I think those try for free and get started for free will be much great if they were a tags, since right now, it doesn't look like those are supposed modals of some sort, where button are much use.

    FOOTER

    • The website logo img should also use alt="huddle" on it.
    • The social media links should be inside a ul element, since those are list of social media links.
    • Each a tag that wraps the social media icon should have aria-label since it doesn't contain any text. For the facebook, it should be like aria-label="facebook".
    • The input along with the button should be inside a form element, since that will server as a form to be submitted.
    • The input as well should have label element on it, so that there will be a text that will be read when the user navigated on it, or instead, you could use aria-label on it, like aria-label="enter your email", this way, users will know what to input.

    Aside from those, great work.

    Marked as helpful
  • Bikrant Malla•990
    @vikrantmalla
    Posted almost 4 years ago

    Add background in div three and seven. Learning JS makes it easier to develop a website but now HTML/CSS worked fine.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub