So, turns out I made a mistake. I didn’t do the projects the right way. I thought you just had to make something, but turns out I need to do it on CodePen and meet the user stories. I however, did the project from scratch and completed the whole thing. Honestly, it helped me get more comfortable with the basics of HTML and CSS. But, do I just redo the project, or do I do something else? The things I looked up how to center a image and center a list. I also made it solely based on the example provided by freecodecamp.
1 Like
You don’t have to do the projects in codepen. You can do them anywhere, even locally. But to submit them they have to be a live version of your code. Can be codepen, codesandbox, repl.it, GitHub pages. And yes, all the user stories must be met. Passing the tests in the test suite ensures that.
Not quite sure how you’ve done the project (or projects). Are you able to take your existing code and add the attributes the user stories call for to meet the requirements and pass the tests? If so, do that. If the divergence is too great you’ve already got some practice under your belt so just go ahead and do each of the projects again ensuring you meet each of the required user stories.
When you do the project be sure and do them from scratch. Don’t replicate the sample projects. They are just that, samples. They show one way the project can be completed.
1 Like
Yes, I will make sure to do that. The main difference in my page was that I didn’t put any id’s to reference it as I know id’s are very important, but I wasn’t really going to reference them, because using class is slightly easier (I know, id is really important, but I am not using JS, which is a significant reason why I didn’t use id’s). Also, what does user story 1 mean by “that contains all other elements”?
Understandable since an id is typically used to target something with JS, but a class can be used the same way.
The user stories mainly call for the use of an id though.
I’d typically respond with what do you think it means?
Basically, all the other elements will be nested within this element that has id="main"
And, in the very rare chance you want to see the original code, here it is:
tribute.html
<!DOCTYPE html>
<html lang="en">
<!--
Title of Page
-->
<link rel="stylesheet" href="tribute.css">
<title> Tribute Page </title>
<head>
<h1 class="center-text">A Tribute To Dr. Jonas Edward Salk</h1>
<h2 class="center-text">The person who made one of the first polio vaccines, paving the way to saving millions of lives.</h2>
</head>
<body>
<!-- Image of Page -->
<div>
<img src="https://ids.si.edu/ids/deliveryService?max_w=800&id=https://npg.si.edu/media/B2000434C.jpg"
alt="A image of Salk vaccinating a child" class="centerImage">
</div>
</body>
<!--
Time Line
-->
<h3 class="center-text"> Here is a time line of Dr. Salk's life: </h3>
<ul>
<li class="list-spacing"><strong>1914</strong> - Born in New York City, NY</li>
<li class="list-spacing"><strong>1934</strong> - Earned a Bachelor in Science degree in Chemistry from City College of New York</li>
<li class="list-spacing"><strong>1939</strong> - Graduated from NYU Medical School</li>
<li class="list-spacing"><strong>1939</strong> - Marries Donna Lindsay, a Social Worker</li>
<li class="list-spacing"><strong>1941</strong> - Works at University of Michigan School of Public Health and developed a influenza vaccine</li>
<li class="list-spacing"><strong>1947</strong> - Was granted his own lab at the University of Pittsburgh School of Medicine</li>
<li class="list-spacing"><strong>1948</strong> - <a href="https://en.wikipedia.org/wiki/Harry_M._Weaver">Harry Weaver</a> contacted and asked Salk to research and find unknown types of polio</li>
<li class="list-spacing"><strong>1952</strong> - Salk's vaccine was tested on 43 children</li>
<li class="list-spacing"><strong>1954</strong> - Salk's vaccine was tested on about one million children</li>
<li class="list-spacing"><strong>1955</strong> - Salk's vaccine was deemed safe</li>
<li class="list-spacing"><strong>1963</strong> - The research complex called the Salk Institute for Biological Studies was opened in San Diego</li>
<li class="list-spacing"><strong>1968</strong> - Divorces Donna Lindsay</li>
<li class="list-spacing"><strong>1970</strong> - Married the French painter Françoise Gilot. </li>
<li class="list-spacing"><strong>1977</strong> - Is awarded the Presidential Medal of Freedom by President <a href="https://en.wikipedia.org/wiki/Jimmy_Carter">Jimmy Carter</a></li>
<li class="list-spacing"><strong>1995</strong> - Dies from heart failure at age 80 in La Jolla, CA</li>
</ul>
<h2 class="center-link">Learn more about this amazing man <a href="https://en.wikipedia.org/wiki/Jonas_Salk">here</a>!</h2>
</html>
tribute.css
.center-text{
display: flex;
justify-content: center;
margin: 50px;
font-family: Arial;
};
.centerImage {
width: 100%;
}
div {
display: flex;
justify-content: center;
}
ul {
text-align: left;
width: 40%;
position:relative;
left: 30%;
font-size: 25px;
}
.list-spacing{
padding: 30px;
font-family: Arial;
}
.center-link{
text-align: center;
font-size: 30px;
}
1 Like
I now am close to being done, but just can’t seem to get “#Layout 1.” to work, I have tried everything that I could find, but nothing worked. Here is the current code: (Warning: it is messy)
EDIT: My error is : "Try using the “max-width” style property : expected ‘none’ to not equal ‘none’
AssertionError: Try using the “max-width” style property : expected ‘none’ to not equal ‘none’
html
<!DOCTYPE html>
<html lang="en" id="main">
<!--
Title of Page
-->
<link rel="stylesheet" href="tribute.css">
<title> Tribute Page </title>
<head>
<h1 class="center-text" id="title">A Tribute To Dr. Jonas Edward Salk</h1>
<h2 class="center-text">The person who made one of the first polio vaccines, paving the way to saving millions of lives.</h2>
</head>
<body>
<!-- Image of Page -->
<div id="img-div">
<figure>
<img src="https://ids.si.edu/ids/deliveryService?max_w=800&id=https://npg.si.edu/media/B2000434C.jpg"
alt="A image of Salk vaccinating a child" class="centerImage" id="image">
<figcaption id="img-caption">A image of Salk vaccinating a child</figcaption>
</figure>
</div>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</body>
<!--
Time Line
-->
<!--<h3 class="center-text"> Here is a time line of Dr. Salk's life: </h3>-->
<p id="tribute-info"><strong>Here is a time line of Dr. Salk's life:</strong>
<ul>
<li class="list-spacing"><strong>1914</strong> - Born in New York City, NY</li>
<li class="list-spacing"><strong>1934</strong> - Earned a Bachelor in Science degree in Chemistry from City College of New York</li>
<li class="list-spacing"><strong>1939</strong> - Graduated from NYU Medical School</li>
<li class="list-spacing"><strong>1939</strong> - Marries Donna Lindsay, a Social Worker</li>
<li class="list-spacing"><strong>1941</strong> - Works at University of Michigan School of Public Health and developed a influenza vaccine</li>
<li class="list-spacing"><strong>1947</strong> - Was granted his own lab at the University of Pittsburgh School of Medicine</li>
<li class="list-spacing"><strong>1948</strong> - <a href="https://en.wikipedia.org/wiki/Harry_M._Weaver">Harry Weaver</a> contacted and asked Salk to research and find unknown types of polio</li>
<li class="list-spacing"><strong>1952</strong> - Salk's vaccine was tested on 43 children</li>
<li class="list-spacing"><strong>1954</strong> - Salk's vaccine was tested on about one million children</li>
<li class="list-spacing"><strong>1955</strong> - Salk's vaccine was deemed safe</li>
<li class="list-spacing"><strong>1963</strong> - The research complex called the Salk Institute for Biological Studies was opened in San Diego</li>
<li class="list-spacing"><strong>1968</strong> - Divorces Donna Lindsay</li>
<li class="list-spacing"><strong>1970</strong> - Married the French painter Françoise Gilot. </li>
<li class="list-spacing"><strong>1977</strong> - Is awarded the Presidential Medal of Freedom by President <a href="https://en.wikipedia.org/wiki/Jimmy_Carter">Jimmy Carter</a></li>
<li class="list-spacing"><strong>1995</strong> - Dies from heart failure at age 80 in La Jolla, CA</li>
</ul>
</p>
<h2 class="center-link">Learn more about this amazing man <a href="https://en.wikipedia.org/wiki/Jonas_Salk" id="tribute-link" target="_blank">here</a>!</h2>
</html>
CSS
.center-text{
display: flex;
justify-content: center;
margin: 50px;
font-family: Arial;
};
.centerImage {
display:block;
max-width: 100%;
height: auto;
}
div {
display: flex;
justify-content: center;
}
ul {
text-align: left;
width: 40%;
position:relative;
left: 30%;
font-size: 25px;
}
.list-spacing{
padding: 30px;
font-family: Arial;
}
.center-link{
text-align: center;
font-size: 30px;
}
figcaption{
text-align: center;
font-family: Arial;
}
p{
display: flex;
justify-content: center;
margin: 50px;
font-family: Arial;
font-size: 30px;
}
Help is appreciated!
have you tried using the max-width property?
you have a syntax error here
Wow, that was really the answer. Thanks so much! That wasn’t there before. Maybe while trying to fix the issue, I accidently put that in.
One more thing. I had to copy and paste my code into a CodePen, for it to pass. It might be because I use a USB instead of just downloading it into the computer. Is there any way around this?
you need to have a version of your project publicly available online to submit
I see. But how do I do that?
CodePen is one way to do that, or anything else that let you have your project online
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.