My Tribute Page: Spock

My Tribute Page: Spock
0

#1

Hello there! I have just completed the tribute page challenge. I would really appreciate any feedback!
You can see it here: A tribute page about Spock

Thank you,
Stamatia


#2

Well done! Some issues you should pay attention to:

  • You shouldn’t really use images for text (like you did for the sections’ heading or the title). Try searching for a webfont similiar to what you need and use that instead.

  • Don’t wrap your content in a jumbotron. That’s mostly used for headers and such. Wrap it in containers, instead. Then, separate your content through rows. If you want the background color of the jumbotron, just give it to the body. Also, since you’re using <section> why not use <header> and <main> as well?

<header>
 <div class="container-fluid">
  <div class="row">
  ...
  </div>
 </div>
</header>
<main>
 <div class="container-fluid text-center">
  <section>
    <div class="row">
    ...
    </div>
  </section>
  <section>
    <div class="row">
    ...
    </div>
  </section>
 </div>
</main>
  • Your two starting images (one of them being the title) don’t adapt when you resize the browser window. Try using the img-fluid class. And use <br> (or padding in css) if you need to have some space, don’t use <p>, that’s a paragraph!
    <a href=""><img src="" alt="star-trek-font" class="img-fluid"></a>
    <br>
    <br>
    <img src="" class="ImageBorder img-fluid" alt="A close up image of Spock"> 
  • Your section with the three images doesn’t grow vertically on smaller resolutions and your images overflow other content. That’s fixable by wrapping the content inside a row, using the img-fluid (or img-thumbnail) class on the images and wrapping them inside a col based on your needs. You don’t really need all those inline style, as well.
<section id="Gallery">
  <div class="row">
    <div class="col-sm-4 col-12">
      <img class="img-thumbnail m-2" src="" alt="Spock close up">
    </div>
    <div class="col-sm-4 col-12">
      <img class="img-thumbnail m-2" src="" alt="Spock salutes in Vulcan">
    </div>
    <div class="col-sm-4 col-12">
      <img class="img-thumbnail m-2" src="" alt="Spock and Captain Kirk">
    </div>
  </div>
</section>
  • Don’t use the font color attribute, use some css!
  • There were some unclosed tags through the page, pay attention to those.

Other than that, I like how you organized the page. If this was [one of] your first work, good job!

I forked your portfolio while I was writing this post. I didn’t touch your css (aside from giving the background color of the jumbotron, and the color black to the link), just the html. If you want to see the differences, you can here.


#3

Hello! I loved your feedback! Thank you! It is my first attempt to write in code and I am not fully comfortable using it yet.

  • I used images for text because I couldn’t find a similar font, and there was a generator willing to help me :stuck_out_tongue: And when I found a star trek font, I couldn’t upload it somewhere (I do not know the process of uploading files to github, for example, as mentioned in one solution).
  • Jumbotron was indeed wrong, and I must admit that the example given confused me a bit.
  • You were right to point out that I should use header and main. The “platform” used for the challenges is somehow different from the codepen and at first I found it difficult to separate the elements I shoould add in the html section and the ccs.
  • For the gallery I read codes for grids and boxes and i tried different options but I failed most of them :stuck_out_tongue:

You are a saviour here, and I really appreciate your help! Thank you for the time you devoted to read my code and correct my mistakes!


#4

It’s all good, for a first attempt it was very well made as I already said. Also, no problem!

If you want to upload files to Github and you’ve taken the github tutorial, you just need to go into the repository the tutorial made you create and upload your files there.


#5

Hi! I love the aesthetics of your page, you do the Star Trek theme really well!


#6

Thank you very much Chloe :slight_smile: