I’m having some trouble getting the code for this project to be accepted. Everything checks out except for this part:
" Each .main-section should have an id that matches the text of its first child, having any spaces in the child’s text replaced with underscores (_ ) for the id’s."
Here is the codepen link for the full thing because it doesn’t fit here:
Here is what’s inside my navbar:
<ul>
<li><a href="#Project_Description" class="nav-link">Project Description</a></li>
<li><a href="#Setting_Up_Your_Title_and_Description" class="nav-link">Setting Up Your Title and Description</a></li>
<li><a href="#Setting_Up_Your_Image" class="nav-link">Setting Up Your Image</a></li>
<li><a href="#Importance_of_Accessibility" class="nav-link">Importance of Accessibility</a></li>
<li><a href="#Information_Formatting" class="nav-link">Information Formatting</a></li>
<li><a href="#Additional_Tips" class="nav-link">Additional Tips</a></li>
</ul>
And this is one of my sections for reference:
<section class="main-section" id="Project_Description">
<header id="header1">Project Description</header>
<p class="content"> The project consists in building a web page that is a tribute to someone. It should include a title corresponding to the name of the person the tribute is for, a general description of this person, an image with a corresponding caption, some information about their achievements in the form of a list, and a link that leads to the source of the information and/or a place where the reader can find more information.
</p>
</section>
I’ve tried changing a couple things like capitalization and checked for spelling errors and that sort of thing but it doesn’t seem to change the result. Maybe I misunderstood the requirement. Any help is appreciated so thanks in advance.
Challenge: Responsive Web Design Projects - Build a Technical Documentation Page
<style>
html {
scroll-behavior: smooth;
}
#main-doc{
display: flex;
}
#maintitle{
font-size: 25px;
background-color: teal;
color: white;
text-align: center;
padding: 3px;
}
#navbar{
color: black;
font-size: 15px;
position: fixed;
width: 250px;
overflow: auto;
}
ul {
list-style-type: none;
padding: 0;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a:hover {
background-color: #555;
color: white;
}
#header1{
margin-left: 270px;
font-size: 18px;
color: teal;
}
#header2{
margin-left: 270px;
font-size: 18px;
color: teal;
}
#header3{
margin-left: 270px;
font-size: 18px;
color: teal;
}
#header4{
margin-left: 270px;
font-size: 18px;
color: teal;
}
#header5{
margin-left: 270px;
font-size: 18px;
color: teal;
}
#header6{
margin-left: 270px;
font-size: 18px;
color: teal;
}
.content{
background-color: #f1f1f1;
border-style: solid;
border-color: #f1f1f1;
padding: 5px;
border-radius: 15px;
margin-left: 270px;
}
.main-section{
text-align: justify;
}
#list{
margin-left: 270px;
padding: 5px;
border-radius: 15px;
}
@media (max-width: 400px) {
#maintitle{
font-size: 20px;}
#navbar{
font-size: 10px;
width: 200px;}
#header1{margin-left: 220px;}
#header2{margin-left: 220px;}
#header3{margin-left: 220px;}
#header4{margin-left: 220px;}
#header5{margin-left: 220px;}
#header6{margin-left: 220px;}
.content{margin-left: 220px;}
}
</style>
<main id="main-doc">
<div id="text">
<section class="main-section" id="Project_Description">
<header id="header1">Project Description</header>
<p class="content"> The project consists in building a web page that is a tribute to someone. It should include a title corresponding to the name of the person the tribute is for, a general description of this person, an image with a corresponding caption, some information about their achievements in the form of a list, and a link that leads to the source of the information and/or a place where the reader can find more information.
</p>
</section>
<section class="main-section" id="Setting_Up_Your_Title_and_Description">
<header id="header2">Setting Up Your Title and Description</header>
<p class="content"> The title of the page is important because it lets the reader know who the tribute page is about. It's likely that the reader doesn't recognize the name, which is why it might be helpful to include a short description. This will let the reader know a bit of the important context and sets the tone for your tribute page. Your title should have the biggest letters to bring attention to it. The following example belongs in the style section of your code and can serve as an idea of how to set up the title and description.
</p>
<p class="content">
<code>
.title{ background-color: teal;
color: white;
text-align: center;} <br>
.description{
text-align: center;
font-size: 16;
margin-right: 5%;
margin-left: 5%;
}
</code>
</p>
<p class="content"> As you can see, the title has characteristics, such as size (being an <code>h1</code> element) and background color, that make it stand out, while the description has a smaller font size and lets the title shine. The margin in the description also serves the same purpose, as it results in the description taking up less space than the title, now in the horizontal direction.
</p>
</section>
<section class="main-section" id="Setting_Up_Your_Image">
<header id="header3">Setting Up Your Image</header>
<p class="content"> The image is an important part of your tribute page. Having visual elements that are easy to understand and identify keeps readers engaged and adds a lot of value to your page. You want the image to have an impact, but it shouldn't be too distracting. It helps to limit it so it doesnt take the full width of the page, but you should also keep proportions in mind. The way you select the image you want for your image element is by having a source (<code>src="link"</code>) that is a link to the specific image you want to showcase.
</p>
<p class="content">
A good rule of thumb that will help choose an image is to remember that it should represent the person that is the subject of the page, but specifically in a way that references or takes into account the description that you have selected for them. Remember to add and <code>alt</code> attribute to make your page more accessible to those who may have difficulties seeing your image, particularly for people who use screen readers. This element should describe what you see in the image. Think about what you want your readers to take away from the visual representation you have shown, be descriptive but direct. The next section will go deeper into the topic of the importance of accesibility.
</p>
</section>
<section class="main-section" id="Importance_of_Accessibility">
<header id="header4">Importance of Accessibility</header>
<p class="content">
As explained in the Applied Accessibility segment of the freeCodeCamp Responsive Web Design course, "In web development, accessibility refers to web content and a UI (user interface) that can be understood, navigated, and interacted with by a broad audience. This includes people with visual, auditory, mobility, or cognitive disabilities." HTML provides many tools that can help you make your tribute page more accessible, you just have to be able and willing to use them. An <code>alt</code> attribute is an alternative text that accompanies an image that serves to describe the image's content to people who are vissually impared. As it is common with many dissability accommodations, they often help people who are not disabled as well. Sometimes the alternative text will load faster than the image if there are internet connection issues.
</p>
<p class="content">
The Applied Accessibility segment of the freeCodeCamp Responsive Web Design course also mentions that "People with visual impairments rely on screen readers to convert web content to an audio interface. They won't get information if it's only presented visually. For images, screen readers can access the <code>alt</code> attribute and read its contents to deliver key information". This is not the only type of accessibility accommodation tool available in HTML. Another example is to make sure people with different types of color blindness are able to read your page, by making contrast differences significant.
</p>
</section>
<section class="main-section" id="Information_Formatting">
<header id="header5">Information Formatting</header>
<p class="content">
The information about the subject of your tribute page should include some of their history, accomplishments and characteristics. In order to make it easier to read, it helps to have it in bullet points, so that it doesn't end up being a big wall of text. It's also helpful to add <code>text-align: justify; </code> in the style section to help balance your page, as well as adding <code>margin</code> on each side of your text (<code>margin-left</code> and <code>margin-right</code>), this makes it easier on the reader. Having these margins set in terms of percentages ensures that you are able to mantain the proportions you want even when the display size of the page changes.
</p>
</section>
<section class="main-section" id="Additional_Tips">
<header id="header6">Additional Tips</header>
<p class="content">In addition to the examples shown above, here are some tips that will hopefully make the process of building a tribute page easier:</p>
<ul id="list">
<li>• Use descriptive names for your <code>id</code> and <code>class</code> attributes. This will make it easier to keep track of the changes in style and prevent confusion later on.</li> <br>
<li>•Keep your alternative text brief while making sure it describes the image in a way that is useful to the reader within the context of the page. </li> <br>
<li>• When you add your source/further information link to an outside site, you must give your element an attribute of <code>target</code> and set it to <code>_blank</code> in order for your link to open in a new tab.
</li> <br>
<li>• Having your image and title centered helps with the balance of your page.</li> <br>
<li>• Choosing someone you admire as the subject of your tribute page will help you stay interested and engaged with the project.</li> <br>
</ul>
</section>
</div>
<nav id="navbar">
<header id="maintitle">
Building a Tribute Page
</header>
<div id="bar">
<ul>
<li><a href="#Project_Description" class="nav-link">Project Description</a></li>
<li><a href="#Setting_Up_Your_Title_and_Description" class="nav-link">Setting Up Your Title and Description</a></li>
<li><a href="#Setting_Up_Your_Image" class="nav-link">Setting Up Your Image</a></li>
<li><a href="#Importance_of_Accessibility" class="nav-link">Importance of Accessibility</a></li>
<li><a href="#Information_Formatting" class="nav-link">Information Formatting</a></li>
<li><a href="#Additional_Tips" class="nav-link">Additional Tips</a></li>
</ul>
</div>
</nav>
</main>
I copied your code (the one provided in the forum) into the index.html on my end and I didn’t copy anything into the styles.css (I assumed the code you gave was for the index.html alone so I left styles.css empty).
After I did that, the code passed and I am able to submit it without any changes.
Since you are reporting that there is some issue, can you describe the issue in more detail? (for eg, what user stories are showing up as not completed on your end? or perhaps you have some code in styles.css that I didn’t copy?)
I don’t have any code in styles.css not a single line! Every item in the tests area has a check mark except for the one that says: “Each .main-section should have an id that matches the text of its first child, having any spaces in the child’s text replaced with underscores (_ ) for the id’s.” which corresponds to the user stories item number 4 that says: “Each section element with the class of main-section should also have an id that corresponds with the text of each header contained within it. Any spaces should be replaced with underscores (e.g. The section that contains the header “JavaScript and Java” should have a corresponding id="JavaScript_and_Java" )”.
That is why you are unable to pass all of the tests.
The goal for all of the certification projects is to learn how to work with external stylesheets and have your HTML in an index.html and your css in the styles.css
Here is what you need to do to pass.
Delete the style tags and move all of your css here over to the styles.css file
I tried that, it didn’t work. I’m still getting the same issue. I’ve been able to pass the other projects with just using the html.index section, I did it that way because it just felt easier to work with everything in one section so I could see the instructions and preview at the same time without everything being tiny, but seriously thanks for your advice, I can just work like that while using freecodecamp and when I’m done just move the style portion and add the link to the html, and outside of freecodecamp it’s easier to work with external stylesheets and manage the display better, like putting the preview on the bottom. I’ll do that from now on, you’re right, it’s an important skill. But I’m just so confused because I’m still not hitting that one check. I had a friend try it out and he also said it worked just fine, so that’s three people now. I don’t get it
well it worked! I have no idea why. Tried in on microsoft edge and it worked immediately, thank you! Can’t believe I spent days rewriting everything and trying a million things and all I had to do was switch browsers.
not a single line! Every item in the tests area has a check mark except for the one that says: “Each