In the project [SDF06], I recreated a simplified version of an Instagram profile page that focuses on the CSS layout and styling.I used various CSS techniques to get the desired response, which was to make it aesthetically pleasing as well as work on various devices such as laptop and cellphones.
I was lost at the start of this project and struggles to fine what was needed of me in this project, but I found what was required.
I have done better wuth my Button designs.
-
CSS Layout Techniques:
-
Responsive Design: Had to use a different technique to make the web page ajust to 100% of any screen size.
-
Styling Elements:
1/When it came to @media functions i faced a hard time trying get it to work, every time i tried to fix it removed all the images. [I found away around the @media problem but it isn't what was asked or reqired.] 2/Didn't know what was required by the gallery sections ,I made a scroll to view the gallery thet would respemble instagram. 3/I struggled / messed up with my tyming and had to rush.
-
Responsive Design for Smaller Screens: I used (max-width: 100%;) as it adapts/ changes to any screen size and does the same as @media function.
-
Hover and Focus Effects: I used a button style and hover effect from a past project to add a aesthetically pleasing visuals
@media functions is my weak point time management
-
Advanced CSS Properties: Multi-colour background colour from pink to purple. scroll bar to vie pictures
-
Code Optimization:
-
Creative Design Choices: Multi-colour background colour from pink to purple. Scroll bar to view other images in the gallery.
I learned there are way around a problem but it's not always the right way( useing max-width: 100%; over @media).