markdown guide
 

I like the way the business casual guy's mourning the loss of his upright vacuum cleaner. He's still got little purple dust bunnies to deal with but it's too late.

On a more serious note, I get the local development settings when I hit "log in", so there's a step missing in your deployment somewhere.

 
  • I like the text effect of the introduction and the font family for the title but it's too much for the lines. Instead use Righteous,cursive for the lines;

  • When no results are found the page jumps to the top. You can prevent this if you put a div with some padding and the default text that everyone already told you about.

  • Padding is your friend to create breath and space! Decrease the margin of product cards and add more padding (mainly on the top/bottom) to it. If you do it it's going to look off, that's because you had to put top:0 to the ProductCards Content

  • Add more padding (x) to the introduction on mobile

  • Add more margin (y) to the ProductCards on mobile.

I'm enamored with the logo and the header.

 

I'm hesitant to provide anything critical, because I know the hard work that goes into putting a product out there and overall I think it's a great job. So I'll evaluate from a user experience perspective.

For me, I'm not a fan of the text under "Welcome to SPFound". The letters appear too close together and coupled with the fact that it's on a slant, it makes it hard for me to read.

I also think the filter by category is a little confusing. It's hard to tell by clicking on a category if anything is happening. It wasn't until I clicked on Software when everything disappeared did I realize that it was filtering and at that point it removed everything. A couple suggestions for improvements would be:

  • Only have filtering categories if an item exists in that category. So there may not be a need to include a Software filter currently.
  • Indicate somehow which one is the active filter. If I click on website, maybe it should indicate that filter is active and clicking it again would remove it.
  • I think the filters are a great thing to have in the future, but they may not be needed while the list is small and easy to see. Only when it becomes larger are they more important. Otherwise their functionality may be confusing.

Hope those suggestions help to spark some creative ideas. Great work!

 

First of all, great job dude!
i like your background, where i can get those images from?
i dont like the font u are using beneath the headline. its kinda hard to read for me. maybe change that :)

go on!

 

Thank you, I got it from undraw.com. I'll definitely change the font.

 

A couple of notes:

  • With 1920 x 1080 resolution, the small text on the title is overlaid. I advise you to correct the "line1" and "line2" height. @media screen and (min-width: 1400px){ line1{ height: 45% -> 50%;} line2{ height: 49% -> 55%;}}

  • Maybe it's on purpose, but the image disappears at 971px width while testing for responsiveness to minimum possible width. You could place the image between the blue background and the title between 730px and 971px.

  • Maybe add some text when there's no results for a category.

Keep up the good work!

 

Thank you for the feedback. I really appreciate it. I will start working on those points right away.

 
  • If there are no results for a category, it'd be nice to convey that to the user somehow, rather than leaving it totally blank.
  • Having a "Home" button in the nav bar feels a bit redundant on a single page app.

Really love the header.

 

Thank you for the feedback. I will be sure to add some text to inform users when there are no results.

The website does have another page, but I still have yet to finish the page before implementing it to the website.

 

It's a tiny nitpick but dang the shade of blue on the project cards is just burning my retinas. Also how the view moves around jankily when changing filters.

 

All feedback is appreciated even if it’s tiny.
Anyways, I will sort that out as soon as possible.

 

the product cards should have a margin top and bottom in mobile view, and the nav bar should be stay too.

 

On a desktop, I think the links at the top right of the navbar need a little more spacing between them. Just for elegance

 
 

check your console, it has an infinite error messages of "VM10860:1 Uncaught SyntaxError: Unexpected identifier"

 

Oh, I see that error now. It only happens when you press the 'All' Filter button.

Thank you for pointing that out to me.

 

the header-banner-layout is broken and nothing happens when I click the projects on the bottom.

 

Thank you for pointing that out to me. I will be sure to fix these problems soon.

 
 

Was this your 2 year old's first website? πŸ˜‰

 

Ouch that hurt haha. πŸ˜­πŸ˜­πŸ˜‚

Classic DEV Post from Jan 1

5 Things You Can Do To Write Better Code

The way you write code says a lot about your ability. Here are a few tips to write the best code that has ever been written.

Yuri Alves profile image
I feel like I am a very curious person. Which has led my life to head many directions that have brought upon me different skills. I have learned, how to code, make simple music and various skills