Unit 3 Learning Diary

Attached is a PDF version of the learning diary for easier readability

This unit brought a wave of excitement and a touch of relief as I ventured into the realm of CSS styling for UltimateXI Advisor. This phase was the bridge that transformed my meticulously planned Unit 1 vision into a tangible web reality, closer to what I had initially envisioned. It was a journey filled with countless hours of div alignment, flexbox, and CSS, but the results have been worth every pixel.

Responsive web design took the spotlight, and I embarked on a journey to make UltimateXI Advisor adapt seamlessly to various screen sizes. Hover effects, like the elusive ::after and ::before, added that touch of interactivity that gives a website life. Although my CSS knowledge was not entirely new, this dive into styling has been the most extensive one yet.

Throughout this unit, I met the learning outcome of writing well-structured and maintainable CSS. I crafted a clean structure, peppered with comments, fostering easy readability and maintainability. Global variables and consistency in styling have been my allies, and I've ensured that deprecated properties were left out to maintain standards compliance. 

What Went Well:

I'm thrilled with the outcome, even though it may deviate slightly from the original Figma design. The journey from design to implementation has been an enriching one. The choice of fonts and the careful application of hover effects have given the platform the touch of elegance it needed, even if it meant making some adjustments along the way. My CSS proficiency has grown, especially as I navigated the intricacies of responsive web design. The modular approach to CSS has proven its worth, making global styles accessible in one stylesheet while page-specific styles found their cozy homes in dedicated stylesheets.

Challenges Faced:

The journey through CSS presented its unique set of challenges. The task of centering divs and comprehending the nuances of flexbox proved to be intricate puzzles to solve. Acquiring suitable icons felt akin to a quest, with each discovery carrying a sense of accomplishment. Controlling the behavior of the navbar emerged as a formidable undertaking. While my initial objective was simplicity, there were moments where I unintentionally ventured into over complication, prompting a prudent return to a more straightforward and efficient approach.

Areas for Future Improvement:

1. Balancing Perfectionism: Looking back, I recognize the need to ease up on my pursuit of perfection in minute details like hover effects and slider thickness. Embracing imperfections as part of the creative process is essential for more efficient development.
2. Setting Realistic Goals: In my next project, I intend to establish more attainable ambitions when dealing with intricate elements such as the navbar. A realistic outlook from the project's inception will lead to smoother progress.
3. Optimized Stylesheet Management: I've learned the importance of organized stylesheet management. In future projects, I'll resist the initial temptation to bundle everything into a single massive stylesheet, a practice I've since come to appreciate as a frontend developer delving into the intricacies of web styling.

Below is the zip file of the HTML pages as well as their corresponding CSS files 

UltimateXI_Advisor