leaf-bg

Learning Outcome #2

Transferable Production

You document and comment your code using version control in a personal and team context and communicate technical recommendations.

Evidences

star
Git Version Control
star
Portfolio
star
Tic-Tac-Toe

Git Version Control

GitLab: https://git.fhict.nl/I522385/portfolio-semester-3

In my portfolio, I used GitLab as a version control in my portfolio because it proved to be the best option to track changes, code refinement, and manage versions efficiently. I document my code by creating and maintaining the ReadMe file. I also make sure to comment my code in HTML, CSS, and JavaScript to improve readability, maintainability, and make it easier for others (or myself) to understand and update the code in the future.
Aside from that, I often make sure to push or commit to GitLab if there are any changes in my code, as pushing is necessary so those changes I made will be applied when they're ready to be shared. I try to implement clear commit messages too because doing this makes it easier for me to understand, maintain, and debug versions.
img img img

Portfolio

GitLab: https://git.fhict.nl/I522385/portfolio-semester-3

Link: https://i522385.hera.fontysict.net/portfolio-semester-3/

Introduction

I made a website for my portfolio to show the skills I've developed, the projects I've completed, and the progress I've made throughout the semester. It's organized to give a clear overview of my main projects in the “Projects” section and the learning outcomes I've achieved in the “Outcome” section, reflecting the goals and skills I've focused on during this time.

Process

First, after finalizing the design and structure of my portfolio, I began coding the website using HTML semantics, CSS, and JavaScript. I also checked the code using the W3C Markup Validation Service to make sure it met coding standards. I reused some code from my previous portfolio to create a dropdown area for my outcome page.
For the wave designs on the website, I used CSS to add visually engaging elements, but creating these complex wavy effects was challenging to implement with CSS alone. To make the process more efficient and precise, I used an online CSS generator from wavier.art, which helped me in building the wave design accurately.
img img

Problems Encountered

At first, I wasn't sure how to automatically open the dropdown area or section on the outcome page when navigating from the projects page. What I did to solve this was to use URL parameters to detect if the outcome page was accessed via a link from the projects page. By using the URLSearchParams() method, I was able to parse the URL and check for the presence of a parameter named open.

🔗Reference: https://www.sitepoint.com/get-url-parameters-with-javascript/

img

Future Improvements

I plan to make my portfolio website even better. I want to add animations to the text and backgrounds to make the site more dynamic and interesting. I'll also include cursor effects, so the site feels more interactive and fun to use. Once I finish the coding, I will do usability testing to make sure everything works well and is easy for users to navigate.

Tic-Tac-Toe

GitLab: https://git.fhict.nl/I522385/tic-tac-toe

Link: https://i522385.hera.fontysict.net/tic-tac-toe/

Introduction

I created a Tic-Tac-Toe game as part of an activity in our class to refresh our knowledge of JavaScript. The game is designed for two players who take turns placing their symbols (X or O) on a 3x3 grid. The goal is to form a straight line of three symbols, either horizontally, vertically, or diagonally, to win. If all squares are filled without a winner, the game ends in a tie.

Process

I followed an article from Medium on how to create Tic-Tac-Toe using HTML, CSS, and JavaScript. I rewrote the code line by line to better understand the logic behind it. To make sure I understood the code, I added comments to the JavaScript to help myself follow the steps and learn how the game mechanics worked.
Next, I added design elements to improve the look of the game. I turned the X and O symbols into images to make them more visually appealing and give the game a more polished look.
I also want to make some improvements to the functionality that wasn't covered in the article. I disabled the squares once a player wins to prevent further moves. I also highlighted the winning squares in green to clearly show which part of the grid resulted in a win.
img

What Have I Learned

I understood in class how winning combinations work in Tic-Tac-Toe. I also learned how to display images like the X and O symbols in each square using JavaScript. One important function I used was cloneNode(), which helped me display the images without losing any of them in the squares. This was especially useful because it allowed me to clone elements for repeated use in the game. This task helped refresh my knowledge of JavaScript, particularly working with events, functions, and DOM manipulation.