Navigating Voyage

This article explains how to navigate Voyage as a student.

Last updated - July 12, 2023

The Voyage Home Screen

When you first log in to Skill Struck Voyage you will see the blue home screen. Here you have several options to choose from.

Screen Shot 2022-04-04 at 1.19.58 PM

  • To begin coding, click the Code button.
  • To manage your projects, click the Projects button.
  • To view your profile, including your points, class leaderboard, projects, and live website, click the Profile button.
  • If your class uses Type Station, click the Type Station button to enter the typing course.
  • Click the Settings button to change your editor settings and account settings.

 

The Navigation Bar

At the top of the screen is the navigation bar. It will stay at the top of the page even when you navigate to different parts of Voyage.

navbar

Click the three bars in the left corner of the navigation bar to open your Skill Struck menu. This menu shows your school and the section you are in.

Screenshot 2023-07-12 at 09.36.30

If you are in more than one section, click the Change section button to switch between sections. Underneath your school and section name, you will see Pages.

  • Click the Code & Learn button to open your textbook and code editor.
  • Click My Projects will open your projects.
  • Click Welcome Video to view a quick video that welcomes you to Skill Struck.
  • To view your profile, including your points, class leaderboard, projects, and live website, click My Profile.
  • At the bottom of the menu, click Settings to open and edit your settings.

 

navbar

On the right side of the navigation bar are several helpful tools.

  • Click the blue icon to launch a tutorial for the page you are viewing.
  • The book icon opens the glossary. In the glossary, you can search for terms used in the lesson and their definitions.
  • Click the palette icon to open the color picker. This tool is especially helpful when working on HTML or CSS.
  • The question mark icon opens the Get Help menu. From this menu, you can view a page tutorial, search our Help Center, or email Skill Struck's support team.
  • The gear icon opens the settings menu.
  • Click on your Skillmoji in the right corner of the navigation bar to view your profile including your points, your class leaderboard, your projects, and your live site. You can also choose to edit your skillmoji by clicking the button under the image.

The Sidebar

Once you are in the coding section of Voyage, the sidebar will appear. There are only three options on the sidebar, and they help to control how Voyage looks for you.

  • Click the textbook icon to view or close the textbook.
  • Click the editor icon to view or close the text editor.
  • Click the preview icon to view or close the in-page preview. If a section is not showing, the first thing you should do is make sure you have the section open to view.

Screen Shot 2022-04-05 at 12.20.10 PM

voyageThe Textbook

The textbook section on the left side of your screen displays your lesson and contains your checkpoints, quizzes, and challenges.

  • Click on the Change lesson button at the top of this section to navigate to a different unit or lesson.
  • Click the speaker button next to the Change lesson button to activate text-to-speech and have the lesson read to you. 
  • Click the blue Start checkpoint button at the bottom of this section to access the checkpoint, quiz, and challenges for the lesson.
  • Click Continue to move to the next lesson, or Back to move to the previous lesson.

The Code Editor

The code editor section is in the middle of the screen. This is where you type in your code. The button above the code editor will show your project files when you click on it and allow you to change projects or files. Before you begin coding, always make sure you are in the right file and using the correct file type.

The Preview Section

The preview section is to the right of the screen and displays a live preview of the code you entered into the code editor.

  • Click the Run button to refresh your preview.
  • Click the Save button to save your code.