@xStephxSubmitted 5 months ago
Munib ahmad
@MunibAhmad-devAll comments
- @davidkhuuSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
Proud of adding the responsive design for mobile screens.
Next time I'd like to look into a less repetitive way to handle it.
What challenges did you encounter, and how did you overcome them?Finding the correct syntax for handling different media sizes. Google was a handy resource to figure it out.
What specific areas of your project would you like help with?There is most likely a less repetitive way to handle a mobile screen size than what I did. Do you know of a way or do you have a link to a resource I can read up on?
@MunibAhmad-devPosted 5 months agoGreat job on your solution! For handling mobile screen sizes in a less repetitive way, I recommend using CSS media queries. Media queries allow you to apply different styles for different screen sizes, which helps to avoid repetitive code. You can read more about them in this comprehensive guide from MDN Web Docs: Using Media Queries.
Define Breakpoints: Identify the screen sizes you want to target (e.g., mobile, tablet, desktop). Write Media Queries: Use the @media rule in your CSS to apply styles based on the screen size. For example:
css Copy code /* Default styles for mobile */ body { font-size: 16px; padding: 10px; }
/* Styles for tablets and larger screens */ @media (min-width: 768px) { body { font-size: 18px; padding: 20px; } }
/* Styles for desktops and larger screens */ @media (min-width: 1024px) { body { font-size: 20px; padding: 30px; } } here you go ' https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries."
Hope this helps!
0 - @BablubamaniyaSubmitted 5 months ago@MunibAhmad-devPosted 5 months ago
You did a fantastic job with the project! I wanted to point out that while the challenge suggests using a width of around 600px, i must say. you made good use of the entire available space. This shows your ability to think beyond the given constraints, which is great for real-world scenarios where flexibility is key. Overall, your design looks impressive, and your attention to detail is commendable. Keep up the excellent work!
Marked as helpful1 - @OgagaAkpowenre1Submitted 5 months agoWhat specific areas of your project would you like help with?
I need to improve my CSS, especially my mobile designs.
@MunibAhmad-devPosted 5 months agoGreat job on your solution! Your design and functionality are impressive. I noticed you mentioned wanting to improve your CSS, especially for mobile designs. One thing that has helped me is focusing on media queries to ensure responsive layouts. For example, using @media rules to adjust font sizes, padding, and margins can make a big difference on smaller screens. Additionally, utilizing flexible grid layouts or frameworks like Flexbox and CSS Grid can simplify responsive design. Keep experimenting and practicing, and you'll see improvement in no time. Looking forward to seeing more of your projects!
Marked as helpful0 - @Ahmed-l2Submitted 5 months agoWhat are you most proud of, and what would you do differently next time?
Responsive design was a new concept to me, and I'm very proud of building my first responsive website.
What challenges did you encounter, and how did you overcome them?I think this was my most challenging one yet because I was introduce to a new concept that I was not aware of before hand that is creating a responsive design that works with both PC and Mobile screens. I took a mobile first approach for this project and getting things to scale just right was new to me so it took me some time to get the hang of it but I have definitely improved by a lot and now have a better understanding of creating web pages that function on different screen sizes.
What specific areas of your project would you like help with?I'm still fairly new to responsive designs so any feedback on my code would be greatly appreciated.
@MunibAhmad-devPosted 5 months agoGreat job on completing your first responsive website!
It's impressive to see how you've tackled the challenge of responsive design head-on, especially since it was a new concept for you. Here are some points I'd like to highlight:
What You Did Well: Mobile-First Approach: Adopting a mobile-first strategy is a smart move. It ensures that the core functionality of your site is accessible on smaller screens before scaling up for larger ones. This approach is often recommended in modern web development. Responsive Design: Successfully creating a website that works well on both PC and mobile screens is a significant achievement. It shows your adaptability and willingness to learn new concepts. Perseverance: Overcoming the initial challenges and steadily improving your understanding of responsive design is commendable. This persistence is crucial in web development. Suggestions for Improvement: Code Optimization: Review your CSS for any redundancies or repetitive styles. Using CSS preprocessors like SASS can help streamline your code and make it more maintainable. Media Queries: Ensure that your media queries cover a wide range of devices. Sometimes, additional breakpoints may be necessary to cater to tablets or larger monitors. Flexible Layouts: Consider using relative units like percentages, ems, or rems instead of fixed pixels. This can make your design more adaptable to various screen sizes. Areas to Focus On: Testing Across Devices: Regularly test your site on different devices and browsers. Tools like BrowserStack or real device testing can provide insights into how your site performs across different environments. Performance Optimization: Responsive design can sometimes lead to larger file sizes. Optimize your images and use techniques like lazy loading to improve load times. Accessibility: Ensure that your design is not only responsive but also accessible. Use semantic HTML, provide alt text for images, and ensure that your site is navigable via keyboard.
Marked as helpful1 - @AutumnsCodeSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
I really liked how I managed the CSS part since I used layers for the first time. I kept it simple for this project.
Maybe, I would change the css custom property next time.
What specific areas of your project would you like help with?Any Improvement idea would be great, but maybe some tips how to deploy the page to netlify would be helpful since most of the time, I have difficult to deploy the css part of it.
@MunibAhmad-devPosted 5 months agoGreat jon man! Your use of CSS layers is impressive, especially since it was your first time trying it out. The simplicity you maintained throughout the project really stands out and makes the overall design very clean and user-friendly.
Regarding your CSS custom property, it's great to see you're thinking ahead about improvements. Custom properties can significantly enhance maintainability and scalability, so experimenting more with them in future projects could be beneficial.
For areas of improvement, here are a few suggestions:
CSS Custom Properties: As you mentioned, diving deeper into CSS custom properties (variables) could help. They are excellent for maintaining a consistent design system and making global changes easier. Responsive Design: If not already implemented, ensuring your design is fully responsive would enhance user experience across different devices. Accessibility: Consider incorporating more accessibility features to make your project inclusive for all users. This could involve using semantic HTML, ARIA roles, and ensuring good color contrast. As for deploying your page to Netlify, here's a quick guide that might help:
Repository Setup: Ensure your project is on a Git repository (GitHub, GitLab, Bitbucket). Netlify Account: Create a free Netlify account and log in. New Site from Git: In Netlify, click on "New site from Git" and connect to your repository. Build Settings: Configure the build settings. For a typical static site, you might not need to change much, but ensure your build command and publish directory are set correctly (e.g., npm run build and build for a React app). Deploy: Click "Deploy site". Netlify will handle the rest. I hope these suggestions are helpful. Your project is off to a fantastic start, and with a few tweaks, it can be even more remarkable. Keep up the great work!
Marked as helpful0 - @111SkaSkaSka111Submitted 5 months agoWhat specific areas of your project would you like help with?
Drag and Drop Feature
I am developing using React and the @dnd-kit library for drag-and-drop functionality. I am encountering an issue where the event handlers for the checkbox (to check/uncheck items) and the delete button do not work after implementing the drag-and-drop feature. The checkbox does not toggle, and items cannot be deleted from the list. You can view the complete code in the following GitHub repository:
Is there something wrong with how I implemented @dnd-kit that is causing the event handlers to malfunction? How can I fix it so that the checkbox and delete functionality work after implementing drag-and-drop?
@MunibAhmad-devPosted 5 months agoCheck Event Bubbling and Propagation:
Ensure that the drag-and-drop events are not stopping the propagation of click events needed by the checkboxes and delete buttons. Inspect the Drag Overlay:
Verify if the elements you are dragging have any overlay that might be blocking interactions with the checkboxes and delete buttons. Debug Event Listeners:
Use console.log statements or debugging tools to ensure that the event listeners for the checkboxes and delete buttons are still being attached correctly after implementing drag-and-drop. Prioritize Event Handling:
Make sure the order of event handling does not interfere with the drag-and-drop functionality. Example Code Here is an example demonstrating how you might structure your component to ensure proper handling of both drag-and-drop and click events: import React, { useState } from 'react'; import { DndContext, useDraggable, useDroppable } from '@dnd-kit/core';
const DraggableItem = ({ id, onDelete, onToggle, checked }) => { const { attributes, listeners, setNodeRef } = useDraggable({ id, });
return ( <div ref={setNodeRef} {...attributes} {...listeners}> <input type="checkbox" checked={checked} onChange={() => onToggle(id)} onClick={(e) => e.stopPropagation()} /> <button onClick={(e) => { e.stopPropagation(); onDelete(id); }} > Delete </button> <span>{id}</span> </div> ); };
const DroppableArea = ({ children }) => { const { setNodeRef } = useDroppable({ id: 'droppable', });
return <div ref={setNodeRef}>{children}</div>; };
const App = () => { const [items, setItems] = useState([ { id: 'item-1', checked: false }, { id: 'item-2', checked: false }, // Add more items as needed ]);
const handleToggle = (id) => { setItems((prevItems) => prevItems.map((item) => item.id === id ? { ...item, checked: !item.checked } : item ) ); };
const handleDelete = (id) => { setItems((prevItems) => prevItems.filter((item) => item.id !== id)); };
return ( <DndContext> <DroppableArea> {items.map((item) => ( <DraggableItem key={item.id} id={item.id} onDelete={handleDelete} onToggle={handleToggle} checked={item.checked} /> ))} </DroppableArea> </DndContext> ); };
export default App; "
Stopping Event Propagation:
For the checkbox and delete button, e.stopPropagation() is used to prevent the drag-and-drop functionality from interfering with the click events. Use of DndContext:
The DndContext provides the necessary context for the drag-and-drop functionality. Separating Concerns:
The DraggableItem component is responsible for handling its own drag-and-drop, click, and change events, ensuring that these do not interfere with each other. State Management:
State is managed in the App component, and helper functions (handleToggle and handleDelete) are passed down to manage the state changes.
Marked as helpful0 - @Alex-Archer-ISubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
I used to use Redux for managing complex states in react apps. But this time I tried the
What challenges did you encounter, and how did you overcome them?useContexthook for cart states. I wanted to practice it more and compare it with Redux. Wait, am I really proud with it? Guess should be something.I decided to bring this project closer to the real one. To do this I put the product data to a separate file and tried to build app as if there could be more products. Also I slightly changed "add to cart" design for more deep work with context. Well, after I made those challenges up, I successfully overcame them.
What specific areas of your project would you like help with?As always I'll be more than happy to receive some critics, advices and just random comments =)
@MunibAhmad-devPosted 5 months agoFirst of all, great job on completing the project! 🎉 Here are a few points of feedback:
It's fantastic to see you experimenting with the useContext hook for managing cart states instead of relying on Redux. This not only shows your willingness to step out of your comfort zone but also your eagerness to explore and learn different state management approaches. It's a great way to understand the nuances and benefits of each method. Perhaps next time, you could document your findings and compare both approaches in a blog post or a detailed readme. This would not only solidify your understanding but also help others who might be in a similar learning phase.
Your approach to make the project more realistic by externalizing product data and simulating a larger product set is commendable. It's a practical step that showcases your forward-thinking and ability to handle scalability. Additionally, modifying the "add to cart" design to deepen your understanding of context is a smart move. It shows you’re not just completing tasks, but also thinking critically about the user experience and the underlying architecture.
For specific areas of improvement, I'd suggest focusing on the following:
Code Structure: Ensure your code is modular and well-documented. This makes it easier for others (and future you) to understand and maintain. Performance Optimization: Look into optimizing your use of context to prevent unnecessary re-renders, especially as the product list grows. Testing: Consider adding more tests to cover edge cases and ensure the reliability of your application as it scales. Overall, your project demonstrates a solid understanding of React and state management. Keep experimenting and pushing your boundaries. Well done! 👏
Marked as helpful1 - @FengDennySubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
Creating this recipe page allowed me to understand the appropriate HTML elements to use to structure the page based on the following design
Styling the page allowed me deep dive the fundamentals of flexbox, media queries and CSS specificity
If I were to rebuild this recipe page again, I would use CSS Grid to practice using the grid system to layout the page instead of flex box
What challenges did you encounter, and how did you overcome them?One challenge I encountered was with the nutrition section, styling the
tablecontent.For the
thandtdcontent, I was unsure how to push thethto the far left andtdelements to the far right as much as possible .Using
What specific areas of your project would you like help with?MDN Web Docs, I figured out the best way to do this is to useflex-basisto grow the content as much as possible so I setflexto1forthandtdto grow them evenlyAt the moment, none.
- @tchananetSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
Being close to the design especially mobile
What challenges did you encounter, and how did you overcome them?I had some matching the design as close as possible, espcially with size, padding and margin. I had to put the design next to the rendered website and try to match by observing the differences.
@MunibAhmad-devPosted 5 months agoDid you use flex box or css gird for the social media links buttons?
0 - @AjaiyeobaSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
The project gave me another idea 💡 to work on for a project. I also learnt how to use and place colors
What challenges did you encounter, and how did you overcome them?I encountered no challenges
- @thanhduy1706Submitted 6 months agoWhat are you most proud of, and what would you do differently next time?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras metus dui, pharetra maximus augue in, aliquet congue mi. In congue lacus id lacus lobortis aliquet. Aliquam eget ultricies mi. Sed rhoncus lobortis quam, in bibendum arcu semper sit amet. Ut interdum neque sit amet diam posuere feugiat. Ut at vulputate turpis. Ut at tincidunt ligula, non finibus ante. Curabitur sed lorem lacinia, malesuada felis ut, maximus tortor. Aenean dapibus diam ac faucibus malesuada. Curabitur vulputate magna massa, vitae venenatis libero rhoncus ut. Curabitur ac ligula porttitor, pretium turpis efficitur, vestibulum quam. Morbi pretium id lacus in auctor. Nunc interdum risus ex, eu semper elit tristique rutrum. In congue fermentum nulla, eu posuere nunc sagittis eu. Curabitur vestibulum elit eros, ac interdum odio porta nec. Pellentesque tempus leo nec felis blandit, sit amet mattis neque porta.
What challenges did you encounter, and how did you overcome them?Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras metus dui, pharetra maximus augue in, aliquet congue mi. In congue lacus id lacus lobortis aliquet. Aliquam eget ultricies mi. Sed rhoncus lobortis quam, in bibendum arcu semper sit amet. Ut interdum neque sit amet diam posuere feugiat. Ut at vulputate turpis. Ut at tincidunt ligula, non finibus ante. Curabitur sed lorem lacinia, malesuada felis ut, maximus tortor. Aenean dapibus diam ac faucibus malesuada. Curabitur vulputate magna massa, vitae venenatis libero rhoncus ut. Curabitur ac ligula porttitor, pretium turpis efficitur, vestibulum quam. Morbi pretium id lacus in auctor. Nunc interdum risus ex, eu semper elit tristique rutrum. In congue fermentum nulla, eu posuere nunc sagittis eu. Curabitur vestibulum elit eros, ac interdum odio porta nec. Pellentesque tempus leo nec felis blandit, sit amet mattis neque porta.
What specific areas of your project would you like help with?Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras metus dui, pharetra maximus augue in, aliquet congue mi. In congue lacus id lacus lobortis aliquet. Aliquam eget ultricies mi. Sed rhoncus lobortis quam, in bibendum arcu semper sit amet. Ut interdum neque sit amet diam posuere feugiat. Ut at vulputate turpis. Ut at tincidunt ligula, non finibus ante. Curabitur sed lorem lacinia, malesuada felis ut, maximus tortor. Aenean dapibus diam ac faucibus malesuada. Curabitur vulputate magna massa, vitae venenatis libero rhoncus ut. Curabitur ac ligula porttitor, pretium turpis efficitur, vestibulum quam. Morbi pretium id lacus in auctor. Nunc interdum risus ex, eu semper elit tristique rutrum. In congue fermentum nulla, eu posuere nunc sagittis eu. Curabitur vestibulum elit eros, ac interdum odio porta nec. Pellentesque tempus leo nec felis blandit, sit amet mattis neque porta.
