Lab 1
The purpose of this lab is to create this website so that students can have an experience of
building and publishing a website. It's also a review for students who have used HTML and CSS
before, such as me. I learned HTML and CSS and made a website in high school. I also made an
unpublished website with a friend in my freshmen year of college. Even though I have the
experience, I don't use CSS often enough to master it. Other than HTML and CSS, I also learned
JavaScript in high school, but I barely use it. I can code in JavaScript but will be confused
when I try to use it with HTML and CSS.
For this lab, I use multiple CSS techniques to style the webiste. One of them is using the
background-image property to add a background image for the heading and adjusting the image with
background-repeat and background-size properpties. Other techniques include using the position
and float properties to position header, content, footer, and images. I also use margin and
padding to space out the content and elements.
Reflection on this assignment:
I like the amount of freedom that we have to design the website, and I get to play around with
the position property. However, I don't like the requirement of using the float property. It's
confusing when you use a mix of position property and float property.
Lab 2
Lab 2 has 2 parts. Part 1 is making a new responsive website, and the theme of the website is
our choice, so I made a My Little Pony (MLP) website.
Here is the link to the MLP website.
Part 2 is redesigning this website (from lab 1) to make it
responsive. For this lab, it took me less time to finish than lab 1, and I believe it's
because I understand CSS better now, especially floating, so I redo the floating part for my cat
pictures (and texts) on the about page of this website based on the floating that I did on MLP
website. The code is so much easier and better, but the overall look is the same. One thing that I like about this lab
is that I can make things look nice for small screens and the photo gallery. What I don't like
about this lab is that I'm required to put the form (survey) in a table because I think it's weird.
Lab 3
For this lab, we need to create a pet store website that allows user to view the pets based on a
selected category from a drop down list. It requires the use of JavaScript and an adopt button for each
pet. I like how I'm not limited to animals that are in real life. I can use images of cartoon animals,
and this makes it fun. However, I don't like the idea of pet's information must come from a Pet object
that we created in JavaScript. This makes it hard when I try to change the availability of a pet when
user clicks the adopt button, but I'm able to solve it and learn more about the DOM (Document Object
Model), such as the replaceWith method.
Here is the link to
the pet store website.
Lab 4
This lab is an extension of lab3. Instead of only having 1 webpage like lab 3, the website has
multiple webpages. Other than adopting a pet, user will also be able to modify the information of a
pet and delete a pet. There's also a donation page where user can donate money and displays a list
of donors who had made donations to the pet store. Data about pets and donors are stored in a local
storage so that data can be retrieved in multiple webpages. This lab taught me how convenient it is
to store data in a local storage. It's a better coding practice than only storing things in an array.
After completing this lab, I'm able to use JavaScript and jQuery interchangeably. However, this lab
gave me a lot of stress because JavaScript kept not working, and I didn't know why. I had to do
console.log() to find the issues or do some googling and testing. Even though I was stressed, I
learned a lot from this lab. Click
here to view the
modified version of the pet store website.
Lab 5
This lab is an extension of lab4. User can view, create, delete, update, and adopt pets. Instead of using local
storage like the previous lab, I have to use database to store and update these pets. This means I have to use a
Web API. Working with Web API is really stressful. The hardest part is setting up this lab correctly. The 2nd hardest
part is making sure that the data types I'm passing in match with the database and/or the object classes that I
created. Although this lab is very stressful, I learn how to work with Web API and testing it with Web App and
Postman, and I'm so happy when everything works. Click
here to view
the website that I built that works with the Web API. Note: I'm not able to upload the Web API to the Web Service,
so this published site only works locally.
Final Project: ReactJS Application
For this final project, my partner and I need to self-learn ReactJS and then use it to build a web
application. We also need to create a website as a tutorial to teach others what is ReactJS and how
to use it. Here is the
link to the
tutorial website. Note that we are not able to publish the web application that was built by using
ReactJS, but the tutorial website includes codes and explanations of what we did for the web app.
The web app we created is about ordering customized ice creams. User can customize his/her own ice
cream by filling out a form. User can also edit and delete the order(s). I have learned a lot through
this project. I understand the importance of ReactJS and how to use it, but it's very time consuming
to learn it and frustrating to build the web app. I found myself stuck a lot of times because I didn't
know how to get the code to work. I needed to do a lot of researches to solve the coding problems and
tried out different solutions, but overall, I learn a lot and like the end result of our web app.