If you’re already a Hitchhiker, log in to access this content.
Module Assessment| Hitchhikers Platform
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!
Navigate to Pages > Sites. Click the “Edit” button in the row for “Turtlehead Taco Answers”.
Click on “View Code Editor” from Sites > Turtlehead Tacos Answers.
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.
Click on “View Live Preview” to open up a preview of your site in a new tab.
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.
--yxt-color-brand-primaryand 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.)
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.
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: 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.
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.
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.
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”.
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!