my projects series.

Week 1

First website of the class! Had a lot of fun learning the basics and imaging the "box."

Week 2

Started experimenting more with CSS. Learned how to use Google fonts and reactivity (e.g. used :hover). Also found the embed iframe tag. However, I also learned that unfortunately, you cannot embed all websites :(

<iframe src="url" title="description"></iframe>

Week 3

Experimented more with typography and layout. Took some time to figure out how to fit divs inside a constrainted area (laptop and phone) as well as making the content overflow properly for scrollage. However, I still needed to practice more with adjusting to different screen sizes.

DADA

I remember doing this assignment and I was trying to move the layout but no matter what I did, the format did not look as I indended. After looking at it for over 30 minutes, I realized I just called it wrong in the CSS file. I was trying to move a class and I accidentially called it as an id (#) in the CSS 🤦‍♀️. Besides that, the assignment was very fun. I also had a lot of fun playing the froggy game to learn flexbox and grid!
# != .

Week 5

Learned more about reactivity. Played around with transitions, animations, and different customed cursors.

cursor: value;

Week 6

Started JS! Expanded from the class example into button grids.

picButtons.forEach(btn => {
  btn.addEventListener('click', () => {
});
});

Week 8

Enjoyed collaborating with my groupmates for this project. Learned how to use scroll-behavior and scroll-snap-type to create a smooth scrolling single-page website. Looking forward to using this more for future websites!

scroll-behavior: smooth;
scroll-snap-type: y mandatory;

Week 9

Created a website based on the documentary "The Social Dilemma." Really like that we watched the documentary and changed my perspective on "being on my phone." Learned how to add more HTML components using JS.

inbox.append(email);

Week 10

Another interesting and eye-opening documentary. This time, I tried to mimic a generational "reaction," continuing the idea from week 9. I struggled a bit with adding this "time" component since the comments popped up at different times instead of instantly like week 9's website.

setTimeout(() => addComment(commentSect, comment));