Muhammad Ali Tribute Project

Code Feedback
1

Hi,

I would like to ask some feedback on my first project.

What I would like even more is advice on how I could have done this better both in terms of design and coding. For coding in particular I would love to know how I could have made it cleaner and if there was anything important that I missed or how I could have done it more efficiently.

Outside of the normal challenges an aspiring web developer faces like using the right tags and attributes etc. I would say the thing I found most challenging is something that didn’t make it into the website or is only partially represented. I wanted to make the top border very thick and the side borders a bit thick and have no bottom border.

Basically, I wanted to have the “border design” look like Ali’s boxing trunks with the Everlast logo in the same place he had it on his waist but on top of the top border of the website. I tried for like 4 hours straight going so far as to try flexbox after watching a 20 min video but I unfortunately could not make it work so I removed it. If anyone can tell me or show me how to make that work it would be so awesome!

I was looking for projects to do while only knowing basic HTML and CSS. This other site took me to this project. I have finished the course up to the start of visual design but I was shocked to see I actually needed to know the rest of the course to do it. Instead of leaving it for later I decided to try it anyway and just google whenever I got stuck. Which worked to a certain degree but I’m definitely finishing the rest of the course and trying this again.

Anyway, thank you all so much for reading. I appreciate any feedback, advice and help the community is willing to give.

2

If I am understanding you, you want the Everlast symbol centered at the bottom, and large. I wouldn’t put it in the border or flex box. I would just put it in an element and use margin:auto; on it so it is centered.

I highly recommend going through the course and attempting the projects as they come up in the curriculum. Having Google has it’s pros but also comes with the caveats of picking up bad habits and not retaining the information or fully understanding when to use it and why to use it.

TO answer the border question:
To alternate the weight of the border, use the border-width property and short hand. Remember that HTML loads in starting at the top and working clockwise. So it breaks down like this:
1 attribute: All 4 sides
2 attributes: Top/Bottom, Sides
4 attributes: Top, Right, Bottom, Left

The example below is from your code with the border-width and 2 attributes added. Updating this will change the sizing. You can also change it to use 4 attributes with the 3rd attribute being 0px to achieve what you are trying to do.

body {
    border: solid black;
    border-width:20px 5px;
    background-color: white;
}

I feel like there are a lot of things that this page could be changed for the better. I like the idea of it; however, the courses will help implement proper practices for how to use the code and elements to your favor, which will be a lot less work for you as well as the browser.

1 Like
3

Thank you so much for the feedback and advice. I appreciate it so much! Definitely going through the rest of the course before attempting again. Looking forward to updating this project.