Skip to content
OverviewSolutions
15
Comments
11
Aruj Joshi
@gtalin

All comments

  • Aruj Joshi•290
    @gtalin

    Your solution looks very beautiful and elegent.

    The culprit for your moving layout for the mobile layout is the flex on the content class on your main. You'll have to remove flex and then the layout doesn't shift around. If you want to center the accordion, using margin: auto on content-wrapper class would do the trick. You will also have to add the linear gradient background to body or main and then add a margin-top to prevent the illustration from being truncated when you remove flex from main.

    For desktop layout, when you use flex, on content-wrapper using align-items:center is causing that shift in layout and it is causing your text to move .

    Hope this solves your problem.

    Marked as helpful
  • Aruj Joshi•290
    @gtalin

    Hi @catherineisonline. Congratulations on completing this challenge. Your solution looks amazing.

    I do have a few suggestions on how you can improve the solution further:

    • Right now the dropdown navigation shows only when a user hovers over it. A lot of users don't like using a mouse and just use keyboards. To make the menu more accessible for them, you can cause the dropdown to show on focus (you'll have to use the property focus-within. I consulted this link for creating keyboard accessible dropdown menu while doing this challenge. Hope you find it useful as well.

    • Second suggestion is that you have used a max-width for the main container which prevents it from stretching out. You can use the same for the nav as well. Right now for very large screens, the nav bar stretches out considerably.

    Hope you find the feedback helpful. All the best for your future challenges.

  • Aruj Joshi•290
    @gtalin

    Congratulations on completing the challenge. Your solution looks perfect. The personal additions that you have added to the solution are impressive.

    Absolutely love the placeholder animation. Initially when I saw it I thought maybe you used material design (They have a similar transition for placeholder). But it is even more impressive that you have used vanilla CSS for the transitions.

    Just looking at your solution no one could've guessed your personal struggles with the challenge. Thank you for sharing it and the solution.

    The attention to detail is really commendable. Really appreciate it.

    All the best for your future challenges.

  • Aruj Joshi•290
    @gtalin

    Congratulations on completing the challenge. The layout is very well done and the font size is apt as well. The shift in the background image in this challenege is quite tricky to get right.

    I really like the animations that you have put in for the accordion (the arrow icon as well as the list items themselves.)

    I just have one small suggestion that in the desktop view, as soon as the layout switches to larger screen size view, there is no margin in the top and bottom. Adding a margin in the accordionContainer , of 1rem or something would be great. (In larger screen sizes the accordion container itself is smaller and is centered on the screen so there is no problem there).

    Hope you don't mind the feedback.

  • Aruj Joshi•290
    @gtalin

    Congratulation on doing this challenge. The layout is well done.

    I do have a few suggestions for you:

    • You are missing the linear gradient and background pattern for the left section (where the text content is).

    • You have not added custom form validation and styling for when a user submits the form without a valid email field. A red outline should appear on the input field, an error icon should appear in the input field and an error message should appear below the invalid input field. You can add an attribute of novalidate on the form to prevent the default browser validation checks to kick in. And then add JS to validate the fields and also to add custom styles.

    Hope these suggestions are helpful to you.

    Marked as helpful
  • Aruj Joshi•290
    @gtalin

    Congratulations on attempting the challenge. The layout looks good.

    However you have missed the form validation part of the challenge.

  • Aruj Joshi•290
    @gtalin

    Congratulations on completing the challenge. The solution looks beautiful.

    I have a small feedback. In your submitted solution, the image for the background pattern cannot be loaded. I had encountered a similar problem in one of the challenges I had submitted where the image was loading fine for me on localhost but was not loading in the live url.

    For background image, the path specified in url should be with respect to the final compiled css file. Right now it is trying to find the url in https://base-apparel-coming-soon-anerpeco.vercel.app/dist/images/bg-pattern-desktop.svg. The location should be background-image: url(../images/bg-pattern-desktop.svg); rather than background-image: url( /dist/images/bg-pattern-desktop.svg);

    I hope you don't mind the feedback.

  • Aruj Joshi•290
    @gtalin

    Congratulations on completing this challenege.

    You enquired about your layout breaking. I have a few suggestions.

    Using a container with a width of 60% is not needed. The max-width of 700px is good enough.

    Instead of making the container as flex beyond 375px, you can apply a breakpoint at 500px or 600px by looking at the design and seeing what works for your layout. What you can do is that beyond 375px screen size and till you hit the next breakpoint, you can keep the container width exactly what it was (375px) and don't make the primary and secondary text sections 50%. Beyond 600px or whatever next breakpoint you choose, you can apply max-width: 700px and apply flex so that the primary and secondary sections are side by side (even then you don't need to set a width of 50% on them because flex will take care of it.

    For the font, you can change the font size in the media query as well.

    Hope this helps you in fixing your layout.

    Marked as helpful
  • Aruj Joshi•290
    @gtalin

    The solution is very good. Like the animation for the down arrow.

    Since I have recently completed this challenge, I can provide a few suggestions:

    You can make the hero image (orange) 100vh so that we cannot see the next section. That would make the animated down arrow more relevant.

    In the features section where there is a text and image side by side, you can add a max width to the text and the text heading as well (just like you have added for the text displayed over background image). That way the text will not stretch out when we view the page on larger screens.

    Since you have already included elements for accessibility in your solution (links with a hidden span for people with assistive technologies) it might interest you that some people have problems with large animations on page. And smooth scroll is one of those. They can set a preference in their browsers prefers reduced motions. So you can enable smooth scrolling only for people who have not set a prefers reduced motion to true.

    I have found a useful link for it. Hope you find it helpful as well.

    Marked as helpful
  • Aruj Joshi•290
    @gtalin

    This is beautiful. You have matched the design perfectly.

    The subtle animations you have used are are just right. This must have taken hours of diligent work.

    Love the input field validation and how on typing a valid email the error message disappears.

    I have one small question/suggestion. Right now when the user submits the form, an error message is displayed. The error message then does not disappear when the user abandons the form and focuses away from the input field. Maybe the error message can be removed when a user focuses away from the input field. This is just a suggestion. And you might have consciously designed it that way.

    Marked as helpful
  • Aruj Joshi•290
    @gtalin

    Really like your solution for the component specially the animation for the button. You have also used aria-label for the button which is really important for accessibility for someone who uses a screen reader.

    I just have one small feedback. You have removed the default outline from the button because of which there is no visual cue for someone who uses a keyboard to navigate the website. It is not a good idea to remove outline from buttons and a tags because it makes it difficult for people who only use a keyboard for navigation. And if you do remove the default outline on focus, it is best to add an alternate.

    Hope the feedback was helpful.