Tribute Page Feedback LK

[lydia.sanchez.writes]

Hello!
If anyone has a free moment, can you look over my tribute page for any fixes or tips on best practice? Thanks!

Haruki Murakami Tribute

[Philip_B]

I like it. Are you going to add CSS?..in terms of the “head” element, i thought it wasn’t that long since it includes metadata that’s usually not seen on screen:

HTML head Elements

You can also read about meta charset=“UTF-8” and improve your responsiveness in terms of sizing on smaller screens:

HTML Responsive Web Design

[jinwithwings]

First of all, I love the aesthetic choices you made for your page, and how you organized your content! Murakami fan here as well

Take what I say with a grain of salt, as I’m in a similar place of my learning journey (also just finished my tribute page project), but I was under the impression that everything you would put in the style section should go under the CSS portion of CodePen. You currently have all of your code under HTML, but I believe that section is just for the content, or what would go under the body tag. A simple copy & paste should fix this issue, however. Great job!

[jwilkins.oboe]

Hi @lydia.sanchez.writes !

Congrats on finishing your first project.

Here are some thoughts from me

As was mentioned earlier, you have all of your content in one html file.
You want to start practicing now separating out your content and styling when it comes to building out projects.
This will make your code a lot more readable to see the html and css sections, instead of one long html section.

When it comes to codepen, the head section is actually setup in the html settings.
All of these links should go in the html settings.

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">

You have a few instances of repetition in your code.

Here are the places I am looking at.

   img {
      display: block;
      justify-content: center;
      align-items: center;
      width: 100em;
      max-width: 100%;
      height: auto;
    }

    #img-caption {
      display: block;
      align-text: center;
      justify-content: center;
      font-size: 1em;
      opacity: 0.4;
    }

   #quote1 {
      margin-left: 5em;
      margin-right: 5em;
      margin-bottom: 2em;
    }

    #quote2 {
      margin-left: 5em;
      margin-right: 5em;
      margin-bottom: 2em;
    }

    #quote3 {
      margin-left: 5em;
      margin-right: 5em;
      margin-bottom: 2em;
    }

    #quote4 {
      margin-left: 5em;
      margin-right: 5em;
      margin-bottom: 2em;
    }

    #quote5 {
      margin-left: 5em;
      margin-right: 5em;
      margin-bottom: 2em;
    }

This would be a great example of using a class instead and clean up your css.

Hope that helps!

[lydia.sanchez.writes]

Thank you! I’ll make sure I combine those into their classes respectively!