Tribute Page - Hiroshi Yamauchi

Code Feedback
1

Project Link - https://codepen.io/lindleycaleb/full/yqZemN/

This is the first complete website I have ever built and at first I tried making it very complicated and found myself in over my head, so I made a minimalistic layout I think is aesthetically pleasing. My biggest struggle is with trying to size the page to fit any screen size. I appreciate any feedback :slight_smile: thanks!

2

It looks really good, honestly I like the design and it’s straight to the facts. But I can agree with you on the “fit on any browser size”, it’s hard even for me. None the less I’m on my iPhone 5 right now and I took a look at your project, as far as my end goes it wasn’t responsive to my screen size. I’m sure you can easily fix that easily.
But still well done. You can check my tribute page I made last week as well if you want. I’m sure I’m missing something.

3

i really loved the design and the fact that you gave it your own touch and didn’t just copy past the same style.
you only need a little bit of work to make it responsive.

4

Look pretty good, unfortunately it is not fully valid HTML.

  1. Quick note, on codepen you only need to add the HTML from inside your body. To add stuff to the head on codepen open the settings and look for "Stuff for <head>" under the HTML tab, add your meta tag here. Same for external JavaScript, go to the JavaScript tab and add the FCC script file there.

  2. You are missing a opening UL tag, you only have a closing one.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li

  1. This is not valid HTML
<p class="p">
  <li class="border"><strong>1927</strong></li> - Born in Kyoto, Japan.
</p>

If you look in the developer tools (in the browser right click you list and select inspect). You can see how your <p> tags are being rejected as parents of the <li>, the <p> tags get “ejected” and end above and below the <li>'s. You can also see your class="p" styles not actually affecting the text in the list (add “color: red” to the class="p" selector to see this).

This would be valid:

<ul>
  <li class="border">
    <strong>1927</strong>
	<p class="p">- Born in Kyoto, Japan.</p>
  </li>
</ul>

I would change the way you are achieving the list layout. Something like this.

  <ul class="dates">
    <li>
      <span class="date">1927</span>
      <p class="list-text">- Born in Kyoto, Japan.</p>
    </li>
    <li>
      <span class="date">1939</span>
      <p class="list-text">- WWII started; Hiroshi was too young for combat, so he went to work in a military factory until the end of the war.
      </p>
    </li>
    <li>
      <span class="date">1945</span>
      <p class="list-text">- After the war, Hiroshi attended Waseda University to study law. This is where he also met his wife Michiko Inaba.</p>
    </li>
  </ul>

CSS

.dates {
  list-style: none;
}

.dates > li {
  margin-bottom: 50px;
}

.date {
  font-weight: bold;
  border: 3px solid black;
  padding: 15px;
}

.list-text {
  display: inline;
  /* Add the text style you want here */
}
1 Like
5

Oh i forgot to mention that giving a fixed width to .introduction will make it inflexible, use max-with instead. Also use the <footer> element for your footer instead of a <div>

6

Wow! Thank you for the time you put into this. I will go back and correct the html you have pointed out to me. It makes way more sense how you have broken it down.

Thank you!

7

Definitely. Do you have any recommendations on how I can do that?

8

Yeah, haha I’ll figure out how to size it so it doesn’t look like a big mash. Thanks for your feedback!

9

Your welcome, do you know anything about Node.JS and what it does?

10

No not yet. I believe thats in the next section of FCC after I finish my portfolio page. I’m super excited to find out because Im finding myself limited by css but I’m also trying to master html/css before jumping into another category.

What does Node.JS do?

11

It’s a JavaScript runtime built on Chrome’s JavaScript engine.