QR-Card using Media queries

What are you most proud of, and what would you do differently next time?

What I'm Most Proud Of: I’m proud of successfully completing my first responsive web design project and deploying it live using GitHub Pages. It felt great to see the design come to life, especially after figuring out how to center elements and make the card look visually appealing on both mobile and desktop devices. I also enjoyed learning the workflow of using GitHub for version control and deployment, which was completely new to me.

What I Would Do Differently Next Time: Next time, I would:

1. Organize my project files better by using a dedicated folder for images and assets right from the beginning.
2. Write a README file with clear details about the project to make it more professional.
3. Optimize the image for faster loading on the live site.
4. Test the site more thoroughly to ensure all elements work as expected after deployment.
5. Use a CSS preprocessor or modular approach to manage styles more effectively as the project grows.

What challenges did you encounter, and how did you overcome them?

Challenges:

1. Image Not Displaying on the Deployed Site: Initially, the QR code image wasn’t showing on my live website, even though it worked perfectly in my local preview. I realized it was due to incorrect file paths, but fixing them while keeping the project organized was confusing for me.

2. GitHub Workflow: As a beginner, I struggled with understanding how to manage commits, repositories, and file organization during deployment. At one point, I deleted the repository and had to restore it, which added more complexity.

3. File Organization: When trying to move the image file into a separate folder (e.g., images/), the website stopped working because I hadn’t updated the path correctly in my HTML file.

How I Overcame Them:

1. I referred to GitHub documentation and followed step-by-step tutorials to learn about deployment using GitHub Pages. Restoring the deleted repository taught me a lot about handling such situations.
2. To resolve the image issue, I placed the image in the same folder as index.html for simplicity during deployment, ensuring it worked. In the future, I’ll pay more attention to organizing my files from the start.

What specific areas of your project would you like help with?

Improving File Organization for Deployment:

1. I’d like guidance on how to properly structure my project files (e.g., keeping images in a folder) while ensuring everything works smoothly during deployment.

2. Understanding GitHub Pages Deployment: Although I managed to deploy my project, I’m still unsure about some steps in the workflow, like handling uncommitted changes and ensuring all necessary files are included.

3. Optimizing HTML and CSS Code: I’d appreciate feedback on whether my HTML and CSS are structured efficiently and follow best practices, especially for responsive design.

4. Debugging Issues with Missing Resources: Help with understanding why resources like images sometimes fail to load after deployment and how to prevent this issue in the future.

5. Exploring Advanced Styling Techniques: Suggestions for enhancing the design and learning advanced CSS techniques to make the project more visually appealing.