Just finished my first Tribute Page!

Just finished my first Tribute Page!
0.0 0

#1

Hey fellow campers,

man that was oddly difficult, but i finished! I am actually pretty happy with how it turned out. Its a tribute to my wife, here’s the link

I would love feedback, helpful or hurtful!

things I found helpful in creating the page.

  1. Actually, reading through a few other people’s forum post’s first helped motivate me. some of the best advice I got was to keep it simple, use what i had learned, and be prepared to really struggle. Honestly, this lesson is designed to make you struggle, but its a good thing!
  2. I thought the lessons up to this point were all pretty easy, but once i had to actually put it into practice, i found myself constantly checking my roadmap and revisiting old lessons to relearn how to put it into practice.
  3. Before I did a lick of code, I chose my topic, I picked out my pictures, wrote out all of my text, and then on a piece of paper, sketched out what i wanted the website to look like. only then did I start to code.
  4. As soon as i started to code, i put the structure in place, using all placeholders so i could see everything neatly, before my code got swamped with actual text.
    i.e.
    (h1) title (/h1)
    (h2) ipsum delorum<(/h2)
    (<img “aubrey photo”)
    §first paragraph here(/p1)
    (img “aubrey on set”)
    etc…

*edit, just learned the hard way that you can’t put in actual HTML, because the forum will try to interpret it haha

  1. I created an account with photobucket so that i could host all of my photos in one spot. one thing I really liked about photo bucket was that it gave me the html needed to source my picture in a copy paste format, really neat.
  2. I found that it was the little things that tripped me up, but that this was where the real learning occurred. Did you know that html doesn’t recognize tabbing to begin a paragraph? it treats tabs, spaces, and returns all pretty similarly, just as white space between words. it took me over and hour to figure out how to properly tab my paragraphs (hint, use a CSS style).
  3. I found the separation of HTML, CSS, and JS on codepen to be really frustrating at first, but then really useful once I figured it out. I don’t think the freecodecamp lessons up until this point were very good at teaching you the difference between HTML and CSS, but codepen really helped me figure it out (for starters, HTML is all of the actual text and media, while CSS is the organization of them (ie anything you would have put in the ‘style’ section of the cat photo app).
  4. it took me about a day to get all of my HTML gathered (probably longer than average because I wrote everything pretty carefully, knowing my wife was going to read it lol), it took me another day to gather the courage to take the plunge to just start coding, and about a half day to actually code it all.
  5. oh! one of the nice tools somebody else talked about was adobe’s color wheel, where you can select the color and it will tell you both the hex code and the rgb that you want. really useful, even if you don’t end up using it for this project.
    https://color.adobe.com/create/color-wheel/
  6. Watch the video that Quincy made on the lesson page. he talks about a couple of ways to prime codepen for what you are going to do. specifically, how to make your CSS bootstrap in the background, and how to get links to work (codepen blocks the normal way for security reasons).

overall, I thought this was a great lesson, and I’m so excited to continue on.
best of luck!


#2

does anybody know how to share the link so it doesn’t embed, but rather actually takes you to the codepen website?


#3

If you click on the embedded link, you will see on the upper right hand corner that says "Edit on Codepen"
Click there and it will take one to the site where they can see the code.

Also, add “class="img-responsive” on your image tag.
Then, on the CSS on CodePen, add the bootstrap "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
As you shrink the page, you will see a difference.

P.S. I have been married for twenty years. I would love to see you revise this website about her in twenty years.
I am sure it will be very different. :sunglasses:


#4

thanks for the feedback!

I added the bootstrap, and the responsive classes, but now I’m not able to center things?
also, I thought i was already using bootstrap, the one that you add in through the editor


#5

On CodePen, on the ‘Editor View’, go to CSS.
There is a settings symbol next to it.
Remove the old bootstrap and add what I gave you above.
Viola! It should work now…
Enjoy!


#6

Before copying and pasting the link you want to share, just add a space character before the link. Then it will simply display the link you want to share. :slight_smile:


#7

It looks like some of your images are centered and then others are left aligned. It is more visually pleasing to have all your images the same width with the exception of the main top image.

The text is hard to read in mobile.
Try adjusting the font-size for the most common devices with the @media in your css.

Add the <meta name="viewport" content="width=device-width, initial-scale=1.0" /> tag into the HTML setting. It’ll help with the responsiveness.