This is what I have based on the directions for this challenge:
The conference application your company is creating must display a phone number in one component for display that's based on the input of another component. Create an application that contains an inputPhone component and an outputText component. The components themselves can be found here and here. You must add the application event and client-side controllers to make it work.
The PhoneNumberInput and PhoneNumberOutput components can be found here and here. Copy and paste those two components into your Developer Edition using the Developer Console.
The application event must be named 'PhoneNumberEvent' and must have an attribute named 'phone' (of type String).
The components must have the correct registerEvent and handler components.
The client side controllers must get and set the 'phone' attribute correctly.
Input is this:
<aura:application >   
    <aura:event type="APPLICATION" /> 
    <aura:attribute name="phone" type="String" />
</aura:event>   
</aura:application>
And I keep getting an error of this:
The 'PhoneNumberEvent' event does not have an attribute component

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:

MyLightningComponent.cmp

<aura:component implements='force:appHostable'>
    <div class="headline">
    <h1>My Lightning Component</h1>
    </div>
</aura:component>

MyLightningComponentApp.app

<aura:application>
    <h1>Hello Lightning App!</h1>
    <c:MyLightningComponent />
</aura:application>

MyLightningComponent.css

.THIS {
}

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

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.

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?