Module Assessment | Yext Hitchhikers Platform

You must include a first name and last name in your profile to create challenge environments.

Background

The Turtlehead Tacos team loves the work done on the Restaurant Pages so much that they want to do the same thing with their Careers Site.

You’ll work with them to build out a Careers Site, including:

Careers home page
“Why work at Turtlehead Tacos” landing page
Job entity landing pages

For today, you’ll focus just on the Job entity landing pages.

Before you start this challenge, make sure you’ve completed all of the modules in this track. The instructions are meant to challenge you and will provide less detail at each step than in the feature-specific modules. Don’t hesitate to reference past modules if you’re stuck or can’t remember!

Your Challenge

Create a new site and call it “Turtlehead Tacos Jobs”
Create a new page builder Entity Template for Entity Type Jobs. Call it “Jobs Landing Pages”.
Update the Banner Image module parameters
- Map the Background Image to ‘Job Photo’ on the Job entity
- Update the Primary CTA Text to a constant value of ‘Apply Now’
- Map the Primary CTA URL to ‘Application URL’ field on the Job type
Update the Banner Image module CSS. Modify the CSS to make the image transparency 0.7, e,g.,
```
$overlay-color: transparentize(black, 0.7);
```
Update the Job Details module parameters
- Update the Button Text to ‘Join the Turtleheads’
Add a new “Image with Bulleted List” module
- Map the image to ‘None’
- Update the Headline to “Benefits of Working at Turtlehead Tacos”
- Clear out the Paragraph parameter
- Map the Text List to the Benefits field on the Job type
- Map the Button Text to the job field ‘None’
- Move this below the “Job Details” module
You want to feature some of the FAQs around Careers on the pages. These will be the same FAQs for all jobs, but you want them to dynamically change. This is a perfect use case for using a saved filter! Create a saved filter you can use for this called FAQs on Job Pages with:
- Entity Type = FAQs
- Fields with Data = “Answer”
- Keywords contains “career”
Update the Three Column List module to feature these FAQs on the page.
- Update the Headline to “Frequently Asked Questions”
- Update List of Items to “Use entities from a Saved Filter” and select the “FAQs on Job Pages” filter you just created.
- Map Title to “Question” field
- Map Description to “Answer” field
- Map Additional Information - Link Text to “Primary CTA > Label”
- Map Additional Information - URL” to “Primary CTA > Link”
- Move this module above the Footer
Add a Divider module and put it between the ‘Job Details’ Module and the ‘Image with Bulleted List’ Module.
Update the standard Design styling to match that of your Restaurant page set.
- Set the colors:
  - Primary: #c81500
  - Secondary: Black
  - Background: White
- Change the fonts:
  - Header: Alfa Slab One
  - Paragraph: Lato
- Update the button font to match the header font and set the button size to small

Add a module for “About this Page” using entirely hardcoded content (constant values).

Move the module above the Footer
Update the image to a constant value with this url: https://dynl.mktgcdn.com/p-sandbox/hcc4tnmFxn-kG7jctDdVAchbFxEOJl8ZXnNgcU_-Hu4/3000x3000.jpg
Update the headline to “About Turtlehead Tacos”
Map the CTA Text to map to job field “None”

Update the paragraph to:

Founded in 2005 by Marty Morris in Austin, TX, Turtlehead Tacos strives to be your go-to destination for all things Tacos!  We are more than just a restaurant, we're a destination. We are committed to providing our customers with family (and pet!) friendly services, fresh food, and just general good vibes. 

We're also expanding quickly! We have over 50 locations with plans to open many more. We are hiring for all departments, including our restaurant team and corporate functions like Marketing, Legal, Finance, Operations and more. 

Join our team to be part of a fast-paced, lively, caring culture striving to become the Taco Destination of America.

You notice that the FAQs section looks a bit off - the FAQ Titles are too prominent. You want to ensure the FAQ Title and Answer are using the same font.

Earlier, you set the font for Headings to Alfa Slab One, and the font for Paragraphs to Lato. You can see this by inspecting the page for the following styles:

The below controls the default font across the page:
```
body {
    margin: 0;
    font-family: "Lato", sans-serif;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.5;
    color: #373a3c;
    text-align: left;
    background-color: #ffffff;
}
```
And the following overrides that font for heading tags:
```
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    margin-bottom: 0.5rem;
    font-family: "Alfa Slab One", cursive;
    font-weight: 400;
    line-height: 1.2;
    color: inherit;
}
```
To override the heading font for the FAQ Title, you can use CSS!
- Inspect the Answer text of the FAQ and confirm that it follows the rule font-family: "Lato", sans-serif;.
- In Page Builder, go back the ‘Three Column List’ module and update the .title class to include the font-family property to match the Answer font family.
- Update the .title font-weight from “normal” to “bold”
- Update the CTA Link color by modifying the .cta class (within the &-container brackets, signifying the .cta-container class) to have color #c81500.
Update the Navigation Bar module

Update the link text to have the following header names in this order:
- Restaurants
- Careers
- Community Stories
- Events
- FAQs
- The Turtlehead Fun Zone

Module Assessment

+<% util.points %> points

Weekly Challenge Streak: <% util.streakWeekly %>

You must include a first name and last name in your profile to create challenge environments.

Challenge account expires in <% util.expirationHours > 24 ? Math.round((util.expirationHours * 1.0) / 24) : util.expirationHours %> <% util.expirationHours > 24 ? (Math.round((util.expirationHours * 1.0) / 24) == 1 ? 'day' : 'days') : (util.expirationHours == 1 ? 'hour' : 'hours') %>.

Challenge account has expired. Please create a new account.

Report Card

Create new site for Turtlehead Tacos Jobs

Create new Page Builder template or Jobs Landing Pages

Update the Banner Image module parameters

Update the Banner Image Module CSS background image transparency

Update the Job Details module parameters

Add the Image with Bulleted List module and update parameters

Add and update the About this Page module for your Jobs template

Add a new saved filter for FAQs on Job Pages

Add the Divider module

Customize the branding fonts, colors and button size

Customize the CSS for the title and CTA link color in the Three Column List module

Update the Navigation Bar module parameters

Previous Submissions

Attempt #<% submission.attemptNumber %>

<% submission.date %>

Score: <% submission.numericScore %>

Pending

Feedback

<% elem.innerText %>