Logo avant Logo arrière

Femmy Priscillya Antolinez

Promotion : Freya | femmy.lumbantobing@etu.unige.ch

STIC-1 Rapport d'Exercice 1

STIC-1 University lecturer : Nicolas Szilas, Assistant : Djamileh Aminian


Author : Femmy Priscillya Antolinez

Publication date : 20 Octobre 2025

1.0. Links

2.0. Objectives

Exercise 1 in the STIC course is meant to provide an introduction to Information and Communication Technology, particularly their application in the field of Education. In today’s digital landscape, having a digital identity is essential, not only for establishing a personal and professional online presence, but also for contributing meaningfully to a wider learning community. As part of this exercise, a static TECFA homepage and an EduTechWiki personal page were created to represent one’s personal presence online. In addition, a project page (page travaux) was developed as an academic portfolio, designed to showcase the projects completed by students during their semester in the MALTT program. According to the guidelines on EduTech Wiki , this report may be written in English or in French. To ensure a smoother workflow and to make it accessible to a wider audience, this report is written in English.

3.0. Design

The main idea behind the design is to create a landing page that centralizes all the works and projects completed during the MALTT academic program. To make navigation easier and more intuitive, the project page (page travaux) serves as the main entry point or central hub, similar to the entrance hall of a building. From this central space, users can access different “rooms,” each representing a course in the program, such as BASES, ERGO, STIC, METHODE, ADID, and VIP. To personalize the experience and give context to this digital “house,” a navigation bar is placed at the top of the page. It allows users to easily move between key sections, including the personal page, EduTechWiki personal page, educational game page (flashcards), and online portfolio. In line with this metaphor, the navigation bar is titled as follows: MALTT-Portfolio, My Room, Wiki, Labo, Studio, and Contact.

4.0. Production of Exercise 1 : Webdesign (HTML5, CSS) and digital identity

  • Page Personnelle, TECFA Static Homepage

    Description : Personal digital identity and links to other websites
    Status : Completed
    Note :

    The structure of the page is intentionally simple. The logo is placed inside the main tag, and all icons are positioned within section element, directly below the logo. Using Procreate on my iPad, a tool widely used by illustrators and graphic designers, I created the icons and logo by hand. I then exported these elements to Affinity Designer 2 for vectorization and further editing. To optimize the assets for the web, I also tested an online SVG Converter and compared the results. Ultimately, I chose the version produced with the converter for its cleaner output and smaller file size. The GIF animations were generated from sequences of PNG images, which I processed using the Ezgif website. I had some experience working in graphic design and illustration without really dealing with code. However, by learning HTML and CSS through this project, everything started to make more sense. I frequently consulted W3Schools to explore tutorials and examples of CSS hover effects. I was pleased to see that many of these visual effects worked smoothly without the need for JavaScript, only CSS.

  • Page Rapport

    Description : Report on the exercises completed as part of the STIC-1 course
    Status : Completed
    Note :

    By following the layout examples from W3Schools to test how they would display on screen, I began building the report page without using the template from Quarto. In order to make the layout adaptable to different devices, I learned about CSS Flexbox . In parallel, I started developing the Page Travaux (MALTT Portfolio page). Following the same visual from Quarto from Edutech Wiki, I wanted to include a sidebar to serve as a directory for easier navigation. The most efficient way to implement this was by assigning it a CSS id. I didn't know what was the difference between ID and CLASS, so I searched on W3Schools and found that CLASS is used to define a group of elements and can be used by multiple HTML elements, while ID is used to identify a single element and must only be used by one HTML. This is where I came to understand the difference between an ID and a CLASS.
    I used IDs for the sidebar links that jump to specific sections of the report. However, if I had used CLASS for navigation, it would not have worked, because multiple elements can share the same CLASS, while browsers require a unique target for scrolling. To keep the sidebar visible while scrolling, I used the CSS property position: sticky. Each menu link points to a specific section of the report using ID attributes. Initially, I named my IDs as id="1.0", id="2.0", and so on. However, this naming did not work. I asked for assistance from ChatGPT as a technical support tool to help identify the source of the issue. ChatGPT explained that special characters such as “.” can conflict with CSS selector syntax and JavaScript element targeting. Therefore, I renamed the IDs (e.g., id="ch1" for “1.0 Links”, id="ch2" for “Objectives”, etc.) and adjusted the corresponding CSS references. The report sections are organized using section tags to separate the different exercises. I also added spacing between each description using the CSS property margin-bottom to improve readability and visual balance.

  • Page Travaux

    Description : HTML webpage design that centralizes all the Master’s submissions
    Status : Completed
    Note :

    I came across a JavaScript tutorial and experimented with it by adapting the code. However, the script did not function as expected, so I decided to set JavaScript aside for the time being. Instead, I implemented the flip-card layout described on W3Schools and customized it for my MALTT portfolio page. I also added a navigation bar at the top of the page using the NAV, UL, and LI tags to facilitate movement between sections. In CSS, I removed list bullets and applied display: flex to align the elements horizontally. I used ID for the main sections of the page and CLASS for elements that are repeated, such as the cards.
    After transferring my files with Cyberduck via SFTP, I noticed that updates in my style.css file were not appearing immediately in the browser. The browser was still displaying a cached version. I resolved this by forcing a refresh using Ctrl + F5, and by verifying the file’s date and size on the server to ensure that the correct version had been uploaded. Later, I encountered an issue where the submenu of the main navigation appeared behind the cards, making it unreadable. The problem was related to the CSS transform property used for the 3D rotation effect (rotate Y) that I adopted. At first, I didn't know how to fix this, so I searched on google and found a solution on Stack Overflow . By adding z-index: 1 to the .card-inner class, the cards would stay behind the menu. Then z-index: 2 to the .submenu class have to be added so that it displays above the cards.

  • Page Wiki

    Description : Profile Page on Edutech Wiki, a Collaborative Educational Resource Page
    Status : Completed
    Note : After reading the the basic editing guidelines on EduTech Wiki,

    I began modifying my personal Wiki page. I found that wiki syntax is easier to learn than HTML or CSS. I added a section of my CV to give readers more context about my background and my objectives in the MALTT program.

5.0. Self-assessment

Before this course, my knowledge of web development was very limited. With experience in graphic design and illustration, I had some familiarity with design concepts, webpage structure, and layout, but little understanding of how HTML, CSS, and JavaScript interact with each other.
Through trial and error, and by testing various pieces of code found from different online resources, I developed a clearer understanding of the relationship between structure, style, and functionality. However, using ChatGPT as a technical support tool illustrated how AI can assist humans in autonomous problem-solving rather than providing ready-made solutions. In this exercise, I limited the use of ChatGPT to a last resort when I could not identify the source of an issue myself, allowing me to debug independently.
The main challenges I faced were mostly related to code errors, especially when using incorrect syntax or invalid element IDs that prevented my code from working properly. This exercise helped me realize that learning to code requires curiosity, experimentation, and patience. I became more aware of the logic behind web design. My next goal is to deepen my understanding of JavaScript in the next exercise.

6.0. Bibliography

7.0. References