Entry 1: I was introduced to the basic structure and syntax of HTML, which is the language that I will use to code my personal website. I learned that the "head" element is the section that holds the styling of the code while the "body" element is the section that holds the actual code that shows up on the browser. Furthermore, I was taught how to use the "div" and the "p" tags properly, which are the elements that help make divisions of content on a webpage. To better familiarize myself with using HTML, I proceeded to start a journal that would be published on the webpage of my personal website.
Entry 2: I was introduced on how to use Github to create my personal website. I learned that I needed to make a git respository, which serves as a virtual storage that stores all versions of code. In addition, I was taught how to access and operate a terminal, which is the system that is used to get into the git respository. Using my newfound knowledge about a git repository and the terminal, I published a webpage that would be dedicated to my journal online.
Entry 3: I was introduced on how to program animations using CSS, which is the language that I will use to style my personal website. I learned that I needed to define an animation using the "animation-name" property and adding customizations like the "animation-iteration-count" property and the "animation-duration" property to set up the basic format of the animation. Afterward, I was taught how to use the "@keyframes" rule, which controls the steps in a CSS animation sequence by defining styles for points along the animation sequence. To test my understanding of CSS animations, I created a project that would animate from a morning sky to a night sky, demonstrating my love for photography and nature through a creative medium.
Entry 4: I was introduced to the basic structure and syntax of JavaScript, which is the language that I will use to make my personal website interactive. I learned that I needed to define an interaction using the "addEventListener" property and adding customizations like the "click" property or the "keydown" property to set up the input of the interaction. Then, I was taught how to build a "function" underneath the "addEventListener" property using the "x-coordinate" and the "y-coordinate" of a click, which controls the output of the interaction. To apply what I understood about JavaScript, I created a project that would make a "div" of a ghost follow the position of the mouse, paying an ode to the fesitivity of Halloween.
Entry 5: I was introduced on how to program interactions using conditional statements, which is what I will use to code JavaScript in a more controlled matter. I learned that I needed to set up a "function" using customizations like the "press" property or the "click" property to set up the general set of conditions for the code. Subsequently, I was taught how to construct the "if" statements underneath the "function" itself with the help of attributes like numbers and/or colors, which sets up distinct situations in the code. Experimenting with what I learned so far, I created a project that would play and pause music as well change the color of the background from red to blue and vice versa based on the number of "clicks" there are, creating a makeshift disco vibe.
Entry 6: I was introduced on to the generic template of a square quilt, which is what I will use to tie together everything that I have learned so far about animations and interactions in JavaScript. Besides altering the styling preferences the way I wanted, I incorporated the "addEventListener" property and added commands like the "mouseenter" property and the "click" property to set up how I wanted an interaction to play out. Additionally, I used a "function" to create a makeshift animation in the "backgroundImage" property that stemmed from the interaction. In the end, I created a project that would transiton from a lily to an orchid upon clicking and hovering, personalizing the square quilt to my liking.
Entry 7: I was introduced on how to program arrays using event listeners, which is how I will store multiple values in JavaScript under a single variable. I learned that I needed to define a variable using the "var" property and adding a list of the elements that I wanted to include. After that, I was taught how to return a random element from the "var" property using the "Math.round" property and the "Math.random" property under the "addEventListener" property, which generates an output within the range. To check out how to do it myself, I created a project that determines the options of leftovers for dinner, displaying the dining dilemma at my own house following Thanksgiving.