Attendee User Guide¶

This guide is a manual for individuals participating in an Open Codelabs hands-on session as attendees.

1. Getting Started¶

What is Open Codelabs?¶

It is a Google Codelab-style step-by-step learning platform. You can learn at your own pace in practice-oriented hands-on workshops.

Attendee Roles¶

Follow the provided Codelab step-by-step.
Progress by completing each step.
Leave feedback and questions if necessary.

2. Connecting¶

2-1. Receiving the Access URL¶

You will receive one of the following from the session facilitator: - QR Code: Scan with your smartphone. - Access URL: Enter directly into your browser.

2-2. How to Connect¶

Connect via QR Code¶

Open your smartphone's camera or a QR scanner app.
Scan the QR code displayed on the screen.
Your browser will automatically open and connect to the system.

Connect via URL¶

Open a web browser (Chrome, Firefox, Safari, etc.).
Enter the provided URL.
Example: http://localhost:5173
Example: https://xxxxx.ngrok.io
Press Enter to connect.

Recommended Browser

For the best experience, we recommend using Chrome or Edge.

3. Selecting a Codelab¶

Main Page¶

Upon connecting, the Codelab list will be displayed: - Title - Brief description - Estimated time requirement - Tags (Topic, Difficulty, etc.)

Selecting a Codelab¶

Click on the Codelab you want to participate in.
You will be taken to the Codelab details page.
Click the "Start" button.

4. Progressing through a Codelab¶

4-1. Screen Layout¶

The Codelab screen consists of three main areas:

Left: Table of Contents¶

A list of all steps.
Displays the step currently in progress.
Completed steps are marked with a checkmark ✓.

Center: Content Area¶

Explanations and instructions for the current step.
Code examples.
Images and diagrams.

Right: Progress Bar¶

Displays overall progress.
Estimated remaining time.

4-2. Step-by-Step Progress¶

Go through each step as follows:

Read: Read the instructions for the step carefully.
Practice: Execute the provided code or commands yourself.
Verify: Check if the results are as expected.
Next: Click the "Next" button at the bottom to move to the next step.

Learning Tips

Don't rush; make sure you fully understand each step before moving on.
Don't just copy and paste code; try typing it out yourself.
If you get stuck, don't hesitate to ask questions.

4-3. Copying Code¶

When there is a code block:

echo "Hello, World!"

Click the copy icon at the top-right of the code block.
Paste it into your terminal or editor.
Run it and check the result.

5. Saving Progress¶

Auto-save¶

Your progress is automatically saved every time you move to the next step.
Even if you close your browser, you can resume where you left off when you reconnect.

Resuming after Leaving¶

Reconnect using the same URL.
Select the Codelab you were working on.
You will automatically be taken to the last step you were on.

Cookies and Local Storage

Your progress is saved in your browser. Clearing browser cookies may reset your progress.

6. Leaving Feedback¶

How to Provide Feedback¶

At the bottom of each step, there is a feedback input field: 1. Enter your comments or questions. 2. Click the "Submit Feedback" button. 3. The facilitator can see this in real-time.

What kind of feedback can I leave?¶

Parts that are difficult to understand.
When errors or problems occur.
Parts that need additional explanation.
Ideas for improvement.

7. Completing a Codelab¶

Upon Completing All Steps¶

A "Completed" message will be displayed.
100% progress achieved.
Completion certificate or verification may be provided (depending on the session).

After Completion¶

Explore other Codelabs.
Review the completed Codelab.
Ask the facilitator for additional materials.

8. Frequently Asked Questions (FAQ)¶

Q1. Can I stop in the middle and resume later?¶

A. Yes, it is possible. You can resume from where you left off by accessing the same URL with the same browser.

Q2. Can I continue on another device?¶

A. In the current version, progress is saved per browser. Once an account feature is added, you will be able to continue from other devices.

Q3. Is it okay if my pace is different from others?¶

A. Absolutely! It is most effective to learn at your own pace.

Q4. Can I go back to a previous step?¶

A. Yes, you can go back at any time by clicking the previous step in the Table of Contents on the left.

Q5. I followed the code, but an error occurs.¶

A. Check the following: - Did you copy the code exactly? - Did you complete all previous steps? - Is the environment setup correct? - Ask the facilitator for help.

Q6. What do I get when I complete a Codelab?¶

A. It depends on the session. Facilitators may provide certificates, materials, or additional learning resources.

9. Keyboard Shortcuts¶

Shortcuts for convenient learning:

Key	Function
`→` (Right Arrow)	Move to the next step
`←` (Left Arrow)	Move to the previous step
`Ctrl/Cmd + K`	Search (if available)

10. Troubleshooting¶

Page is not loading¶

Check your internet connection.
Refresh the browser (F5 or Cmd+R).
Re-confirm the URL with the facilitator.

Cannot copy code¶

Drag with your mouse to copy instead of using the copy button.
Or type the code directly.

Progress is not being saved¶

Check if cookies and local storage are enabled in your browser.
Check if you are in Incognito/Private mode.

11. Making the Most of Your Learning¶

Before Practice¶

[ ] Verify installation of necessary tools and software.
[ ] Ensure a stable internet connection.
[ ] Prepare an environment free from distractions.

During Practice¶

[ ] Understand the code by typing it yourself.
[ ] Think about "why" as you go through each step.
[ ] Ask questions as soon as you get stuck.

After Practice¶

[ ] Review the completed Codelab again.
[ ] Try applying what you've learned to real projects.
[ ] Explore other related Codelabs.

12. Additional Resources¶

FAQ
Facilitator Guide (If you're curious about how to run a session)
GitHub Repository

Happy Learning!

We hope you have a fun and effective learning experience with Open Codelabs! 🚀