Just completed my my first project (Tribute Page) and looking for feedback

Just completed my my first project (Tribute Page) and looking for feedback
0

#1

Hi guys,

the very first time I developed a webpage and coded it from scratch. Therefore I am happy for any feedback.

Thx
Mirko


#2

Looks good, one thing i would change is when the screen gets smaller and the image is moved under the paragraph, you could center the image


#3

Thanks for your feedback! Good suggestion - just done.


#4

oh that’s so good! lol like really.
when I did my tribute way back in the day (last week) I put everything in one ‘well/card’ but you have this page done in sections and that looks really good to me @MirkoH.

  • nice ‘boxes’ and ‘boxes’ inside ‘boxes’ on your page . Actually that’s what I love most about it. I mean aw man! I was having so many problems with margin, padding and that stuff but looking at your code answered so many questions for me omg tysm!
  • and the layout is so easy to read. like i don’t even care about Helene Fischer but your page makes easy to learn something about her. The flow is so good it’s like your forced to read it lol.
  • but most of all I have to say your code is very clean. I’ve looked at other pages and tried to learn form them but the code wasn’t easy to read for me. But this is so good dude.
  • nice Bootstraping too.

I wana offer some advice too. But before I do i wana say I’m not bashin your page it’s fine the way it is and I’m not completely sure bout this because I’ve been doin’ this for only as long as you have but, I think using more JS and less CSS might be better. I don’t know, I feel like I heard that somewhere here.


#5

How would we go about that @mykola2306?
Add ‘image: center’ to the Bootstrap cell?
Wouldn’t Image-responsive do that automatically?


#6

Thanks so much @Zip!
Re your suggestion: you might be absolutely right, but so far I have no knowledge about JS as it is later in the curriculum. Therewith I was limited to css and bootstrap.


#7

Oh :thinking: I think I meant jQuery.
Yea? idk.
Nyway ur welcome man, we gota support each other round here.


#8

@MirkoH Your HTML structure is done well, as @Zip notes. Here are some ideas for improvement:

  • Use the proper document structure:

    We must always be sure to the use proper document structure, including the <!DOCTYPE html> doctype, and the <html>, <head>, and <body> elements. Doing so keeps our pages standards compliant and fully semantic, and helps guarantee they will be rendered as we wish.
    (Source)

    You can learn more about this document structure in Free Code Camp’s beta curriculum (1 | 2).

  • You may want to implement <header> and <footer> sectioning elements. These are good for making code more readable:

    Current:

    <p class="text" id="footer"><i>Written and coded by Mirko Hannig</i></p>
    

    Semantic:

    <footer>
       <p class="text">Written and coded by Mirko Hannig</p>
    </footer>
    
  • You may want to add comments to your CSS. This is totally optional, but really helpful for helping others read your code.

  • Some developers suggest not using id selectors in your CSS. This likely isn’t a big deal on your current page, but it’s something helpful to know for future reference.

You did great work here! I’m looking forward to reviewing your future projects. :sunny:


#9

God! I swear I :heart: this forum!!!
I learned that stuff but it’s like, hearing it from someone really helps drive it home.
Here’s a question though:

  • see how you removed his id=“footer” and put his footer in a footer element? How would we target that w/ jQuery? By type (should i be saying attribute)?
    e.g.
$("footer").functionHere("changeHere");

?


#10

@Zip I think what you have will work, yes. <footer> is the same type of native HTML element (as far as JavaScript and JQuery are concerned) as <html>, <body>, <p>, <li>, etc… Here’s the relevant FCC challenge.

In that example, "button" can be exchanged for any HTML tag, "footer" included.

Does that sound right to you?


#11

Thanks @camper for your detailed feedback.

I went without Doctype and html based on the instructions I got here: https://medium.freecodecamp.org/codepen-tips-and-best-practice-cf926ebd0b11 under the section “Let´s remove some things”.

But indeed I have to add a body element.

Thank you much for the tip with ID selectors and footer. Was not aware of that: I will change respectively consider that in future projects.


#12

Yea @camper. That’s it.
And I’m pretty sure that’s called semantic naming but I’d have to go check the thread I learned that in.