Tribute page feedback by Reham

Hello,

Can I have some recommendations and feedback on my tribute page, please.

Thank you

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.111 Safari/537.36.

Challenge: Build a Survey Form

Link to the challenge:

1 Like

Hey @rehamsalem89!

Welcome to the forum!

I think your page looks good. Just a few things.
I ran your code through the html and css analyzer and there are few errors that need your attention.

CSS validator errors: http://www.css-validator.org/validator
HTML validator errors: https://validator.w3.org/nu/#textarea (you can ignore the errors for the head section)

Also the font size seems a little large to me especially on smaller devices.

Hope that helps!

Hi @jwilkins.oboe, thanks for your feedback.
how can i fix the CSS errors, if you don’t mind me asking.?
and what will be the recommended font-size for a smaller device?

If you go to css validator then it will point out the errors that need fixing.
Here is the link where you can place your css code in.

Here is the html one

I think this CSS error is messing with your font size

{html

font-size: 20px;}

@jwilkins.oboe , I will look into it. thank you very much for your help.

1 Like

If you move the bracket to the right of the html like this then it will work and you won’t have to change the font size.

/*wrong*/
{html
font-size: 20px;}

/*Right*/
html {
font-size: 20px;}

it’s still giving me the same error ( unknown word) i am not sure why . @jwilkins.oboe

I found two issues.

Here is the first one.

@media (max-width: 460vw) 
{ h1  font-size: 20px;
  line-height: 1.2;}

Move the first curly brace to the right of the h1.

Second one is this

body {
  font-family: https://fonts.google.com/specimen/Libre+Baskerville?sidebar.open=true&selection.family=Libre+Baskerville; } 

This is an incorrect way to use imported google fonts. When you select a google font that you like then you can just follow the instructions to embed that font into your page.

Hope that helps!

1 Like

thank you thank you! that is very helpful.
after i am done with fixing those issues how can i run test on my page ?i did not really understand the instructions.
i am sorry i am asking alot of questions but i am new to this and i am still learning.

No worries your good.

You can run the test now if you want.

Just add this to the top of your html page.

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

Choose the project you are working on and hit run tests

do you mean inside the html page before the main element ?@jwilkins.oboe

Oh sorry, you should put it in the bottom of the page. It will still work if you place it at the top before main it is just better to get in the habit of placing your scripts at the bottom. When you get to the javascript section you will start to understand why that is. But here is a good article explaining why.

1 Like

what should i do after i put my script tag ?i do not see any button to run the test

Click on the green hamburger menu and the test suite will open up. From there you will see the run test option.

1 Like

it worked and test passed. thank you so much for all you help . you are awesome.
do i have to submit the result somewhere?

1 Like

Go to the tribute page challenge in the curriculum section, scroll down to the bottom and post your solution there.

Your page looks good @rehamsalem89. 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 elements out of order. Everything the browser renders belongs in the body element. You have code outside of a closing body tag and the head element should not appear within the body element.
    • You can review this for an understanding of the HTML boilerplate tags.
    • Additionally, when using Google fonts, if using import that goes in the CSS section of codepen (not between the style element. If you link to the font that goes in the head section and it would not be between style elements it would be a link.
  • Make your page responsive. Remember, the R in RWD stands for Responsive.
    • On smaller screens there is a horizontal scrollbar because the nav falls out of the container.
  • Accessibility is about being accessible to all users. Review the lesson about giving meaningful text to links.
  • As mentioned previously, run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Although it is a minor occurrence in your page right now, never use view port units for font sizes. The user should always be in control of the text size on the page (that is, they should be able to manually increase the text size). Using view port units prevents them from doing this. Your job as a developer is to make sure your page is responsive to text size increases. If you don’t know how to manually increase the text size, using Firefox, go to the ‘View->Zoom’ menu and activate ‘Zoom Text Only’. Then while holding down the Ctrl key scroll your middle mouse button to increase the text size. Currently, the text size on your page will not change using this method because all of the font-sizes are defined with vw units. This means the only way I can increase the text size is to widen my browser window. What if I have really bad eyesight and can’t make my browser window wide enough?

On a side note, next time when asking for a review of your project you’ll get more eyes on if you open the topic in “Project Feedback”.