Feedback on My First Tribute Website

Code Feedback
1

Just created my first website. It isn’t anything special but some feedback would be nice.

2

Hi Jedi,

Looks good, if I had to give you a tip to improve your design:

  • Try to work with a “container”. With this I mean higher margins on your left and right side of your webpage. If you have a look at modern websites you will notice that the content is always inside a “container” in the middle of the page. You can even see it on this very page. The right and left 25% of the screen is just white.

Good luck with your future projects!

3

Thanks for the feedback! I think that will make my website look much better.

4

For the start looks good, you applied the basis for this, good.

It looks good in desktop, but not ready for mobile, but very easy to fix.

I suggest you use white background color over gray.

The quoted messages, you applied em or italic tags, this is really good!

Used alt attribute for the image tag, very good.

A very simple fix could make it ready for mobile. I realized a css rule you added breaks the responsive layout and it’s about the image

Your img css rule as following

img {
    display: block;
    margin: 0 auto;
     height: 400px; 
     padding: 100px; 
}

it has some issues, first try not use absolute units like pixel when possible.
height of 400px causes the browser always keep the 400px for the height, and calculate the fixed width, and keeps it too. so when screen is small, the image causes scrolling and layout break.

Having padding here also doesn’t make sense. My suggestion for a fix could be like following

img {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width:7in;
    height: auto;
}

now in small screen it fits to parent container, also when screen goes so wide, you could control the max-size using max-width

I also suggest you bring more light-height specially in list elements.

Also try to style the horizontal line at the top you added, and color it with more contrast

I suggest use relative units over absolute units when possible. In moany design, you can bring world-class design very easy without nay js , and even without any media queries.

keep going on good work, happy programming.

5

Thanks for the detailed response!