Project one- tribute feedback

Code Feedback
1

Project One
How does it look? (I realise its not passing one test xD)
In order to get the buttons to work properly on hover, I had to remove padding equal to the amount of white border I added I’m not sure if this is best practice!
Any tips on where to learn more about design (for a beginner) would be appreciated too :slight_smile:

2

hi @LukeAyres

nice job you’ve done.
only i found unusual way, how you structuring the unordered list.
the common use is like this:

<ul>
<li><a href></a></li>
</ul>
3

Okay thank you @sobadrdb but then only clicking on the writing within the button rather than the whole button links to the sections? This doesn’t seem as good a user experience to me, should I do something differently?
I’ve updated it so you can see what I mean :slight_smile:

4

I wouldn’t pay too much attention to design as a beginner, IMO proper functionality and understanding the code is more important. Some sources about it: DesignCourse on YT, Dev Ed has some web design materials. Look at some projects of other people and let them inspire you, as the time goes on you will feel what looks right. Traversy Media’s film " 10 Tips For Effective Web Design" is a nice one. About that unordered list: <li> tags should be the only children of a list. To give the effect you want you should add a style to <a> tag: display: block.

5

Neat that does the trick :smiley:
Thank you for all the sources I’ll be sure to have a browse, I appreciate the comments

1 Like
6

Page looks okay @LukeAyres. Couple of things;

  • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 9/10 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
    • One added property: value; and one change to a current property: value; in this declaration (#img-div img) will get all tests passing
  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are HTML coding errors you should address.
7

Thank you for the hint. The validator is useful- I’ll be sure to use this for each project before submission :slight_smile: