FCC - Tribute Page: Gimli + my takeaways

Hi, fellow freecodecampers!

I have finished my first freecodecamp project, and I would love to hear some feedback from you.

Here is my project: https://codepen.io/Darthcolo/full/WNpGZZR

Here is the GitHub repository: GitHub - Darthcolo/freecodecamp-01-Build-a-Tribute-Page: Responsive Web Design Project #1

My key takeaways from this project:

  • I started by complicating things too much, trying to use flexbox, but after viewing the source code of the example provided by freecodecamp I simplify the project considerably.
  • The HTML semantic elements: at first I wasn’t sure about the structure, so I used this link to shine a light on it: Using HTML sections and outlines - Developer guides | MDN
<body>
    <header>
      <nav>
        <ul>
          <li><a href="#">link</a></li>
          <li><a href="#">link</a></li>
          <li><a href="#">link</a></li>
        </ul>
      </nav>
      <h1>
        Page Title
      </h1>
    </header>

    <section>
      <h2>
        My Blog Posts
      </h2>
      <article>
        <header>
          <p>
            Article Title
          </p>
        </header>
        <p>
          content
        </p>
      </article>
      <article>
        <header>
          <p>
            Article Title
          </p>
        </header>
        <p>
          content
        </p>
      </article>
      <aside>
        <p>
          Author info
        </p>
      </aside>
    </section>

    <footer>
      Copyright Info
    </footer>
  </body>
  • I used media queries to change line heights, widths and font sizes of ceratin elements (most noticeable in the block quotes).
  • The max-width property applied to boxes and images is very powerful! Great for responsive design.
  • I had to review many concepts that I considered learned, but I think this is why we are building this type of projects.

Hi @Darthcolo !

I think your page looks good.
For me personally, I think dark text on a dark background doesn’t pop as much.

I also want to point out one thing.

It is important to remember that the sample projects are just one way to do things.
Often times you they are going to be on the simpler side.

At the end of the day you should feel comfortable building the project the way you want to.
If you want to use flexbox, then go for it. :grinning:
If you dig through the forum you will find a variety of tribute pages in the #project-feedback section that range from simple to advanced.

You don’t have to feel confined to the samples. :grinning:

Hope that helps!

Thanks @jwilkins.oboe ! I will take into account your feedback as I start working on the next project.

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