@Amir-mohammad-ahmady-1234Submitted 26 days ago
Zahra Ehsani
@ehsanidevAll comments
- @ehsanidevPosted 6 days ago
Add comments to explain complex logic or functionality. Also, include a README.md file to describe the project, its features, and how to run it locally.
Marked as helpful0 - @Amir-mohammad-ahmady-1234Submitted 29 days ago@ehsanidevPosted 6 days ago
Include comments in the JavaScript code to explain complex logic or functionality for better understanding and maintainability.
0 - @Amir-mohammad-ahmady-1234Submitted about 1 month ago@ehsanidevPosted 6 days ago
Refactor JavaScript for Modern Practices: Replace var with const and let for better scoping. Break down the code into reusable functions (e.g., separate functions for adding items, updating the cart, and calculating totals).
Enhance Cart Functionality: Add features like quantity adjustment (increase/decrease), individual item removal, and real-time total price calculation to make the cart more dynamic and user-friendly.
Use Local Storage for Persistence: Implement localStorage to save the cart data so it persists even after page refreshes, improving the user experience.
Improve Event Handling: Optimize event listeners (e.g., use event delegation for dynamically added elements like cart items) to make the code more efficient and scalable.
Add Error Handling and Validation: Include checks for edge cases, such as preventing duplicate items in the cart or handling empty states gracefully, to make the app more robust.
Marked as helpful0 - @LaibaRana10Submitted 8 days agoWhat are you most proud of, and what would you do differently next time?
One of the things I am most proud of in this project is my ability to bring the design to life with clean and structured code. I paid close attention to detail, ensuring that the layout, typography, and colors matched the given design perfectly. Additionally, I improved my CSS skills, especially in creating a responsive and visually appealing user interface.
What I Would Do Differently Next Time If I had to do something differently, I would focus more on planning before coding. At times, I found myself making multiple revisions because I hadn’t fully structured my approach beforehand. Next time, I would take the time to break down the project into smaller steps, sketch a layout plan, and write pseudocode to streamline the development process.
By learning from these experiences, I can continue to improve and build even better projects in the future!
What challenges did you encounter, and how did you overcome them?Challenges I Faced One of the biggest challenges I encountered in this project was ensuring responsive design across different screen sizes. While testing on various devices, I noticed that some elements weren’t aligning properly, and there were occasional overlapping issues. Additionally, understanding the proper use of CSS Flexbox and Grid for complex layouts was a bit tricky.
How I Overcame Them I adopted a mobile-first approach, designing for smaller screens first and then adjusting for larger devices. I used browser developer tools to inspect and debug styling issues at different breakpoints. I practiced more with CSS Grid and Flexbox, referring to documentation and tutorials to improve my understanding. I tested my website on multiple devices to ensure a smooth and consistent user experience. These challenges were tough, but they helped me learn and improve, especially in building responsive and well-structured designs
What specific areas of your project would you like help with?Areas I Need Help With While working on this project, I identified a few areas where I could use some guidance to improve my skills and make the final product even better:
Responsive Design – Although I have implemented a mobile-friendly layout, I would love feedback on how to refine my approach and make it even more seamless across different screen sizes. Code Optimization – I want to ensure my HTML, CSS, and JavaScript are well-structured, efficient, and easy to maintain. Any tips on best practices would be appreciated! Animations and User Interactivity – I’d like to enhance the user experience with smooth animations and subtle interactive elements, but I’m unsure of the best techniques to achieve this effectively.
@ehsanidevPosted 8 days agoIssues in your Code:
-
In the
authersection, the classnameis used twice (once forpand once forimg). This could cause confusion. -
In the
<p class="learning"></p>Learning</p>section, the<p>tag is incorrectly closed (an extra</p>is present). -
The media query
@media(max-width:1850)is not written correctly. It should be@media (max-width: 1850px). -
In the
:rootsection, the color--Grayis defined twice, and one of them should likely be--Black. -
The code could benefit from more comments to explain complex sections or logic.
-
The media query is not well-defined and may not work as intended for responsive design.
-
The use of overly specific selectors (e.g.,
.card .auther img) could lead to maintainability issues in larger projects. -
Some values (e.g.,
top: 15px,right: -15pxin.card::before) are hardcoded, which might not be flexible for different screen sizes or layouts. -
There is no
alttext for the second image in theauthersection, which could impact accessibility. -
The
.attributionclass and its styles are commented out in the HTML but remain in the CSS, which could lead to unnecessary code bloat.
Marked as helpful0 -
- @Fawwad795Submitted 8 days agoWhat are you most proud of, and what would you do differently next time?
I am most proud of the fact that I was able to complete this project on my own. This is the very first HTML/CSS challenge that I was able to make in a minimum amount of time period, just taking a few hours. What I would do differently next time is focus more on the different types of displays in CSS. Researching more about Floating Containers, Flexbox, and CSS Grid.
What challenges did you encounter, and how did you overcome them?There were no specific challenges that I encountered since I am aware of the basics of HTML and CSS. The parts that had me lagging was the exact syntax. For example, how to implement an animation (transition) on elements. For that I took advantage of ChatGPT in order to help me revise the concept and hence overcome them.
What specific areas of your project would you like help with?What I need help in is when to use different types of layouts displays (e.g., FlexBox and CSS Grid). It always catches me in confusion as when to apply what technique.
@ehsanidevPosted 8 days ago-
Flexbox is used for one-dimensional layouts (row or column), while CSS Grid is ideal for two-dimensional layouts (rows and columns simultaneously).
-
Use Flexbox for alignment and space distribution in a single direction.
-
CSS Grid is perfect for creating complex structures and precise grid layouts.
-
Flexbox is suitable for navigation menus, lists, and linear layouts.
-
CSS Grid works best for magazine-style layouts, image galleries, and dashboards.
-
Combining Flexbox and CSS Grid delivers the best results for modern layouts.
-
Flexbox is great for internal sections, while CSS Grid is better for overall page structure.
-
Use Flexbox for dynamic items and CSS Grid for fixed structures.
-
To decide, first determine if your layout is one-dimensional or two-dimensional.
With practice and experience, choosing between Flexbox and CSS Grid will become easier.
0 -
- @Lysak-MaximSubmitted 9 days agoWhat specific areas of your project would you like help with?
I'd like to receive any kind of critics or review about any aspect of my solution, especially regarding semantic part. P.S. I have finished learning html and css theoretically and started studying practically recently.
@ehsanidevPosted 9 days agoStructure & Semantics: Your HTML is well-structured with proper use of semantic tags like <article>, <header>, and <footer>, enhancing accessibility and readability. Styling & Design: The CSS is clean and modular, with variables for colors and responsive design using media queries. The card design is visually appealing with a nice box-shadow effect. Responsiveness: The media query for smaller screens ensures the card adapts well, but consider testing on more devices for consistency. Improvement: Avoid using @import for fonts; directly include the @font-face rules in your main CSS file for better performance and reliability.
1 - @pluggeryderSubmitted 9 days agoWhat are you most proud of, and what would you do differently next time?
Proud of my first actual web page
What challenges did you encounter, and how did you overcome them?While using Flexbox the content inside the body couldn't move with justify-content I overcame that with changing html and body width to 100% and margin to 0
What specific areas of your project would you like help with?-is there's anything I'm missing -how can I improve my code structure -how can I get h2 text to look closer to the original design
@ehsanidevPosted 9 days ago- Semantic HTML: Consider using semantic elements like <main> and <footer> for better structure and accessibility. Also, improve the alt text for the QR code image to be more descriptive.
- CSS Improvements: Use CSS variables for colors to make the code more maintainable, and simplify Flexbox alignment in the .container class.
- Code Maintainability: Add comments to explain sections of your code and consider linking your portfolio or GitHub in the attribution section instead of using a placeholder (#).
Marked as helpful1 - @arsalanansariofficialSubmitted 15 days ago@ehsanidevPosted 10 days ago
Using CSS variables for colors is a good practice, but ensure they are scoped properly. If these colors are used globally, consider defining them in the :root selector for better reusability. The layout is responsive, but you could enhance it by using clamp() for font sizes or padding to ensure better scalability across different screen sizes. Overall, your code is clean and functional.
0
