Skip to content
OverviewSolutions
4
Comments
9
hidayahmsabah
@hidayahmsabah

All comments

  • timidij•230
    @timidij
    What are you most proud of, and what would you do differently next time?

    I'm proud I was able to write a code that displays content and hides them

    What challenges did you encounter, and how did you overcome them?

    The challenge I had had was how to add class to a preexisting class, I just had to use the toggle () method to ease things up

    What specific areas of your project would you like help with?

    The are I want to improve is that, when ever the use clicks on a question without closing it, and opens another one, the previous one should close automatically

    FAQ with answers

    #accessibility#react#react-router
    1
    hidayahmsabah•160
    @hidayahmsabah

    Hi timidij, I think you did a great job with your solution. UX-wise, I think it's better to leave the already opened answers open if the user clicks on a different question. I don't see that as a requirement for this challenge.

    You linked the wrong github repo for your solution, but I looked around and saw your solution repo is at: https://github.com/timidij/faq-accordion/ Did you push your latest code here? If I used the code from this repo, the answers are hidden when you click on a different question which is what you wanted. But the issue would be the click event only registers on moreBtn instead of the entire question.

  • Brian Cisneros•20
    @cisneros1
    What specific areas of your project would you like help with?

    How can i improve the way my css is written? In terms of shortening and or better ways to write the css.

    Basic HTML and CSS

    2
    hidayahmsabah•160
    @hidayahmsabah

    Hi Brian, your solution and the challenge's expected solution is pretty much spot on.

    Some suggestions for your CSS, usually font-family properties are defined in body element instead of child element. This way you don't have to specify it inside each child element. I'm not sure if font-style: normal is necessary, since the default value is already normal. But if you need to apply it to your entire site, you can also define it in the body element.

    This was a pretty simple challenge, so there' not much I can comment on your code but all in all, it was written pretty well.

  • AngelaMwelu•120
    @AngelaMwelu
    What are you most proud of, and what would you do differently next time?

    I am most proud of successfully building my project using HTML and CSS, seeing it come together from a basic structure to a fully styled and functional webpage. Throughout the process, I learned many new concepts, especially about the CSS box model, layout techniques, and how small styling changes can dramatically improve a site's appearance. One thing I would do differently next time is plan my layout more carefully before coding — having a clear wireframe or sketch would have saved me time and made the development process smoother.

    What challenges did you encounter, and how did you overcome them?

    One challenge I encountered was getting the layout to display correctly across different screen sizes, which I overcame by learning and applying responsive design techniques like using flexbox and media queries.

    What specific areas of your project would you like help with?

    I would like help with improving the responsiveness of my project across different devices and making my CSS code more organized and efficient.

    COMPLETE STYLING WITH css

    2
    hidayahmsabah•160
    @hidayahmsabah

    Hi AngelaMwelu, first off you've done a very good job! You managed to utilize flex concepts in your stylings as well as transitions when hovering over the buttons.

    One suggestion for responsiveness, you can utilize CSS function max(). So in the case of your class "profile" you've set the width as 50% which works for larger screens, but when it gets to smaller screens, the width will still calculate 50% of the screen width which is not what the mock screen showed.

    Other suggestions, providing a fallback font-family in case other user's browsers cannot load the custom font you have for your app. Try following the mock screen as close as possible especially the wordings (space, uppercase, etc.). For example, GitHub instead of Github and Frontend Mentor instead of Front end Mentor.

    All in all, you did very well and keep it up!

  • hidayahmsabah•160
    @hidayahmsabah

    Hi Aperlae,

    Good job overall on the whole site! This is just some preliminary debug I did from looking at your code snippets which you can correct me if you've done that but the issue still persists.

    1. I notice the bg inconsistency happens when you're in tablet/mobile view so my guess it's because the page itself is inconsistent in terms of height due to scroll function. You can try specifying a height for that particular page, maybe make it consistent across all pages that it be at 100vh, or the other one, which I'm not sure would work, is specifying background-size: cover.

    2. On the index.html page you have no elements that can be query selected using '[role="tablist"] so it returns a null. That's why dev tools flagged that as an error because in line 18 of your index.js, you were referring to those elements which are null. Can simply add a conditional before that specific line to remove it the error.

    Marked as helpful
  • hidayahmsabah•160
    @hidayahmsabah

    Hi Natallia, really great job overall! Your end result looks spot on with the original in the design comparison.

    I would advise checking the padding-right of your form for the mobile view because it looks inconsistent with the left padding. Using % is great but do try experimenting with em/rem.

    Amazing job again!

  • hidayahmsabah•160
    @hidayahmsabah

    Hi Neil, you did a good job overall!

    I would advice on specifying width for your header as 100vw so that it extends to the whole width of the monitor regardless of its viewport. You might want to check on the clear completed functionality because it does not work when all of the items are completed.

    Good job again!

    Marked as helpful
  • hidayahmsabah•160
    @hidayahmsabah

    Hi Clifford, awesome job on the app! I especially loved that you disabled the navigation button when no items are in that state (for example, Completed nav is disabled if none of the items are completed yet).

    You would want to check on your light theme because when I added an item while I'm in light mode, it switched back to dark mode. Adding top and bottom padding on the create a new to-do div can give a more consistent style with the bottom portion of the to-do lists.

    All in all, great job!

    Marked as helpful
  • hidayahmsabah•160
    @hidayahmsabah

    Hi Christian, loved your smooth transition from dark to light theme and vice versa. For the drag and drop functionality, I referred to a youtube tutorial to achieve that https://www.youtube.com/watch?v=jfYWwQrtzzY, hope it helps you too.

    A couple of things to add, it would be best to make sure that the footer font is not as big as the drag and drop div unless you want to emphasize things on your footer as well. I would advise enabling keydown event or handler for pressing the enter key to add an item into the list. Pressing the circle on the left side of the textbox is not quite interactive.

    Great job on the rest of the functionality overall!

    Marked as helpful
  • hidayahmsabah•160
    @hidayahmsabah

    Hi Tamera, I got my solution from a youtube tutorial https://youtu.be/jfYWwQrtzzY. I don't know if you've checked that out. Loved that you had pseudo-class on your cross icon for hover state which makes it very interactive. I would advise adding cursor: pointer on some of the clickable elements such as the moon/sun icon and clear completed element on top of changing their font-color on hover state.

    Good job!