Starting with my first Tribute Page Project

Hello !
I finished learning the Front End Development Basics.
I am now going to start my first project.

Any tips on how I can make it the best ? Or save time ? Any particular approach or things to keep in mind ?
And how much time should I be spending on it ?

Thanx :slight_smile:

Wich kind of project do you intend to create ?

A basic tribute page.
I’ve been seeing some pre created tribute pages on codepen but they seem so complex to me.
I’ve not been taught anything related to JS till now and many other parts that people had already used and applied in their page.

use the div tag to keep things in their own sections.
keep it simple.
try and use bootstrap.
don’t get too stressed out by it.

1 Like

Don’t you worry about whether other’s page are fancy or not. Just idealize what you want and put it into practice, try hard to make things work the way you want, make research, if you really get stuck ask for help.

1 Like

You know, I actually read your comment but I lost track of it as I went with the flow and it caused a lot of problems. Thanx though :stuck_out_tongue:

It sucks I guess. I still need to add some jQuery functions and buttons.


Don’t be so hard on yourself! I’m working on this project now, and my page doesn’t look nearly as good as yours. Besides, you don’t need any JQuery for the Tribute Page (at least as I understand it). Mostly the Tribute Page project seems to be about solidfying and demonstrating HTML5 and bootstrap over custom CSS more than about demonstrating your JQuery knowledge (which, if you only started learning it here on FCC like me, is pretty limited). I’m new though, so don’t quote me on that.

P.S. Love that you chose Snowden :smiley:

By the way, can anyone give me a reason that img-responsive isn’t working as a class for my banner image?

If the image is too big, try to add the class col-sm-12.
Let me know if it works!

Are you using boostrap v4? (If you added bootstrap through codepen built-in interface, it is v4).

In bootstrap v4 the class name changed from img-responsive to img-fluid.

1 Like

img-fluid did the trick! Thanks very much!

Hey, just wondering what image hosting solution you guys are using? I was using Flickr, but getting a static URL for the image is kind of a pain since I haven’t really gotten to the API stuff yet and am just fumbling around (I even resorted to trying with a script using a combination of wget and grep).

Otherwise, I know of a few solutions, but they all have drawbacks of their own.

Any other options that let you host images and will give you a direct URL that you guys know and trust?

1 Like

Simple, Free, Trusted, and Powerful (if needed):

1 Like

I’ve been using Pinterest. It works fine for me. Try that maybe ?

1 Like

Cloudinary seems to have a lot of features that may well come in handy once I grow my skill set, but I’ll try out Pinterest if need be, thanks for both suggestions!

A more advanced option would be AWS S3.

1 Like

The suggestions above were great, but I settled on the Free Tier of AWS - loads of features to explore, plus this will let me access their ML API (once I actually know how :smiley:)

What I’m now struggling with is actually wrapping text around the image–or more specifically, captioning that wrapped image. I did successfully create a wrapped image use class=“img-responsive float-right col-5” in the img tag, but I’m having a heck of a time trying to get a caption for that image.

I’ve tried all kinds of things, and even resorted to making the image a part of a figure, but still the “caption” appears at the top of my paragraph element instead of below the picture said paragraph is wrapping around.

I’ve read, and I’ve searched, so now I’m asking. Thanks in advance for any help!

N.B. It’s important that I use only bootstrap for this. I’ve had success with other solutions, but I’m really trying to learn bootstrap’s limits and capabilities. Thank you!