Week 8 Finalizing the Midterm Project

Over the last few weeks, we’ve been working on our Midterm project, which is a design project using software like Figma. I chose to do Figma because I want to become more comfortable with the program, and there are more tutorials available on the web for this software than others. I also figured that having Figma experience + projects will look good on my resume for future work. I’d like to do more work in Figma and really get a handle on the animations so that I can create moving prototypes.

I can’t express enough how much I liked working on this project. I just love working with design software and have so much fun learning new ones. I’ve only worked with Figma once, and it was just while watching a tutorial last semester so I didn’t do very much with it. Being able to get into the grit of the design is partly why I enjoy working with design software. I love tweaking the minute details of a design and getting the alignment just right, choosing the perfect font type and colors to give the right vibe, and adding shadows and borders on an image only to delete it because it’s not quite right. I love that process, and it’s something I really enjoy doing.

I am a tad bit concerned for the final project, however. I know that we can use this design for our final or come up with something entirely new. But, after putting in so much time into these designs, I don’t see why I’d choose to do something else—except that I may be making the coding of this site a bigger challenge than I’m ready for. I can see 100 different places where Flexbox and Grid could be used, and I would bet $100 that we have to create our final project using Flexbox or Grid, and maybe Float if we only use it once. I’m still feeling a little shaky about Flexbox and Grid and the final will really be the ultimate test, especially give how long my site project is. I may need to cut some of the site out and shorten it, so I don’t run out of time creating it. I’m looking forward to the challenge!

Lastly, we have been working on responsive design. Given that I’ve only seen it in the lectures and done the assignments along with the tutorial, I feel like I understand it fairly well. It seems easy enough, anyway. Placing the code that you want changed inside of the media query makes sense. And having limits on how small or large the browser can be seems sensible. I can’t see any issues learning about it so far, and I’m hoping this is one of those things that just clicked with me 🙂 We’ll find out!

Week 8: Midterm and Responsive Design

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. 

Continue reading “Week 8: Midterm and Responsive Design”

Week 5 & 6 Layouts

Over the last few weeks, we’ve really dug into layout techniques like flexbox, grid, float, and positioning. The one I struggled with the most was positioning. It doesn’t inherently make sense like the others do, so I will need more practice with that one before it really sticks. The other three I actually started to enjoy working with toward the end of the two weeks.

Flexbox was hard at first, and it remains challenging, but it’s starting to click. It really started to click once we started working with grid. I’m not exactly sure why, but it could be that I’d had a week prior to do some challenges and it was just more practice. Or maybe the combination of adding flexbox and grid during one of the challenges helped me understand where I could use different layout techniques. Either way, it’s starting to make sense. At first, I really struggled during the challenges, so to help me I played the Flexbox Froggy game and that helped me figure out which flexbox rules to use when I was stuck.

I feel like I understood grid right away, though it gets tricky. During the challenges, the last one was really tough and I was able to figure out part of the solution. I needed to peak to the other slide to get some help, but I was okay with that because I was able to make sense of the solutions. Once I saw the solution, it was more of an ah-ha! moment rather than a huh? moment.

We started our Midterm projects this week as well. I chose #5, which was a spa website. It’s perfect because I’ve been so stressed out in my life the last few months, all I’ve been dreaming of is going to a spa and getting the whole treatment. So creating this website is really fun for me and I’m daydreaming a bit while doing it. I spent all of this past weekend working on it and I enjoyed it so much. I love playing with design software and Figma is really easy to use. I could literally just do that all day long.

These past few weeks were extremely hectic in my personal life, and very challenging in school. I’m proud of myself for keeping up the way that I have and am happy that I’m doing pretty well in the class!

I ❤️ Figma!

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.