CSS Art: Mondrian Mimic Reflection for June

This is a submission for Frontend Challenge v24.04.17, CSS Art: June.

Inspiration

For this challenge, I am highlighting a project I recently completed, which is a mimic of Mondrian's art style using CSS Flex and Grid. Although the project was completed at the end of May, June represents a time for reflection on my progress and planning for future growth. This project symbolizes my learning journey and the skills I have developed in web development.

Demo

You can view the live demo here Link.

Code

You can find the complete code for my project in my GitHub repository here Link.

Journey

I started learning CSS Flex and Grid layouts in May, and this project was a culmination of that learning. I chose to create a Mondrian mimic because of its clean, geometric design, which provided a perfect challenge to practice these CSS properties.

Process

• Planning: I first sketched out the layout to understand how I could break down the design into grid components.
• Implementation: Using HTML and CSS, I created a grid container and placed the individual colored blocks within it. CSS Flexbox was used to align and distribute space within the grid items.
• Challenges: One of the main challenges was ensuring that the grid items resized proportionally and maintained their layout across different screen sizes.
• Learning: Through this project, I gained a deeper understanding of CSS Grid and Flexbox, particularly how they can be used together to create complex, responsive layouts.

Future Goals

I plan to continue exploring CSS art and animations. My next goal is to create an interactive piece that incorporates user input to change the design dynamically.