Tribute Page - Completed

[sunilaadewar]

I completed a simple tribute page.
made tons of mistakes.
Please check out and give me feedback and help me to improve my skills.

Code : https://codepen.io/sunilaadewar/full/LYrdNKe

[kevinSmith]

It looks pretty, good. Good job.

One thing I would recommend doing is putting your html code in a validator, like here. You can ignore the first three because they are because you are doing this in codepen. In “real” coding, a lot of these things would be flagged by linters or code smell checks.

I think class names like “item” and “one” are a little vague - you can get away with them on small projects but as things get bigger, you’ll run into trouble. A good name tells future coders (including you) exactly what something does. Naming things can be hard but is very important. But it also gets better with practice.

Especially think about using h1-h6 to denote the hierarchy of your page. You want to think about h1 for the page title, h2 for the section headings, h3 for sub-sections, etc.

Here:

            <a href="https://starwars.fandom.com/wiki/Kanan_Jarrus" id="tribute-link" target="_blank">Excited!! Know
                more about <span>KANAN</span> and <span>STAR WARS</span> </a>

I get that you used:

footer a span{
    border-bottom: 2px solid white;
}

to target those, but I would have given those a class name. Just seeing the span in the HTML confused me as to why until I dug through the CSS.

It doesn’t look great on a mobile screen - look at it with the width set to 390:

You have:

.img01, .img02, .img03, .img04, .img05, .img06, .img07, .img08, .img09, .img10, .img11, .img12, .img13, .img14, .img15, .img16, .img17, .img18 {
    border: 1px solid white;
}

Wouldn’t it be easier to just have one class for that attribute and give it to each image? That way you wouldn’t have to worry about forgetting one in the list here. Similarly, you seem to have some attributes that you give to each image that could go in there.

But still a good start. I like that your code is well formatted - that is a good habit to pick up early.

Have fun on the next project.

[sunilaadewar]

Thank you for your feedback.
Your feedbacks are so helpful for me to improve my skills and I will follow your instructions carefully.

Thank you