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.
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.
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.
Per expectations, the content has definitely ramped up in difficulty. These past few weeks have definitely been challenging, but thankfully I’ve been able to enjoy the challenge rather than get overly frustrated over it.
Responsive web design (RWD) refers to designing websites to adapt to a user’s device. The goal is for a website to retain its optimal usability and appearance regardless of the device it’s displayed on. Responsive web design responds to user needs by adapting to different screen sizes, orientations, layouts, and platforms. This is accomplished with the use of flexible grids and layouts, responsive images, and CSS media queries.
As the class is coming to an end the final project for the class, I’m working on right now were going to be developing our own website to a target audience and my audience will be anyone who is interest in the fantasy of the comic book world to see and understand some interesting and some non-interesting characters from the Marvel and DC universe’s. I’m excited to find and create the research for this project it’s something I’m interested in and also watched and read all the movies and comic books.
This week were learning how to put our websites to fit into mobile devices, tablet, desktop, anything to show to it will look on the screen whether its straight, vertical, and horizontal.
This is the code in adding media queries for websites @media only screen and (min-width:700px){ } then input where it says “700px” and put the size of the website you want people to be viewing and add different styles for each viewing for if its a mobile devices, tablet, or a desktop.
while in class were doing our final rough drafts of the website of our choosing to create about a certain topic, mine is a lawyer website and a tool that helped me use HTML and CSS to create my page and now a helpful tool for me to reference new code or refresh on the basics.
Here you can look up what you’re trying to create, and it will show you how it should look like in code and in another browser window to show a live code view of how it can look on a website screen.
Layouts can be tricky. It feels so nice to finally have a design that looks good and works well… until you take a look at it on a different device. What happened to your design?! How can you fix that? The answer…. Responsive Design! Let’s take a look at what it is and some of the basic things to know surrounding responsive design. Let’s go!
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.
CSS page layout techniques allow us to take elements contained in a web page and control where they’re positioned relative to the following factors: their default position in normal layout flow, the other elements around them, their parent container, and the main viewport/window.
