Skip to content

Latest commit

 

History

History
29 lines (18 loc) · 2.49 KB

README.md

File metadata and controls

29 lines (18 loc) · 2.49 KB
Raw

Learning Reflections README

6.15 CodeSpace Pets Instagram Profile Project

Overview

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.

Reflections

Areas of Mastery

  • 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.

Challenges Faced

  • 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.

Areas for Improvement

  • 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.

Overall Learning Experience

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.