Skip to content
OverviewSolutions
13
Comments
120
bunee
@buneeIsSlo

All comments

  • tediko•6,680
    @tedikoSubmitted 10 months ago

    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,020
    @buneeIsSloPosted 10 months ago

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

    1
  • bunee•2,020
    @buneeIsSloPosted over 1 year ago

    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
  • dia ♡•200
    @diaasaurSubmitted over 1 year ago

    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,020
    @buneeIsSloPosted over 1 year ago

    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-MildeSubmitted about 2 years ago

    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,020
    @buneeIsSloPosted about 2 years ago

    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,020
    @buneeIsSloPosted over 2 years ago

    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,020
    @buneeIsSloPosted over 2 years ago

    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,020
    @buneeIsSloPosted over 2 years ago

    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
    @kxnzxSubmitted over 2 years ago

    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,020
    @buneeIsSloPosted over 2 years ago

    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,210
    @sahand-masolehSubmitted over 2 years ago

    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,020
    @buneeIsSloPosted over 2 years ago

    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
    @Ibrohim2001Submitted over 2 years ago

    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,020
    @buneeIsSloPosted over 2 years ago

    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
    @tltd0807Submitted over 2 years ago

    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,020
    @buneeIsSloPosted over 2 years ago

    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•820
    @yacineKahlerrasSubmitted over 2 years ago

    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,020
    @buneeIsSloPosted over 2 years ago

    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