I'm not proud of anything. It was easy for me. I just wanted to give it a try.
What challenges did you encounter, and how did you overcome them?No challenges. But I learned something more about linear gradient.
Nice one 🥰
Just add a background of White to your content. You're there ✨
It was pretty easy to build. Suggestions are welcomed!
What challenges did you encounter, and how did you overcome them?Setting the width and height of element as close as possible to the original image was quite difficult.
What specific areas of your project would you like help with?.
Congratulations on the completion of this challenge 🎊
Try removing height: 71vh; from your .main as it's unnecessary if you want your project to be accurate.
Give your .main some padding maybe 10 or 15px and lets see.
If your columns are looking clumsy after this change, try making your image and a div carrying your two paragraphs the child of your .main. With this, you can give your img a border-bottom: 20px;.
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:
Challenges:
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.
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.
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:
Improving File Organization for Deployment:
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.
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.
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.
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.
Exploring Advanced Styling Techniques: Suggestions for enhancing the design and learning advanced CSS techniques to make the project more visually appealing.
I've gone through your code. You've done well. Keep it up 👌✨🎊
Add .card {border-radius: 20px; padding: 15px;} to your card and see the difference.
Great!
You've tried your best. To fix your background image, try using background-repeat: no-repeat; and background-size: 100%;.
background-image: url(./images/pattern-background-desktop.svg);
background-repeat: no-repeat;
background-size: 100%;
Feel free to ask more questions if you have any. You can also correct errors in my solutions. I'm not perfect.
Congratulations on attempting the challenge! ✨
It's great that you decided to step out of your comfort zone and try something new. You've done well in taking on the challenge, and it's important to remember that every experience like this helps you grow as a developer.
For future challenges, try to stick to the provided UI design as closely as possible, as it’s part of the challenge to follow it.
But in your free time, feel free to experiment and build things however you like to showcase your creativity and skills.
Keep going, you're on the right track! 👌
I have added the dark mode for the form which looks really modern. But I have omitted the interactive part of the challenge as I have already worked on that.
What challenges did you encounter, and how did you overcome them?Some CSS properties for the Button toggle. Extensive trial and run method.
What specific areas of your project would you like help with?No but again i want to re-iterate that this project doesn't adhere to the interactiveness of the challenge as I am trying to add new things in the project.
Not bad! I love the fact that you incorporated Dark and Light mode ❤️
