[SDF07] Project: CodeSpace Pets Instagram Profile

Welcome to the CodeSpace Pets Instagram Profile project, where you'll get hands-on experience applying CSS layout concepts. In this project, we will have fun recreating a simplified version of an Instagram user profile page. You aim to practice using CSS for styling and layout to create a visually appealing and responsive web page.

Check out the Starter Code: CodeSpace-Academy/Module_7_StudentNo_Classcode_Group_Name-Surname_SDF07 (github.com)

What You'll Learn:

• Apply CSS styling to an HTML structure to achieve a design resembling an Instagram profile.
• Demonstrate proficiency in CSS layout techniques, including flexbox and grid.
• Create a responsive web page that adapts to different screen sizes.
• Practice using basic HTML and CSS to create a cohesive user interface.

Project Requirements:

1. Start with Provided HTML: You'll begin with a starter HTML code provided in the project.
2. CSS Styling: Your task is to write CSS code to style the HTML elements and create the desired layout. Pay attention to the following:
   • Positioning and styling the profile image.
   • Styling the user's profile information, including username, bio, and stats.
   • Creating a responsive layout for the gallery section.
   • Implementing hover and focus effects for interactive elements.
   • Add a dynamic loading wheel at the bottom of the gallery.
3. Responsive Design:
   • Ensure your web page looks good and functions properly on desktop and mobile devices.
   • Implement responsive design using media queries, making adjustments for smaller screens.
4. CSS Features:
   • Explore CSS features such as box-sizing, flexbox, and grid layout where they are suitable.
   • Apply appropriate font sizes, colors, and spacing to achieve a visually pleasing design.

Deliverables:

1. Styled Web Page: Your main output should be a styled web page closely resembling an Instagram profile, using the provided HTML and reference video as a starting point.
2. CSS Code: Submit your CSS code as a separate file or within the HTML file's <style> tags.

What to Hand In | Submit

You will submit the GitHub project link with your final project files to the LMS.

1. Clone the starter code.
2. Make sure your repository is public.
3. Code your solution.
4. Submit all your changes to your GitHub project repo.
5. Submit your GitHub repo link to the LMS.

HOW to submit your project

1. Submit the GitHub project link with your final project files to the LMS. You will find this in the LMS [Projects] tab.

Enjoy the project, and have fun turning HTML into a stylish Instagram profile!