New Skills, Feedbacks and Exciting Opportunities

Over the past two weeks, I’ve been focusing on several key aspects of my web design projects and learning new techniques along the way. I completely revamped the design of my portal page. I worked on modernizing the overall layout and creating a more user-friendly design, making it cleaner and more intuitive. By using grid systems and flexible layouts, I ensured that the design is responsive across all devices. I also prioritized simplifying the navigation to focus on the most-used sections of the page.

I spent time enhancing my parallax effect as well. By having images and text move at different speeds, I was able to create a dynamic and engaging experience. I paid close attention to performance to ensure the parallax effect didn’t slow down the page. Additionally, I integrated Sass into my workflow to make my style sheets more efficient. By using variables, mixins, and nested structures, I was able to write more organized and maintainable CSS. This allowed me to avoid repetitive code and create a cleaner structure for the project.

The feedback I received helped me improve my design even further. I refined the color choices and typography on the portal page. I also noticed that the parallax effect wasn’t performing well on some mobile devices, so I optimized it for better performance. These types of feedback are crucial in helping me improve the design to be more polished and user-friendly.

As a result, the techniques I’ve learned over the past two weeks have made my projects more professional. The combination of parallax, Sass, and responsive design has made my designs more modern, dynamic, and user-friendly. I plan to continue improving and refining these skills in the coming weeks to finalize my projects.

PS: I’m beyond excited to be attending an industry event like Figma Config 2025 with a scholarship ticket. This is such an incredible opportunity for me, and I can’t wait to engage with some of the brightest minds in the design world. It’s going to be a truly eye-opening experience!

First Experiences with CSS Animations, Parallax, and Bootstrap

Today I started learning the very basics of CSS animations, parallax scrolling, and Bootstrap, and it felt a bit like being handed a toolbox without the instruction manual. At first glance, everything looks exciting and powerful, like a shiny set of gadgets just waiting to be used. But once I actually started poking around, I realized that understanding how and when to use these tools is its own skill. It’s not just about making things move or snapping a layout into place — it’s about knowing how to do it with purpose.

Continue reading “First Experiences with CSS Animations, Parallax, and Bootstrap”

Week 12: CSS Animations, Parallax, and Final Project

CSS Animations

This week was tough as the CSS animations could easily take up an entire semester on their own. I’d love to dive into them more and create sites specifically designed with CSS animations.

From what I learned, it seems there are endless ways to make objects on your page move without JS. Of the properties that I learned, keyframes was the easiest to understand. I’ve worked with animations on my digital portfolio in Webflow so could see the similarities in how to accomplish the same thing in CSS.

Parallax

Parallax is one of those things that seem to be on every webpage nowadays, and with good reason—it looks great! I enjoyed learning about parallax because I know I will be using it in future designs. It’s modern and adds extra flair to your site. I learned to be careful in how often it’s used, as it can take away from content if you’re not careful.

Parallax would be perfect for a photographer or someone who wants to showcase a lot of images. The caveat is you would need to also understand how to properly optimize images so that they don’t take too long to load. Prof. Mead also mentioned that you are essentially forcing people to download images, so be cautious of how many you are using if they don’t add value to your site.

Final Project

For my final project, I’ve decided to go with Option 1, which was part of our midterm project. We created four one-page designs for desktop, tablet portrait, tablet landscape, and mobile in Figma. I’m curious how I can make what I created come to life in HTML & CSS. I want to follow the project all the way through.

My midterm project is a spa site, and is already created in Figma. I am happy with what I came up with, but excited that I have another opportunity to create something entirely different with the second site I need to build. I’ve chosen to do a catering business because food brings me joy and I can envision the site being totally different from the original spa page, giving me some more creative license to do as I please.

Week 12: Parallax, Sass, and the Final Project

The last two weeks we learned new skills such as Sass, animations, and Parallax, which I can see myself using in the future. I also had some time to think about my final project. I spent a lot of time reflecting on my own web design skills, what I have learned, and what I want to make to conclude the semester.

Continue reading “Week 12: Parallax, Sass, and the Final Project”

Revamping My Portal Page: Parallax, Big Kitties, and New CSS Tricks

“Meow”

This semester, I gave my portal page a much-needed upgrade. I have to say, it is been one of my favorite projects so far! I wanted the page to feel a little more alive and personal, so I brought in parallax scrolling effects, animated floating cats, and some playful, colorful backgrounds.

One of the biggest changes was adding a parallax background featuring a giant cat image that starts below the header and stretches down below my bio section. This added a really cool , making the page feel more dynamic without being overwhelming. I also used CSS animations to create floating kitties that drift across the screen, adding even more movement and personality.

Along with parallax, I used some modern CSS techniques like flexible layouts, colorful background shifts with keyframe animations, and subtle box shadows to give different sections some extra pop. Overall, this revamp made my portal page feel way more “me.” It’s fun, creative, and just the right amount of chaos thanks to all those giant kitties.