Build a Tribute Page - Need Feedback

Code Feedback
1

Tell us what’s happening:

Hey all!

This is my first time sharing anything coding related so PLEASE go easy on me :slight_smile:

I would really like to make this look less bland but I have no clue where to really start…where do you recommend I even start? I know I should be thinking creatively but it would definitely help to hear some of your different thought processes.

I feel as though I may not have enough element names (I used div a lot) and this could create problems trying to format the page down the line.

I really look forward to getting ripped apart and really digging into this more!

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Safari/537.36.

Link to the challenge:

2

I think its a great base to work with. The look is clean and well structured. I would suggest resizing the image and making it much smaller. I don’t feel strong with design as I am not overly creative, so I recommend playing around with text-shadows, borders, maybe an hr element. Those type of things can really help a site look special and different. Also, try re-arranging the timeline to look more structured. Dates should line up and the events should line up together. That would be a good CSS alignment practice, too.

1 Like
3

this can be easily done with flexbox

4

You should increase line height and margins. items are really close to each other

5

also can you limit the width of the html code to i.e. 80px. this would make coding and seeing the preview side by side much easier.

6

And make text responsive. they are small for desktop. Use custom font (e.g. from google fonts)

7

Change this code:


  <div> <strong>1917</strong> - Born in Cheraw, South Carolina </div>
  <div> <strong>1921</strong> - Begins playing the piano </div>
  <div> <strong>1930</strong> - Hears Roy Eldridge play trumpet </div>
  <div> <strong>1933</strong> - Won scholarship to Laurinberg Institute </div>
  <div> <strong>1942</strong> - Joined Earl Hines' Big Band in Chicago  </div>
  <div> <strong>1943</strong> - Records 'Salt Peanuts' with Kenny Clarke </div>
  <div> <strong>1945</strong> - Teams up with Charlie Parker </div>
  <div> <strong>1947</strong> - Chano Pozo joins Dizzy's band and introduces Afro-Cuban music to the world </div>
  <div> <strong>1957</strong> - Plays Newport Jazz Festival  </div>
  <div> <strong>1960</strong> - Inducted into the 'Downbeat' Hall of Fame  </div>
  <div> <strong>1972</strong> - First jazz musician to be appointed to undertake a cultural mission </div>
  <div> <strong>1977</strong> - Performs at the White House for the President </div>
  <div> <strong>1993</strong> - Dizzy Gillespie dies of pancreatic cancer  </div>

to:

<pre>
      <strong>1917</strong> - Born in Cheraw, South Carolina
      <strong>1921</strong> - Begins playing the piano
      <strong>1930</strong> - Hears Roy Eldridge play trumpet
      <strong>1933</strong> - Won scholarship to Laurinberg Institute
      <strong>1942</strong> - Joined Earl Hines' Big Band in Chicago
      <strong>1943</strong> - Records 'Salt Peanuts' with Kenny Clarke
      <strong>1945</strong> - Teams up with Charlie Parker
      <strong>1947</strong> - Chano Pozo joins Dizzy's band and introduces Afro-Cuban music
      to the world
      <strong>1957</strong> - Plays Newport Jazz Festival
      <strong>1960</strong> - Inducted into the 'Downbeat' Hall of Fame
      <strong>1972</strong> - First jazz musician to be appointed to undertake a cultural
      mission
      <strong>1977</strong> - Performs at the White House for the President
      <strong>1993</strong> - Dizzy Gillespie dies of pancreatic cancer
    </pre>

pre tag uses monospace font by default, so be sure to change it’s ‘font-family’ to ‘inherit’.
or you can also use p tag with breaks:

  <p>
      <strong>1917</strong> - Born in Cheraw, South Carolina <br>
      <strong>1921</strong> - Begins playing the piano <br>
      <strong>1930</strong> - Hears Roy Eldridge play trumpet <br>
      <strong>1933</strong> - Won scholarship to Laurinberg Institute <br>
      <strong>1942</strong> - Joined Earl Hines' Big Band in Chicago <br>
      <strong>1943</strong> - Records 'Salt Peanuts' with Kenny Clarke <br>
      <strong>1945</strong> - Teams up with Charlie Parker <br>
      <strong>1947</strong> - Chano Pozo joins Dizzy's band and introduces Afro-Cuban
      to the world <br>
      <strong>1957</strong> - Plays Newport Jazz Festival <br>
      <strong>1960</strong> - Inducted into the 'Downbeat' Hall of Fame <br>
      <strong>1972</strong> - First jazz musician to be appointed to undertake a cultural
      mission <br>
      <strong>1977</strong> - Performs at the White House for the President <br>
      <strong>1993</strong> - Dizzy Gillespie dies of pancreatic cancer <br>
    </p>

or you can also replace div tags in the original code with p tags, which is still clunky, but more clear.

8

if you have problems implementing any of my suggestions, I can help :slight_smile:

9

design wise you can refer to my tribute page: https://codepen.io/supuun/pen/aKyaPB :sweat_smile:

10

THANK YOU SO MUCH! Really helpful suggestions. I hope you don’t mind but I messed around with your CSS to try and gain an understanding how to actually the style page a bit more. Feel free to check it out now!

11

Actually, how could I format this better so it loads on mobile and actually looks okay?