Lab 1 (Blog):

Hello again, as an introduction my name is Tyler Swedberg and this will be my first blog post. My level of experience with HTML, CSS, Javascript or any client-side frameworks is absolute zero. I have always heard about them and have always interested in learning about them but never did. So, this semester will be a great opportunity for me to learn these frameworks. Seeing cool looking websites makes you want to be able to learn how to make them.

Some advanced CSS techniques for me at least were floating, absolute/relative positioning, and combining selectors with class and pseudoclass in my css styling sheet (ex. a.navlink:active). I really wanted to use nesting (ex. div p span{}) somewhere since it sounds complicated and fun, however I did not implement for this lab, but I do want to try and use it in the future. (P.S. I also added a back to top button for the portfolio page while playing around with the positioning)

In this lab I had couple of things I like and disliked. I will start from the disliked ones first. The part I disliked was coming up with a layout that others wouldn't use. This is just my selfishness, but as I am not the most creative person I felt I would end up with a site looking like another persons, but I really hope I do not. Another part I disliked was that sometimes my web browser would not load the saved html file so I would have to keep opening different web browsers to make it work. My last disliked part about the project was that I felt that it was a little too much for a first lab. This took me quite some time as there were a lot of trial and error going on, but I guess this could be good in some ways as I learn a lot more from playing around with html and css.

Now for my things I liked about this lab. First would have to be that it helped me improve on html and css. The practice of trial and error as explained earlier did help me understand and memorize more of what the declartions do. And another is being able to create an actual website. I know it was quite a bit of work and not the best, but being able to finish something cool gave me a really good feeling. A sense of accomplishment.

Lab 2 (Blog):

In lab2, I learned a lot of new CSS. I learned how to create and use better code in order to make the websites. For example, for lab 1 I used a lot of br to create text box to write in, however I learned just creating a div with specified height can easily do the job. Another would be responsive web design, which i felt was the most important thing for this lab. Due to a lot of mobile devices used today, we have to come up with a way so that they can view the webpage at their convenience as well. Being able to limit the screen size to 600px so that smartphones will have their own page view was very interesting. This lab overall took a very long time due to wanting to fix a lot of stuff from past mistakes, but was a very good way to sharpen my skills.

I enjoyed working with all elements. But overall the footer element was my favorite as it was the easiest and took like a minute to do, while the others had to have a lot of work done to it. In terms of properties, I really liked the box-sizing (border-box) property. This made my life a lot easier since it boxed everything of the height and width from the border down. Which was easier calculation.

I sometimes disliked working with the image element. This was because I had to re-adjust most images to fit my page due to the sizing being different. And sometimes the sizing wouldn't take in effect which got very annoying at times. However, in the end, after an hour or so I found a way for it to work. I believe it was a very simple mistake of not using a . for the class I used. Which I felt really dumb afterwards. So images were the main problem. Also paragraph text were annoying as it would fall off screen sometimes.

Overall, I really felt accomplished finishing this lab. I never thought I'd see the day I would complete this lab to be completely honest. It's nice to have the sense of accomplishment once in a while:) Although my website may not look the best I will continue to keep practicing these labs to do better in the future!

Lab 2 Link: click here

Lab 3 (Blog):

In lab 3, I learned a lot about the DOM (Document Object Model) of html. We used the DOM with Java Script to dynamically attach nodes to the tree. I have to say this lab by far took the longest and was challenging. Since this was the first time ever using Java Script I had no clue what to expect. After looking at the sample codes given to us on professors website and class lectures I started to understand as I went along. My site is the perfect of course, but I am proud of what I came up with.

First off, the part I disliked about this project. There were very many vague tasks. For example, the filter part. After reading it over and over I was very confused on how the filter tool should work. Because based on the document. It doesn't say to combine the filter. I also disliked this part since for some reason my price filter would always break. I am 100% sure that my code is supposed to work based on logic. I was able to filter by genre completely fine, however when it came to price, my code just wouldn't grab the specific images. I know it requires && etc.. to make the combinations. I spent hours on trying to fix this problem. I even used alert to see if the price it got were actually less than the given filter price. It did print out the prices, however when I would then start adding the DOM (images), it would only take one image only. So, I really hope there isn't a big penalty on that.

Now for the liked. I really liked how it was very easy adding and creating the DOM objects were. At first it was difficult, but with time and practice I felt like it was second nature to call the document.getElementByID(); Also as I like playing video games I really enjoyed this project... it was relatable. I was very happy when I was able to implement the extra credit elements as well. Also, learning how to hide the display and show the display, I felt was very important to know the difference of visibility hidden and display none. Hidden would hide the element and leave the space, while the display none would completely hide the element.

Overall, as I always say I feel very accomplished with this lab although it isn't 100%. (But was able to add in the extra credit) Definitely java script is a challenge from other languages. But I really hope that I'll be able to continue to hone my skills in this language for later labs. Have a nice day!

Lab 3 Link: (Lab3) click here

Lab 4 (Blog):

In lab 4 we learned about how to make a quiz with forms using javascript or its library (jQuery). Learned how to use the local storage as well as creating objects in a class. As when I started this lab, I kind of started off with javascript so I decided to use all javascript for this lab. After hours of using javascript only, I wished I used jQuery. I felt that if I used jQuery, I would have saved so much more time and made my lab a lot better. But, I guess this was a really good way to practice my Java Script skills.

So, first of all I hated how I decided to use only java script. It took so much time to think of what to do and to write down what I needed in order to manipulate the DOM. With all of the code I wrote, at any time I made one single mistake or forgetting a semi colon, the whole thing would not work. I disliked the element of this lab where I had to use for loop in order to iterate and grade the quiz. This took a very long time to think of, and I still feel unsure of how I managed to do this. I also disliked how it took a really long time to do this project, although it did help me understand javascript a lot better.

And for the stuff I liked, was that I knew how DOM manipulation worked from the previous lab, so it was a little more simpler overall. But, required a lot more coding. I really liked the feel of success when the code does work though. As said previously, I hated trying to make the DOM work using for loops as it was very confusing. But, as I made progress, it gave me a sense of accomplish. (I almost say this in every single one of my labs.)

Overall, again I do feel accomplished of what I have made. I know it may not be 100% correct, but I felt the time and effort I gave to this was well worth. I felt this was a really good practice for my javascript, and next time I would choose to do this in jQuery :( . Thank you for reading this and Thank you again for the help!

Lab 4 Link: (Lab4) click here

Lab 5 (Blog):

In lab 5 we learned how to use and create a WebAPI using .net. As well as using AJAX , JQuery, CSS, and html. Mainly AJAX was used to get the data, convert to JSON so that we can retrieve the data from our WebAPI created. Also the main part of this lab was using the RESTful API HttpGet, HttpPut, HttpPost, and HttpDelete.

I will first discuss on the elemnts I disliked. Honestly, I really enjoyed this lab and didn't have anything I really disliked. I really thought making the webAPI and being able to get the data using AJAX/jQuery was awesome! The feel of having everything work and connected to the Database was a great feeling. But I guess the part I did dislike was creating the POST API. For some reason I never had luck with that. I spent doing that for hours and never got it to work until I fixed it manually with count to automatically add the ID based on a count. It should normall do this automatically though. Otherwise everything else like PUT, GET and DELETE worked just fine.

For the stuff I liked for this project was pretty much everything else. I really enjoyed creating my own url using the route provided. Giving it a controller with fun names. I probably enjoyed this lab the most since I got this to all work smoothly, even when at first I thought would be really hard. Besides the amount of time this lab takes I loved this lab :)

Overall, I felt really accomplished from this lab! I am glad I am just done with this so that I can focus on other projects for my class. I hope this will be used in 3342 since being able to connect the database using rest and AJAX was very interesting and fun. Have a nice winter break!

Lab 5 Link: (Lab5) click here

Tutorial Project (Blog):

For the term project Steph and I were partners through out. We both worked very hard on learning Vue and understanding how the framwork works. Our project was creating an e-commerce store with the ability to do specific tasks with it. We got it took take the calculations of the total items bought, display images from database of what was in stock, count of purchase, ratings, knowing how many products are left etc... The e commerce shop was based on a WebComic Store.

I learned how to utilize Vuejs at a level where I felt comfortable of understanding the overall concept. Understanding how Vue renders data of DOM declaratively and how it creates an (app) when instantiating the Vue variable. It was somewhat similar to how Ajax worked of how we name the properties and being able to assign data to it. I liked how we can use directives such as v-if straight up from the DOM and get the result then and there.

The stuff I disliked was pretty much the beginning stage of not knowing what Vue is or was. After looking through videos and the basics it was actually not that bad. For the most part the Vue app was very straightforward. Although the directives took a bit to actually learn though. As well as the components, we never really utilized this but I feel if we had more time we would be able to use this to its full potential and improve our shop more.

Overall, I am glad I had a good partner for this lab and we were able to complete in a way we mainly wanted it to be. Definitely I wish we had more time to improve using components, as well as adding more functions and API to make our shop better. But, I would say this was a really fun project but took a very long time D:!

Tutorial project Link: (tutorial) click here