Needing feedback on my tribute page

Hi, I’m completely a beginner. I would like to get feedback from anyone to make my code simpler, shorter, or cleaner on this tribute page. I would appreciate all of you! thank you so much! :* <3

3 Likes

Hi, To make the code more readable than use the semantic tags for example instead of <div id="footer"></div> use <footer></footer>
<main></main>,<header></header> etc

2 Likes

Hi @rosebahan !
Your page looks good. Good use of images and nice style.

  • It’s responsive but can be more by a media query of reducing font size of h1 when screen width is less than 320 px. Also don’t use <br>.

  • Last thing, you don’t need <head> in codepen, only the code of <body> goes inside the html section. You can put the head stuff in the “stuff for head” in settings for your pen.

Nice work!

1 Like

Oh I see. Thank you for your feedback. What should I use then if not br? I want spacing for those elements.

Which part should I use semantic tags? Thank you. :slight_smile:

CSS is for this purpose😀

1 Like

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

I see like line-height? But lol i tried it, unfortunately it looks odd as it put a lot of spacing. Didn’t achieve the style I want

Hi @rosebahan !

Welcome to the forum!

Margin is used to create space between elements.
You should try that.

1 Like

for example use main tag instance of div with id attribute main or use footer tag instance of div with id attribute footer and for different parts of site use section tag

1 Like

Oh yeah. Thanks. I think I forgot the margin as I used to put br first .

Oh true. Thanks but the Id= main is part of the project requirement. But yeah, i guess I tend to use div instead of semantic tags. But duly noted, thanks.

Thank you. Do you have comments on my CSS code? I would love to hear your comments about it as well

And do you have comments on my CSS code. Would love to hear your feedback on that as well. Thank you!

And do you have comments on my CSS code as well? I would like to hear your feedback on that as well. Thank you

It’s good, nice and clean CSS code, you are doing great so far . At this point very few people have good CSS skills. You can see my page I made like 2 months ago
my tribute page
but I improved later

1 Like

Thank you lol but I think my code is longer. I really want to make my first tribute page responsive, beautiful and of course with clean code. :slight_smile:

Nice. Your tribute page looks awesome :sunglasses: :). What courses have you finished here? Lol this tribute page is the first project I’ve ever done so far.

1 Like

I have finished Responsive web design and currently learning JavaScript. this is what I made last week to review html-css.

1 Like

First of all. I started reading. That is a good grade :slight_smile:

I think it is good that you are using variables for colors. I have recently discovered hsl() as an extra benefit when it comes to a uniform design of a website.

Instead of

  --black: #000000;
  --dark-gold: #B88746;
  --white: #FFFFFF;

You could use:

  --bg: hsl(270, 60%, 98%); 
  --dark: hsl(270, 60%, 50%);
  --medium: hsl(270, 60%, 70%);

You can edit the brightness by editing the third parameter in hsl. The above is the same color with different brightness.

1 Like