loading

Module Assessment| Hitchhikers Platform

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

Background

Well, first things first, the basic setup you have right now is not using the primary color according to the Turtlehead guidelines. You don’t know a lot about how to make changes to the Answers styling (yet), but you recognized the $color-brand-primary variable when you saw it. Time to make a quick change!

Challenge

  1. Navigate to Pages > Sites. Click the “Edit” button in the row for “Turtlehead Taco Answers”.

    sites edit button

  2. Click on “View Code Editor” from Sites > Turtlehead Tacos Answers. view code editor button

  3. Hover over the “master” Branch on the left and click on the pencil icon. You are now viewing the Github Repository for your site! You should expect this to take a couple minutes to load – in the background, it’s starting up a container for your development.

    edit master branch code editor

  4. Click on “View Live Preview” to open up a preview of your site in a new tab.

  5. Navigate to static > scss > answers-variables.scss. This is the file where you can update styling variables referenced throughout the layout files. You’ll learn more about this later and what all of these variables mean.

  6. Find the --yxt-color-brand-primary and update it to #32a85e. Leave everything else as-is. (Feeling confused? You can scroll to the bottom of the challenge to see a video of these steps.) variables file and create preview button

  7. Your Live Preview should be ready. As you learned, the initial preview is generated based on your repository before you staged any changes like you did in step 6. Whenever you click out of the code editor, we will automatically initiate a fresh build of your site so you can preview your changes. Click out of the code editor.

  8. If you did step 7, the update should be in progress. Open the Console by going to Tools > Console and you should see logs updating you as it builds. Wait for your preview to be ready – the console should look like this when it is: live preview completed view Once it is, hard refresh the preview tab (cmd-shift-R in Mac or ctrl-shift-R on Windows). Marvel at your updates!!! If you don’t see the color change to Turtlehead green, then go back to step 6 and make sure you are updating the right variable. If that doesn’t help, watch the video at the end of this challenge for some guidance.

  9. You can’t forget to commit your changes. Click the “Commit” button at the top left of your code editor and enter a commit message saying “updating color-brand-primary” and add a tag to the commit with today’s date and your name, (e.g., “YYYY-MM-DD-Liz”). When prompted, click on the link to the Staging Environment in the modal.

  10. Once you’re in the Staging Environment screen, click on the Builds tab. Wait for the build to finish. If unsuccessful, click on the build to see if you can figure out what’s not working. In many cases it could be a missing colon or an invalid input. commit and monitor

  11. Once the build works, you’ll need to trigger a publish of the “master” branch. If you publish a branch to your staging environment, the staging link should update with your latest link after each commit moving forward. To Publish, click the Publish button in the top right, select the “master” branch and click “Publish”. publish site

  12. Using the breadcrumbs, return to the main page for your Site. Click on the link to the staging environment, enter “test” for your username and for your password, and rerun your search.

Congratulations! You’ve just committed your first Answers code!!

Don’t worry- you’ll learn more about how to update branding in detail soon – but you’ve successfully made your first change to your frontend!

Module Assessment
+<% util.points %> points
loading
Weekly Challenge Streak 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
Change the $color-brand-primary in answers-variables.scss
Previous Submissions
Attempt #<% submission.attemptNumber %>
<% submission.date %>
Score: <% submission.numericScore %>
Pending
Splash Loading