Hi! My name's Sana ("suh-nuh"). I received my undergraduate degree in urban planning and recently completed my Master's in computer science. I am furthering my education by learning web development at Long Beach City College. In my free time I enjoy:
I also enjoy cooking and baking. You can view some of my edible creations below:
I heavily utilized elements from the CSS Transitions, Transforms and Animations lecture of the course for my portfolio. CSS Transitions refer to the ability to change CSS properties of an element over a specific period of time. An example of this on my page
is the neon pulsating effect on my headings (About, Skills, etc.). The text pulsates over a two second period. Both my headers and my skills section use transitions. In the skills sections, the bars fill over a period of three seconds, three times. CSS transforms allow for the ability to translate, rotate, scale, and skew elements,
thereby allowing an element to change its shape, size, and/or position. I use transforms on my lab and project images. When a user hovers over any of these images, the image
scale changes. Also, I apply an opacity to each of these images as part of the hover effect. Finally, I implemented keyframe animation declarations to apply animations to different elements. Namely, I use these for my activities section in my about me, the skills bars in my skills
section, and for the pulsating neon light effect in my headers.
Drawing inspiration from the Bootstrap lab assignment (which was also my favorite lab), I utilized Bootstrap across my page, including for the collapsed navbar menu feature on my page for smaller screen sizes. While there has been a learning curve for me with regard to Bootstrap, especially around the different Bootstrap classes and what they do,
I know Bootstrap offers a lot of powerful capabilities for developers. It also eliminates a lot of guesswork and time. In my future coursework, I am excited to delve into libraries and frameworks that are critical to modern web development practices. My favorite project in this course was the product landing page project because I was able to design a single-page application for a business's products that I really love.
View my FreeCodeCamp profile and see all the progress I have made this semester.
In Lab 1, we created simple JavaScript programs. We utilized document.write, console.log, and alert. We also created functions and used switch statements and prompts.
Expanding on this, in Homework 1, I created a simple quiz using alerts, prompts, and a switch statement to keep track of the user's quiz score. This quiz also utilized
document.write to list out the questions and the user's responses, as well as their overall score. In Lab 2, we created some more simple JS programs, using
prompt(), confirm(), if/else statements, and loops. Lab 3 focused on creating objects and methods for the object. In this lab, we created a student object and its relevant properties, assigning values to those properties. We then created two methods for the object and used
console.log to output all the properties and methods for our object. With Lab 4, we dived into learning about the Document Object Model (DOM). In this lab, we utilized the
following concepts: getElementsByTagName(), querySelector/querySelectorAll(), .createElement(), .createTextNode(), .appendChild(), .getElementById(). innerHTML, childElementCount,
.textContent, .style.backgroundColor/.style.color, .className, .removeChild(), and .lastChild. For my framework/library research project, I researched React.js, a library
for building user interfaces.
For Lab 5, we covered the topic of Events, utilizing event listeners to track mouse movements (mousedown, mousemove, and click), as well as keyboard movements (keydown). This was my
favorite lab activity of the semester, as it is a really useful concept for webpage interactivity. I would love to delve deeper into this topic and think of different ways that I could use
event listeners to make my webpages more interactive. Lab 6 focused on using AJAX/JSON to add some new content to a time table webpage. In Lab 7, we completed a FreeCodeCamp activity:
Learn Form Validation by Building a Calorie Counter. Lab 8 was another favorite lab of mine as we worked with APIs. We used a movie database API to populate the latest movie releases,
their ratings, and their descriptions. We also created a dad jokes generator, which used an event listener and fetched a joke from a database of dad jokes. Finally, in Lab 9, we created
a to-do list application and a notes application.