Preview and Testing Your Course

Before submitting your course, it’s important to review and test it locally to ensure everything looks and functions as expected. In this lesson, we will go through the process of course preview and thorough testing.

Starting the Local Development Server

1. Open your terminal and navigate to your project directory.

2. Start the development server:

   • If using npm:

     npm start
     

   • If using Docker:

     npm run docker:up
     

3. Once the server is running, open your web browser and go to:

   http://localhost:1313
   

Previewing Your Course

1. Navigate to your course page:

   http://localhost:1313/en/courses/<your-course-name>
   

2. Review the course overview page:

   • Ensure all metadata is correct (title, description, tags, etc.)
   • Check if the course image and video (if available) are displayed correctly
   • Verify that the course objectives and prerequisites are listed correctly

3. Navigate through each lesson:

   • Click the “Start Course” or “Next Lesson” buttons to move through your course
   • Ensure the lesson sequence is correct

Testing Your Course Content

While previewing your course, perform the following tests:

1. Content Display:

   • Ensure that all Markdown is rendered correctly (headings, lists, code blocks, etc.)
   • Check if all links work and point to the correct destinations

2. Media Display:

   • Ensure all images are displayed correctly and not distorted
   • Test if videos play properly
   • Verify that downloadable resources can be accessed

3. Navigation:

   • Test all navigation elements (buttons for next/previous lesson, course overview)
   • Ensure that course sections are organized correctly

4. Responsiveness:

   • Test your course on different screen sizes (you can use your browser’s developer tools for this)
   • Ensure that content and media are responsive and display well on mobile devices

5. Accessibility:

   • Check if all images have appropriate alternative text
   • Ensure that the color contrast is sufficient for readability

Making Corrections

If you find any issues during your preview and testing:

1. Stop the development server (Ctrl+C in your terminal)
2. Make the necessary corrections in your course files
3. Restart the development server and test again

Exercise: Preview and Test Your Course

1. Start your local development server
2. Review your entire course and go through each lesson
3. Perform all the tests listed above
4. Create a list of any issues you find and fix them
5. Test again to ensure all corrections were successful

In the next lesson, we will cover the process of submitting your course via a GitLab merge request.