Tribute page, aka, my first web page

Code Feedback
1

Here is my Tribute page for the first code pen. Please give me any advice on cleaning up my code. Its my first one so i’m pretty sure there’s a lot of sloppy lines.

1 Like
2

Congratulations on your first page. It looks really nice :smile: My suggestion for cleaning up your code would be to have all styling ( background, fonts, etc…) in the CSS.

3

I am working through this myself and did my first tribute page 3 days ago and yours is very slick and clean though as the previous poster said you didn’t really take advantage of CSS as well the page was so clean the marquee seemed a bit out of place just my opinion overall great job I think.

4

In the video, it showed doing it without css. May be why he had done it without. I’m currently working on mine. The video shows only using the top-margin for css, everything else is blank for js and css.

5

Hope this doesn’t sound too harsh…

  1. Don’t use Comic Sans - it’s one of the most hated fonts in the world among graphic designers.
  2. Don’t use <marquee> - it’s one of the most hated tags in the world among web designers. It’s also obsolete.
  3. Using the <b> tag to make text bold is deprecated. Same applies for using <i> to make text italic.
  4. As others mentioned, put all your CSS in the CSS.
  5. You have spelling errors in the code which are preventing it from functioning correctly - positon and positoin instead of position. You also have spelling errors in your copy (“mothe”, “budhist”), though that doesn’t affect the quality of the code.
  6. Your images aren’t responsive. Try resizing the browser window and see how they move around (but don’t resize).

There are some positives, though:

  • Fulfilled all the user stories in the challenge.
  • Great quote and good placement on the page for it.
  • Love your use of katakana for the <ul>! Didn’t know you could do that. However, as this is a numbering system, it should semantically be an <ol> instead.
1 Like
6

@tomstrand I took another look at it and moved all the styling to the CSS. jpugh2692 You’re right about the marquee, i just added it to add some diversity to the layout. I took out the marquee and just underlined the text in the corner.
@lionel-rowe Don’t worry about harsh, I am trying to improve as fast as possible. I need good advice. So I did a quick spell check, changed the font and took out the marquee. I used span to change the italics and bold dates, Is there a better way to do this? Oh and I made the image responsive but now i can’t get the text to wrap around the image. I tried float but the img still covers the text, any advice?

Thank you all for your feedback, and for checking out my work. I look forward to seeing you around the forum.

7

Looks great!
I love the clean simplicity of it.
Only thing I’d change is trying to fit the text into the clean space as opposed to overlapping the background image on the left!

Great Work!

8

It’s looking much better already! There are still a few issues, though (this time I’m just looking at the end result, not the code):

  • Your background image aligns left and doesn’t fill the space.
  • The “learn more” link at the bottom is aligned weirdly to the sort-of-right-hand-side of the page, rather than centered.
  • On smaller screen sizes, the floating image on the right squashes the text too much. I guess it’s because its margin/padding is too large.

<span class=""> is your best bet, due to what’s called “separation of concerns”. HTML takes care of semantics (i.e. meaning), CSS takes care of visual style, and JavaScript takes care of functionality. This is also why it’s best practice to give your classes names which describe their meaning (such as .date), rather than their style (such as .bold).

As to why you’d want to do this, I made an example here to illustrate the point. (As I don’t want to clutter up your thread with off-topic stuff, please leave any comments on that example within the linked thread instead.)

9

Sorry about the late reply, I have been traveling quite a bit and haven’t had much internet access. @lionel-rowe I understand the tags a little better now. and the meaning vs style logic is quite intuitive once you wrap your head around how you’re going to use the spans. Aside from the aesthetivs, which i am working on, how do you sudgest i fix your 3rd point ([quote=“lionel-rowe, post:8, topic:93833”]
On smaller screen sizes, the floating image on the right squashes the text too much. I guess it’s because its margin/padding is too large.
[/quote]

). I have tried everything. at least everything I have been able to find xD. Please let me know if you have any ideas. @KodeKiwi thanks for the complement I tried moving the wording to the right. check it out and let me know what you think. Thanks a lot for all the help. Oh and I just started a thread about my second project, Portfolio, here so please check it out and let me know.