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
Not Found
Not Found

Submitted

Front-End-05-fylo-dark-theme

omarram21• 110

@omarram21

Desktop design screenshot for the Fylo dark theme landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


do you like my worke ?

Community feedback

Raymart Pamplona• 16,140

@pikapikamart

Posted

Hey, great work on this one. In terms of layout, both desktop and mobile is good.

Resizing though causes a scrollbar to appear at point 850px going down to 700px which we really need to avoid. You might want to check that one out.

In terms of UI. Suggestions would be that.

  1. Colors needs to be adjusted. Right now, you are using only one color for every text content that you used. The downside is that, you can't really see what you are highlighting or giving importance to. A good example would be that, making the heading title's color more whitened than the text below it. Because this mean you are giving importance to the heading which is really important. Because using only one creates conflict in terms of importance.

  2. Line-height/ spacing. This is important as well because those elements needs space as well. Adding some margins, paddings or gap is good on those. Because if just set a section with headings and text without using enough spacing, it is very hard to look at and get bored to read.

In simple terms, you need contrast

For the Markup.

  1. Avoid using more than 1 h1. Use only 1 h1 per page. It may look fine but users who prefers screen reader might get an issue on those. You can use other heading tags but avoid using multiple h1 in a page.

  2. I second to what @Gamygams1234 about the form. You should have used a form element instead of using button on that. Because a user needs to fill out something right, so a form is needs as well as input either text or email. Refactoring this will be really awesome because you need to apply some verification as well using js. Also add cursor: pointer on the button element or other element which you think is an interactive element

  3. On your footer sections, those links are supposed to be nested in their respective a tags. They are links right, so nesting them inside a tags will make your markup more semantic and well structured.

  4. Lastly, maybe removing other html elements. As I can see, there is a whole lot of html elements being used that is somehow "redundant" because we can achieve the layout without using all of those. Think as if html element is limited, only use what is needed(I like this line very much, I used this once before and I think I own this hahaha).

Though it is a lot, it will be really beneficial if you could somehow apply some of those. You can see my solution on this one and if you need help, just drop it here okay^^

0
Gamaliel Burgos• 330

@Gamygams1234

Posted

It looks okay, but I can't quite get the forms to work on my Samsung. It seems like you used buttons instead of an actual form.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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