Skip to content
OverviewSolutions
33
Comments
17
Roy
@arkaroy135

All comments

  • Abdelrahman•90
    @DribbzSubmitted over 1 year ago

    Hello this is my solution to the landing page challenge ✌️ i had some trouble with the following :

    • the website stretches beyond 1440px which leads to distortion in layout

    • the icons needs to have a circular border with hover effects ( when the border is added they become oval and when i add border-radius:50%; aspect-ratio:1; it still doesnt solve the oval shape around the icons

    • the grid content area in desktop mode isnt fitted well as the design

    • had trouble adjusting the content area in desktop mode ( width and height )

    huddle landing page with a single introductory

    1
    Roy•600
    @arkaroy135Posted over 1 year ago

    Hey Abdelrahman, you did a fine job. However, use

    body{
min-width: 100dvh;
min-height:100dvh;
}

    for solving the overflow issue. dvh or dvw units are better at handling the overflow issue. Check my code to solve your icon issue. PS, I also have that overflow issue which I didn't fixed yet.

    Marked as helpful
    1
  • Zahirul•150
    @ZahirulIslamTanvirSubmitted over 1 year ago

    Hi, everyone I have completed the NFT card component challenge. As a newbie it will be great if some one would be kind enough to give me suggestion on my code.

    • Thanks in advanced

    NFT preview card component

    1
    Roy•600
    @arkaroy135Posted over 1 year ago

    You did an excellent job, Zahirul. I have one tip for you, use transition effect when hovering on the image. I think that will make it more awesome.

    1
  • Roy•600
    @arkaroy135Posted over 1 year ago

    Excellent work.

    0
  • Roy•600
    @arkaroy135Posted almost 2 years ago

    Hello Mario, Hope you are doing well. We did a good job here. However I have some suggestions for you. You did this.

    <div class="flex-box">
        <img
          src="/images/image-product-desktop.jpg"
          alt="product-image"
          class="image"
        />

        <img
          src="/images/image-product-mobile.jpg"
          alt="mobile=image"
          class="image-2"
        />

    I would like to suggest use

    <picture>
   <source media="(min-width: 1440px)" srcset="/images/image-product-desktop.jpg" aria-hidden = "true">
   <img src="/images/image-product-mobile.jpg" alt=" " aria-hidden="true">
</picture>

    This will make the desktop-image appear whenever screen size is 1440px or greater, else it will show the mobile-image.

    And also use this

    <del class="price-2">$169.99</del>

    del tag will make the cross through exactly in the middle of the price. Feel free to ask questions if you like. Happy coding.

    1
  • Roy•600
    @arkaroy135Posted almost 2 years ago

    Hello Davide, Hope you are doing well. You did a very good job in designing, but the advises are not generating when clicking the button.

    const promise = fetch(url).then((response) => response.json());

    the possible solution could be to use 'Let' instead of 'const' when declaring this variable.

    Let promise = fetch(url, { cache: "no-store" }).then((response)=>response.json());

    Use this instead. Everything else looks fine. Happy coding.

    0
  • Apo•20
    @ApoBaba6Submitted almost 2 years ago

    I am very newbie for coding. It may look ugly for professional eyes. It is not responsive for mobile. I still struggling with @media. I am waiting for tips. Thanks a lot for your time already

    display: flex; justify-content: center;

    3
    Roy•600
    @arkaroy135Posted almost 2 years ago

    Hello Apo, Hope you are doing well. You did great so far in this project, however I have some tips regarding your question.

    1. Use this for responsivness,
    @media (max-width:1439px){
    .main-container{
         display: flex;
         flex-direction: column;
     }
    /* add your codes */
}
    1. Start your project with a mobile first approach. Build the mobile view first, then change it using media query for different screen-size. However, this approach varies people to people, but I think mobile first approach is more efficient to build any project.

    You can check my solution of this project as a reference. Feel free to ask questions. Happy coding.

    0
  • Ikenna Oguejiofor•540
    @ikennarichardSubmitted almost 2 years ago

    Hello friend, thanks for stopping by. Please i need your help, my code is not complete, i could not set the email value color to red when its invalid. Please how do I go about this, I've tried readings online but i couldn't find anything useful. THANKS A LOT

    Intro Component with sign up form, responsive, flex

    2
    Roy•600
    @arkaroy135Posted almost 2 years ago

    Hello Ikenna, Do not get demotivated, you did a good job. I have some suggestions for you. First of all, do not use lots of media queries. You'll lose track of what are you doing because of that. Use this,

    @media (min-width: 1440px){
main{
background: url('./images/bg-intro-desktop.png') var(--red) no-repeat center center / cover;
    }
}

    for the desired background.

    You can check my solution for better understanding on this project. Feel free to ask questions. Happy coding.

    Marked as helpful
    0
  • Roy•600
    @arkaroy135Posted almost 2 years ago

    Hello Juan, Hope you are doing well. You did a wonderful job here. However, I think you should use min-width: 100vw; instead of max-width: 1440px; to remove that overflow. Everything else looks perfect. BTW, nice touch on that cursor image. I really liked that. Enjoy and happy coding.

    Marked as helpful
    0
  • Franci Melink•400
    @francimelinkSubmitted almost 2 years ago

    Hi,

    I used absolute distances and sizes in the solution. Instead of a form and radio buttons, I made a simple list, which I then designed. Not the cleanest solution, but with the form I had problems with the design of the radio buttons.

    Any help how to properly desin radio buttons when they are selected will be very helpful to me.

    Thank you

    Interactive rating component

    3
    Roy•600
    @arkaroy135Posted almost 2 years ago

    Hello Franci, Hope you are doing well. You did fantastic job in this project, perfect design. I have one thing to add here, that use cursor: pointer; on the submit button.

    0
  • Kacper•180
    @kacper-reimanSubmitted almost 2 years ago

    I didn't really stick to the original project, imo this one looks a bit better. I'm excited about theme change feature which I have built from scratch. If you have noticed anything, especially about responsiveness or JS code, which colud've been done better - I'd love to hear your tips. Also any feedback about best practices would be appreciated.

    Article preview component with dark/light mode

    1
    Roy•600
    @arkaroy135Posted almost 2 years ago

    Hello Kacper, Hope you are doing well. Theme toggle is a very nice addition to the project, however use some different color on your content section because the background color and the color of the content section is almost similar. You did great, but I think you should check that.

    Marked as helpful
    0
  • Daniel Dekany•920
    @dknydSubmitted almost 2 years ago

    Hi Lovely people!

    I have finished this project, I think it turned out pretty nicely, I would only have 2 question which I would be grateful for answering:

    1.) At approx 1050 px width, the list items of <ul> overflow the right bottom container (as soon as it gets less than 800 px it is fine as the media query for mobile view kicks in but 1050-800px widht looks like crap for some reason) If I try overflow, all I can do is either hide the list elements overflowing or make a scroll bar.

    2.) How accurate is my solution? Should it be pixel perfect? I am not aware of the necessary level of similarity between design and result.

    Also any general opinion is much appreciated.

    Have a great day y'all

    Daniel

    Grid / Flex / Media Query excercise

    1
    Roy•600
    @arkaroy135Posted almost 2 years ago

    Hello Daniel,

    Hope you are doing well. I would like to suggest you to use rem unit instead of px on font size. You can check this for better understanding,

    https://youtu.be/N5wpD9Ov_To?t=33

    I don't know about the way you use grid, but you can check my code as reference. I think the way I used grid for the problem is much easier than yours.

    Marked as helpful
    1
  • Roy•600
    @arkaroy135Submitted almost 2 years ago

    Any suggestions will be welcomed.

    I had great fun building this. I need some help in animations though, haven't added any animation yet, but once I get the necessary help from the community I will add the animations.

    Article Preview Component

    2
    Roy•600
    @arkaroy135Posted almost 2 years ago

    Thank you for the suggestions. I added the animation effects according to your suggestions. Kindly check it once. And I still need to fix the button's background and the SVG's color when clicked. Can you please help me with that too ?

    0