Tribute Page by Romita

Here is my first project. I want to hear your suggestions please. Thank you.

4 Likes

Nice so far!
Here are a couple of suggestions which might make your page even better. Free to ignore them! :slight_smile:

First I find the black background a bit stark. maybe a dark gray would be nicer?

And if you change the background then you can also create a nice effect for the image – like an old photo.

This code in your style would give it a thin white border and give it a slight shadow that makes it look like a real photo lying on a surface. You might play around with the values to see what you like.

border: 5px solid white;
box-shadow: 2px 2px 8px black;

And finally I find that the text in your tribute sections feels too small for the space. I’d narrow the border a bit and make the boxes smaller.

Anyhow, these are just some ideas. Play around and make it however looks good to you!

Regards,
George

1 Like

Thank you for your valuable suggestion. I will definitely keep these points in mind.

@RomitaC, you should avoid using so long url of image, instead you can use a short url like this one - https://cdn.britannica.com/37/171337-004-0B980E9D/Subhas-Chandra-Bose-Indian-National-Army.jpg
Even if you find a shorter one that will be fine.

There are many things to suggest you, but as this is your first project- I am not going there right now, rather I would say it’s fine. At the same time, please visit different websites and observe them to understand the color/background-color, border, font size, image size matters. It will help you a lot for your next projects.

In your project, at least include the test script in the project so that we can check the mandatory project requirements. If you don’t find that, may copy from here

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

and paste it on the top of your HTML code.

You can start your next project by forking the CodePen pen as suggested by the site. That includes the script and you do not need to add it manually.

You are doing well, and hope you will make it better soon. Go ahead.

Thank you.

1 Like

Thank you so much. Can you please let me know where I can find images with short links?

1 Like

@RomitaC, after searching for an image in google, you can get it by right-click and copy image address, then you will paste it int the address bar to see if it is really a short url, if not, then select another image and copy image address by right click and check the same, most of the images you will find with short url. Hope this will help you for your purpose:

Thank you.

1 Like

As now you have added the test script- I checked, only 1 test is passing, others are not.
Now you need to work on your project step by step as suggested in the test/ project requirements. Once you complete everything let me know to check again. If you need help to understand anything, ask for help here, FCC community will help you.

1 Like

I have found out the things that I’ve missed in the project. Thank you so much for your guidance. I will now look into it step by step and try to improve it. I will reach out to you once I have checked it all. Thanks again.

1 Like

When listing the great living legends of comics, there are few who loom larger than John Romita Sr. He’s the man who defined the look of Marvel Comics for generations of readers, serving as the company’s in-house art director.

Sorry, I didn’t quite understand what you meant.

I have updated my webpage with the required user stories. Please drop your valuable suggestions.

1 Like

Well, all the project requirements are now fulfilled. That’s really very good as you’ve done it within a limited time.

Now, you need some changes in your css, if you can get a clear concept about that, surly you’ll do better in your next projects.

  1. remove all vw from border, border-radius, padding
  2. use a minimum border thickness like 1px or 2px or maximum 3px
  3. for a text container use a maximum 5px-10px border radius
  4. you may try plain background color (white) or something not irritate eyes
  5. instead of setting border for p you can set border to div
  6. in case you use border for p for your testing, use padding at least 7px-10px to p

some more points…, I can’t explain now, I’ve to go.

Thank you.

1 Like

Welcome to the forums @RomitaC. Your page looks good. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • mentioning because you have the title element in what would be the body element and that’s not correct. It belongs in the head element. Follow the instructions above to place it correctly
  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are HTML coding errors you should address.
  • Codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for HTML misses things which is why I recommend W3C
    • The one for CSS is good. Use it, there’s something to clean up.
  • Don’t use <br> to force spacing or line breaks. That’s what CSS is for.
  • Review the lesson about giving meaningful text to links.