@tanush1852Submitted 8 months ago
Abd Ur Rehman
@A-noob-in-CodingAll comments
- @Ibtehaj-Ali-1Submitted 8 months ago
- P@barka-devSubmitted 8 months ago
- @Thibs13Submitted 8 months ago
- P@inappdesignSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
This is my first CSS Grid project.
- @ttvclvckPWNERSSubmitted 8 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 8 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 - P@sikulamartinSubmitted 8 months ago
- @rakibsharkarSubmitted 8 months ago@A-noob-in-CodingPosted 8 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 8 months ago@A-noob-in-CodingPosted 8 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 - P@marwinfbSubmitted 9 months ago
- @Jack1224ESubmitted 8 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 8 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 8 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 8 months agoHi there,
For the spacing to be consistent you can use relative units in padding, margin etc instead of absolutes units
1 - @UnicorngalSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
I am most proud that I didn't give up. This was my first coding project ever, and I pushed through despite the number of times I had to put down my laptop and take a walk to let out the frustration of errors.
What challenges did you encounter, and how did you overcome them?Getting the containers and table to match the design provided. I used the Google dev editor to tinker until the design and my code matched. And deploying the project. I watched a video by KimDoesCode.
What specific areas of your project would you like help with?How did I do? Is my code readable, and clear? (In case I was working with a team, would it be good to go?) Is there an easier way to get the colors of the design? Is there an easier way to find the dimensions of the content container?
@A-noob-in-CodingPosted 8 months agoHi there,
The solution appears to be too large that one need to zoom out to see the page better
You can cover the entire recipe card container in
<main></main>for better accessibilityYou can set the set the height of body to 100vh so that it covers the full screen and do not extend beyond it
For images in html you are using the width and height in pixels instead do this
- Try to use relative units to make the page more responsive
- Always use the images in figure semantic tag for accessibility
- Use the following line of CSS to make the images responsive
img{ width: 100%; height: auto; display: block; }Use the following code to make the page responsive
I hope this comment is helpful
0 - @Aabankhan1Submitted 8 months agoWhat are you most proud of, and what would you do differently next time?
While building this project, I reinforced my understanding of:
How to use Flexbox for layout and alignment. Styling components with custom properties and ensuring consistency across elements.
What challenges did you encounter, and how did you overcome them?Actually, I don't learn about grid I prefer Flexbox over grid cause it is easy and I'm good at it so the design takes a little bit much effort because of Flexbox If I know about grid layout so it takes less effort well I encounter this issue and it takes more one of code.
@A-noob-in-CodingPosted 8 months agoHi there,
While flexbox is easy to implement as compared to CSS grid, grid layout pays well in large and complex layouts
Imagine working on a Fully Functional Web design, you may need to design header, footer, main section, subsections and grid layout is easier in this situation
So I would say learn CSS grid as well. Hope my feedback is useful for you 🥰
0 - @asyirriSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
Im recreating without any style guide or prototype, maybe nextime im trying to design on figma first and implementing at my code.
What challenges did you encounter, and how did you overcome them?Without using any style guide, especially while encountering the size of the element its challanging.
What specific areas of your project would you like help with?Still i want to increase with my responsive layout specially using
display:grid. Because im still usingdisplay:flexto arrange everything@A-noob-in-CodingPosted 8 months agoIt is alright to use flexbox display for small layouts like this challenge
For big layouts like a home page where you have a header, footer, main section, scroll section etc, Grid really helps a lot.
But I would encourage learning grid display as it saves time in complex layouts
Marked as helpful0 - @MJyeeSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
being my first time coding a html page, the results was not bad, manage to get close to the requested result
What challenges did you encounter, and how did you overcome them?challenge faces was the centering and making everything scale and move correctly, in the end had to resort to hard coding to set it in place
What specific areas of your project would you like help with?dynamic scaling and positioning of items, i had trouble making the QR code image follow the size of the container box, where the text would be wider than the qr code and the result end up a whack
@A-noob-in-CodingPosted 8 months agoHi there,
You could try the following line of codes for images in css
img{ width:100% height: auto display: block }In this way the image will always follow its parent container and its height will not be disturbed
1 - @dquinn089Submitted 8 months agoWhat are you most proud of, and what would you do differently next time?
I initially structured the project with HTML, but faced difficulties when moving to CSS and incorporating JavaScript. After some styling, I decided to focus on getting the JavaScript logic working with the HTML first. I used display properties to hide sections for testing and saved most of the CSS styling for last. In future projects, I'll prioritize accessibility in my HTML by using both IDs and classes for better distinction between styling and logic. I'll also employ debugging methods to ensure functionality.
What challenges did you encounter, and how did you overcome them?This project really stressed the importance of figuring out a proper work flow. I kept finding myself going back and forth between the styling and the logic and HTML having to make proper adjustments for each change that was made in any of the code. I'm definitely coming back from this with a better idea of how to approach building all aspects of the project.
What specific areas of your project would you like help with?One thing that bugs me is that the error message logic works when there is no input in the input box, but when you type anything in other than an email, a built in pop-up windows displays saying "Please include an '@' in the email address. 'input' is missing an '@'.". I'm not sure if this is because i set the input
type="email", or something else. It's just annoying because i built a regex to check for more than just an '@'. Unless someone can give me any tips, I might come back in the future and get rid of the regex just to see if the validation function still works, and change the inputtypefor testing.@A-noob-in-CodingPosted 8 months agoHi there,
For email validation, custom made regex would be better as you can strongly check for any wrong emails as input
For reference I used this regex
const emailRegex = /^[a-zA-Z0-9.]+@[^\s@]+\.[^\s@]+$/;0 - @ltgoodworthSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
- I am proud of being able to get my design pretty close to the design spec in my first coding challenge.
- Next time I would probably try not to get stuck on 1 section for too long. Moving on and then circling back to any problem areas may be more effective.
- Styling the list element bullets/numbers presented a challenge.
- I found a solution which involved styling the list element and then using span tags to re-style the list text.
- The horizontal rule elements seem to be faded in the design spec whereas in my solution they are much darker. I did try to fade these out but could not seem to find a way of doing this.
@A-noob-in-CodingPosted 8 months agoHello there, You can use 1px border size and use a very light shade of grey to match the design
0
