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
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 !
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:
@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!
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.
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.