Ieahleen asks feedback for Tribute Page

As much as I am pants at designing, I still want to get that certificate, but I can’t do it without at least trying to make my prjects look better

Could you please take a look at my Tribute Page project and give some feedback on it please?
I need brutal honesty and constructive criticism, I don’t like it but I can’t pinpoint what needs to be changed

1 Like

Hi,

First of all, I’m just a beginner, but still, I can give you some feedback.

Your webpage looks OK. It’s functional, and everything is here.

About the code :

  • As said in the HTML and JS editor, you should delete the comments to have the full space for your code
  • There are some part of code inserted, but not used : the JS <script> in the HTML editor, and the :root selector in the CSS. You could use the last one to store your color hex code, as shown in the freeCodeCamp course.
  • The look of the page is a bit outdated. Try to get some ideas from other website, and get some basis color/design stuff to make your page prettier in the future.
  • You could add a bit more structure to your HTML. It’s good you used the <footer>, so try to add the others : header, section, article, and the basic div.
  • I’ve noticed you’ve used media queries to make it more responsive. You can try and go further, and allow your two items to wrap when the screen width can’t contain them both !

Hope it helps !

1 Like

As someone who’s regularly struggling with coming up with a good design, here’s some rules that I’ve learned & usually apply:

  • typography is one of the most important aspects on a website, so the first thing I’d change is the default serif-system-font to something more modern (when in doubt I just pick one of the “big” ones like Roboto, Montserrat, Lato, Open Sans…). Also, black text always looks a little harsh, a very dark grey is usually easier on the eyes. letter-spacing and line-height is also something that can immensely increase readability
  • never be afraid to add whitespace / large paddings, the right side for example could use some space between image and figcaption, and the heading could be bigger with more space below it
  • since it’s so little content, I wouldn’t put those boxes side by side, but instead reduce the max-width of the whole page and stack them on top of each other. In full page view, the text in the left box looks a little lost in that big grey rectangle (plus the 2-column-layout breaks for small viewports)
  • it’s very easy to overdo it with box-shadow/text-shadow/border-radius, but using them carefully can soften the appearance of the elements a lot
  • I think I’d put the heading inside the separator

Ok and because I just happen to have the time (while I’m avoiding to deal with an annoying hardware issue), here’s what I came up with:

3 Likes

@jsdisco Uh, yeah, that’s really sleek, it seems what I tried to do for the Survey Form but yours is much more successful, I will keep working on it and see what I manage to do

@tpeyron Yeah, it’s a bit outdated but I am not much able to look at other designs and take elements of that. For the script, no, that’s fcc test suite, it’s totally used, I can’t just delete it. I will keep working on it and see how I can improve it, thank you for your comment!

1 Like

Hello there @ilenia

Is hard, but you will get it. Good graphic design knowledge will come to you like coding, is needed time, experience, practice, and study. I hope the links below let you be inspired.

Awwwards - Website Awards - Best Web Design Trends
CSS Design Awards - Website Awards - Best Web Design Inspiration - CSS Awards
Web Awards - by WebAwards.com
What’s Trending in Type · Typewolf
Web Design Museum 1991 – 2006
Homepage - Material Design

UI frameworks are a good source of inspiration too.

Styleguide & Boilerplate Patterns - Planilhas Google

I think to exist two other things very more difficult than coding.

1 - Have an idea.
2 - Put that idea into practice.

This is a bonus

icon 01 : Eric Jordan - YouTube

:slight_smile:

1 Like

Your page looks good @ilenia. Something to revisit;

  • Accessibility is about being accessible to all users. For a thorough explanation read Web Accessibility in Mind.
    • this wikipedia article” is not accessible
2 Likes

Thank you everyone, I worked on this some more for this day #100DaysOfCode round

@Roma, fixed the link, “wikipedia article on crystal engineerin” should work as descriptive anchor text

@jsdisco thank you for your suggestions, I think it’s a bit better now, but it probably needs some more work. I abandoned the two columns layout as you suggested, and gave some shadows and round corner to the elements and played with the positioning.

2 Likes

I am a fan of boxes with shadows. But I sometimes overbox and overshadow. Try to be more sublime.

  1. Try a headline without box. Just plain text.
  2. Try a softer background.
1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.