Want to create interactive content? It’s easy in Genially!

Get started free

Hi-Fi Prototype (ENGH 388).pptx

Melanie Salas

Created on April 20, 2026

Start designing with a free template

Discover more than 1500 professional designs like these:

Magazine dossier

Momentum: Onboarding Escape Game

Momentum: Manager Guide

Wizardry Letter

Search Bar Card

Piñata

Microlearning: When to Use Chat, Meetings or Email

Transcript

Jonathan, Danilo, Maija, Melanie RefractoryEDU

Programming Made Simple (Beta Test)

Start

Welcome

Welcome to our course, beta tester!

This E-Learning deliverable aims to enhance the project planning and framework building skills of the struggling novice software developer, as well as conditioning resume building skills, all while building the users portfolio with the programming assignments done in here. This prototype is mainly to test the functionality of our platform.

Let’s get started!

This Photo by Unknown Author is licensed under CC BY-SA

Course overview

Module 1 Module 2 Module 3 Module 4

Program Planning

Framework Building

Continue

Resume Refinement

Portfolio Creation

Yes

No

Would you like to test through Modules 1 and 2?

Test out of modules 1 and 2

Okay I passed Aw I failed

Module 1 – Program Planning

Start

SUB MODULES: 1. Description for module 2. “Breaking Down Problems” Article by Danny Smith 3. Breakdown of “FizzBuzz” 4. Downloadable planning template PDF

Module 1.1: Program Planning

This module is designed to expose the user to some program planning techniques! Users will even get to see example code for a very popular programming assignment alongside a breakdown with the same techniques we will discuss!

Continue

1.2: Breaking Down Problems: It’s hard when you’re learning how to code – Danny Smith

In this article written for Medium by Danny Smith, Danny recounts this teaching moment he has with his student who is having a difficult time figuring out where to start on a programming assignment. Danny assists by telling the student to start by writing down what they DO already know, such as what is this function supposed to take in and spit out? Link to article Click the link above to read the article. On the right is a step-by-step procedure created by Danny for your reference!

Continue

Fizz buzz is a well-known programming assignment is a good test for seeing if you can think like a programmer. The instructions for this assignment are as follows:

1.3: FizzBuzz

Continue

Let’s break this down..

Let’s define a function called “fizzbuzz()”. As comments, write in your IDE of choice what we need our function to take in and put out. We will be using Visual Studio Code for this example. This here is a good start!

Continue

1.4: Planning template for future projects

Planning template for download

Finish Module 1

After downloading please continue!

Module 2 – Framework Building

Start

Description of Module:
  • Coding in the style of user’s choice
  • Debugging approaches
  • Activities for practice

Module Two: Framework Building

  • The purpose of this module is to help our users transition from planning their codes to performing actual coding by teaching them how to build their own programs step by step and avoid common pitfalls 

Continue

What Framework Building will cover

  • Coding in the style of how the user chooses 
  • It will cover how mistakes that beginners make can be fixed and adjusted 
  • How to approach debugging and testing in small, easy to follow instructions 
  • It will also cover how to create and use structured checklists that can help our users stay organized
  • This can help users now turn them visions into real, working code. 

Continue

Key Activities

  • Mistake Adjustment walkthrough: helps new coders and users fix errors that are often made and how to avoid them in the future
  • "Find the Bug" Game: Users will practice identifying and fixing bug issues in smaller code sections. 
  • Incremental Testing Exercises: Users will build and test out some codes in smaller pieces
  • Downloadable Checklist: Users can download a PDF where they can reference for future projects or coding. 

Finish Module 2

Module 3 – Resume Refinement

Start

Description for module - What are employers looking for? - (In development) Heatmap of where recruiters look - (In development) Pick The Resume game

On the next slide, quicky review the example resume for 20 seconds, before continuing to the following slide

Continue

Continue

Think about what stood out to you as done poorly in Walt Jr’s resume and write up to 5 of them on the paper next to you.

Continue

After doing so, please continue forward!

What Walter jr. is missing in his resume

1C

  1. Missing Impact-driven content in his “Experience” section
  2. He lists the tasks he’s completed rather than their outcomes, leaving out the detail that he “Optimized a sorting algorithm to reduce runtime by 15%” in the code of a specific project he worked on.
  3. He displays his reliance on tutorial hell, suggesting his lack of independent problem-solving skills to recruiters
  4. He uses passive action verbs, including phrases "Responsible for" and "Learned about" instead of industry-standard action verbs like "Developed," "Architected," or "Implemented

1B

1A

1B

1C

1C

1A

Continue

What Walter jr. is missing in his resume (part 2)

2. Poor information sorting causing visual noise

  • His presented skills lack both detail and specific examples, where he could instead list specific tools, languages, and frameworks he has worked with.
  • His experience history is pushed to the smaller left side of his resume, when it instead should be given the larger half.
  • His “Objective” section is a 7-line wall of text that increases the cognitive load of recruiters by forcing them to read through unnecessary fluff.

2C

2A

2B

2B

2A

2C

Continue

3A

What Walter jr. is missing in his resume (part 3)

3. Lacking professionalism and inconsistent formatting

  • In starting from a template to create his resume, he over relies on the example formatting, including the title at the top which should reflect his actual professional identity, and the design used for his skills section.
  • He uses improper tone, such as his use of first-person language and nicknames, while also formatting his font smaller than the rest of the text on his resume.
  • He misses out on including professional links to his portfolio in his contact information, when he instead shares a link to a singular project he created.

3A

3B

3C

3B

3C

3A

Continue

What employees are looking for in your resume

  • Master the Recruitment Scan by using a clear visual hierarchy to place your technical skills and project titles where they are seen immediately
  • Replace Tasks With Impact by swapping passive phrases for strong action verbs
  • Escape Tutorial Hell by highlighting original projects where you owned the architectural decisions and handled the debugging yourself
  • Showcase Your Technical Ability by ensuring specific languages, frameworks, and tools are explicitly listed and easy to find
  • Model Around Your Technical Relevance by minimizing visual noise from unrelated roles to keep the focus on your technical impact you look to bring to a team

Continue

Download the sample resume PDF for Module 4 below

Sample-resume.pdf

click here!

  1. Description of Module 3

Finish Module 3

After downloading, please continue next!

Module 4 – Portfolio Creation and Networking

Start

Description for module Article about networking Examples of professional portfolios Portfolio creation activity (demo version)

Portfolio Creation and Networking

This module will focus on the importance of portfolios and networking in the tech industry and how students can begin to create their own portfolios using tech professionals as inspiration.

Continue

Article about networking

  • Article will be here

Continue

Professional Portfolios

  • Article about portfolios will be here
  • Links to portfolio examples will also be here

Continue

Portfolio creation activity *demo version*

Users will be able to try this with their own resumes in the final product, but for the purpose of this beta test, we have provided a sample resume which should have been downloaded in module 3.

  1. Insert the resume from module 3 into resume2portfolio (click the link) to generate a sample portfolio based on the resume.
  2. View the different template ideas for a potential portfolio idea.

    Finish Module 4

    Thank you for participating in our beta test!