In this project, I recreated a simplified version of an Instagram profile page focusing on CSS layout and styling. This involved applying various CSS techniques to achieve a simple, responsive, aesthetically pleasing design that functions well across my device.
- CSS Layout Techniques: Initially, understanding CSS layout techniques was a bit challenging. However, through tutorials, practical exercises, and building projects, I've developed a solid understanding of various layout methods like Flexbox and Grid.
- Responsive Design: My proficiency with Flexbox and Grid has improved significantly, but I can't really make informed decisions on when to use each layout technique based on the project requirements.
- Styling Elements: I was able to style the profile image, user information, and gallery section effectively, closely resembling an Instagram profile.
- Responsive Design for Smaller Screens: Adjusting layouts and font sizes for smaller screens was challenging. I don't quite understand how it's done.
- Hover and Focus Effects: I didn't really struggle with the effects as I used a simple technique which was transform.
- Advanced CSS Properties: I want to explore more advanced CSS properties and animations to enhance the user experience. For Flexbox, I want to delve into the order property and the align-self and justify-self properties. In Grid, I want to learn more subgrid and grid-template-areas for more complex layouts.
- Code Optimization: While my code achieved the desired outcome, I believe I can improve its efficiency and readability. I want to avoid code dryness. I need to identify and eliminate code duplication. I want to encapsulate reusable code into functions or classes to promote maintainability and reduce the chances of introducing errors.
- Creative Design Choices: I want to improve my skills in responsive design and I believe I will get there.
I believe if I invest more time in CSS content, I'll be able to understand it fully. More practice and using more resources will also definitely help. I must say that I am proud of myself because I completed a project that I thought I wouldn't be able to complete. The CSS layout project was both challenging and helpful. It provided an opportunity to apply and expand my knowledge in CSS layouts.