the work

Front-end Web Development Learning Module

The front-end web development learning module includes HTML, CSS, JavaScript, accessibility (a11y), core web vitals, git, DOM, local storage, and the deployment process.

#learning_material  about  #html,   #css,   #javascript,   #a11y,   #core_web_vitals,   #git,    and   #deployment

started on finished on 

Work - Front-end Learning Module for MCD 1.0 Program - OG Image
An overview of the Front-end Learning Module slides. Link to the project

    Who and what is it for?

    Mini Club Developer (MCD) is a community to accommodate fellow Information Systems students of UIN Syarif Hidayatullah Jakarta whose passionate about the IT field. MCD runs by holding some learning classes and managing the community itself. By the years 2021 and 2022, MCD have held a coaching clinic and programming class for active Information Systems students as a participant and students or alumnae whose had experience in the related field.

    Challenges

    At this moment, as a mentor for the front-end developer class, I also had a responsibility to create the material or module for the learning sessions that were packed with these challenges:

    1. The module must be usable for 18 class sessions in a 5-week span.
    2. Translate and realize the learning syllabus that has been prepared by the MCD team.
    3. Created this module myself as this front-end class only requires one mentor.

    How the project went?

    I tried to seek some learning module references like WesBos and FreeCodeCamp. Then, I adjust the steps from those references to align with what the MCD syllabus needed, packed the materials by my understanding, and deliver them using interactive demos. Because the most important thing is I need to master and deliver the whole module to participants in an interesting way so the learning materials could be well delivered and understandable by the participants.

    The result was, I successfully created the learning module as interactive slides with a total of 228 pages, including a lot of references in each topic to help participants deepen their understanding. The technology I used to make these slides was:

    The Documentation

    A screenshot of the table of contents from my front-end learning module.
    — A screenshot of the table of contents from my front-end learning module.
    A screenshot of interactive code material from my front-end learning module.
    — A screenshot of interactive code material from my front-end learning module.
    A screenshot of a testimonial from one of the participants in my class that was posted on LinkedIn.
    — A screenshot of a testimonial from one of the participants in my class that was posted on LinkedIn.