+ Start a Discussion
André CintraAndré Cintra 

Creating Components trailhead challenge

Hello I'm new to Salesforce and I'm doing the trailhead to learn.
But I'm stuck at this challenge in Lightning Module.

Here's the challenge:
Create a simple Lightning component with a styled headline. The headline must use an H1 tag with a CSS class that enforces a 24px font-size. Make the component available in the Navigation Menu of Salesforce1.The component must be named 'MyLightningComponent'.
The component must include an H1 tag with a CSS class named 'headline'. The 'headline' CSS class must set a font-size of 24px.
The Lightning Component tab that is added to Salesforce1 must be called 'MyLightning'.

And here's what I did:


<aura:component implements='force:appHostable'>
    <div class="headline">
    <h1>My Lightning Component</h1>
    <h1>Hello Lightning App!</h1>
    <c:MyLightningComponent />



I created the tabs in the Salesforce1 and everithing looks right but I can't pass the challenge because it's aways return a error saying "The component does not include an H1 tag with a 'headline' CSS class"

I do no what to do with this error.
Best Answer chosen by André Cintra
Hi André,

I believe you need to add that class to the h1 tag:
<h1 class="headline">My Lightning Component</h1>


All Answers

Hi André,

I believe you need to add that class to the h1 tag:
<h1 class="headline">My Lightning Component</h1>

This was selected as the best answer
Greg Altonji 7Greg Altonji 7
I had the same problem.  Still cannot get it to work.  This is my cmp

<aura:component implements="force:appHostable">
    <h1> class="headline">Hello My Lightning Component</h1>
Jessica Louttit 3Jessica Louttit 3
I am also stuck on this one. 
Kakasaheb EkshingeKakasaheb Ekshinge
I am not able to select my Lightning page to create tab...???
 I wannna create 'MyLightning' tab..so I am not able to select my Lightning page..???
Anjali DahiyaAnjali Dahiya

I also faced the same problem .So I created a VisualForce page  and include my Lightning component in that and also sectect the checkbox to make it available for Lightning app Select the checkbox "Available for Salesforce mobile apps and Lightning Pages" 
And Created vf tab for this.
Dmytro KryvyiDmytro Kryvyi

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



.THIS  .headline


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

Along with the suggestion provided by Vinoj, one must have a custom domain inorder to see 'Lightning Component Tabs' as one of the option under custom tab. You should be able to add your component then.

If not then the solution provided by Anjali works perfect and should be able to pass the task. 

Ashutosh PradhanAshutosh Pradhan
1. Header
<aura:component implements="force:appHostable">
           <H1>Camping List</H1>
2. ComponentList 
         <li>Bug Spray</li>
         <li>Bear Repellant</li>
         <li>Goat Food</li>


3.Create a CSS like campingHeader.css and enter


4. Add all component to Camping List Lightning Component

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    <c:campingHeader />
    <c:campingList />

This worked for me.

Please mark this as best answer
@Ashish Narang@Ashish Narang
Just to add, it seems everyone is getting confused with font size 18 point, 18 point is 18pt and not 18px.
I hope it helps.