1. What did you learn?
In this project, I was introduced to HTML, CSS, and jQuery. We did a little bit of basic coding in 217, but other than having that experience, pretty much everything we did in this project was new to me.
2. What was easy?
Setting up the basic framework for the site in the first couple of classes was easy. Embedding from YouTube and Google Forms was also easy.
3. What was challenging?
One of the most challenging part of this project was transitioning between desktop and mobile. I’d get things to look right in one view, and then I’d switch to the other and they’d be all messed up. Getting the right spacing between elements was also challenging, and, in general, looking at code got to be pretty confusing by the end.
4. How could your submission be improved?
I was pretty happy with how my portfolio page turned out in desktop view, but not so much in mobile; I’d like to get the images to fit the page width properly and to figure out how to disable the lightbox feature in mobile. I could also make my contact form look more like the one in my prototype, and there’s a lot of work I could do on the text spacing on my resume page.
5. How could the professor improve the assignment for the next class?
If anything, more detailed project slides might be helpful.
6. How might you apply your knowledge in future assignments or work scenarios?
I think that having some experience with coding now will affect some of my design decisions when working in Figma. For example, the way I laid out my resume page in Figma going from desktop to mobile didn’t work so well when trying to translate that to code. In Figma, when I switched the resume from 2 columns in desktop to 1 column in mobile, I didn’t just stack the columns on top of each other since I wanted to keep the contact information at the top, but I wasn’t able to replicate that when working with code.
7. How did a specific reading or video inspire or help you?
I ended up doing a lot of Googling for this project when things weren’t working, and this site ended up being a helpful resource.
8. Show some images of your work in .jpg or .png format. Include sketches, work in progress, and final images. If your work is interactive or video, post a link to the project.
Link to website:
https://www3.canisius.edu/~erdmanc/dma370/project2/
Link to original Figma prototype: