Seeking Assistance

**This is my first project: Tribute Page
Not sure how to run test: Can someone please assistance me and let me know if my project passing all test. If not can you offer suggestions. Thanking you in advance for your help.

https://codepen.io/fhobson2007/pen/oNYgpMp

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; rv:85.0) Gecko/20100101 Firefox/85.0.

Challenge: Build a Tribute Page

Link to the challenge:

At the very bottom of the instructions it says:

You can build your project by forking this CodePen pen. Or you can use this CDN link to run the tests in any environment you like: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js .

Since you didn’t fork the FCC pen you’ll need to add the CDN link to your pen. Click on the settings icon for JS and then add the URL above as an External Script.

1 Like

HI @fhobson2007 !

Welcome to the forum!

As mentioned you will need to add the test suite script tag to your html.
Once you do that then you can run the tests.
Currently you are passing 5/10.

Open up the test suite to read the full error messages on what is failing and how to fix it.

A few suggestions:

Remove your inline styles and write your css in the css panel.
Example of inline style: style="font-family: Lato, sans-serif"

Also remove the style tags and move that over to the css panel.

For example, move this:

  <style>
    h2 {
      font-size: 20px;
    }
  </style>

Please don’t use center tags since they are obsolete

Use css instead to center text.

Avoid using br tags. Use css instead if you want to create space between elements.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br

Hope that helps!

I have tried this solution. Unfortunately, this is still not allowing me to run the test for my project. Seeking more assistance.

If you are having problems getting the CDN link to work for you try this:

  1. Go back to the project page on FCC.
  2. Scroll to the bottom and click on the link that says You can build your project by forking this CodePen pen.
  3. Once codepen opens, look at the bottom and click on the fork button.
  4. This will open a new codepen that has the tests imbedded in it (you can see this in the top left corner which may be shown with 3 lines).
  5. Copy your entire code and paste it to this codepen page.
    You should now be able to run the tests. Hope this helps.
1 Like

Your link for the cdn is wrong.
That is why it is not working.

You can fork the project like mentioned above or use the correct cdn link.

Also, I am having trouble editing your pen.
So you might want to create a new pen and try copying your code in there.

When I did that and used the correct cdn link than I was able to get it working.

Seeking Assistance thank everyone for their assistance. Still working on the Tribute Page, getting this error message:

#Layout

  • 1. The element should responsively resize, relative to the width of its parent element, without exceeding its original size.

Try using the “max-width” style property

The max-width property is not working

Here is my code:

#image { display: block; margin-left: auto; margin-right: auto; width: 100%; height: auto; max-width: 600px; padding: 50%; }

Thank you!

You have coding/syntax errors which you must take care of;
In the CSS editor;

  • Remove the style elements. This is only used when doing internal styling and they would go in the head element in the HTML document. Never in the stylesheet. (as an aside, the will give you problems in codepen)
  • this is incorrect; (should be an opening curly brace, not opening square bracket)
#title [
  text-align: center;
}

The max-width property does work.
The user story says Within the img-div element, I should see an <img> element with a corresponding id="image"
You have <img id="image"> with no image. The img element with the image does not have an id
Since there’s no image there’s nothing to style.

Trying to center my list and leave a blank between my list.

Trying to center my footer. Not sure why when I removed my style tags. These two items no longer are center.

#li {
  margin-bottom: 2em;
  text-align: center;
}
}
#footer{
  text-align: center;
}

You don’t have anything with an id of footer or li.

There’s also an extra closing curly brace on line 34 that’s going to interfere with things. Click on the chevron in the upper right of the CSS editor and use ‘Analyze CSS’ to see it

And seriously, change this;

<img id="image">
<img src="https://images.unsplash.com/photo-1612199722538-f03ffe16dc49?crop=entropy&cs=srgb&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=85" width="500" height="300">

to this;

<!-- <img id="image"> -->
<img id="image" src="https://images.unsplash.com/photo-1612199722538-f03ffe16dc49?crop=entropy&cs=srgb&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=85" width="500" height="300">

Thank you. The il is for my list. I am trying to Center it.

I know what a list item li is.
What I said was, you don’t have id="li" You have a few li elements. So you’re not targeting li or footer correctly in CSS.
Just target the elements in CSS. They’re not id's

Also, you can’t make up HTML elements. It’s only <p>. A paragragh element with a number (<p1> etc) is not valid HTML.

Seeking Assistance: Survey Form

Thank everyone for their wonderful help. Can anyone give me assistance: Not sure how to do create the validation error message.

https://codepen.io/fhobson2007/pen/GRNpWxO

4. Inside the form element, I am required to enter my name in a field with id=“name”. If I do not enter a name I will see an HTML5 validation error.

Thank you!!!

Ideally you should open a new topic as this is for the survey form and the original topic is for the tribute page.

When a test fails click the red button to see which test(s) are failing and text to help you correct the issue. (Be sure and read more than just the first line of the failing message.)
This is the entire failing message;

## Inside the form element, I am required to enter my name in a field with id="name". If I do not enter a name I will see an HTML5 validation error.
There should be an input text field with id="name" : expected null to not equal null 
AssertionError: There should be an input text field with id="name" : expected null to not equal null

I see you’re using fancy quotes. Your code looks like this;

<input type="text" name=”name” id= “name” class= “form-control” placeholder="Enter your Name" required/></div>

Turn off smart punctuation. You want the quotes like those used for the value of the type attribute, not the ones used for the value of the name attribute. (Same thing for the class attribute, fix that.)
Copying and pasting also causes that problem. Don’t take code from the sample projects.

Hope that helps