@tanush1852Submitted 3 months ago
Abd Ur Rehman
@A-noob-in-CodingAll comments
- @Ibtehaj-Ali-1Submitted 3 months ago
- @barka-devSubmitted 3 months ago
- @Thibs13Submitted 3 months ago
- @inappdesignSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
This is my first CSS Grid project.
- @ttvclvckPWNERSSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
For my project, I'm most proud of the functionality I was able to implement and the way the final product turned out. Seeing everything come together after all the hard work was incredibly satisfying. I learned a lot about problem-solving and how to overcome unexpected challenges, especially when it came to debugging and optimizing the code.
If I could do something differently next time, I would:
- Focus more on planning and documentation from the start. I realized that having a more detailed plan and keeping better records of my decisions would have saved time and made the development process smoother.
For this project, I didn’t encounter any significant challenges since the task was relatively straightforward. The ease of the project allowed me to focus more on refining my CSS skills and paying attention to the details, like ensuring the layout was pixel-perfect and responsive.
While there weren’t any major hurdles, I did take the opportunity to experiment with different CSS properties and layouts. This exploration helped me solidify my understanding of CSS, and I feel more confident in my ability to tackle more complex projects in the future.
What specific areas of your project would you like help with?Since the QR Code Component project was fairly simple and I didn't face any major challenges, I don't need much help with this particular project. However, I’m always looking for ways to improve and would appreciate feedback on:
- Code Optimization: Are there any areas where I could streamline my HTML or CSS for better performance or cleaner code?
- Best Practices: Did I follow best practices in terms of structure, semantics, and accessibility? Any tips on improving in these areas would be helpful.
- Design Enhancements: Are there any subtle design improvements I could make to enhance the user experience or visual appeal?
Getting insights on these aspects would help me refine my approach in future projects.
@A-noob-in-CodingPosted 3 months agoHi there
Good job for this challenge, I would like to suggest some things regarding semantics
For the card container you can wrap it in main section instead of a div
<main> </main>Also while using images you can keep them in
<figure></figure>for better semanticsHope you find my suggestions helpful 🥰
0 - @sikulamartinSubmitted 3 months ago
- @rakibsharkarSubmitted 3 months ago@A-noob-in-CodingPosted 3 months ago
Hi,
Good job on this project, I would suggest to make the body width fixed at the screen width, you can use this line of codes:
body{ max-width: 100vw; }In this way the body container will only take the screen width as maximum width and won't stretch horizontally
Marked as helpful0 - @Ramine92Submitted 3 months ago@A-noob-in-CodingPosted 3 months ago
Hi there,
You did a good job for this challenge, but I would like to suggest some changes
This project is a single component based so you only need the body height as the full screen height, you can achieve this by
body{ min-height: 100vh; }also the card is not centred propertly you can use
flexproperty on the card containercontainer{ display: flex; justify-content: center; align-items: center; {I hope you find my suggestions useful
Marked as helpful0 - @marwinfbSubmitted 4 months ago
- @Jack1224ESubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
This is my first project it is not perfect
What challenges did you encounter, and how did you overcome them?How to approach the project and responsive
What specific areas of your project would you like help with?responsive, media query
@A-noob-in-CodingPosted 4 months agoHi there, you did a good job in this solution, however here are some things you used consider in your next project:
- For images use the figure semantic tag for better accessibility, you used to have a empy div and used the QR image as background instead:
In html
<figure> <img src = "qr-image"> </img> </figure>In CSS:
img{ width: 100%; height:auto; display: block; }In this way all you need to have this figure in a container and the image will resize automatically for a responsive desing, you would need to remove the default margin of the
<figure></figure>elementAlso you are using an extra div for cover the full screen width, you could apply this to body instead of less lines of code
Hope it is helpful for you 🥰
1 - @mikewil245Submitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I looks like the provided design or close to it and what i would do different is start using SASS for nesting and better readability
What challenges did you encounter, and how did you overcome them?Getting the spacing around the list items and changing the color of the bullet points. but figured out i just need to add
What specific areas of your project would you like help with?paddingto create the spacing and for changing the bullet point color i discovered the pseudo element::markerJust making sure my spacing is consistent throughout my layout
@A-noob-in-CodingPosted 4 months agoHi there,
For the spacing to be consistent you can use relative units in padding, margin etc instead of absolutes units
1
