A Guide for SHA Educators

Photo by Vanessa Garcia from Pexels
Current Status
Not Enrolled
Price
Closed
Get Started
This course is currently closed

Table of Contents

  • The Learning Process
    • Evaluation: Quizzes & Assigments
  • Athena Platform
    • About Athena
    • About LearnDash
    • LearnDash: Displaying a Course in the Courses Page
    • LearnDash: Enrolling Groups to Courses
    • Markdown Snippets
  • Live Sessions and Guest Lectures
    • Introduction
    • Guest Lectures
    • Students Presentation Day
  • Using Zoom
    • Using Zoom: Create a Zoom Meeting
  • Evaluating Student Code
  • Issuing Certificates

The Learning Process

  • Each student must devote at least 3-4 hours daily for studying
  • All students must attend the weekly live session lead by an instructor

Evaluation: Quizzes & Assigments

All of the quizzes are found in the FrontEnd Course Exercises repository

The students must fork the repo, create a branch for each exercise and open a Pull Request to the main branch of their forked repo (not the original). They must then submit the Pull Request URL.

Athena Platform

About Athena

As of September 2020, Social Hackers Academy is hosting all of its educational material on the Athena platform.

The Athena platform is backed up by WordPress and the LearnDash LMS system.

LearnDash LMS

The LearnDash LMS system organizes the content based on the following hierarchy:

  • Courses are made up of > Lessons which in turn are made up of

Topics.

In order to get a quick and easy access to a course and its content, you can login, head over to the Dashboard, go to Users > Profile and scroll down until you find the Course Info sections. Select a course, and click on the details button.

Material Contribution

We are using the Markdown format for our material. All contributions should be submitted in Markdown format.

LearnDash: Displaying a Course in the Courses Page

  1. Go to Dashboard > LearnDash LMS > Courses

  1. Select the Course you’d like to be displayed

  1. On the Course side panel, in the Add New Course Tag add the active tag.

  1. Update the course page.

  1. You are ready!

LearnDash | Checking Student Course Progress

  1. Login to WordPress > Dashboard > Select Users

  1. Select the Student account that you’ll like to check the progress on:

  1. In the User page, scroll down to double check the courses that they are currently enrolled in:

  1. Scroll further down to find the courses that the student is enrolled and click the details button to see the course structure and the lessons and topics that the student has completed . These are the ones with a blue checkmark next to them:

  1. Here’s a screenshot of a student that has completed a course:

LearnDash | Enrolling Groups to Courses

  1. Dashboard > LearnDash LMS > Courses
  2. Pick a Course
  3. Go to the Groups Tab, select a Group from the left panel and click the right arrow to enroll the group to the course

Adding Quizzes

Check that the enrollment was successful

  1. Dashboard > LearnDash LMS > Groups
  2. Pick a Group
  3. Go to the Courses Tab, in the right panel you will see all the courses that this group has been enrolled.

LearnDash | Markdown Snippets

All topics, lessons and course material is created and maintained in the Markdown format. Here are some basic resources to get started with Markdown:

Basic Markdown:

A link (anchor tag):

[TEXT](URL)

An image (img tag):

![TEXT](URL)

A custom image with Lightbox:

[ ![](URL) ](#lightbox-URL)

Example of a markdown image with lightbox (zoom) functionality:

[ ![](/uploads/learndash.jpg) ](#lightbox-/uploads/learndash.jpg)

LIVE SESSIONS AND GUEST LECTURES

Introduction

  • Platform: We are currently using Zoom for our live sessions. Every single session is being recorded in order for it to be publicly available online for students that could not attend the live meeting.

  • Language: All sessions are being presented in english.

  • Structure: The biggest part of the session is devoted to presenting the material ensuring that live coding must be included since it is a crucial part of the presentation and the learning process. At the end, a small part of the session is devoted to Q & A. Last, but not least, we make sure that the students are given at least one small project to work on and practice the skills learned. After the presentation, lecturers with access to our Slack channel can answer questions or help the students perform the given exercises.

    • Tips: Most of the times, we try to include real life examples of the technologies or concepts presented, for example we share multiple screenshots of online sites that are using Flexbox, we demonstrate production code that is based on the concepts learned, and so forth.

  • Students: The current cohort (SEP2020-FE) is comprised of 16 students, but most of the times, guest lectures are available to all of our graduates and probably to anyone with the link.

Since the recorded sessions are split into multiple parts according to the breaks, there should be no talks or answering questions during the breaks, otherwise these parts will be lost during video editing.

LIVE SESSIONS

Preparation:

  1. We create new a DOC file.
  2. We give the file a title, we usually put the date and the class. For example 17.03.021 – CLASS 12
  3. We click the SHARE button and under Restricted we select the Anyone with the link option and we set the Viewer as Editor
  4. When we login to zoom for our session, we paste the link in the Chat tab in order the document to be visible and accessible by everyone.

Live Session:

  • In the DOC document that we have previously created we add a:
    • REFERENCES section that contains all the links to the resources that we used during our session.
    • QUESTIONS section, which is not a mandatory section. We usually add some questions that we don’t want to forget or we didn’t have the chance to answer during the session. In that case, depending on the question, we answer the question in the SLACK channel after the session or perhaps in the next session.
  • During the Live Session when it is time to take a 15 minute break, just google timer 15 minutes and the timer will start.

After the Session:

  1. Login to Zoom and go to the Recordings

  1. Select the live session (you might want to wait a couple of minutes before Zoom finishes the processing of the recording) and click the Share button

  1. Click the Copy Sharing Information

  1. Go to Slack, find the Live Session message and start a new thread (if there’s not one already there) and paste the recording information:

  1. Go back to the recordings, click the More button and download the recording files (except the .m4a ones)

  1. Go to our YouTube account, click the Create button and then the Upload Video button:

  1. Upload the videos and follow the procedures below:

  • Name the video, e.g. 05.03.2021 – LIVE SESSION – JAVASCRIPT BASICS
  • In the description add the date of the recording (Recorded on: 05.03.2021) and the presenter (Presented by: Paulin de Naurois)
  • Add the video to one of the Playlists, e.g. LIVE SESSION – DEC2020-FE if the live session belongs to class DEV2020-FE, etc.
  • Check the Yes, it's made for kids, click Next and select Unlisted from the Visibility panel. You are ready to publish the video

  1. When the recordings are uploaded on YouTube, it’s time to share these links with the students on Slack, thereby replacing the previous pasted messages with the Zoom recording links. You can then remove the recordings from Zoom platform to make space for next sessions.

  2. While you are in Zoom you can download the Attendances Report for the specific Live Session:

    • From the left vertical panel ADMIN go to ACCOUNT MANAGEMENT and then click REPORTS.
    • Then click the ACTIVE HOSTS tab.
    • From the new window that appears pick the desired date and click SEARCH.
    • Then a new table will appear with all the recordings of that particular date. Each row represents a recording for each Live Session. Find the recording you want and from the row click the PARTICIPANTS column.
    • From the popup window check the SHOW UNIQUE USERS checkbox and click EXPORT.
    • The report will be downloaded in a .csv format.
    • Then you need to upload the .csv file to google drive in the Education/School Administration/Attendances directory inside the appropriate folder.

  3. We also add a few more messages in the Slack channel in the thread that we have placed the recording link:

    • If a doc document is used during the session we convert it to pdf (File -> Download -> PDF) and we paste it as a new message with the title NOTES:
    • The .txt files we get when we download the recordings we also paste them as new message with the title TRANSCRIPT:
    • Finally if there is some code we need to share from the CodeSandbox or CodePen we download them as .zip files and we paste them as new messages with the title CODE:

GUEST LECTURES

  1. Create a Zoom Meeting … X) Copy the Recordings Link and share it with the participants X) Download the Recordings X) Trim the videos (using MPEG Streamclip) X) Upload to our YouTube Channel

STUDENTS PRESENTATIONS DAY

During the Frontend course, each student team is asked to prepare a presentation about a concept of their choice, something related to the curriculum, of course.

Students are encouraged to use the Reveal.JS framework and make their presentations last around 15 to 20 minutes.

Using Zoom

Using Zoom | Create a Zoom Meeting

  1. Go to Zoom and login with our SHA credentials

  1. Go to Meetings and select Schedule a Meeting

  1. Set the Topic, When and Duration. Make sure to check the Allow participants to join anytime and click Save.

  1. Grab the invite link and you’re ready! This is the link that you will share with the participants.

Evaluating Student Code

(Quizzes/Essays/Assigments)

  • Checking Submitted Quizzes/Assignments
      1. Login
      1. Check the ProPanel Overview Widget for Assignments Pending or Essays Pending
      1. Click on either of these and approve the Assignments/Essays/Quizzes in order for the students to be able to continue their progress. These assignments/essays/quizzes can be graded at a later time.

ProPanel LearnDash Overview

If you are a Group Leader you have access to:

  • LearnDash LMS

ProPanel Widgets

For reviewing, evaluating and grading the assignments or quizzes submitted by the students, we stick to the following methodology and tools:

  • Once the students have become familiar with Git and GitHub all assignments must be submitted through private GitHub repositories and add their (selected) instructors as collaborators. This way, instructors can leave comments, create Issues or Pull Requests and instruct students on how to refactor their code or what should they be fixing.

Make sure to watch the next 2 video2 which contain instructions on how to evaluate and grade student assignments.

Code Evaluation Tools

In this section you will find the necessary tools for evaluating code submitted by the students, along with checklists for manual reviewing. Feel free to suggest any additional tools or checkpoinst in the comments section below.

HTML

  • Validate HTML code through W3C Validator
    • Automated tests can be run through the html-validator CLI tool like this: html-validator --verbose --format=json --file=index.html
  • Check HTML pages for conformance with accessibility standards using the AChecker Tool
  • Use the Google Chrome Lighthouse Auditing Tool to check the scores on Performance, Accessibility, SEO and Best Practices.

Checklist

  • Check that Semantic HTML elements are used throughout the web pages, and suggest to avoid heavy use of the div tags as much as possible.
  • Check that there are no duplicate ID names found in the page.
  • Suggest the use of label elements to accompany input, select and textarea form elements and connect the pairs using the for/id attributes respectively.

CSS

  • Validate CSS code through W3C Validator
  • Use a CSS Linter to validate and check the code for errors and bad practices
  • Use the Google Chrome Coverage Tool to detect unused CSS (be careful with styles applied to hovered or hidden elements though)

JavaScript

  • Check for JavaScript vulnerabilities through: npx is-website-vulnerable <URL>
  • Use the Google Chrome Coverage Tool to detect unused JavaScript code.
  • Detect copy-pasted and structurally similar JavaScript code using jsinspect
  • Use an AI-based code static analysis tool like DeepCode.ai

Evaluation Reports

Evaluation reports are created using the Markdown format.

They are converted to the PDF format and sent to the students. You can use the Markdown PDF VSCode plugin to create a PDF file from a Markdown file easily.

Here is an example of an Evaluation report:

Markdown Format

Converted to PDF (This is the report that the students receive)

Make sure to include your name and the student’s name on the report.

Code Reviews

Here is a recording of code reviewing a student’s assignment to get you started. In case you feel comfortable with screencasting, you can record the evaluation and code review and share it with the rest of the students.

Suggestions, ideas, feedback, comments are welcome. Please add them on the comments below.

Issuing Certificates

UPDATED: 14.05.2021