css – Learning Journal

Making Websites Work on Different Screens

This week, I learned more about responsive design and how a website’s layout changes on different screen sizes.

Learning Journal

Responsive Design

This week, I learned that responsive design is about creating websites that work well on different devices and screen sizes, such as computers, tablets, and phones. A website should not only look good but also be easy to use and understand. The content and layout should adjust to the user’s screen instead of forcing everyone to see the same design.

I Think I’m Officially a Grid Person

This week I discovered something about myself: I really, really like grids. 😄 Give me structure, organization, and a place for everything, and I’m happy. CSS Grid was definitely challenging at times, but it was also one of the things I enjoyed learning the most so far.

Weeks 5 – 6: Experimenting with Flexbox and Grids

These past few weeks we dove head on into more complicated concepts, which had me scratching my head more than a few times but as we power on ahead I continue to feel more confident as a web designer.

Week 5-6

Over the past two weeks, I’ve been diving deep into modern CSS layout techniques, switching from Flexbox challenges to exploring the power of CSS Grid!

In the recent modules, we mastered key modern layout tools: CSS Flexbox, CSS Grid, and CSS Positioning. Through practical Flexbox examples, we learned to align elements along the main and cross axes using justify-content and align-items, dynamically distribute space via flex-grow, and manage automatic spacing. Moving on to CSS Grid, we learned to build two-dimensional layouts using grid-template-columns, grid-template-rows, flexible fr units, and gap spacing. We also practiced creating complex grids using grid-area and grid lines, enabling us to completely alter the visual order of elements independently of the source HTML. Finally, we combined Grid for the page’s macro-structure and Flexbox for smaller components to create the first draft of our course project.

Weeks 3 – 4: Diving Deeper into HTML & CSS

The past two weeks have been incredibly informative. There was so much that I learned and I’m hoping it all the information absorbs into me.

Week 3-4

This week, I studied font handling and how to properly implement them in CSS. I learned how to establish a typographic hierarchy on a page using properties such as font-family, font-weight, font-size, and line-height. I also explored CSS selectors and how to use them effectively to target specific elements. I mastered basic tag, class, and ID selectors and learned to combine them to create complex styling structures. Additionally, I gained an understanding of pseudo-classes and pseudo-elements for managing interactivity (such as :hover) and styling specific elements. Applying these skills enables me to create layouts that are cleaner, more structured, and visually appealing.

Learning More About CSS and Typography

Over the past couple of weeks, I learned more about how CSS can change the look and feel of a webpage, especially through selectors and typography.

Week 1-2: What the new things I learned

I thought I knew all the basic HTML tags until I stumbled upon native elements that handle features I used to write JavaScript for. Here are a few pleasant surprises from my recent learning process!

Before diving deeper into HTML documentation, I was confident that I already knew all the essential tags. However, I recently discovered a few powerful native elements that I previously assumed required complex JavaScript code. For example, I had no idea that <progress> provides a built-in tag for progress bars without needing JS logic to render the basic UI, or that <datalist> offers a native way to create autocomplete dropdown lists for input fields. I am still in the process of exploring HTML tags on W3Schools , but I highly recommend this resource for anyone studying web development independently.

Trusting the process with HTML

I’ve always been the type to want to know the ending before anything else; I’ve been that way for books, movies, shows—anything, really. It wasn’t until this last week that I realized I do the same thing with HTML.

Learnings of the Week

I learned quite a fair bit this week! Both in CSS and in General. I found out while looking through the HTML Reference on MDN is that HTML elements are organized into different “content categories.”, which I was unaware of until now.

Yay Animations!

This week we got to dive into CSS animations, keyframing, and parallax! Half fun, half confusing. 🙂

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!

Sass, Scroll Effects, Animation & Finals

The last two weeks have taught me a multitude of useful skills that I hope to use throughout my web dev journey.

A dash of SASS

Learning the pros and cons of SASS made me want to find out if CSS had similar functions that I could use instead. I did some research on MDN and W3Schools and discovered it did for variables and nesting!

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.

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.

Tag: css