so I have been trying to teach myself how to construct lightning components by putting things from trailhead and other pages to practice but im not sure what im missing to be able to see any styling or formatting i have even tried copying things straight from https://developer.salesforce.com/docs/component-library/bundle/ just to see how it should work and look. Can anyone tell me what im doing wrong or what I am missing or if it's broken how can i fix it. Without seeing it first hand and moving things around myself I will have trouble knowing what im doing.

component code
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <p>start component</p>
    <aura:attribute name='name' type='String' Default='Pearson'>    
    </aura:attribute>
    <p>>Naeem {!v.name}</p>
    <p>
        figure out what i am making
        form
        figure out what is needed for a form
        title
    </p>
    <div class="c-container">
    <lightning:card title='first card' >
        <lightning:layout horizontalAlign="space">
            <lightning:layoutItem flexibility="auto" padding="around-small">
                <h1 class="slds-text-heading_large">This is the Title</h1>
            </lightning:layoutItem>
       </lightning:layout> 
        
        <lightning:buttonMenu aura:id="menu" onselect="{! c.handleSelect }" alternativeText="Show menu">
            <lightning:menuItem value="MenuItemOne" label="Menu Item One" />
            <lightning:menuItem value="MenuItemTwo" label="Menu Item Two" />
            <lightning:menuItem value="MenuItemThree" label="Menu Item Three" disabled="true" />
            <lightning:menuItem value="MenuItemFour" label="Menu Item Four" />
        </lightning:buttonMenu>
        
        <lightning:input lable='name' name='InputName'>
        </lightning:input>
        <lightning:formattedname
         firstName='{!v.InputName}'
         lastName='{!v.name}'                        
         />
       <p> 
        title styling
            css
                header class
    block for the form
        card
            card needs 
                open and close blocks for card
            
    fields for the form
        use attuributes above the form to define the fields
        use lightning input to create fields on the form using the attribute to assign the values that have been put in
    
    a button
        </p>
    </lightning:card>
    </div>
    <aura:attribute name="headerTitle" type="Aura.Component[]">
        <h2>
            <b>Watchlist (0)</b>
        </h2>
    </aura:attribute>
    
    <lightning:card footer="Card Footer" title="Hello">
        <aura:set attribute="actions">
            <lightning:button label="New"/>
        </aura:set>
        <p class="slds-p-horizontal_small">
            Card Body (custom component)
        </p>
    </lightning:card>
    
    <lightning:card variant="Narrow" title="Narrow Card Header" iconName="standard:account" footer="Card Footer">
        <aura:set attribute="actions">
            <lightning:buttonIcon iconName="utility:down" variant="border-filled" alternativeText="Show More"/>
        </aura:set>
        <p class="slds-p-horizontal_small">
            Card Body (custom component)
        </p>
    </lightning:card>

    <lightning:card class="slds-text-heading_small" 
        title="{!v.headerTitle}" iconName="utility:broadcast">
        <aura:set attribute="actions">
            <lightning:buttonMenu iconSize="x-small" menuAlignment="right">
                <lightning:menuItem label="Open Watchlist app" value="Open" />
                <lightning:menuItem label="Add to Watchlist app" value="Add" />
            </lightning:buttonMenu>
        </aura:set>
    </lightning:card>



    <div class="c-container">
        <lightning:layout >
            <lightning:layoutItem padding="around-small">
                <div class="header-column">
                    <p class="field-title" title="Field 1">Field 1</p>
                    <p>Name</p>
                </div>
            </lightning:layoutItem>
            <lightning:layoutItem padding="around-small">
                <div class="header-column">
                    <p class="field-title" title="Field2 (3)">Field 2 (3)
                        <lightning:buttonIcon iconName="utility:down" variant="border-filled" size="small" alternativeText="More Actions" />
                    </p>
                    <p>Eligibltiy</p>
                </div>
            </lightning:layoutItem>
            <lightning:layoutItem padding="around-small">
                <div class="header-column">
                    <p class="field-title" title="Field 3">Field 3</p>
                    <a href="#">Website</a>
                </div>
            </lightning:layoutItem>
            <lightning:layoutItem padding="around-small">
                <div class="header-column">
                    <p class="field-title" title="Field 4">Field 4</p>
                    <p>
                        <span title="">Address</span>
                    </p>
                </div>
            </lightning:layoutItem>
        </lightning:layout>
    </div>
</aura:component>