Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions18Comments116

All comments

  • Ovidiu-Antonio• 3,125

    @ovidiuantonio

    Posted

    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

    @ovidiuantonio

    Posted

    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-16

    Submitted

    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

    @ovidiuantonio

    Posted

    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-codes

    Submitted

    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

    @ovidiuantonio

    Posted

    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

    @ovidiuantonio

    Posted

    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

    @mathieufontaine

    Submitted

    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

    @ovidiuantonio

    Posted

    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

    @ovidiuantonio

    Posted

    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

    @ovidiuantonio

    Posted

    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

    @Chris94Lee

    Submitted

    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

    @ovidiuantonio

    Posted

    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

    @ovidiuantonio

    Posted

    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
  • Ovidiu-Antonio• 3,125

    @ovidiuantonio

    Posted

    Hello Franco,

    Your solution looks very good and it's also very responsive.

    I found a few things that you can add to your solution to make it even better:

    • you can add justify-content: center; to the .section to keep it in the center of the page.
    • you can add cursor: pointer; to "Terms and Services" for a better UX

    And a small bug that you can easily can fix: when I fill the email form with some random letters and click the claim button it says "Email cannot by empty" but it actually should say that the email is not valid.

    Happy coding and keep going!

    1
  • Krishna• 195

    @krishna-nayak

    Submitted

    If there is anything problem or anything that can be fixed please give your suggestion.

    grid CSS

    2

    Ovidiu-Antonio• 3,125

    @ovidiuantonio

    Posted

    Hello Krishna,

    You have a very good solution! It is responsive and it looks very good! One little thing that you can modify is the with of the main component, because on a bigger screen the cards will be kinda stretched; you can replace width: 75%; (on the main component) with max-width: 75rem; (for example).

    Happy coding and keep going!

    1
  • Seo• 100

    @ksyksy815

    Submitted

    This is my third submission and the first occasion to write this optional comment. I apologize for the messy and unorganized JS code for this assignment. I've been self-teaching myself HTML, CSS, and JS for about a month now, and it is not easy... but very fun!! Happy coding everyone!

    Mobile-first article preview using JS toggle and CSS pseudo element

    1

    Ovidiu-Antonio• 3,125

    @ovidiuantonio

    Posted

    Hello Seo Kim,

    This is a pretty good solution, not bad for your 3rd project!

    I have a few tips for you, that can help improving your solution:

    • I recommend you stop using %, instead you can use rem, em, or pixels; using % is good in some situations but here, in the .wrapper for example, using a fixed value is better (the content inside doesn't overflow anymore)!
    • after you modify the height of the .wrapper you will see that the popup will not be properly aligned, you can play with the values of top and left to align it. You can also add cursor: pointer; to the popup close button.
    • you switch to the mobile version too late, at 440px the card already overflows, so you can modify the breakpoint to 690~700px
    • your js is clean and you gave proper names to the variables, good job with that!

    That's all! Happy coding and keep going! Fighting!

    1
  • Rahul Gupta• 80

    @rahulxyz

    Submitted

    How do we build the thumb of slider more similar to that of design? In my solution there are two issues with the slider:

    1. The thumb is not wrapped with the pink gradient in a curved manner. It is vertical.
    2. The Pink Gradient is moving with the help of slider value. While moving the thumb you can notice the gradient to be a little behind at the start and later it covers its whole thumb.

    Data-Fylo : HTML, CSS, JS

    1

    Ovidiu-Antonio• 3,125

    @ovidiuantonio

    Posted

    Hello,

    Very nice solution! The site is responsive and the progress bar is awesome. One thing that you should do is reverse the counter, because when the progress bar is at max value it shows 1000gb left and that, I think, should be 0gb. In rest is all good I think! Good job!

    Happy coding! Keep going!

    3
  • Ovidiu-Antonio• 3,125

    @ovidiuantonio

    Posted

    Hello,

    Very nice solution solution! You've done a pretty good job! I found two things that you can improve to make the solution even better:

    • add hover states for the social icons and the white button, and also add cursor: pointer; to the white button
    • change the breakpoint for the mobile version, try to switch to the mobile version 'faster', like 1000-1100px

    Happy coding! Keep going!

    1
  • Jan• 500

    @eljasiu

    Submitted

    Hello guys! It's the first website I've ever built using CSS Grid, so I hope I use this technology properly. Also I hope there are no problems with horizontal overflow I struggled with during the process of building this website. I would be extremely thankful if you rated my project. Many thanks, Jan

    Flexbox and CSS Grid based responsive website

    1

    Ovidiu-Antonio• 3,125

    @ovidiuantonio

    Posted

    Hello Jan,

    Very nice solution! You did a very good job on this project! Two things that you can add to make the solution event better are:

    • add hover state for the pink buttons too
    • make the footer links clickable, add the text between an a tag, and give them a hover state

    Happy coding! Keep going!

    2
  • Ovidiu-Antonio• 3,125

    @ovidiuantonio

    Posted

    Hello,

    Very nice solution so far! The site is responsive and the phone illustration looks very nice! There are a few things that you can improve:

    • add cursor: pointer; to all the elements that are clickable (back arrow, text field, send message button etc)
    • for the text field use an input element instead of a div, for the send button use a button element, for the option buttons use radio buttons. In short, make the app "usable" so the user can select one of the options, click the buttons, enter a text

    Happy coding! Keep going!

    1
  • Ovidiu-Antonio• 3,125

    @ovidiuantonio

    Posted

    Hello,

    Nice solution! You did a very good job! I found a few things that you can improve to make the solution even better:

    • the nav's color, change it to white, if you hover over the links they will have white bg but the nav is a grayish color and that's weird
    • add hover states for the 'Request Invite' button and the social links at the bottom

    Happy coding! Keep going!

    1
  • Ovidiu-Antonio• 3,125

    @ovidiuantonio

    Posted

    Hello,

    You did a very good job on this challenge! The site is responsive and it looks pretty good! I found a few things that you can add to improve your solution:

    • add cursor: pointer; to all the clickable elements
    • add these 2 properties to the body background-size: cover; background-repeat: no-repeat;

    Happy coding! Keep going!

    1
  • omar6627-ai• 30

    @omar6627-ai

    Submitted

    any feedback would be appreciated, but mainly I want to ask if the phone illustration should guard its size, should it have a fixed width or it's better if it's flexible to some point.

    Mobile-first solution

    1

    Ovidiu-Antonio• 3,125

    @ovidiuantonio

    Posted

    Hello,

    Personally, I think in this situation is better to give the component a fixed width. The phone looks a little bit to stretched now so it would be better to give it a fixed width. Also don't forget to make the select buttons, radio type so the user can select the option he wants.

    Happy coding! Keep going!

    2
  • Ovidiu-Antonio• 3,125

    @ovidiuantonio

    Posted

    Hello,

    You did a very good job on this project! The site is responsive and it looks good. Two things that I found to be improved are:

    • the big blue buttons, add cursor: pointer; to them and also some hover effects
    • for the footer logo, use the image as an svg element instead of img to be able to make the logo white

    Happy coding! Keep going!

    2