Tribute Page Code Review

Code Feedback
1

Hi, I recently finished the Tribute Page project for the Responsive Web Design Certification.

I created a simple webpage, but I would love to hear some reviews regarding the code, specially the CSS, as I was having a bit of trouble with the sizes.

Here is the link to the GitHub repo with the HTML and CSS files: GitHub - coalsticks/tribute-page: A freeCodeCamp project: Heddy Lamarr Tribute Page using HTML and CSS.

I am currently working on a more extensive tribute page, but for now, this is what I got!

Thank you :smiley:

2

Hello!

Great job for using GitHub early on, you can’t start early enough.

That said, can you please copy your code into the course itself and share it here?
You will get more reviews than with a GitHub repo.

Thanks!

1 Like
3

Thank you for the suggestion, Daniel!

Here’s the code:

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Hedy Lamarr Tribute</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main id="main">
      <nav>
        <h1 id="title">Hedy Lamarr</h1>
        <p>Thank you for the wi-fi</p>
      </nav>

      <figure id="img-div">
        <img
          id="image"
          src="https://media.newyorker.com/photos/5a1f13f2f2287d71effeaea4/master/pass/Camhi-Hedy-Lamarr-doc.jpg"
          alt="Heddy Lamarr posing with her lab rats, chemical equipments and books"
        />
        <figcaption id="img-caption">
          Heddy Lamarr in her documentary "Bombshell" by filmaker Alexandra Dean
        </figcaption>
      </figure>
      <section id="about">
        <div class="about">
          <h2>Hollywood Star and Inventor</h2>
          <p id="about-info">
            Heddy Lamarr was a renowed Austro-Hungarian-born American Hollywood
            star, famous for her roles in "Samson and Delilah" (1949) and
            Tortilla Flat (1942), during the Golden Age of movie making. As a
            beauty icon, she captured many hearts with her phenomenal acting
            skills, being the first to ever display love scenes in their
            entirety.
          </p>
          <p id="tribute-info">
            But beyond acting, she was also an inventor, and had a great passion
            for creating and finding solutions. She is most famously known for
            her invention of the “frequency hopping”, alognside George Antheil,
            which pioneered the technology used for the creation of Wi-Fi,
            Bluetooth, and GPS. Though often not as highly accreditted for this
            invention, today, we recognize both her beauty and brillance.
            <a
              id="tribute-link"
              href="https://www.womenshistory.org/education-resources/biographies/hedy-lamarr#:~:text=Hedy%20Lamarr%20was%20an%20Austrian,GPS%2C%20and%20Bluetooth%20communication%20systems."
              target="_blank"
              >Find out more about Heddy lamarr here.</a
            >.
          </p>
        </div>
      </section>
    </main>
  </body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 40px;
}

main {
  width: 100%;
  height: 100%;
}

/* HEADER */

nav {
  width: 100%;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: azure;
}

nav > h1 {
  padding-top: 16px;
  padding-bottom: 12px;
}

nav > p {
  padding-bottom: 16px;
  font-style: italic;
  font-size: 55%;
}

/* IMAGE */

#img-div {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

#image {
  width: 50%;
  padding-top: 5%;
  max-width: 100%;
  height: auto;
}

#img-caption {
  font-size: 14px;
  font-style: italic;
  padding-top: 12px;
}

#image,
#img-caption {
  margin: 0 auto;
}

/* ABOUT SECTION */

.about {
  margin: 5% 15%;
}

#tribute-info {
  padding-top: 16px;
}

.about > p {
  font-size: 60%;
}

.about > h2 {
  font: 65%;
  padding-bottom: 12px;
}

a {
  font-size: 90%;
}
2 Likes
4

All in all pretty solid.

If you had trouble with the font sizes, try out:

Use rem instead of % and media queries to adapt the fonts to screen sizes.
Often it’s enough to create one media query for max-width 768px for smaller screens.

1 Like
5

Hi Daniel,

Thank you for your feedback!

I will clean up the CSS to account for smaller screens, as you mentioned.

Would it make a difference using between rem and em? As for images, what unit would be ideal to make it responsive (rem as well?)?

6

Different scopes: Rem inherits from root documents (html or *). Em inherits from the parent element it is in.

Images are usually in px, they are made responsive for example with settings like width and height set to 100% and auto. This is a complex topic that would go beyond the scope of my reply.

Here’s a learning source:Responsive images - Learn web development | MDN

7

Thank you so much, Daniel!

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.