Reflection:

During the process of working on my midterm project, I gained a deeper understanding of front-end web, UX, UI design, and code implementation. To begin with, I first considered the requirements for my website. I wanted to create a portfolio website. Since my previous portfolio website was built using a template and proved to be challenging to maintain and develop further, I believed that creating a simple, extensible, and easy-to-develop website was a better approach. After clarifying the requirements, I contemplated the overall website's visual style and architecture.

Regarding the visual style, I drew inspiration from "flat design" (https://www.creativebloq.com/graphic-design/what-flat-design-3132112) and minimalism, as mentioned in the course. I thought that for a website showcasing artwork, the overall visual effect should highlight the works and images, while the rest of the elements should be simple, straightforward, and well-designed. I chose a plain and unassuming font, avoiding overly artistic fonts, and referred to websites that focused on text and layout design rather than heavy use of colors. As for the website structure, I referred to some portfolio websites with segmented categories and created my sitemap. I believe the current site structure is more conducive to adding more work in the future.

The next step was to create wireframes for the website. In terms of wireframes, I followed the class's recommendation to use Figma. It was my first time using it in week 2, but its operation was relatively simple, and it was similar to the UI design software I had used before, such as Sketch. After completing a few initial assignments on Craigslist, I became proficient at creating wireframes in Figma. Since the homepage was primarily a showcase, I included many images and planned to convert them to black and white for a unified look. For other pages, I kept the side navigation unchanged, changed the titles, and created work introduction sections consisting of an image, title, date, and summary.

The next phase involved the implementation of the code. For this part, I created the framework using CodePen and made subsequent adjustments in VSCode. The code implementation mainly involved three components: the side navigation, the work wall, and the specific work displays. From a technical perspective, I gained insights into Flexbox, CSS animation, and various positioning techniques. Since I wanted to keep the side navigation and page titles fixed, I referred to CSS Positioning 101 (https://alistapart.com/article/css-positioning-101/) to find suitable positioning methods. "Fixed" was the most suitable choice for the desired effect, but it didn't affect the positioning of other parts of the page, so I had to make several adjustments to margins and other parameters to accommodate the fixed side navigation. As for Flexbox, I used it extensively for layout, but I encountered some challenges in implementing the photo wall as it didn't align exactly with the original design. Flexbox's flexibility wasn't sufficient to achieve cross-row alignment. This made me wonder whether a different display method should be used for artistic, irregular, and unordered photo walls. Regarding CSS animation, it was the most visually appealing part of the small interactions I implemented. I used keyframes and filters to create the transition from blurred to clear and from black and white to full color when hovering over images. I found the keyframes section of "CSS Animation for Beginners" (https://thoughtbot.com/blog/css-animation-for-beginners) very helpful.

Finally, there was the responsive design part, where I created multiple breakpoints. Nevertheless, I still felt that the effect on the smallest screens was not ideal. In my future studies, I will undoubtedly delve deeper into understanding the differences in CSS display rules for different browsers and devices.

In the first half of the semester, I believe I gained a better understanding of HTML and CSS and delved more systematically into how to use their features to achieve the visual effects, page layouts, and various functionalities of a website. Prior to taking this course, I had some knowledge of HTML and CSS from previous studies, but it was only in the first class and the tutorials I viewed after class in this course that I systematically learned them. It wasn't until the third and fourth classes when we focused on CSS and layout that I gained the confidence to independently create a visually appealing static website. Before, when I needed to implement certain features, I would search the internet for the appropriate CSS code, but the process was merely copy-pasting and memorizing. I feel that the content provided in class has enabled me to rely on my own understanding of the knowledge to determine how to implement things according to the context, such as the display method I mentioned earlier. Learning has expanded the possibilities for me to create websites. Some of the content I learned was entirely new to me, such as CSS animation. This knowledge allows me to create more interesting and useful websites.

Reading response:

Paul Ford's article is very intriguing. Although it's about programming, it doesn't come across as dry or typical like most popular science articles. He provides numerous fascinating examples to help me understand what code is, the evolution of computer programming, various programming languages, and debugging, among other things. While I had some prior knowledge of many of the topics mentioned in the article, Ford's data and in-depth descriptions added a deeper layer of understanding for me. I agree with some of his viewpoints, such as his mention of using the standard library to understand a language. In my learning experience, different languages, libraries, and their various functions can vary significantly, and understanding these differences can make using a language easier. He also emphasizes that programming is debugging, a point I deeply resonate with since debugging may take longer than writing code. Initially, I used to feel frustrated and think it was abnormal, but now I accept it. From his article, I read that he, too, has been frustrated and driven to the brink by bugs, which made me feel a sense of empathy. So, I don't think I'm not the target audience for this article because as someone with programming experience, I find that many of the experiences and observations Ford mentions closely mirror my own. I find the user experience of this webpage to be excellent. It has engaging interactions and cool visual designs related to the topic, along with a charming mascot, making it easy for me to read through smoothly.