Lab 1:
The goal of this lab was to gain experience working with HTML, CSS, and publishing a website. In this lab, I created my own website (Yes, the one you are on right now) which will be used during the semester. I designed 4 pages using HTML and CSS.
Some advanced CSS techniques I used in this lab include creating margins, borders, & padding along with the CSS technique of floating. Creating margins, borders, & padding allowed me to format certain divs in certain ways in order to display organized and efficient information. Floating allowed me to format divs and images to the left or right of other divs or content. This made information look more organized and readable.
Overall, I enjoyed this lab. However, I did struggle with certain aspects of it. At first, I could not figure out the difference between absolute or relative after looking it up. I really had to test out both of them in order to fully understand them. I also had a hard time with floating more than one image/textboxes so it took a lot of trial and error. This assignment did take me a LONG time but I think all of that time has now helped me gain vital skills in HTML and CSS.
Lab 2:
The goal of this lab was to gain even more experience working with HTML and CSS. Furthermore, I learned to build a single page style website that used virtual pages to display content. Additionally, this website had to be responsive to all window sizes including desktop and mobile.
Some advanced CSS techniques I used in this lab included organizing everything into divs as well as creating a media query to change the website based on the user's screen size.
I enjoyed doing this lab for the most part. I feel like I was able to utilize knowledge from lab 1 in order to create a more organized HTML and CSS page. I also really enjoyed making slight adjustments based on screen size because now, my websites will always look good no matter what screen the user is using.
Link to Lab 2
Lab 3:
In this lab, our goal was to use Javascript and the DOM to create a dynamic pet adoption website. I had to make 30 pet profiles that users could adopt, which adds them to another section of the webpage. I also had to create a drop down list that filters which type of pet the user is looking to adopt.
Some advanced Javascript techniques I used in this lab were creating objects, using the DOM, and calling functions that iterated through an array.
This lab was very enjoyable, probably due to my love for animals. I think that it took me a while to think about how I wanted to organize my Javascript code, but once I figured this out it wasn't too bad. The one part of this lab that felt repetitive and tiring was adding pet information to each pet and attempting to make each pet unique.
Link to Lab 3
Lab 4:
In this lab, our goal was to gain more experience with Javascript and the DOM while also working with JQuery. In addition, we had to incorporate our previous lab and add the ability to create/modify/donate to the website. I also had to add input validation to make sure that the user fills in every value when creating a pet.
Advanced techniques that I used in this lab include using Javascript and Jquery at the same time. I also incorporated a function within a class to calculate age. Furthermore, I made many different .css and .js files for each page on my website.
This lab was definitely the most difficult lab that has been assigned yet. I really struggled to get everything done and have everything working. However, once I was able to do one thing one time such as creating and adding to local storage, I was able to use similar code for other times. One thing that I did enjoy was creating and seeing the ad rotator. I think I liked this because it displayed a visual output of the pets on the website which was cool.
Link to Lab 4
Tutorial Project:
In this lab, my partner and I learned to use Vue.js which is a javascript framework used to create single page applications. I learned how to create a Vue app and set it up through the terminal and the Vue CLI. I also learned how to use many different Vue techniques and features in my application. One technique that I used in this project is Vue directives which are built in directives that are used to manipulate the DOM much faster. Another thing that I used in this lab is data bindinng data to html elements. The last thing that I learned and used in this project is how to do click events and amy types of events in Vue using the shorthand method that Vue has.
For this project, I really liked using the Vue directives because it made it so much easier to do for loops or if statments since all you have to do is v-for or v-if. Another thing that I really liked about this project is using the data binding because it makes it some much easier to work with the DOM and display data on your html page. The last thing that I really liked about this project is how when you create a Vue app with the Vue CLI, it automatically sets up the mounting of the app to the html page so you don't have to worry about doing that. One thing that I did not like about this project is how when working with Vue, you have to use the syntax correctly and do certain things in a certain way or else it will not work with the Javascript. Also, another thing that I did not like is working with form controls like drop down lists or textboxes because it was a bit challenging to get the value and use it to do functions especially if things are already binded.
Link to Tutorial Page
Lab 5:
In this lab, our goal was to work with JQuery and Ajax to connect to a Web API that we created that allows a user to add, modify, delete, and search for certain pets in a database. We also had to test methods in our WebAPI with Postman to make sure that they worked and connected successfully to the database.
Advanced techniques that I used in this lab was creating POST, GET, PUT, and DELETE methods in the WebAPI. I also used code with ajax on certain event clicks of a button.
This lab was definitely the hardest lab. I struggled with almost everything, including testing my WebAPI, connecting my WebAPI to my project, and making sure all functions worked. However, after much trial and error I was able to get all of the methods working and my WebAPI successfully connected the client and server. Publishing also seemed very confusing, but I was relieved to hear from the professor that we were allowed to publish the lab locally like our other ones.
Link to Lab 5
Experience with HTML & Client-Side Frameworks:
Previously to creating this website, I had no experience working with HTML and other client-side frameworks. So gaining this experience was very helpful.
