Skip to content
OverviewSolutions
18
Comments
116
Ovidiu-Antonio
@ovidiuantonio

All comments

  • Ovidiu-Antonio•3,125
    @ovidiuantonioPosted almost 4 years ago

    Hello Aaron,

    This solution looks pretty good! There are a few tips that can help you make the solution even better:

    • add the background image to the body element instead of the html
    • you can add max-width: 1440px; and margin: 0 auto; to the main element to keep the content in the center of the page no matter how big the screen is
    • you can make the form a little bit larger for the tablet version

    In rest, all good, the site is responsive and the error messages are present (you can add email validation to display another error message if the email isn't valid). Good job!

    Happy coding and keep going!

    0
  • Ovidiu-Antonio•3,125
    @ovidiuantonioPosted almost 4 years ago

    Hello Mesut,

    You did a very good job with this project! The site is responsive and it looks very good. The buttons have hover states and the error message is displayed properly.

    One thing you can do is giving the max-width property to the wrapper instead of the body (on a bigger screen the wrapper remains on the left side, because of that)

    Happy coding and keep going!

    1
  • Thanh Nhi•155
    @lttn-16Submitted almost 4 years ago

    It's best if you see it on screen with width more than 1250px. Give me some advice, thank you! 🥰

    HTML CSS Animation

    2
    Ovidiu-Antonio•3,125
    @ovidiuantonioPosted almost 4 years ago

    Hello Thanh Nhi,

    Nice solution! You did a very good job! There are a few tips to improve your solution:

    • add max-width: 1440px; and margin: 0 auto; to the container, to keep the content looking good on larger screens too and consider adding the background images to the body instead of the container
    • hide the horizontal scroll, so it not show up when the animations play

    Happy coding and keep going!

    2
  • Jaronimas•375
    @jaronimas-codesSubmitted almost 4 years ago

    Question nr. 1: why on desktop mode I have still scrolling from left to right? Question nr. 2: why the 'gap' of cards in 'medium' screen size so huge?

    Couldn't find the solution for these problems myself..

    Thanks in advance!

    Challange with Sass, BEM, @media and grid

    2
    Ovidiu-Antonio•3,125
    @ovidiuantonioPosted almost 4 years ago

    Hello Jaronimas,

    Very good job! Your solution is looking very nice (i like the animations on the cards) and is responsive.

    To get rid of the horizontal scroll remove the width from the body element. You can make the gap between the columns smaller by defining the gap just for rows: grid-gap: 1.5rem 0; (1.5rem for rows, 0 for columns), and if you want an even smaller gap just lower the width of the container or increase the width of the cards.

    Happy coding and keep going!

    1
  • Ovidiu-Antonio•3,125
    @ovidiuantonioPosted almost 4 years ago

    Hello Guliye,

    You did a nice job on this challenge! I have a few tips for that'll help you improving your solution:

    • replace the current width of the .container with max-with: 90rem; to keep the content in the center of the page, you can also do that with the header but don't forget to add margin: 0 auto; or you can add all the elements inside one div that will have max-width: 90rem; and margin: 0 auto;
    • add hover states for the footer links too, for a better ux, and try playing with transitions for smoother effects
    • for the mobile version, don't forget to add align-items: center; to align all the elements

    Happy coding and keep going!

    1
  • Mathieu FONTAINE•265
    @mathieufontaineSubmitted almost 4 years ago

    It was a nice challenge to test my JS knowledge! The drag and drop part is still confusing for me though... Any feedback or ideas to improve the app or simplify my code is more than welcome :)

    Todo List App built with SASS and Vanilla JS

    2
    Ovidiu-Antonio•3,125
    @ovidiuantonioPosted almost 4 years ago

    Hello Mathieu.

    Very nice solution! The site is looking very good and is responsive! I found one little problem with the active button, when I select it all the item disappear even if they're completed or not, but you can easily fix that.

    As for the drag and drop feature you can check this video about draggable js

    Happy coding and keep going!

    0
  • Ovidiu-Antonio•3,125
    @ovidiuantonioPosted almost 4 years ago

    Hello Chris,

    This is a great solution! It looks very good and is responsive on all devices I tested! One little thing you can fix is the position of the warning message on the mobile version, it's half inside and half outside the input element

    Also, you can add hover states for the button and the links for a better UX

    Happy coding and keep going!

    2
  • Ovidiu-Antonio•3,125
    @ovidiuantonioPosted almost 4 years ago

    Hi Seo Kim,

    Even if you didn't required feedback I saw you solution and is pretty good. You did a nice job!

    I have a few tips which you can apply to improve the solution:

    1. for the wrapper:

      • replace the width: 75vw with width: 75rem; , on a bigger screen the text and the image are not in the center anymore, that's why a fixed width works better, to keep the content in one fixed area
      • you can get rid of the max-height property as the height of the wrapper modifies as the height of the elements inside it modify.

    2. for the imageBoxPosition:

      • you can add the button inside this div to keep it in one place, you can add position: relative to the div and then absolute position the button (i gave this values and it looks pretty nice : bottom: -2rem; and left: 2rem; ,but make sure to remove overflow: hidden; from the div if you apply this tip)
      • to be easier for the user to click on the button you can add the event listener to the previewBox and nextBox, not just to the arrow image
      • you can add the purple image in the back with an image element instead as a background-image; you can add it in this div and give it position: absolute; and z-index: -1; properties and the svg will always stay behind the photo

    3. testimonial text:

      • don't forget to add the proper font-weight for this text

    That's all I think, in rest all good, the mobile version looks good and you did a very good job with js too.

    Happy coding and keep going! Fighting!

    0
  • Chris•240
    @Chris94LeeSubmitted almost 4 years ago

    Any feedback would be nice!

    I know I need to add the ! to the inputs on error. Plus I need to add the box shadow to the CTAs plus the form container.

    I think I also need to add more breakpoints.

    Intro component with sign up form

    2
    Ovidiu-Antonio•3,125
    @ovidiuantonioPosted almost 4 years ago

    Hello Chris,

    Very nice solution! You did a very good job!

    I have a few tips that can help you making this solution even better:

    • add a max-width and margin: 0 auto; to the main container, because on a bigger screen the text and the card are not anymore in the center of the page
    • you can add cursor: pointer; to the "Terms and services" too, for a better UX
    • and don't forget to add the shadows to the purple container and the form

    Happy coding and keep going!

    2
  • Ovidiu-Antonio•3,125
    @ovidiuantonioPosted almost 4 years ago

    Hello Gorkem,

    Your solution is pretty good. You did a good job with this. There are 2 tips for improving your solution:

    • add margin: 0 auto; to the main component (because on a bigger screen it remains on the left side)
    • modify the breakpoint for the mobile version, 375px is too late and the text starts overflowing from the card, I think 600px would fit better.

    Happy coding and keep going!

    3