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
OverviewSolutions45Comments152

All comments

  • Prabhash Ranjan• 2,540

    @besttlookk

    Posted

    Hi, Nicely done. Following are some points i like to add:

    • There is no error-state for invalid-url.
    • It would be nice if you remove the error on focus. Add "onFocus" event listner on input to reset the error.
    • It is not responsive for all screen-size. Whenever you develop anything always consider all screen-size even if it is not asked for.

    Good luck,

    Happy Coding

    0
  • Kijana R.• 110

    @NotKijana

    Submitted

    I wanted to work on state management and conditional rendering. As always I made this with the idea that it could be scaled with relative ease. I do welcome any feedback on how I could further improve upon this project.

    Tip Calculator

    #accessibility#react#sass/scss

    2

    Prabhash Ranjan• 2,540

    @besttlookk

    Posted

    HI, Following are some points i like to add:

    • Use input of type "number". User should not be able to enter any other character.
    • Use flex-box to center the whole content w.r.t screen
    • Check your design for large input and large output. Currently on entering large input digit overlap the input-icon. Also on getting large output, result comes out of the card.
    • Give max limit to input and custom percent to avoid getting very large output.

    Good luck,

    Happy coding

    Marked as helpful

    1
  • Ricky• 470

    @pyaetheiN

    Submitted

    Everything works great but in smaller screens, the side navbar is still overflowing even though I added overflow-x: hidden to the body tag... (swipe left on the screen to see overflowing side navbar)

    My trials:

    • adding a wrapper with overflow-x: hidden around the main tag

    Any feedback would be appreciated!

    Responsive intro section with dropdown navigation using flexbox

    #accessibility#bem#sass/scss

    2

    Prabhash Ranjan• 2,540

    @besttlookk

    Posted

    Hi, Nice work! Everything looks great. Here are a few points I like to add:

    • On clicking overlay, sidemenu should close(for small screen)
    • Dropdown should also also while clicking outside(for large screen)
    • For large screen it would have looked good when the content were covering the whole view-port height.

    Good luck,

    Happy coding

    Marked as helpful

    1
  • Prabhash Ranjan• 2,540

    @besttlookk

    Posted

    Hi, NIcely done. Just a few things I like to add.

    • Font size is bit too small for small screen.
    • Dropdown should close on clicking outside(espcially for large screen)

    I liked your menu for small screen and also menu-icon

    Good luck,

    Happy coding

    Marked as helpful

    0
  • King• 310

    @king-oldmate

    Submitted

    What I found difficult was keeping track of all the code I had produced - lots of different class and ID names can be confusing. I'm not exactly sure what best practices are but I know what I did ain't it.

    I'm also not sure why the arrows aren't showing up. They did locally.

    Intro section with dropdown

    1

    Prabhash Ranjan• 2,540

    @besttlookk

    Posted

    HI, I saw your code. Here are some points.

    • To reset the css setting you dont have to write all those tag name. Just add these lines in all of your future projects.
    *, *::after, *::before{
  magin:0;
  padding: 0;
  box-sizing: inherit;
}

html{
  box-sizing: border-box;
  font-size: 100% // I tho make it 62.5% so that 1rem = 10px
}

body{
  min-height:100vh;
  font-size: 16px;(use rem)
  color:
  backdround-color:
 
}
    • Rather than writting this
       margin-bottom: 15px;
    margin-top: 25px;

    you can write like this

     margin-block: 25px 15px;
    • When ever there is any logo/icon near nav item. `::after/ ::before pseduo selector" are best to add them. You can do it like this
    // html
 <li class="nav-item"><a href="#"><img src="images/icon-todo.svg"><span>Todo List<span></a></li>

// css
nav-item span::after{
  content: url(<location of arrow image>) 
  margin-left: 1rem;
  }
    • This i am not sure of but as much i can remember adding onclick on tag is not a good habbit. Better way is to get that element in JS and add eventListner on it.

    I have also completed this challenge. Here is the link

    https://intro-section-with-dropdown-navigation-phi.vercel.app/

    I hope i helped you in any way possible. Good luck.

    Happy coding

    Marked as helpful

    1
  • DanielK• 440

    @DanK1368

    Submitted

    Hi guys, Since I'm practicing React as my first framework and recently familiarized myself with styled components I wanted to put that into practice with this challenge.

    I'm hoping to hear some feedback on what I could have improved on/written more efficiently. :)

    Responsive Dropdown Navigation using REACT & Styled Components

    #react#styled-components

    3

    Prabhash Ranjan• 2,540

    @besttlookk

    Posted

    HI, Nice work! Here are some points i like to make

    • Its not responsive for all screen size. When ever develop anything ake a habbit of making responsive even if it is not asked for.
    • Dropdown menu should close when clicking outside the dropdown.

    I also made this using styled-component. Here is the link if you want any refernce

    https://intro-section-with-dropdown-navigation-phi.vercel.app/

    Feel free to drop your feedback.

    Good luck,

    Happy coding

    0
  • Prabhash Ranjan• 2,540

    @besttlookk

    Posted

    hi, Great work. Below are some points i like to make:

    • Shadow is too harsh for dropdown. Shadow should be subtle.
    • Dropdown should close automatically when clicking outside.
    • Add hover effect for fropdown item(for large screen)
    • for large screen the hero section should cover whole view-port height. Gap below looks weird.
    • For mobile add overlay of dark color below menu. Currently you are using shadow. Also when clicking outside the menu(i.e on overlay) menu should close.
    • Use HTML semantic tags for better accessibility. Wrap the main content with <main> tag rather than <div>

    Good luck, Happy coding

    Marked as helpful

    0
  • Prabhash Ranjan• 2,540

    @besttlookk

    Posted

    HI, Nice work, Below are some issues i like to point out:

    • Add 'cursor-pointer` for nav-items and dropdown item.
    • Try to use HTML semantic tag for better accessibility. Use <main> tag to wrap the main content rather than <div>.
    • Dropdown should close when clicking outside.
    • Dropdown should open/close on clicking whole nav item not just arrow.
    • Dropdown item comes first than comes the box. Whic does not look good.

    Good luck, Happy coding.

    1
  • P
    Marley Reyna• 510

    @MarleyReyna

    Submitted

    Let me know where I can improve. This is my first time using tailwind so it's a little messy but I think I'm getting the hang of it. Hopefully, next time will be much easier or at least more organized :)

    Responsive Page built with ReactJS and Tailwind

    #react#tailwind-css

    1

    Prabhash Ranjan• 2,540

    @besttlookk

    Posted

    HI, Nice work Following are some points i like to make:

    • z-index of dropdown is lower than heading.
    • Add hover effect for dropdown item.'
    • on some screen size , dropddown content comes out of the box.
    • the dropdown should be such that on clicking outside it should close automatically.
    • Add some padding in Y direction for main content. Currently it is touching the edge of the screen.

    Good Luck, Happy Coding

    Marked as helpful

    1
  • Chris Nowicki• 140

    @chris-nowicki

    Submitted

    I had a difficult time with centering the QR Card horizontally and vertically. I am not sure if the max-width and max-height were necessary in my .card-container class:

    .card-container {
    max-width: 1440px;
    min-width: 375px;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

    Any and all feedback on my code is welcome!

    QR Code Component

    2

    Prabhash Ranjan• 2,540

    @besttlookk

    Posted

    HI, About your prob. Transfer these lines to the body tag to center your container.

    body{
 height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

    This will work.

    Good Luck,

    happy coding

    0
  • Prabhash Ranjan• 2,540

    @besttlookk

    Posted

    Hi,

    • You have lots of HTML issue and Accessibility issue. Go through the report to remove those.
    • Currently im not able to downvote.
    • On clicking edit.Previous text should be prefilled in the textarea. Currently its not.
    • I am not able to add reply also
    • User should not vote on its own comment.

    Good luck

    Happy coding

    0
  • Prabhash Ranjan• 2,540

    @besttlookk

    Posted

    • As you are new to sass i would suggest using "@use/@forward" instead of "@import". In futrue @import will be deprecated.
    • Currently the content is not centered w.r.t the screen . Even tho you used flex to do that. You just missed one thing.
    body {
    display: flex;
    justify-content: center;
    align-items: center;
   min-height:100vh;   //this is very important
  }
    • Dont forget to reset the padding and margin for better control in your design. Try to add below code in every project you make. Add it at the top
    *, *::before, *::after{
  padding:0;
  margin:0;
  box-sizing:border-box
}
    • If you want to write well maintened code. Do consider the order in which you add the property in css. Here is a link you can refer:

    https://9elements.com/css-rule-order/

    Good luck,

    Happy Coding

    Marked as helpful

    0
  • Prabhash Ranjan• 2,540

    @besttlookk

    Posted

    hi, I dont know if you want any feedback or not, still here are some :

    • Make external files for JS and CSS and link it inside HTML.

    • Currently you have put your JS code before all the markup. Thats why you app in not functional. If you want to put JS in HTML file only. PUT IT AT THE LAST(JUST BEFORE </body> tag.

    • Try using SEMATIC HTML TAG as much as possible or better accessibility. It is good to practice from the start only. Wrap whole content with <main> tag instead of <div> tag.

    • For every img tak, add "alternate text" (alt) Make it a habbit too.

      <main> //here
        <div class="card">
            <div class="advice">Advice #117</div>
            <div id="quotes">
            </div>
            <div class="line">
                <img class="line-img" src="images/pattern-divider-desktop.svg" /> // add "alt" here
            </div>
            <div class="center-part">
                <img class="dice-img" src="images/icon-dice.svg" />  // add "alt" here too
            </div>
        </div>
    </main>
    • Overall design is too small for large screen. Try using "relative units" like "rem" instead of px. and also add some media query.

    Good luck,

    Happy Coding

    0
  • Athreya G• 410

    @AthreyaG4

    Submitted

    The page might take a while to load the elements because the server is running on glitch and it times out after a few minutes of inactivity and has to restart the app. So make sure to wait in case there is nothing appearing on the page. Also leave some suggestions. Thanks!

    Comments Section using SASS, JS

    #express#sass/scss#node

    2

    Prabhash Ranjan• 2,540

    @besttlookk

    Posted

    Hi, everything seems to be working okay. Just two things i waana add:

    • Do not let user to vote its own comment.
    • Limit the number of upvoting/downvoting to 1.

    Good luck,

    Happy Coding

    Marked as helpful

    0
  • P
    Delian Zidarov• 150

    @delianZidarov

    Submitted

    If possible I would like feedback specific on my use of class. I feel like I made a bit of a mess of it. Any other feedback is also welcome. Thank you for taking the time

    Ratings Component

    #styled-components

    1

    Prabhash Ranjan• 2,540

    @besttlookk

    Posted

    Hi, Great work. Below are some issue i like to point out:

    • make "cursor:pointer" or click events.
    • Try to use Semantic HTML tags as much as possible for better accessibility. Like use <main> tag to wrap the content. Do not use <div> for everything.Try to use <header>, <footer> <section>..etc, tags also.

    Good luck,

    Happy coding

    0
  • Prabhash Ranjan• 2,540

    @besttlookk

    Posted

    hi, Nice work. Just add some padding in Y direction . Also do "cursor:pointer: for click events.

    Good luck,

    Happy Coding

    Marked as helpful

    1
  • Parham• 60

    @ParhamBRG

    Submitted

    This is my solution for this project I'm will be happy if you say the advantages and disadvantages

    Tip Calculator

    #accessibility#gulp#sass/scss#solid-js#bem

    1

    Prabhash Ranjan• 2,540

    @besttlookk

    Posted

    Hi, Nice work. Following are some issue i like to point out:

    • Check your design for large output. Number comes out of the box. Show error for large input. Give some max limit for input .
    • Number of person can't be negative. Restrict user from intering decimal input for no. of person.
    • Also give max limit for custom percent

    Apart from these fact everything looks fine to me.

    Good luck, Happy Coding

    Marked as helpful

    2
  • Priyanka• 380

    @cssbubble

    Submitted

    I have all HTML issues are because of using Tailwind CSS cdn version. Is there any way I can purge the long css file any make it compact, so that I can avoid seeing these issues?

    Thanks

    Responsive room homepage with grid and flexbox

    #tailwind-css

    2

    Prabhash Ranjan• 2,540

    @besttlookk

    Posted

    hi, nice work. I am currently doing the same challenge. Just want to point out about the slider. When there is no previous image , why not show the last image. Same for the Next button.

    I also get all those HTML error in report when i use Tailwind. Lets hope you get the working solution

    Good Luck,

    Happy Coding

    0
  • Prabhash Ranjan• 2,540

    @besttlookk

    Posted

    Hi, Nice work. Here is some issue i like to point out.

    • There is no gap between conetnt and header.
    • After adding items in cart. reset the counter value.
    • Shadow of the button is too much. Shadow should be subtle.
    • Add appropriate titile , rather than "React App"

    I liked the hover effect on the nav-item. Keep up the good work

    Good luck,

    Happy Coding

    Marked as helpful

    0
  • Prabhash Ranjan• 2,540

    @besttlookk

    Posted

    HI, Apart from the above suggestions, i like to add a few more

    • Center the content w.r.t screen. You can do this using below code.
    body{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
    • Try to use HTML semantic tags as much possible for better accessibility. In your case use <main class="container"> tag instead <div class="container">

    Good luck,

    Happy Coding

    Marked as helpful

    1
  • morteza• 230

    @mooryx

    Submitted

    here is my solution for Calculator app

    in this project, my goal was to learn grid and CSS variables.

    one thing that I'm not sure I'm doing right is way I used CSS variables to change theme color.

    I will be really glad if you give me any suggestion on how to improve my code.

    Calculator app using grid & css variables and js

    2

    Prabhash Ranjan• 2,540

    @besttlookk

    Posted

    Hi, Following are some issues i like to point out:

    • On entering higer no, number overflows. To avoid you can use "word-break:break-all".
    • Try to use semantic HTML tags as much as possible for better accessibility. Like in your case to wrap the main content use <main> tag instead of <div>
    • Text is not property aligned inside the button. If you care using fixed height for the button, use flex to center else use padding-top and padding-bottom to center the text. For flex you can do tihs
    button{
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center:
}
    • If number is not present do not allow user to choose operation.
    • Operation should not repeat. (+++++). This makes no sense.

    I have also completed this challenge. You can look into it just for reference.

    Good luck,

    Happy Coding

    Marked as helpful

    1
  • Adam Kowalczuk• 60

    @spokeydokey26

    Submitted

    Still getting used to working with media queries to build responsive websites. Would appreciate any advice to make the code more efficient.

    Stats Preview Card Component

    2

    Prabhash Ranjan• 2,540

    @besttlookk

    Posted

    Hi, Apart from the above suggestions i like to point out that try to use some wrapper which avoid the content to touch the boundry of the screen. When you design something inspect it for all screen size. You can wrap your card with the following code"

    .wrapper{
  width:90vw;
  max-width: 780px; // change it accoring to your needs.
  margin: 0 auto; // to center 
  padding: 0 1rem;
}

    Good luck, Happy Coding

    1
  • Prabhash Ranjan• 2,540

    @besttlookk

    Posted

    HI,

    • It is not fullly responsive. For in-between screen size your design breaks. I encourage you to use either flex with flex-wrap property of grid with "grid-template-colums:repeat(auto-fit, minmax(280px, 1fr)"

    • Also look into report and try to edit your code accoringly.

    Good Luck,

    Happy coding

    0
  • Prabhash Ranjan• 2,540

    @besttlookk

    Posted

    HI, Nicely Done. There are a few points i like to mention:

    • Filter and search does not work together.What if I want to first search and then filter from the result. and also vice-versa.
    • Card size should be same of all the country. Size is changing due to different size of flag. You can do something like this:
    <div class="image-container">
   <img  class="image"/>
</div>

    .image-container{
  height:280px'
}

.image{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
    • Make border-country a link so that user visit that country rom there only.

    I have made 3 version of this challenge. You can check them i you like any reference.

    Good Luck.

    Happy Coding

    0