Tribute Page: Ramen

Looking for feedback in order to improve the look and the code. Have been stuck for a few days restarting the project over and over again. Decided to just put this out there and let the FCC community help me move forward.

Here it goes: https://codepen.io/inputoutput1/full/JwOBbO

1 Like

So the structure is all kinds of wonky. Its a tribute to the browser that it renders as well as it does. :wink:

Try this as a start:

<!DOOCTYPE html>
<html>
  <head>
    <title>...</title>
  </head>
  <body>
<!-- your displayed content here! -->
  </body>
</html>

All your visible content is placed within the body tag. Start with that, we’ll work on the rest.

1 Like

Done. Thanks for this, I knew I was completely off on a few things :joy:

On Codepen you can also just remove the title and body elements, Codepen doesn’t need that. But i would suggest you make sure you know and understand correct HTML structure.

You need to add the test to your page.

You are failing the image test. You need to target the image and set it’s display value to block, then set a max-width value of 100%

1 Like

Yes. I still pretty much need to keep practicing the very basics. No previous experience with code at all here.

I added this to address the img test

 #img {
  display: block; 
  max-width: 100%;
}

Almost, now you just need the right attribute name, you have this in the HTML id=“image”, and this in your CSS #img.

1 Like

Done. facepalm

Thanks for the patience.

Here are a few things you can try.

  1. I would center the img-caption text, use text-align: center, also “content-position” is not a thing, you can remove that.

  2. I can see you have already given the tribute-info div some flex properties, flex-basis: 50% is one of them. However, it’s parent container (the footer) needs to be set to display: flex. After you do that, flex-basis: 50% will kick in. Now you just need to center it. Again, on the parent container use justify-content: center

  3. Increase all your font sizes, after that you may have to increase the flex-basis value, maybe something like 65%

  4. The tribute-info doesn’t really belong in a footer. I know we just did all that work and now I’m telling you? Well, it’s good practice. Let’s move the tribute-info div out of the footer and give it a new <section> element as it’s parent. Now we need to use the same CSS you had on the footer on this new section element.

  5. We have an empty footer now, that’s no good. Let’s put something in it. Add a paragraph element inside the footer, write “Made by yourname”. It should be centered, otherwise you know what to do.

Ok, that is enough for now. Happy coding.

1 Like

Done, done, and done.

Thanks for taking the time to point me in the right direction!

Your image is so cute! I love the little animation to it too~

Couple things I saw in the code…
For your image caption, you used an h5 tag in order to get the right sizing for your caption.

I’d change your < div> tag after your < body> tag into a < main> tag, to help with semantics.

Also, you could wrap your < img> tag inside of a < figure> tag and use < figcaption> tag around your caption text. you can then add the necessary id’s to your < img> and < figcaption> tags and have a semantic code.

  <main id="main">
  
     <h1 id="title"> rāmen / 拉麺</h1>

    <figure id="img-div">
        <img src="https://66.media.tumblr.com/86aa355221d807e11fedc2c2473c4ee6/tumblr_n9w7k3K7Je1snc5kxo1_500.gif" id="image">
        
        <figcaption id="img-caption"><em>Pictured above: Shōyu ramen, the oldest of all variations.</em></figcaption>
      </figure>

(Your other content)
   </main>
(Then footer, end of body, end of html)

This all passes the tests too! :slight_smile:

1 Like

Look at you, getting all semantic and passing-forward and stuff! Great work on the page, @Stketcher. Looking pretty solid.

Two things to note, one of which is a thing, and the other of which is… a different thing. :wink:

  1. In the down-arrow on the right side of the HTML pane in codePen, the first option is ‘Tidy HTML’. It adjusts spacing to make the code itself a little more sane and understandable. Not a vital piece, and not going to pass or fail any tests, but clean code is a helpful way of self-documenting. I can tell at a glance how deeply nested a node is, simply by how deeply it is indented.
  2. The <h1> is a block-level tag. All header tags are, <h1> through <h6>. So you’re nesting a block-level element inside a block-level element. Not necessary, and adding a layer of complexity for no reason. I’d remove it, and simply change your <h1> to <h1 id='title'>.
1 Like