freeCodeCamp Project Guide: Build a Tribute Page

This might be the first full webpage you have ever created. Here are some tips to help get you started with this:

List Features

List the features required by the user stories and any other rules you must fulfill. Just write them down on a piece of paper. Having them on paper and not in a file will make it quicker to refer to them during the design process.

Layout your page on paper

It might sound a bit silly but this is a great way to start visualizing what the page should look like. Elements of the page you should start with could be a title, images, text and links.

Search around for potential subjects for your tribute

Choose me! Only joking. Think of someone who inspires you and you look up to. A famous person. Search them on wikipedia and then look through the sources of the wikipedia article for further reading. Do not just copy text from the wikipedia page into your website. Make the text original.

Rewatch the video and focus on the detailed layout used

Take a more detailed look at the example tribute page. Go into the chat and ask someone to share their tribute page for you. Search online for interesting web designs and see what you can copy. There is an ocean of great sites out there.

Use a library as suggested in the rules. Bootstrap is a library

Rule 2 states that you can use which ever libraries you need. To save you time, effort and confusion, bootstrap is a library.

Your external link isn’t working

Follow the instructions at the end of the video for what to add into your hyperlink. This should then work.

Adding images to your page

Beware to not just copy any image you find. This could violate copyright for someone. Either find an image on a free image page and then upload it to somewhere such as photobucket to get a link you can then use to insert the image on the page or link the image directly from the original source.

12 Likes

Excellent advice! I did just about all of what you describe and it really works. A couple of other hints, thanks to help I got from others on FCC, if you are using an image from your Dropbox, replace the “www” in the URL with “dl” (why? I haven’t a clue, but it works) and the hint in the video about opening links refers to “_blank”, not just “blank”.

One other thing… if your code isn’t working right, look for syntax errors (like grammar and punctuation in English). Be sure you have included all the “:”, “;”, { } etc. that you need. Also, be sure there aren’t any extras that you don’t need! (Although one of my problems on my page was solved by a stray closing tag that I missed. When I tried removing it, the problem was back. With it, all was good. So…. I have a stray tag that solved my problem. Go figure!)

2 Likes

I think the dl part for the dropbox is for download. I haven’t try it yet.

Just as an aside for this specific challenge: Bootstrap as it is added to the page is now at version 4.0.0 which causes many different formatting problems than have been taught in the previous lessons. If you want to format like the example you need to use https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css as your CSS, not the standard bootstrap that is entered by CodePen.

5 Likes

Thank you! That was so helpful. I was trying for a while to figure out why < blockquote > and < thumbnail > weren’t working as I thought they should. Now it works :grin:

Thank you, Agoldenexit. I’ve been trying to figure out the issue on my page thinking it was something with what I had written.

It’d be great if they updated the lesson to teach the most recent version of Bootstrap though… Not knowing why the tags and row formatting don’t work like they used to in the most recent version is frustrating.

Yeah that would be great. Have you come across anything explaining the differences? I was looking at info on getbootstrap.com, but would love anything else I can reference as well. Thanks again!

Re: Images and licensing; I can speak for the US anyway, if you get your images from wikipedia, most if not all of their images are public domain, which means you don’t have to worry about copyright problems. Look for this symbol:

In spite of the circle with the diagonal line, it’s not saying “no,” it’s actually saying no copyright, so it’s OK to use.

For more details: https://en.wikipedia.org/wiki/Public_domain

Edit: It looks like the guidelines are similar for most other countries, and there is a reference table right there on one of the first couple of links I looked at.

Here is a link to a medium post that talks about the differences. Also here is a guide that walks you through the difference. I think I am going to do the project in bootstrap 4 so I can start learning the new version. I will share the link when I am done. Let me know if you have came across any good references.

Here is a link to a converter, appears not to work, although the list of class changes on the side can be helpful. I did the project in bootstrap 4, here is a link to my project.

Thank you from my side - you’ve saved my motivation to work furhter :wink:

2 days of investigation and I finally found your comment and solution!

So glad I found this!Thank you:)

Just to add to what you said, there’s a great creative commons-licensed image search engine: pexels.com

Strongly recommended for anyone who wants good images but doesn’t want to violate anyone’s copyright.

5 Likes

Thanks Agoldenexit. This’s been very helpful indeed!

Thanks a lot, that helps