Self-Assessments:

(WEEK #1- #5)

My journey with the subject of front end started with the introduction of Html in Codepen. In the first week, I learnt how to utilize DOCTYPE and Html tag to initiate my code. The basic structure of Front End Development was brought to me. I acknowledged that Html served as the content, CSS served as the design component and Javascript served as the interactive parts between the product and audiences. I haven’t had any experience with coding that was associated with web development before. Everything there was brand new to me. My first step was creating a head and a body for my code. And I actually created a “simple website” for my favorite restaurant. This exercise even sparked my curiosity. I went on W3school and Youtube to discover other advanced code that I could use to improve my “website”. That’s the time I got to know CSS and how to stylize my page.

Things have moved pretty fast. I quickly jumped to the idea of user-experience design, while I actually still had no concrete glue of how to build up a delicate website. Nevertheless, user-experience was essential for website development. Luckily, I have taken a user experience design course before. Those terms that were mentioned in class, like Hierarchy, Color Palette and so on were familiar to me. There was nothing better than doing a recap. Everything was about how to draw the attention of audiences, smoothly lead them to places and present information for them effectively and efficiently. Clearly, Craglists’s website did not imply the ideas of user-friendly or user-experience design. I was given the opportunity to redesign its homepage. By utilizing Figma, me and my teammates did overall planning of how the information should be presented, through the lenses of hierarchy. Re-allocation was important. We filtered some less-important information and redesigned the website in a more nice and neat way. Users wouldn’t be confused by the overwhelming information.

Clearly, we made major changes to Craglists’s homepage. Then, it was time for us to make our design land, that would be using coding skills. This would be the time I actually learnt how CSS worked and how to write it in a proper way to accomplish my goals. “Every element in web design is a rectangular box.” I learnt the differences between different ways of positioning blocks or images, for instance, “relative”, “absolute” and so on. Besides the actual “code”, making something in an organized way was important, especially when I needed to incorporate tons of information. I understood the way to write “div”, “menu”, “section”, “header” and so on. By having all those categories, it would be convenient for me to look for the code that I need to add, delete or modify. I really enjoyed how html code can be organized in a structure that could make the overall “boring” code in a clean and neat way.

Surely, knowing the idea of “box” wasn’t enough for me to write beautiful lines of code. The arrangements and displacements between “boxes” shouldn’t be ignored. Flexbox-Froggy and Grid-Garden were fun to play around with. I actually learnt how to use flexbox to arrange all the elements on the web page. What’s next, after knowing how to build a nice website? Clearly, my website could only be accessed through computers or devices that had bigger screens. Then, here came the Media Queries. While I was using media queries, I was able to adjust the sizes of the images and displace my texts in different ways, so that users’ experiences would be better when they were using different kinds of devices. In this case, my website could be viewed on different kinds of devices!

Finally, the missing part of the structure of website development appeared. However, instead of using Javascript, I learnt how to use CSS to create some basic and simple interaction between the mouse and the website. Pseudo elements allowed me to make different kinds of effects, for instance, the interaction that happened while users hovered their mouse over certain texts or images. It was really important for me to know how to use Pseudo elements, otherwise, my website would actually lose interactivity and the user-experience might be worse, especially when I was making buttons or highlights, due to the importance of feedback.

(WEEK #6)

After all that foreshadowing, it came to the time of constructing my own website. I tended to realize that it was true that web development should be divided into three sections. It was important to plan out the structure or the wireframe of a webpage through Html, then utilize CSS to add design elements and Media Queries to stylize the page, and finally using Javascript to make the website more interactive. Each of these were tightly connected and integrated with each other. My midterm project was initiated by browsing through different inspirational websites and drawing moodboards and wireframes. In this stage, I got to know the aesthetics of the website, the first impression I tended to give audiences and some basic work and user flow. And the wireframe that I drew on Figma gave me a clear understanding of what I should do in my Html code, which was serving as the structure. After completing the structure, I needed to incorporate CSS to stylize my webpage. Because I haven’t learnt Javascript yet, I determined to focus more on the design aspect and how to structure my code in a standard way and reduce the probability of bugs occurring.

However, the major problems that I bumped into were those that occurred while I was building up on my CSS code. Because I chose minimalistic style as my aesthetic preference. This meant that I needed to consider more on where I should place each element inside a single page, through understanding the importance and visual impact of both positive and negative spaces. I spent a lot of time trying to figure out the margins, spacing and font size and weight. While I was doing so, I actually forgot the existence of flex-box. I mostly utilized “margin and padding” code, instead of “text align”. Therefore, I wasted plenty of time to align those elements. This would be the major mistake that I made during my journey of creating the website. I would believe I still needed to revisit the idea of flex-box and grid-garden, so that I could create code that made more sense and structured them in an efficient and right way.

My knowledge of coding definitely influenced my approach to constructing my own website. Because I haven’t learnt how to implement Javascript into my code, I could only create simple animations through CSS. Therefore, I would tend to stick with my own aesthetics, which is minimalism, rather than trying some new approaches or making my website look “cooler” or be more interactive. Still, my concept was to develop my own portfolio website, because I really needed it to present myself to either the employers or the general public. I still insisted on presenting my aesthetic as minimalism. This might be something that would not change, no matter how mature I am at coding.

I would believe that the only thing that could keep me engaged, inspired and productive is my curiosity. If there are more intriguing things out there, I might not stop continuing learning. Just like those learning logs that I posted before, I tried to learn more new stuff from Youtube, just to make my website better. Still, this is the course that I chose to study in this semester, so it must be something that I already have interest in. Looking at those inspirational websites and as well as those brilliant portfolio sites on the internet, I would find my motivation for studying in this field.

Reading Response:

In the reading, Paul Ford basically covered almost everything that was associated with coding, the coding language and “coder”. The whole reading was pretty dense and I found it hard to understand some of the terms, probably because I haven’t learnt all of them. The reading started with a short story and a personal anecdote, and slowly transitioned into discussing the differences between hardware and software, some basic code, the history of coding language, data, mobile apps and so on. It was surely a long read, but the cute animation of the bot and the interactive code kept me sticking on reading the whole page. Besides the content itself, I believe that he successfully demonstrated how code can be implemented inside a webpage and also how to use certain kinds of interaction to demonstrate confusing terms or even illustrate terms or concepts in a cute and amusing way. I tend to like it a lot, maybe because I am just a rookie programmer and this might not be a big deal for those higher level programmers. Because of the amazing combination of images, interactions and texts, 38,000 words didn’t seem too hard to read. Also, I found it really amazing how the bot would show up at the bottom left of the screen and talk to me about how fast I was reading the article while I was scrolling through the page pretty fast.

Coming back to the content, I learnt how important the C language is in the family of coding languages. I used to believe that the C language was outdated and would vanish one day, just because of those newly invented languages, like Python or Javascript, but the fact was that “C is a simple [and legendary] language, simple like a shotgun that can blow off your foot”. There are just so many coding languages that serve for different purposes, like Go Grapher, Scratch, Lisp and so on. And even programmers that used the same language would stay in the same district or areas of the United States. Also, it was fun to know that the programmers from the bay area were amazing. Every field has someone that is talented and the one in coding would be a 10x programmer. “Most programming languages are partly a way of expressing things in terms of other things and partly a basic set of given things.” Nevertheless, another thing that I found interesting was the debugging session. Although there were things that I couldn’t fully understand, like the problem with Stack Overflow. Still, I found it resonating to me, because I really spent plenty of time debugging my code while I was doing my mid-term project. I totally agree that “programming is debugging”. I like the way the coding language tells me where my bugs are, but I really dislike the way I need to figure out the solution by myself. Still, I need to learn more about coding, because “if the computer helps [me], maybe [I[ can watch your kids play soccer”.

The reading was overall interesting to read and also inspiring, but still, there were just too many terms and concepts that required me to take time to digest and understand.