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
Andy CorbettAndy Corbett 

TrailHead Lightning Challenge Help!

Help please - I am trying to complete the Lightning Challenge here:

https://developer.salesforce.com/trailhead/lightning_components/lightning_components_creating

But when I submit I am told it is wrong:

The component does not include an H1 tag with a 'headline' CSS class

My component reads:

<!-- MyLightningComponent.cmp -->
<aura:component implements="force:appHostable"> 
    <div class="headline">
        <H1>Hello Lightning Component!</H1>
    </div>    
</aura:component>

and I have a Style:

.THIS {
    background-color: yellow;
    padding-top: 10px;
}

H1.THIS {
    font-size:24px;
}

.THIS H1{
    font-weight: bold;
    padding: 10px;
}

.THIS.headline {
    padding-top: 20px;
    font-size:24px;
}

.THIS .red {
    background-color: red;
    padding: 10px;
}

.THIS .blue {
    background-color: blue;
    padding: 10px;
}

.THIS .green {
    background-color: green;
    padding: 10px;
}

Can anyone describe what I have done wrong?
Best Answer chosen by Andy Corbett
Himanshu ParasharHimanshu Parashar

Hi Andy,
 

Sorry for last comment. There is typo. Please find correct one here.

 

<h1 class="headline">Hello Lightning Component!</h1>

All Answers

Himanshu ParasharHimanshu Parashar
Hi Andy,

I have recently completed that challenge. here is the thing which you are missing.
  
<h1 class="headline">Hello Lightning Component!</h1>

add following to css file
  
.headline
{
font-size:24px;
}



Thanks,
Himanshu
Salesforce Certified Developer | Administrator | Service Cloud Consultant

P.S.  If my answer helps you to solve your problem please mark it as best answer. It will help other to find best answer.
 
Himanshu ParasharHimanshu Parashar

Hi Andy,
 

Sorry for last comment. There is typo. Please find correct one here.

 

<h1 class="headline">Hello Lightning Component!</h1>
This was selected as the best answer
Abhijit ShrikhandeAbhijit Shrikhande
The .headline syntax will not work. It needs a .THIS.headline instead in the CSS file.
shruthi sharmashruthi sharma
Not workin! though we include 
.THIS.headline. Please help!
Rida Akhtar 9Rida Akhtar 9

Hi
Here is the complete code: Please try and mark this answer best if it solves your issue.

<aura:component implements="force:appHostable">
<h1 class="headline">Hello Lightning Component!</h1>
</aura:component>

 

CSS:

.THIS .headline
{
font-size:24px;
}
Rida Akhtar 9Rida Akhtar 9


@shruthi sharma what issue are you facing ?

Please copy paste here. Refresh you page once.
David HerreroDavid Herrero
I am getting also the error Challenge not yet complete... here's what's wrong: 
The component is not using the correct CSS for the 'headline' class
And I'm using correctly it
Rida Akhtar 9Rida Akhtar 9
  Did you try this code?

<aura:component implements="force:appHostable">
<h1 class="headline">Hello Lightning Component!</h1>
</aura:component>

CSS:

.THIS  .headline
{
font-size:24px;
}
Jessica Louttit 3Jessica Louttit 3
that code prompts the error 
Failed to save undefined: Issue(s) found by CSS Parser (): Unparsable text found at the end of the source '<aura:component implements="force:appHostable"> <h1 class="headline">Hello Lightning Component!</h1> </aura:component> CSS: .THIS .headline { font-size:24px; }': at line 1, column 1 in '»<aura:component implements="force:appHostable"> <h1 class="headline">Hello Lightning Component!</h1> </aura:component> CSS: .THIS .headline { font-size:24px; }' : Source
raghuramarao karanamraghuramarao karanam
below text should go into MyLightningCompnent.css file;

.THIS  .headline
{
font-size:24px;
}

 
Dmytro KryvyiDmytro Kryvyi

MyLightningComponent.cmp

<aura:component implements="force:appHostable">
<h1 class="headline">Hello Lightning Component!</h1>
</aura:component>

--------------------------------------------------------------------------------------------

MyLightningComponent.css

.THIS  .headline
{
font-size:24px;
}

-----------------------------------------------------------------------------------------

Lightning Component Tabs named "MyLightning" is properly created.

------------------------------------------------------------------------------------------

RESULT: Challenge Not yet complete... here's what's wrong: 
The component is not using the correct CSS for the 'headline' class
rhea_1411rhea_1411
The following works. The trick is to wrap the h1 tag within a div and to use "H1" instead of "h1"..its silly but thats what gets you through the challenge. Here is the complete code:
<aura:component implements="force:appHostable">
    <div>
        <H1 class="headline"> Hello Lightning Component!</H1> 
    </div>
</aura:component>

CSS:
.THIS H1.headline{
    font-size:24px;    
}
Ensure that you use captical H for the h1 tag as given above!
Scott Meridew 20Scott Meridew 20
This solution works:

<aura:component implements="force:appHostable">
    <div>
        <H1 class="headline"> Hello Lightning Component!</H1> 
    </div>
</aura:component>

CSS:
.THIS.headline{
    font-size:24px;    
}
saran kumar 9saran kumar 9
can anyone tell me step wise on how to do it .....

while i am saving ....this error coming User-added image
Anil MalneniAnil Malneni

@Saran kumar

remove the css lines from your component code.

Please click on the Style (ctrl+shift+4) then add your CSS
Jon Oddvar KolnesJon Oddvar Kolnes
I'm having an issue with this module as well. My code is correct, I've even written the exact same as a colleague of mine who's passed the module. Everything works as it's supposed to in Salesforce1, but Trailhead still gives me the "The component is not using the correct CSS for the 'headline' class"-error, even though the CSS is correct. I've deleted the tab and components and recreated it again and again, still the same error.

Anyone have an idea what's causing this? Trailhead just won't accept my correct code!
abhishekdeproabhishekdepro
This can simply be achieved with  
<h1>Camping List</h1>

Where CSS is added to <h1> tags as: 
.THIS h1
{
font-size:18pts;
}