FEEDBACK for the first TRIBUTE PAGE

Hello every one, I just conclude my first project and I am looking for FEEDBACK :slight_smile:

Please feel free to comment on my project.

1 Like

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

  • Run your HTML code through the W3C validator.
    • There is an HTML coding error you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • 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 CSS is good. Use it, there are some things to clean up. When you fix one, click again until it says no errors found
    • (The one for HTML misses things which is why I recommend W3C)
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
    • If you want multiple paragraphs then use multiple paragraph elements.
  • Make your page responsive. Remember, the R in RWD stands for Responsive.
    • There’s a horizontal scrollbar on large and small screens. The more info link never seems to be located correctly.
    • To help, get familiar with the box methodology. Once you realize everything you see on a webpage is just a box you need to move around and resize, things will start to click. Try adding the following temporarily to your CSS to see how you’ve got things coded;
* {
  border: solid 1px red;
}

On a side note, click on the arrow in the upper right of the HTML and CSS sections then click ‘format’. It makes code easier to read.

Thank you very much for your feedback, @Roma.

I got your point and I work it out.
I hope now is better.
Here is the link:
https://codepen.io/LeleGanza/pen/PozxVEx
I will be very happy if you can revisit and give me a new feedback. :wink:

Thank you very much.

Good job cleaning things up @LeleGanza. Still to do;

  • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 6/10 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.

Narrow your browser as far as it will go. See how skinny the image is? You have the width of <figure> set to 30%. You don’t want this for narrow view ports (and I don’t think you need it for wide view ports either). Also notice that <main> doesn’t go all the way to the right side and thus there is unnecessary empty space. Again, you have the width set to 80% and don’t need this. If you take a narrow-first approach to styling then you won’t have these issue. Start with the browser as narrow as possible and style the page. Then you can widen the browser and adjust for wider view ports if needed. But for a layout this simple you won’t need any CSS media query break points. Just make sure to use max-width and then you can center with auto side margins.

1 Like

Thank you for your help,

I fix it and now I can see it on my phone as good as on the PC.
:+1:

If you want to have a look now, here is the link.
https://codepen.io/LeleGanza/pen/PozxVEx

Thank you for your help, @Roma

Please can you explain me better :

* Your page passes **6/10** user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.

How I can see that my page passes 6/10 stories?

Where is the red button that I should press?

Sorry for this silly question but I am a new starter :grin:, and I am not so confident with the platform.

Thanks for your patience.

Hey. @LeleGanza
The mobile screen is better than before but there only one thing left.
it is so big. Please change the font size

Thanks and happy Coding.

You have over done the shadows and the color grey. The boxes don’t align properly.
Click on the hamburger icon, click => “runtests”.
You’ll see you passes 6/10 tests. on a red box. click on it to see what else you need to add.

You’ll get a image like that.
Read the title to know what additions you need to do to pass the test.
Or, you can read the User-Stories section on FCC page as well.

1 Like

Great Buddy!
I would also like to suggest something . Please try to position the text on left or right, the justified one doesn’t let the paragraphs form a rectangular structure which according to me suits well.

1 Like

@LeleGanza, click on the green hamburger menu in the upper left of your page. Select the appropriate project, in this case tribute page, then click the ‘run tests’ button.
When tests fail you will see the button turn red. Click on the red button to see what the test was looking for and text to help you correct the issue.
Read more than just the first line of the failing message.

Your design is your design. You can incorporate the changes others suggest or leave your design as it is.
It is important that all tests pass.

1 Like

OK… :man_facepalming:

I fixed something and I broke something else. Now it should be fine, I would really appreciate if you could check again. I think it’s good, I ran the test and passed all 10/10 and I run the code through the W3C validator.

Good job @LeleGanza. All tests are passing.

There is always a horizontal scrollbar on your page.
Go back and review my first post about responsiveness and possibly adding the border so you can see what’s happening.
Also, review the comments by @bbsmooth

@ajaysinghrana494 Welcome to the FreeCodeCamp forums! @LeleGanza Good job on the project! It looks good!

1 Like

I finally got what you said.

Thank you very much.

If you want here is the link:

https://codepen.io/LeleGanza/full/PozxVEx

Should be good responsive now… I think I finally got it.
No scrollbar and I worked better with the “max-width” as @bbsmooth suggest.

https://codepen.io/LeleGanza/full/PozxVEx

@LeleGanza
You can add text at the footer like “Made by LeleGanza” like that.

Nice job @LeleGanza. Your page looks good.

Good work on the project! @LeleGanza

Nice job @LeleGanza. The only other thing I would suggest is that you put a max-width on the text. Right now the text lines will stretch as wide as I can make my browser (and I can make it very wide :-). A lot of people have trouble reading text if the lines are too long. You could do this by putting a max-width on the <p>s. But you might want to consider putting it on the <main> instead, and then the auto margins will keep it centered on the page. Regardless, make sure you use em units for the max width.