Responsive, No Frameworks, Flexbox

Hiyo,

Let me start by saying your website looks really awesome! Very neat, works well on all screen sizes! My only problem with it is your HTML, which is a bit of a mess (I suppose you can see this by the amount of issues you have in your report). Making a website look good is one thing, but you should also make sure it's accessible for everyone. ^^ To fix these issues, I have some suggestions:

1. You could wrap your mobile menu in a header instead of a div. There can be more than one header element in your website, fortunately.

2. All your sections should be wrapped in a main, as that's the main content of your website.

3. LOGIN button. You used 2 different elements for it, a div with a h1 for the mobile and an a for the desktop view. It should be either an a or a button, but using a div and styling it like a button is definitely incorrect.

4. Hamburger menu: this is supposed to be a button, so wrap the img in a button element and give it an aria-label="Toggle mobile menu" to make it obvious what it does even for people who can't see it (using an alt of hamburger isn't very helpful, is it).

5. All your nav menus could contain a ul for your links.

6. I'm not going to point out all the incorrect alt texts, I'll just leave this helpful article here. :) This is all you need to know to write better alt texts in the future ^^

7. Heading levels: they're all over the place. You could watch this video, this shows very well why using the correct headings is very important.

8. Chrome and Firefox buttons: again, please use button element for buttons. You can't just style a div and call it a button :)

9. FAQ: please wrap your images in button elements. You can style them with CSS later.

10. Social media links: wrap them in a tags, they're links :) Don't forget to use aria-label with them as well, as they don't have a text description.

That should be most of the semantic issues. I can see that you're already very good at making things look great but I warmly suggest you read a bit about semantic elements and accessibility, those are important aspect of our job as well! I leave an extra video here for you, this is a good place to start. The articles from Scott O'Hara are also super helpful.

+1 tiny issue I found: your Contact Us "button" (please use a button here too :D) "jumps around" a bit when hovered. This is because it has a small border on hover but none when it's not hovered. Giving it a border unhovered and setting it's opacity to 0 would get rid of this problem ^^

Apart from this, I think what you did here is really impressive, especially considering you didn't use any frameworks! I'm gonna bookmark your solution for sure, as a reference for later. ^^ Just read a bit about semantic HTML and accessibility, and you're good to go.

Good luck :)

hi @titocs. I very impressed I am going to surely us this work as my guideline to do similar landing page

Hey @titocs ,

I’ve taken this challenge and also used pseudo-class for the list. You need to add width: 100%; in your :after so the borders take up the whole space.