Skip to content
OverviewSolutions
3
Comments
9

Zahra Ehsani

@ehsanidevearth110 points

I overcame my depression by programming👩🏻‍💻

I’m currently learning...

UX Design

Latest solutions

  • LinkSphere: Animated Social Portal

    #sass/scss
    Zahra Ehsani•110
    Submitted 3 months ago

    Short Answer:

    For this project, I'd appreciate help with:

    1. Performance Optimization – Reducing GPU load from animated bubbles
    2. Cross-Browser Testing – Especially Safari's backdrop-filter quirks
    3. Mobile UX – Improving touch interaction responsiveness
    4. Accessibility Audit – Ensuring motion/contrast meet WCAG standards

    (Example: "Would love suggestions on optimizing the bubble count algorithm for different device tiers!")

    Concise Alternative:
    "Seeking guidance on:
    ① Mobile performance tuning
    ② Safari compatibility fixes
    ③ Touch gesture refinement"

    Let me know which area you'd like to focus on!

    1 comment

  • Blog Preview Card | Using Grid CSS and Positioning | Hover effect

    Zahra Ehsani•110
    Submitted 3 months ago

    I would really love to get your feedback on how I’ve handled styling in the CSS file.

    2 comments

  • Responsive QR Code Component | Using HTML and CSS

    Zahra Ehsani•110
    Submitted 3 months ago

    I would really love to get your feedback on how I’ve handled styling in the CSS file.

    2 comments

Latest comments

  • Zahra Ehsani•110
    @ehsanidev

    Positive Aspects

    1. Clean Structure: The project has a straightforward folder structure with separate files for HTML, CSS, and JavaScript.

    2. Responsive Design: The layout seems to adapt well to different screen sizes based on the provided screenshots.

    3. Semantic HTML: Uses appropriate HTML5 semantic elements like main, section, and footer.

    4. CSS Organization: The CSS is well-organized with logical sections for base styles, utilities, and component-specific styles.

    5. JavaScript Functionality: Includes a simple dark/light mode toggle that persists user preference using localStorage.

    Areas for Improvement

    1. Accessibility:

      • Missing alt attributes for the profile image
      • Could benefit from ARIA attributes for the theme toggle button
      • Consider adding focus-visible styles for keyboard navigation

    2. CSS:

      • Some duplicate styles could be consolidated (e.g., social link hover states)
      • Consider using CSS variables more extensively for theming
      • The media queries could be organized better (currently mixed with component styles)

    3. JavaScript:

      • The theme toggle could be more robust with error handling
      • Consider adding a transition for smoother theme changes

    4. Performance:

      • The CSS could be minified for production
      • Consider lazy-loading the profile image

    5. Documentation:

      • Could benefit from a README with setup instructions and project details
      • Consider adding comments to explain complex parts of the code
  • Zahra Ehsani•110
    @ehsanidev

    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 helpful
  • Zahra Ehsani•110
    @ehsanidev

    Include comments in the JavaScript code to explain complex logic or functionality for better understanding and maintainability.

  • Zahra Ehsani•110
    @ehsanidev

    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 helpful
  • LaibaRana10•70
    @LaibaRana10
    What 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.

    blog-preview-card-main

    1
    Zahra Ehsani•110
    @ehsanidev

    Issues in your Code:

    1. In the auther section, the class name is used twice (once for p and once for img). This could cause confusion.

    2. In the <p class="learning"></p>Learning</p> section, the <p> tag is incorrectly closed (an extra </p> is present).

    3. The media query @media(max-width:1850) is not written correctly. It should be @media (max-width: 1850px).

    4. In the :root section, the color --Gray is defined twice, and one of them should likely be --Black.

    5. The code could benefit from more comments to explain complex sections or logic.

    6. The media query is not well-defined and may not work as intended for responsive design.

    7. The use of overly specific selectors (e.g., .card .auther img) could lead to maintainability issues in larger projects.

    8. Some values (e.g., top: 15px, right: -15px in .card::before) are hardcoded, which might not be flexible for different screen sizes or layouts.

    9. There is no alt text for the second image in the auther section, which could impact accessibility.

    10. The .attribution class and its styles are commented out in the HTML but remain in the CSS, which could lead to unnecessary code bloat.

    Marked as helpful
  • Fawwad Ahmed•20
    @Fawwad795
    What 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.

    Responsive Landing Page using CSS Grid and Media Queries

    #animation
    1
    Zahra Ehsani•110
    @ehsanidev

    • 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.

View more comments