function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Susan ThomlinsonSusan Thomlinson 

Challenge Not yet complete... here's what's wrong: The 'campingList' component does not include the correct markup.

I cannot for the life of me, figure out what could be wrong with my campingList component markup for the "Create a Simple Camping List Lightning Component" challenge.  This is the markup for campingList.cmp:

<aura:component>
     <ul>
        <li>Bug Spray</li>
        <li>Bear Repellant</li>
        <li>Goat Food</li>
    </ul>
 </aura:component>

Please help me figure out why I am getting the error.  Thank you, Susan

 
Jeff DouglasJeff Douglas
Sorry you are having problems Susan. What is the actual error message you are receiving and I'll dig into it.

Jeff Douglas
Trailhead Developer Advocate
Susan ThomlinsonSusan Thomlinson
Here is the message: Challenge Not yet complete... here's what's wrong: The 'campingList' component does not include the correct markup.
IonutIonut
Hi Susan,
Try replacing "<ul>" with "<ol>.
Susan ThomlinsonSusan Thomlinson
That worked. Why did the challenge ask for an "unordered" list? I am just glad that it worked. I should have thought to try that. I appreciate your help.
Jeff DouglasJeff Douglas
Susan, it's actually a small but that I'm in the process of fixing. It should be online sometime today. Sorry for the inconvience.

Jeff Douglas
Trailhead Developer Advocate
laurens.brandlaurens.brand
Funny I cant think whats wrong with the header.

Code I am using is

<aura:component>
    <STYLE>
        H1 {
            FONT-SIZE:18pt;
        }
    </STYLE>
    <H1>Camping List</H1>
</aura:component>

And the validation says: "The component is not using the correct font size."
IonutIonut
Maybe its looking for the separate style file. Try to create it and include the font size there
laurens.brandlaurens.brand
I get "The 'campingHeader' Lightning Component does not include the correct markup." when I use a sperate stylesheet.

<aura:component>
    <h1 class="h1class">Camping List</h1>
</aura:component>

CSS:
.THIS {
}

.THIS.h1class {
    font-size: 18pt;
}

The following CSS also does not work

.THIS {
}

.THIS.h1class {
    font-size: 24px;
}
Eric Kendi ShiraishiEric Kendi Shiraishi
I am also having the issue with the header.

Component: 
<aura:component >
	<H1>Camping List</H1>
</aura:component>

CSS: 
.THIS {
    
}
H1.THIS{
    font-size:18pt;
}

 
Eric Kendi ShiraishiEric Kendi Shiraishi
It is another error: Challenge Not yet complete... here's what's wrong: 
The 'campingHeader' Lightning Component does not include the correct markup.
Eric Kendi ShiraishiEric Kendi Shiraishi
Hi I managed to work this out.
Here are the codes:
Component:
<aura:component > <h1>Camping List</h1> </aura:component>
CSS:
.THIS { font-size:18pt; } h1.THIS{ font-size:18pt; }
 
laurens.brandlaurens.brand
Thanks Eric, that worked perfectly. 
Allison Ng 5Allison Ng 5

I'm also stuck with the "The component is not using the correct font size." for this challenge 

camping.cmp

<aura:component >
    <c:campingHeader/>
    <c:campingList/>
</aura:component>
campingHeader.cmp 
<aura:component > 
    <h1>Camping List</h1> 
</aura:component>
campingHeader.css (it is ctrl + shift + 4 so it is linked to the campingHeader.cmp) 
.THIS.container {	width: 100%;
	padding: 10px 0px;
	margin: 0px;
}

.THIS .center {
	margin: 0px auto;
}

.THIS .content {
	max-width: 768px;
	font-size: 12px;
	color: #3c3d3e;
}

.THIS {
    font-size: 18px;
}

.THIS .h1{
    font-size: 18px;
}

I've tried switching ul to ol, and h1 to H1... And I get an error if I do ".h1 .THIS"

 

 
Allison Ng 5Allison Ng 5
Solved it. I used px instead of pt.

It should've been this: 
.THIS {
    
}

h1.THIS{
    font-size: 18pt;
}

 
karan sahnikaran sahni
I was maiking the mistake of using using 18px instead of 18pt.
Not a well designed test. Who uses 'pt' these days?
Chirag GulatiChirag Gulati
.THIS {
    
}

.h1.THIS {
    font-size: 18pt;
}

Try this, it worked for me.
Justin DeckJustin Deck
For campingHeader.css I tried .THIS { } p.THIS { font-size: 18 pt;} (both as a single line and as Chirag has done on 7 lines. Both yield the result that I am not using the correct font size. The challenge asks the font size to be 18. I am confused. Is there an error in this challenge?
Suzi Simmons 30Suzi Simmons 30
I cannot get past the font size error, either. 
Suzi Simmons 30Suzi Simmons 30
I cannot get past the font size error on the challenge, AND it work perfectly in the preview. I have also logged into a different develper org.  Does anyone know what I am doing wrong?  Here is my code

Camping.cmp
<aura:component >
  <c:campingHeader />
  <c:campingList />
</aura:component>

CampingList.cmp
<aura:component >
      <ol>
        <li>Bug Spray</li>
        <li>Bear Repellant</li>
        <li>Goat Food</li>
    </ol>
</aura:component>

CampingHeader.cmp
<aura:component >
    <h1>Camping List</h1>
</aura:component>

camping.css
.THIS {
}
h1.THIS {
    font-size: 18pt;
}

Campingapplication.app
<aura:application >
    <c:Camping />   
</aura:application>

Thanks in advance
Suzi Simmons 30Suzi Simmons 30
Found out my problem!!  I wasn't understanding the concept of bundles. Now I passed the challenge by having the css in the right bundle.
Peter OgilviePeter Ogilvie
Thank you folks for leaving these bread crumbs for others follow!   My problem was setting the font-size to 18px instead of 18pt.  Whew!  
Tushar Shirsath 1Tushar Shirsath 1
Folk just press cntrl+shift+4  it will generate campingheader.css file.just copy past this code in it.
campingheader.css:

.THIS {
}
h1.THIS {
    font-size: 18pt;
}

CampingHeader.cmp :

<aura:component > 
 
    <H1>Camping List</H1> 

</aura:component>
stephen balmerstephen balmer
Hi Everyone,
Below is my code:

camping.cmp -  
<aura:component >

    <c:campingHeader/>
    <c:campingList/>
    
 </aura:component>
campingList.cmp -  
<aura:component >

    <ol>Bug Spray</ol>
    <ol>Bear Repellant</ol>
    <ol>Goat Food</ol>
    
</aura:component>
campingHeader.cmp -  
<aura:component >
  
   <H1>Camping List</H1>
    
 </aura:component>

campingHeader.css -  
.THIS {
}
H1.THIS{
    font-size:18pt;
 }

I am seeing the below error. Have tried all the solutions provided in above comments. Please help me out.

"The 'campingList' component does not include the correct markup".

 
Jeff DouglasJeff Douglas
Stephen,

Double check the HTML in your campingList component. It should use <li> and not <ol> for the list items. 

Jeff Douglas
Trailhead Developer Advocate
Indraja TripuraneniIndraja Tripuraneni
Hello Stephen,

Your campingList component must contain an ordered list of camping supplies. 

Try this,

<aura:component >
    <ol>
          <li>Bug Spray</li>
          <li>Bear Repellant</li>
          <li>Goat Food</li>
    </ol>
    
</aura:component>

Thanks,
Indraja



 
Terry UlanchTerry Ulanch
I have too many accounts :)   Trailhead has it's own and I was using my developer one..... closely read trailhead and used the environment for the specific training.... wala good to go
Vijay Krishnamoorthy 5Vijay Krishnamoorthy 5
<aura:component >
    <ol>
        <li>Bug Spray</li>
        <li>Bear Repellant</li>
        <li>Goad Food</li>
    </ol>
</aura:component>

still getting "The 'campingList' component does not include the correct markup."
Vijay Krishnamoorthy 5Vijay Krishnamoorthy 5
never mind found the issue, the third item spelled incorrectly : )
Payalnew newPayalnew new
Add the font size under campingHeader style class rather than full component. Open the lightning components and add into campingHeaderUser-added image
Jairo RamalhoJairo Ramalho
It worked for me the #Suzi Simmons 30 post.. just keept the px.
Erik Ivarsson 16Erik Ivarsson 16
Hi, I was struggling with this as well and my issue was that English was not set as the Locale in the Org... Frustrating, to say the least but when I changed that the assignment verification was successful directly with the same code that previously was not been verified. Salesforce: please fix or inform about this...
Harjeet Makkar 13Harjeet Makkar 13
I got it working as below:-
User-added image

CampingList.cmp :-
<aura:component >
    <ol>
        <li> Bug Spray </li>
        <li> Bear Repellant </li>
        <li> Goat Food </li>
    </ol>
    
</aura:component>

CampingHeader.cmp:-
<aura:component >
    <H1> Camping List </H1>
</aura:component>

CampingHeader.css:-
.THIS {
}
h1.THIS
{
    font-size: 18px;
}

Camping.cmp:-
<aura:component >
    
    <c:campingHeader/>
    <c:campingList/>
    
</aura:component>
Peter Kalina 14Peter Kalina 14
Here is my code that is working:

camping.cmp
<aura:component >
    <c:campingHeader/>
    <c:campingList/>
</aura:component>

campingList.cmp
<aura:component >
    <ol>
        <li>Bug Spray</li>
        <li>Bear Repellant</li>
        <li>Goat Food</li>
    </ol>
</aura:component>

campingHeader.cmp
<aura:component>
    <h1><c:campingList/></h1>
</aura:component>

campingHeader.css
.THIS {
}
p.THIS {
    font-size: 18px;
}
 
Ramacahandran GanesanRamacahandran Ganesan
@Peter

One small correction in css file  instead of p.THIS , it should h1.THIS right ? 

campingHeader.css
.THIS {
}
h1.THIS {
    font-size: 18px;
}
Basusri MajumdarBasusri Majumdar
It helped me to clear the challenge
 
Filip Poverud 4Filip Poverud 4
Hi all.
I have the same error and there's obviously something seriously wrong with my bundle/code.

campingList.cmp 
<aura:component >
    
    <ol>
    	<li>Bear Repellant</li>
    	<li>Bug Spray</li>
    	<li>Goat Food</li>
    </ol>
	
</aura:component>

campingHeader.cmp 
<aura:component >
    
	<h1>Camping List</h1>
    	
</aura:component>

campingHeader.css 
.THIS {
}

h1.THIS {
    font-size: 18pt;
}

camping.cmp 
<aura:component >
	
    <c:campingHeader/>
    <c:campingList/>
    
</aura:component>

It's also obvious that something is wrong in the debug when I create a test app:

User-added image

As you can see the header has a font-size of 18pt.
I have no clue why and where in my code I should correct this.

Any advice would be appreciated.

with Regards
Filip Poverud
Abhi bhardwajAbhi bhardwaj
Hi Filip , Please change 
h1.THIS {
    font-size: 18pt;
}

to 
h1.THIS {
    font-size: 18px;
}

​​​​​​​ 
Vinício RamosVinício Ramos
This is Code ->

--campingList--

<aura:component >
    <ol> use
    <li>Bug Spray</li>
    <li>Bear Repellant</li>
    <li>Goat Food</li>
    </ol>
</aura:component>

--campingHeader--

<aura:component >
    <H1>Camping List </H1>
</aura:component>

--Style - CSS--

h1.THIS {
    font-size: 18px;   //remember use 'px'
}

Code:
<aura:component >
     <c:campingHeader />
     <c:campingList />  
</aura:component>
fas asawsfas asaws
I'm working on the same challenge and scripts for my new project of gas griddles reviews (https://www.smokerzhub.com/best-gas-griddles/). Can you guide me about integration with dynamic website?