Mobile-first :
Desktop :
Description of the project
For our final practical work, we had to integrate the enhanced web interface in HTML5 and CSS3.
Project Creation in HTML and CSS : Each team member had to create at least one complete page with all necessary content (text, images, sections, etc.). The pages must be responsive, meaning optimized for mobile and desktop, using media queries in CSS.
Improvements and Integration : We had to integrate the improvements identified during the session, particularly those based on user tests. We needed to consider target groups and the primary use of the site to create an optimal user experience.
Technical Requirements :
Image Optimization : Reduce the size and weight of images for fast loading.
Code Organization : The HTML and CSS code must be well-structured with explanatory comments.
Folder Organization : We needed to structure our project logically (HTML, CSS, and image files must be well-named and placed in appropriate folders).
CSS Animations : We had to integrate CSS animations (keyframe animations, masks, blending modes, etc.) to enhance interaction and appearance of the site.
Presentation and Validation : It was recommended to schedule a meeting with our professor during workshop weeks to validate the progress of our project. This project allowed us to consolidate the skills acquired in interactive design while applying modern techniques in HTML and CSS.
Publication date
We finished this website on December 15th 2023.
Role(s) in the project
Alexander Rankov : I played an important role in programming the project. I developed the "courses," "videos," "equipment," and "contact" sections. In addition to programming, I used Adobe XD to design the interface for these sections. I also took the initiative to modify most of the content on WordPress.
Minji Ardanuy-Jetté : She contributed to programming by focusing on the "Mission," "instructors," "schedule," and homepage sections. She also took charge of designing these sections on XD. In addition to her programming and design work, she assisted in my sections. Minji also made some content modifications on WordPress.
Software used
We used XD as our main software. We used it to redesign the site we had to choose. Additionally, we used WordPress to upload our redesigned content and everything.
Github links
The link to our github :
Our Github-pages :