Through making the midterm project, I gained a better understanding of UI/UX design and more experience working on the website visually. Before I started actually coding and building the website, I took an amount of time thinking about my sitemaps, what the website aims for, and how the website would function. However, as I built up the barebone of my homepage, I realized I took little consideration about how my wireframe design would look like visually. To say this in other words, it looked too bland. Considering making my UI design more visually appealing so that people could come back to my website and our course is called “Front End” Web, I decided to spend time exploring the possibilities of improving my homepage visually rather than continue writing the barebone code for other pages. At first, I struggled for a while to consider how to make the website interesting but also professional/official to the public. To look for more inspiration, I googled “interactive websites” to look for ideas and explored some other websites to get inspiration for improvements: Dior, personal blog websites, rollie, etc. Since I haven’t really had much experience in building commercial websites, I found it really helpful to see other professional websites’ visual designs and similar frontend structures about headers, footers, and menus, with visual effects like hover.

After setting the main sections I started off by picking a font and setting different font sizes corresponding to font tags. The experience from completing the Craigslist assignment helped me to build the header smoothly. Using CSS “display” property (https://www.w3schools.com/cssref/pr_class_display.php) moves the div elements of the header from aligning vertically to horizontally. Then, I added a background image from the vintage store since images can set the tone of the website, giving viewers a sense of thrifting stores and conveying messages quickly. adjusting the look of the landing page by balancing the content and blank space. Our class discussion about distinguishing margins, padding, borders, and content really helped me with, structuring the text on the landing page. My midterm project also cooperated with the class discussion about responsive design. I started with the small and middle screens since there are fewer features. At first, I aimed for a concise design with only a colored square and text. After seeking inspiration from other commercial websites, I decided to move the text to a div layer and make it appear on top of the background image after the mouse hovered. Through the creation of mid-term projects, I delved deeper into UI/UX design and learned the methods of visual appeal and the importance of user-centered interfaces. My journey included taking inspiration from professional websites, understanding the CSS box model for layout adjustments, and incorporating responsive design with a special focus on enhancing interactivity and visual engagement.

reading the essay:

https://www.bloomberg.com/graphics/2015-paul-ford-what-is-code/#lets-begin

In Paul Ford's article "What is Code?" he takes an in-depth exploration of the world of coding. Through his conversational yet academic discussion, I have learned background knowledge about the world of programming such as the dichotomy between hardware and software and the evolution of programming languages. Ford explained the object-oriented nature of Python and compared it with C. Since I have been learning Python recently, it was interesting to learn the importance of breaking down large chunks of code into small pieces and paying attention to a brief style. Jython was also a new concept for me, which connects Java with Python — users can use Python’s language in Java code. I highly agree with Ford’s highlight of debugging and testing. I found the significance of testing this semester while I was writing code for CS assignments. For longer problems, it is necessary to test each feature or overall structure, and fix each error that appears as I write out in IDLE; otherwise, I might have a difficult time debugging. Through reading Ford's essay, his approach to introducing programming has provided an easy-to-understand but comprehensive and insightful overview for me as an undergraduate.