Labs of 3344
This is where the labs for this class will go!
Lab 1
Lab 1 is the website itself, so there's nothing else for lab 1 to show.
- Prior to lab 1, my experience in HTML and CSS were extremely amateur and practically non-existent. I do not have much experience in javascript either or any other client-side frameworks. However I hope that after this course I will become proficient in these tools
- Some CSS techniques I put in this lab/assignment was the use of floats (Used for the navigation bar AKA home, aboutme, portfolio/resume, labs) Additionally, I also employed some use of customizing a gallery of pictures by customizing the div and assigning classes (The "About me" section has this usage on my blender photos)
- This assignment was not too difficult, however it was very time consuming especially for me since I am unexperienced in HTML and CSS, however it was great to make the website in the way I liked and overcoming certain roadblocks. This lab truly shows that I am limited by my creativity because it is hard coming up with the color schemes, the size of the navigation bar, what to include in certain pages. The biggest obstacle was figuring out what to put in the "Home" page because I find it similar to the "About me" section. Overall, designing my own website was not bad, but definitely has more room for improvement!
Lab 2
Lab 2 is designing a virtual webpage. It's a bunch of virtual pages condensed into one physical page.
- I learned a lot in this lab. Specifically about mobile and desktop design for websites. As expected, there is a great deal of work to do when adjusting for both.
- Some techniques I learned was the media query design. After assigning the media query, My information below the landing page had to be adjusted as well as the gallery to fit a mobile design. The hardest design for me was making a navbar that fit the mobile design, since it asked for a collapsible design. I wasn't sure how to accomplish that alone with CSS and HTML but eventually I figured it out. Figuring out the form submission process took longer than expected too for some reason. The form submission kept leading to a 404 page which was very confusing.
- Here is a link to the page I created for Lab 2!
Lab 3
Lab 3 is designing a dating website displaying the profile and their dating profile attributes (desc, name, age, religion, etc...) with the usage of javascript for the first time in this class!
- This lab was quite challenging compared to the first 2 labs. I never used javascript before and felt very unconfident starting since it was the first time. It took me some time to figure out javascript on how to make the gender selection work. However, once I figured that out I was able to figure out the rest. Favoriting profiles and passing them as well.
- Some techniques I learned and utilized a lot was the innerHTML. I was able to use innerHTML to make a button appear on every profile using text. One difficulty I had however was assigning an image. I was able to assign it easily actually. However my original way to assign an image was to do it in my class. I was not successful in that though even though I still got the image to pop up.
- Creating profiles was also more difficult and time-consuming than I thought. It takes a lot of creativity out of me to try and make different profiles. But fun fact: I made the fighter, the drinker, robot, unknown, fish, and ps1 guy by myself in blender! Although difficult, it was still nice to come up with profiles.
- UPDATE: I resubmitted the assignment to make my code a little more dynamic-ish. It's because originally, i made 20 profiles (male and female each) and put them in a male and female cateogry manually. I should have just put them all in a list, then check their genders and assign it via for loop in the first place. Also I made it so my class had a tostring method fit for innerHTML stuff. Originally I didn't put it in my class but it's better to do it that way for efficiency and redundancy.
- Here is a link to the page I created for Lab 3!
Lab 4
This lab had us rework parts of Lab 3 such as local storage, classes, etc.
- This lab was a bit annoying/time consuming. Possibly because I had to re-work things that were already working in the previous lab. We also learned javascript far back so geting this lab while learning something new made it difficult as well.
- Some techniques I learned and utilized a lot was JQuery. After doing the third lab all on javascript and utilizing a bit of JQuery on the 4th lab, it made me appreciate how simple JQuery can be and how much less you have to type. I also learned how to apply local storage for class objects. This lab had us put objects in local storage and we retrieve them from local storage, rather than arrays (like I did in lab 3)
- Here is a link to the page I created for Lab 4!
Lab 5
This lab had us utilize databases and WEB APIs to create real estate homes with descriptions, names, etc. We have to utilize functions relating to sorting the houses by bathrooms or bedrooms or max price, or search by ID.
- This lab was annoying due to the set-up. A lot of instructions on how to get it to work, and I'm not sure if it will work even when published (although it worked while I was workign on it on a separate file.) Additionally, map driving wasn't allowing me to transfer files, and I accidentally deleted my backbone.js dependencies for my term project.
- Some techniques I learned and utilized a lot was AJAX. I think AJAX helped me in understanding web APIs a lot since the format helped me understand what happened behind the scenes (Like the GET DELETE POST methods)
- Here is a link to the page I created for Lab 5!
The Term Project: Backbone.js
This lab had us create a web application using a framework taught outside of class. We had to work with data, allowing us to add data, delete data, modify data, and search data. Our theme was food recipes since I thought it wasn't too niche of a topic to do.
- Very time consuming lab. I spent days researching Backbone.Js and working on the application. It took a lot of time, and I think it was definitely not something to do over the span of a short amount of days. After learning backbone, I do feel proud knowing I understand the framework, and can apply it to other javascript projects if ever needed.
- I definitely learned a lot in this project, specifically about how frameworks like Backbone can really help with javascript. I've heard a lot about how backbone is not as used anymore, since there are way better frameworks out there, but I think backbone was pretty good to learn! Helped me a lot about MVC.
- Here is a link to the project!
- Here is a link to the tutorial!