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
OverviewSolutions13Comments122

All comments

  • P
    tediko• 6,560

    @tediko

    Submitted

    Hello!

    This time I used the BEM (Block, Element, Modifier) methodology, which is a popular naming convention for classes in HTML and CSS. BEM is useful when it comes to larger, more complex projects when code organization becomes crucial. The idea behind it is to speed up the development process, and ease the teamwork of developers by arranging CSS classes into independent modules. You can learn more about BEM here.

    Since my card is just illustrated introduction to some blog post I made the entire blog card clickable, not just an anchor. I did this with a simple JavaScript technique and used the card container as a proxy for the link. Then detected how long the user is taking between mousedown and mouseup and suppress the clicking event if user is likely to be selecting text. There's a few ways to make whole card clickable, but each method have it's own pros and cons. There is also an aspect of accessibility - Read more about inclusive card components

    No specific questions, but feedback or a criticism will be appreciated!

    Responsive blog-preview-card using BEM and flexbox

    #bem

    3

    bunee• 2,060

    @buneeIsSlo

    Posted

    Hey @tediko! Awesome to see you sharing solutions again!

    1
  • bunee• 2,060

    @buneeIsSlo

    Posted

    Feedback you want, feedback you get.

    Great job on the solution! Everything works as it should. Here are a few things you should consider fixing:

    • Your content should be wrapped around a <main> tag instead of an <article> tag. This change would make your code more semantic and improve accessibility.

    • Always remember to include an h1 in your websites. It is necessary for web crawlers to crawl your website effectively, and it will significantly improve your website's SEO.

    That's pretty much all I have. I hope this helps :)

    Marked as helpful

    0
  • P
    dia ♡• 200

    @diaasaur

    Submitted

    Phew, finally done! This was not as easy as it looked it. I used radix-ui primitives for accessible headless ui components. Added a lil bonus dashboard with yearly reports showing pie/line chart using nivo (that's where accessibility went out of the window how do people make charts accessible???). Any feedback/bugs/issues lmk!!!

    Invoice App using zustand, radix-ui, react hook forms and nivo

    #react#react-router#zustand#vite

    2

    bunee• 2,060

    @buneeIsSlo

    Posted

    Hey, Dia! I don't have any feedback on this one, but I must say the solution you've created is amazing! Everything functions smoothly, and incorporating a dashboard is an excellent idea. I've been playing around with radix-ui, and I believe I can learn a lot from your well-structured code, so thank you. Keep up the great work! :)

    1
  • Lukasz-Milde• 150

    @Lukasz-Milde

    Submitted

    Hi! Feel FREE to point out all my downfalls. I would be glad to read some criticism and your holistic approach to coding. @Lukasz

    Simple JS/ Flex/ Animation

    #animation

    1

    bunee• 2,060

    @buneeIsSlo

    Posted

    Hey! @Lukasz-Milde, Good job on this challenge; The animations are pretty smooth as well.

    This challenge would be trivial to solve with the help of the <details> and <summary> tags, do look into it :)

    Marked as helpful

    1
  • bunee• 2,060

    @buneeIsSlo

    Posted

    Hey! @alicialaborda, Congratulations on completing your first challenge here. You've put some solid effort into this one!

    To solve your issues, I recommend you take the "Conquering responsive layouts" course(free) by Kevin Powell. I learned a lot about responsive layouts by going through this course and I'm sure you will too. However, if you don't have the time to go through it, this video by him should help too.

    Hope this helps :)

    1
  • bunee• 2,060

    @buneeIsSlo

    Posted

    Hey! @sqirum, Good job on completing this challenge. I have a couple of suggestions for you...

    1. The email submit button is missing focus styles. This is an important thing to add as this helps keyboard users navigate the site.

    2. The method you've currently used to set the hero image works fine, but using a <picture> tag would be much more appropriate. This will also improve the responsiveness of your site.

    3. Speaking of responsiveness, consider using a mobile-first approach when building a site. Watch this video to learn about the advantages of the mobile-first approach.

    Hope this helps :)

    Marked as helpful

    1
  • bunee• 2,060

    @buneeIsSlo

    Posted

    Hey! @mkreive, Spectacular work on this challenge! I really admire the fact that you've gone above and beyond in creating this solution. I would love to know how you went about making this app and what sort of challenges you faced along the way :)

    Marked as helpful

    1
  • kxnzx• 870

    @kxnzx

    Submitted

    What I learned:

    It was surprisingly fun to work on this challenge. I have gained some insight about JavaScript if/else statements and the CSS z-index property.

    There are some conditions for the z-index to work:

    • it only works on positioned elements such as position:absolute, position:relative, or position:fixed
    • avoid using negative values (links won't work anymore when they are on a lower index level with a negative value)
    • only use the z-index on the specific element
    • avoid using min-height: 100%; on the element that is supposed to be on a lower index level

    JavaScript if/else statements:

    The if statement tests if a specified condition (which is in between () parentheses) is true or false (these are boolean values). In the boolean data type, there are only two possible values that can be returned: true or false. If the specified condition is true, then the block of code (which is in between the {} curly braces) will be executed. If the specified condition is false, then the block of code will be skipped.

    Summary:

    • Use if to specify a block of code to be executed, if a specified condition is true
    • Use else to specify a block of code to be executed, if the same condition is false
    • Use else if to specify a new condition to test, if the first condition is false
    • Use switch to specify many alternative blocks of code to be executed

    Intro Dropdown Navigation with Vanilla JavaScript

    #accessibility#sass/scss

    1

    bunee• 2,060

    @buneeIsSlo

    Posted

    Hey! @kxnzx, Amazing work on this challenge. It's nice to see how much you've learned through this challenge alone. With that being said, I feel some parts of the solution need changes:

    1. The slide-in menu on the tablet view is a bit too wide. This is happening because you're using % to set the width. A quick fix for this problem would be to set a maximum width, say: max-width: 250px;

    2. Hovering over the "Learn more" link creates a UI shift. This happens when you set a border on an element that didn't have it originally. Again, a very simple fix for this would be to use an outline like so: outline: 2px solid white;. Also, check out this video to learn about the differences between outline and border.

    Hope this helps :)

    P.S: Using the details and summary tags to create the dropdown menu is pretty smart. I'm currently working on this project and am a little sad that I didn't come up with it myself. Keep Coding!

    Marked as helpful

    0
  • Sahand Masoleh• 1,230

    @sahand-masoleh

    Submitted

    I went a bit overboard with this one. :D

    I took me almost a month, but here it is, a full stack, fully featured CRUD app resembling Reddit's comment section.

    You can read more about it in the sample post in the app itself and also in the description on the repo.

    Please tell me what you think, and also, If you're interested in what I did and what the journey was, I am more than willing to talk about it ;)

    Interactive Comment Section (Full Stack CRUD)

    #express#postgres#react#sass/scss

    2

    bunee• 2,060

    @buneeIsSlo

    Posted

    Hey! @sahand-masoleh, Your solution is fantastic! going a bit overboard is something I love to do as well, and since you're open to questions...

    1. How did you plan out this project? By this I mean, were you already familiar with the concepts and technologies that were needed for this project, or did you learn them as you were coding the project?

    2. I haven't built a project this huge(currently working on one) yet, Is there something you didn't pay enough attention to in the early stages of the project and then later found out the hard way?

    3. I imagine you must have come across some great resources while working on this project, could you please share them?

    Thank you.

    0
  • Ibrohim• 210

    @Ibrohim2001

    Submitted

    Currently I'm learning ReactJS and this is one of the projects I've built. If you any suggestion, feedback let me know, please

    Reactjs, CSS

    #react

    1

    bunee• 2,060

    @buneeIsSlo

    Posted

    Hey! @Ibrohim2001, You've done really well for someone new to React. I am a beginner myself and here are a few things I think you could improve:

    1. You didn't need to create the divider. FEM has provided a divider pattern as an SVG(in your img directory), you're better off using that.

    2. Your app will not generate any advice on Firefox. This happens because of the default caching behavior on all browsers. You can fix this by adding fetch(API_URL, { cache: 'no-cache' } ) in your fetch method.

    3. Initally your advice card is empty on load. It is good practice to set temporary placeholders, rather than empty strings.

    Hope this helps :)

    1
  • To Dat• 290

    @tltd0807

    Submitted

    Hi everyone, I have completed this challenge for 2 days, My questions are the better way for the background img to respond with the illustration-woman-online img, the second one is how can I overhidden for the img like the design but the img of the box (illustration-box-desktop) is still on the screen. Any suggestions and feedback will be highly appreciated.

    FAQ accordion card

    1

    bunee• 2,060

    @buneeIsSlo

    Posted

    Hey! @tltd0807, I think you did your best on this challenge, but there are definitely things you can improve upon. Firstly, to answer your questions:

    1. There really isn't a better way, you'll have to mess around with the values until it responds as expected.

    2. The solution for this is very simple, set an overflow: hidden; on the .card element.

    Here are my suggestions:

    • Use ::after or ::before selectors for adding the image content rather than creating dedicated containers and elements for them.
    • It's good to use semantic elements in your markup, but you've sort of gone overboard with it(all good, I do this too XD). The usage of multiple sections and headers(for this challenge) is unnecessary and only makes the code harder to read.
    • Good job on implementing the dropdown with JS, but you could have gotten away with using just HTML & CSS. How? use the <details> and <summary> tags. Learn about them here
    • Use the <footer> tag to add your attribution instead of <div>.
    • Make sure to add a short description for the images in an alt attribute, this helps improve UX.

    Keep coding. Hope this helps :)

    Marked as helpful

    0
  • Yacine Kahlerras• 790

    @yacineKahlerras

    Submitted

    first time trying some animations like floating, rotating and shake it turned out it was easier than i thought it'd be with keyframes so its more precise.

    Also tried to make it as pixel perfect as possible by measuring things on Figma but something doesn't seem to work, am going to play around with it more in my next projects and see how to make it work.

    EDIT: added notification error when not submitting a rating

    Interactive rating component with vanilla javascript and animations

    #accessibility

    1

    bunee• 2,060

    @buneeIsSlo

    Posted

    Hey! @yacineKahlerras, Superb work on this challenge! your solution looks great and responds very well too. I really dig the animations you've added as well. However, I do think they can be improved further.

    The trick to making smooth animations involves using appropriate easings, using them can make any animation feel like eye candy. Check out easings.net to add them to your projects.

    Hope this helps :)

    P.S: The error notification you added gave me a good laugh so, thank you for that XD

    Marked as helpful

    1
  • Hyron• 5,850

    @hyrongennike

    Submitted

    I know you can use stopPropagation() to stop events from bubbling but for some reason I was having trouble getting that to work.

    Is there anyone that used event delegation to handle events for this or any JavaScript related project?

    Any feedback would be much appreciated.

    Interactive Rating Component with HTML, CSS and JS

    1

    bunee• 2,060

    @buneeIsSlo

    Posted

    @hyrongennike, Your solution seems to be working great, where and why do you want to use stopPropagation()?

    0
  • Odiesta• 100

    @Odiesta

    Submitted

    When user click the rating and then decide to click the other, I struggle to remove the already selected style back to normal and style the next selected rating. Then i found a solution to reference the previous selected rating object and use that reference whenever user decide to select other value. Is it any better solution to above problem?

    Interactive Rating built with Javascript

    1

    bunee• 2,060

    @buneeIsSlo

    Posted

    Hey! @Odiesta, Good job on this challenge, your webpage responds very well!

    Here are my suggestions:

    • You don't need to have a default rating i.e rateValue = 5. Use the disable="true" attribute to keep the submit button disabled until the user has provided a rating. Fiddle with this codepen by Elaine to learn more about this method.

    • As far as accessibility is concerned, your rating options aren't keyboard-focusable. This is because your rating options are list items as opposed to buttons. To fix this, wrap the list items in <button> tags and style them accordingly.

    Hope this helps :)

    Marked as helpful

    1
  • P
    Jake Godsall• 1,340

    @jakegodsall

    Submitted

    Another one bites the dust.

    A quick question to all those frontend wizards out there.

    To solve the problem of having a second component show after submitting to the form, I've used the display property for hiding and showing the components.

    This seems like a clunky way of doing things. Am I right in thinking that in real life we'd just route to a second URL to show the thank you image?

    Like, a POST request to store the data, and a GET request to show the user the second view?

    Apologies if I'm using awkward terms here, I don't really know what I'm talking about haha

    Interactive component vanilla JS

    2

    bunee• 2,060

    @buneeIsSlo

    Posted

    Hey! @jakegodsall Not a wizard, but the method you've used is totally valid! Personally, the second method you mentioned feels like overkill for a tiny component like this one.

    You could also use the <template> tag, Learn about it here.

    Marked as helpful

    0
  • aman kumar• 710

    @amankumar1222

    Submitted

    Please give me your valuable feedback , thanks

    css html using checkbox

    #cube-css#materialize-css#sass/scss#tailwind-css

    1

    bunee• 2,060

    @buneeIsSlo

    Posted

    Hey! @amankumar1222, Good job on this one! Your solution responds very well.

    I noticed that you've used checkboxes to show and hide the answers, and this definitely works as intended, however, a more appropriate way to achieve this would be to use the <details> tag. Learn about it here.

    You're also missing the box shadow, you could use the code below if you'd like:

    box-shadow: 0px 50px 40px 0px rgba(0, 0, 0, 0.2);

    Hope this helps :)

    Marked as helpful

    1
  • Kostas Kvietinskas• 60

    @KostasKv

    Submitted

    Hi all!

    For this challenge, I decided to try figuring out how to set up and use Next.js, and went with Tailwind CSS (which I've been learning for the past week) to implement the design.

    It's been a bit of a struggle but I'm happy that I now at least know enough to build a basic site with Next.js :) Tailwind has been awesome. I love how quickly I can adjust the look of a site with Tailwind but I'm finding that the HTML can quickly get ugly and verbose.

    I would love to get any feedback or advice, particularly on:

    • the project's overall structure in regards to Next.js (is there anything strange/out of place?)
    • Best practices and readability with Tailwind CSS. Any glaring bad practices that I should try to avoid in the future?

    Interactive rating | Tailwind CSS + Next.js (first time trying it)

    #next#tailwind-css

    2

    bunee• 2,060

    @buneeIsSlo

    Posted

    Hey! @KostasKv, I have no experience with any of the technologies you've used, but your solution looks great, and responds well too!

    If you're using VScode you might find this extension helpful :)

    Marked as helpful

    1
  • Najmanager• 150

    @Najmanager

    Submitted

    Hi, this is my first project that required using JavaScript. It wasn't that easy I thought it would be, however I had a lot of fun building this cart. I will really appreciate any feedback.

    Interactive rating component

    1

    bunee• 2,060

    @buneeIsSlo

    Posted

    Hey! @Najmanager, Great job on completing this challenge. Your solution responds well and I really the extra touches you've added!

    Your solution seems to have some accessibility issues, here are the fixes:

    • Wrap the <section/>s in a <main> tag.
    • Add an <h1> with the following styling --
    position: absolute;
width: 0;
height: 0;
opacity: 0;

    This is needed for SEO.

    • According to the report, the type attribute is unnecessary for JavaScript resources, so make sure to remove it from the script.

    Hope this helps :)

    0
  • bunee• 2,060

    @buneeIsSlo

    Posted

    Hey! @swarajzz, Good job on this one! Everything works as expected. There is just one thing I'd suggest you fix. Instead of having a default value for rating, you could disable the button until the user has picked a rating. Learn how to disable a button here.

    Hope this helps :)

    Marked as helpful

    2
  • Sidra Waseem• 80

    @sidramwaseem

    Submitted

    Q: What are some best practices for fetching API? Q: Some best style practices to follow in my future projects?

    Advice Generator using React

    #react#styled-components

    1

    bunee• 2,060

    @buneeIsSlo

    Posted

    Hey! @sidramwaseem, Good job on this challenge! At the moment your solution doesn't work as expected on the Firefox browser. You can fix this by adding {cache: "no-cache"} in the fetch request.

    You can learn more about it here. Hope this helps :)

    Marked as helpful

    1
  • Karol• 1,620

    @karolbanat

    Submitted

    Hi, I'm fairly new to React so any comment will be helpful. I would appreciate feedback about:

    • file structure: is it good and what could be better
    • states and store, are they setup and used correctly
    • any improvements to components And if you find something that could be better, I will appreciate feedback about that too. Thanks and have a nice day.

    Job Listings With Filtering, React

    1

    bunee• 2,060

    @buneeIsSlo

    Posted

    Hi! @karolbanat, I'm pretty new to React as well. Your solution looks and feels fantastic! and the file structure is A1.

    The only slip I could find is the missing box shadow on the job list item component.

    Marked as helpful

    0
  • Kitti Horvath• 150

    @Horv-Kitty

    Submitted

    My first challenge. It wasn't hard, but I spent a lot of time polishing it. If you have any suggestions on how to do it better, especially the responsive part then that would be great to hear about it. :)

    Product preview card component

    #bootstrap

    1

    bunee• 2,060

    @buneeIsSlo

    Posted

    Hi! Horv-Kitty, Congratulations on completing your first challenge! Your solution looks clean and responds quite well!

    I noticed that you're switching the images with JavaScript, which does get the job done. However, a more appropriate way to do this would be to use the <picture/> tag. You can learn about it here.

    I would also add : focus styles to the "Add to Cart" button to make it more accessible.

    Hope this helps :)

    Marked as helpful

    1
  • bunee• 2,060

    @buneeIsSlo

    Posted

    Hey! @Ram0O7, It's actually quite simple. Use the <details/> tag. Learn about it here.

    0
  • bunee• 2,060

    @buneeIsSlo

    Posted

    Hey! @kongguksu, Amazing work on this challenge! Your solution works as expected and responds very well.

    The JS code looks good too, but if you weren't aware, using the <details> tag along with the <summary> tag would've made this challenge much easier to solve. You can learn more about them here.

    Hope this helps :)

    Marked as helpful

    1