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.
Now that we are halfway through the semester, I can see my CSS and HTML knowledge improving. All of the practices, notes, and challenges have helped me practice strategies and learn new techniques. When working on the Midterm Drafts and learning responsive design, I can see my growth from my previous class. To me learning responsive design for me was a major step towards making more professional sites.
Working with Flexbox and grids this week has been challenging but fun. Both layout options hold a lot of potential for website layouts, giving designers more power when it comes to creating visually intriguing and well organized websites.
This week we’ve dived further into web layout tools/techniques. Specifically, focusing on Grid, Positioning, and Flexbox! Here are some of my thoughts…
These last two weeks have been a challenge! I had never even heard of grid, positioning, or floats, until this course. This is all very new and a bit overwhelming, but I am determined to understand it to the best of my abilities.
This week, I feel as though my knowledge was definitely tested. I am grateful to have learned so much about flex box and grid, but it did not come without difficulties.
The past two weeks have been really productive and full of learning. I have improved my understanding of web layouts, CSS techniques, and design tools. Each week, I worked on different exercises and projects that helped me practice and apply what I learned in a meaningful way.
Week 5: Flexbox and CSS Layouts
In Week 5, we focused on Flexbox layouts and CSS positioning. I started with the Web Layout Overview & Review, which was a great refresher on structuring web pages. Then, I worked on the Flexbox Layout Challenges, which helped me practice arranging elements efficiently.
One of the most interesting tasks was the Convert Coffee Shop Website to Flexbox assignment. This activity helped me see how Flexbox is used in real-world layouts. I found it really useful because it made me think about how to structure a page in a more flexible and responsive way.
I also participated in the CSS Layout Discussion, where we talked about different layout strategies and how they apply to modern web design. It was helpful to hear different perspectives and learn from others’ experiences.
Week 6: CSS Grid and Midterm Preparation
In Week 6, we shifted our focus to CSS Grid, which is another powerful layout system. I worked on Gridspiration and the Introduction to CSS Grid & Grid Challenges. These activities helped me understand how Grid works differently from Flexbox and when to use each one.
One of the projects I really enjoyed was the Bakery Site Challenge. It required applying both Flexbox and Grid, and it made me think carefully about which layout system to use for different parts of the page. This challenge helped me feel more comfortable combining both techniques in my designs.
Midterm Project & Figma
A big part of this week was preparing for my midterm project. For my project, I decided to design a movie landing page. The assignment suggested using a new movie, but I chose my favorite movie, The Shawshank Redemption. I wanted to work on something I really enjoy, and I felt that this movie’s theme and visuals would make for an interesting design.
I used Figma to create the designs for my midterm project, and I am really happy about this. Figma is my favorite platform for web and interaction design. It allows me to organize my ideas visually, create clean wireframes, and design high-quality layouts. I feel confident using Figma because it has all the tools I need to experiment with different layouts and styles before writing any code. This step was really important because it helped me plan my project before starting the development process.
Reflections & Looking Ahead
These past two weeks have helped me build a stronger foundation in CSS layout techniques. I now feel more comfortable using both Flexbox and Grid, and I understand when to use each one. The hands-on exercises and projects were really helpful in making these concepts clearer.
Working on my midterm project in Figma was a great experience, and I am excited to move forward with the development phase. I plan to focus on making my movie landing page both visually appealing and functional.
Overall, I feel that I have learned a lot in these two weeks, and I am excited to continue improving my design and coding skills in the upcoming weeks.
The last two weeks of web design have gone by smoothly. I’m enjoying the design challenges, even though they sometimes leave me with a headache. It’s fun to try and figure out how to do the CSS coding correctly. I feel more confident with my coding abilities than I did at the beginning of the semester even though I feel like I don’t know how to do much. Each step is another hurdle I am slowly tripping upon. However, I am happy with how I am progressing through the class.
The past few weeks of AAD86 have been pretty smooth. It was fun to work through the stages of the midterm project, and I had a lot of fun finalizing my design. The first taste of responsive design was interesting. I think things are going to get a little more complicated moving forward with that. The introduction of indenting in CSS is a little scary since it seems like things can get really messy really fast.
In the last two weeks we have been involved in visually designing websites and then practicing various code approaches implementing these designs. For example, along with visually designing our mid-term project website, we practiced various approaches in HTML and CSS.
Now these past two weeks have definitely been interesting! There was a lot of content I didn’t know previously so it definitely felt like a curveball was thrown in my direction, just not necessarily in a bad way if that makes sense.
Oh boy. We finally made it to flexbox. For some reason, I never cared for the flexbox layout during AAD85. I thought, “Heck, I can do this whole HTML and CSS thing without it”. I don’t know why I hated flexbox so much. Though, it is most likely because learning flexbox involves change, and change is scary.
There are many ways to utilize CSS in your designs. From text treatments to colors and images, the possibilities are endless! However, you can also create simple graphics in your design with just CSS. Let’s take a look at how it’s done!
For this week’s reflecting on what we have been learning in class in HTML/ CSS Dreamweaver is how to make Grid’s in Dreamweaver. In doing that Grid is for two-dimensional layouts, meant to work with flex box, and when using flex box it uses heavily on “flex-wrap:wrap;” code onto Dreamweaver consider using grid instead wrap. Grid-gap helps you keep space between grid items. Grid-template-columns can take different units of measure.
Here is a video I found that’s been a reference now on understanding CSS grid and flex box in which I have been having trouble understanding.
There’s a lot of options when it comes to designing your layout in CSS. From flexbox properties to positioning, here’s all you need to know about CSS layout to get your designs to look awesome.
