01-Creating-Your-First-Prototype.md

Lesson 1: Creating Your First Prototype

This tutorial will show you how to make prototype pages. In this lesson, we will be using the UEF public page template--but the principles apply to any of the page templates within Genesys.

Step 1: Before You Begin

Ensure the Genesys folder is open. If you don't see GENESYS in the editor's Explorer pane:

1. Select File > Open Folder...
2. Navigate to your Genesys directory.
3. Press Select Folder.

Step 2: Make Your Project Folder

1. Select the projects directory.
2. Select the New Folder icon. (It appears next to GENESYS).
3. Type the name of your project. Let's use the name First Prototype for this lesson.

Step 3: Make Your First Page

1. Create a new page.

   • Navigate to your First Prototype directory.
   • Select the New File icon. (It appears next to GENESYS).
   • Type the name of your file. Let's use the name home.html.

2. Select your template.

   • Indicate that your new file is a HTML file by selecting the language mode in the lower right of the bottom status bar. Select HTML.
   • Place your cursor at the top of your page and type ! or !! to select either a plain HTML page template or one of the predefined design system templates.

Step 4: Add Some Content

1. Select your new home.html file. It will open in the editor.
2. Start adding page content. Let's add a UEF Basic Container to show how this is done.
3. Type uef-. As you start typing, the DesignSense Snippet dropdown will appear showing all the UEF snippets. You can scroll through the list to find the snippet you want, or just type it directly to enter it on the page. Select the uef-container-basic snippet, press Enter, and then let's view your page.

Step 5: View Your Page

1. Let's make sure we save the page first, so we see all of our latest updates. Select File > Save or press CTRL+S.
2. Right-click on home.html.
3. Select View in Browser.

In later lessons, we'll show you how to automatically see changes appear in your browser as you work on your pages.