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
OverviewSolutions31Comments535

All comments

  • P
    visualdennisβ€’ 8,195

    @visualdenniss

    Posted

    Hello Olena,

    great solution, looks almost identical to the design :)

    there seems to be some areas to improve on regarding best practices of accessibility. For example: setting a fixed height like max-height: 450px; to a text containing element might cause various issues like content overflow with changing data or when user changes base font size on their device etc.

    Also, for similar reasons it is better to use responsive units like rem/em than px.

    there is also a great article about this particular FEM Challenge, showing and explaining best practices: Product Preview Card, feel free to check it out :)

    Hope you find this feedback helpful! Keep up the great work!

    Marked as helpful

    0
  • P
    Jo Youngβ€’ 840

    @Jo-cloud85

    Submitted

    This challenge was completed with:

    • dark and light theme toggle
    • the ability to switch users that also comes with a tiny bit of animation
    • pop-up alerts when users try to send an empty response or vote more than once
    • sync data with localStorage for any CRUD operations

    Due to this challenge's multiple state management requirements, I used a lot of function declarations, instead of function expressions, which I understand is not ideal. Also, there still might be some bugs lying around. Nevertheless, I had fun drilling my Javascript skills.

    Interactive Comments Section [vanilla JS]

    3

    P
    visualdennisβ€’ 8,195

    @visualdenniss

    Posted

    Hey Jo,

    great work! This one is a quite tricky challenge and u have did an amazing job :)

    There seems to be little issue with the vote system. Once u vote, if u can only cancel that vote but u cannot vote the opposite way. E.g. if u upvote, it goes up to 5, but if u downvote it never goes to 3, which should be the case. I've listed here Vote System States. Also i dont think it is necessary to put an explicit warning to a user. The standard practice on web is to toggle when clicked twice, instead of a pop up alert.

    Its also very nice that u added little menu to switch users. I've also initially wanted to make a menu like u and display users with animation onClick, then i thought since this is a demo, people might not spend time much, so i wanted to make it very explicit. But if it was a real-world thing, i'd hide them into a menu too.

    Hope you find this feedback helpful! Keep up the great work ;)

    Marked as helpful

    0
  • Adrianaβ€’ 60

    @AdrianaMagdalena

    Submitted

    Project built with:

    • Flexbox
    • Grid
    • Mobile-first design
    • CSS custom properties

    I had hard time deciding where the mobile view would change to desktop, so I added design for tablet in the middle.

    I'll appreciate any feedback!

    Stats preview card using flexbox and grid

    1

    P
    visualdennisβ€’ 8,195

    @visualdenniss

    Posted

    Great work Adriana!

    you can add breakpoints anywhere you need, the given design images with 375px and 1440px show only how the app should look like at that particular browser width, so you are free to choose where to add breakpoints. It is usually best to check the look of your app for sizes as small as 320px and up to 2500px. Adding tablet is always recommended. Keep up the good work!

    Marked as helpful

    0
  • P
    visualdennisβ€’ 8,195

    @visualdenniss

    Posted

    Hello Mermaido,

    Good effort! I've couple of suggestions to improve further:

    first, u need to change your html structure, not the body but a <main> should be the container for these elements and do not give any fixed height, only a max-width is enough. You can make the image width:100%, which will grow as much as it can until it hits containers max-width. You can then add a padding so there is little white space between image and the containers borders.

    To center the QR card inside the body, u can use display: grid; place-items: center; min-height: 100vh;

    I also recommend you to check my solution for the QR code for further ideas: SOLUTION LINK

    Hope you find this feedback helpful!:)

    Marked as helpful

    2
  • P
    visualdennisβ€’ 8,195

    @visualdenniss

    Posted

    Amazing job Mikolay! You are clearly talented and make very fast progress. Keep pushing your boundries πŸ”₯

    Small tip when submitting: you can temporarily turn off the animations on your code before taking a screenshot on FEM, after you generated the screenshot here you can enable the animation in your code again so the live demo has animations. This way, all parts of your app will be visible in the screenshot.

    0
  • P
    visualdennisβ€’ 8,195

    @visualdenniss

    Posted

    Great job with the creative touches in this one! Always love to see the work of people who keep pushing the boundries, keep it up that way and looking forward to see more πŸ”₯

    0
  • P
    visualdennisβ€’ 8,195

    @visualdenniss

    Posted

    Hey Reymart!

    Great job on completing this complex challenge successfully! Final result looks good.

    Few suggestions to improve further:

    • Ideally, users should be increase/decrease the vote number only once but currently one can upvote the same comment infinitely.
    • Every clicking on "Reply" keeps opening new input field, it would be better to use a toggle logic instead, where first click on the button displays the add comment input field and the second click hides it.

    Hope you find this feedback helpful!

    Marked as helpful

    0
  • Sandraβ€’ 60

    @sancoza

    Submitted

    Sweet task. Good for practice. For beginners.

    QR code exercise

    #styled-components#webflow#fresh

    2

    P
    visualdennisβ€’ 8,195

    @visualdenniss

    Posted

    Hello Sandra :)

    congrats on completing the challenge successfully! Nice result.

    However there seems to be couple issues to work on. To name a few: Giving a height: 60vh; is not a good idea, because it will stretch and squeeze depending on the screen size and cause unwanted paddings etc. It is best to avoid giving any fixed height or a height using percentages like this, instead just let the content of container determine the height. Use paddings and margins instead to tweak the look.

    The color of the body text seems to be too bright, so using a darker value would improve the contrast and reability.

    Hope you find this feedback helpful!

    Marked as helpful

    0
  • Michelleβ€’ 20

    @batesmichelle23

    Submitted

    Learned a lot with this project, such as the use of % instead of px when it comes to container sizing and making it responsive.

    I'd like to know if there's a better/more efficient way of writing the code and the css than what I had done. The limited knowledge I do have, I did it in a way that made sense to me, but open to suggestions for future projects.

    Result Component Summary using HTML & CSS

    #bootstrap

    2

    P
    visualdennisβ€’ 8,195

    @visualdenniss

    Posted

    Hey Michelle,

    congrats on completing the challenge successfully! Very neat job.

    Using width:50% on the container causes it to squeeze a lot when resizing the browser, while there is still enough space. Instead i'd suggest using width:100% but a max-width: some-value-in-rem. and add a small margin so it does not touch the edges of the screen.

    There seems to be some room for improving the design as well. The title "Your Result" should be something like white so it has enough contrast with the background. Also the background color of the page does not seem harmonious with the rest of the design, so i'd suggest keeping it cleaner by using something more neutral and closer to white.

    Hope you find this feedback helpful!

    1
  • Ezequiel CΓ³rdova Sotomayorβ€’ 650

    @3eze3

    Submitted

    Hi, I have finished this challenge on forms, I really liked to do it, I had problems with the design when implementing it with js, if you could give me advice on the design and functionality in general, I would appreciate it very much. Happy coding ❀

    Intro Component Form πŸ”±

    #accessibility#jss#sass/scss#bem

    1

    P
    visualdennisβ€’ 8,195

    @visualdenniss

    Posted

    Hello Ezequiel,

    congrats on finishing the challenge successfully! Looks very neat!

    regarding design, the body text color seems to be mismatching the design, it supposed to be brighter and whiter. The currently used gray has very low-contrast to the background, so its harder to read.

    on certain browsers widths, the form inputs etc. get too much squeezed due to huge padding-inline of 12rem. Instead u can use an approach like margin: 0 auto; max-width: 68.75rem; on the container of the two columns. or set the breakpoints higher so it changes layout before it starts to break.

    Hope you find this feedback helpful!

    Marked as helpful

    2
  • Saad Hisham β˜•πŸ’»β€’ 1,790

    @Saad-Hisham

    Submitted

    πŸ‘‹ Greetings, fellow developers! I wanted to share that I had a blast completing this challenge. It took me 3 hours and 2 cups of coffee β˜• to create the layout using Bootstrap, and I used React with Framer Motion for the animations. πŸš€ I also used SVG to create animated text. πŸ’₯ Finally, I wanted to thank Sir Dennis for inspiring the animation from his Solution. πŸ™Œ I included his name and LinkedIn account in the footer. Thanks for checking out my project! πŸ˜ŠπŸ‘

    πŸ”₯ Animated Base Apparel Coming Soon Page πŸ”₯

    3

    P
    visualdennisβ€’ 8,195

    @visualdenniss

    Posted

    Hello Saad,

    thanks a lot for the shoutout and happy to hear that you were inspired by my solution! :) Good job implementing with the framer-motion!

    When resizing on desktop, the image gets distorted, so you can prevent that by using object-fit: cover; on the img element. You can also add some easing to the animation to make it smoother and natural looking.

    At the bottom part of the letter 'W', there seems to be some weird shapes in the svg, idk why that.

    Also i think it is better to avoid using fixed/absolute values like "600"px for the initial value of the image, cuz depending on the screen size, parts of the image is visible on initial load. Consider using something more responsive, maybe percentage etc.

    Hope you find this feedback helpful and keep up the great work!

    Marked as helpful

    1
  • P
    visualdennisβ€’ 8,195

    @visualdenniss

    Posted

    Hey Alex,

    great work completing this tedious challenge only in vanilla JS! It seems there is a bug about the win condition, the very first connect four is not counter, only starting from 2nd connect for, it starts to count wins for players. Also i believe after one connect 4, the game should end and don't let user to continue, instead restart the new game. But i guess u are already aware of these bugs.

    Hope you find this feedback helpful!

    Marked as helpful

    0
  • Abdul Khalidβ€’ 66,760

    @0xAbdulKhalid

    Submitted

    πŸ‘Ύ Hello, Frontend Mentor Community,

    This is my solution for the Interactive Rating Component.

    • 100% Accessible solution with form integration, you check by pressing tab key along with ← & β†’ to traverse your rating selection finally hit enter to submit your result
    • Learned the usage of fieldset, legend, & radio input elements to build well accessible form
    • Scored 99.5% on Google Pagespeed Insights! 🀩
    • Actually it's been overwhelmed at this part because of performance issues. So i injected the css and js inside the html file itself to improve site performance. results 86% => 99.5% πŸš€
    • Used Prettier code formatter to ensure unified code format βš™οΈ
    • Layout was built responsive via mobile first workflow approach πŸ“²
    • Had a lots of fun while building this challenge ! 🀠
    • Feel free to leave any feedback and help me to improve my solution πŸ’‘

    .

    πŸ‘¨β€πŸ”¬ Follow me in my journey to finish all newbie challenges to explore solutions with custom features and tweaks

    Ill be happy to hear any feedback and advice !

    INTERACTIVE RATING COMP 🎯 [ ACCESSIBLE - BEM - VANILLA CSS3 - ES6 ]

    #accessibility#bem#lighthouse

    3

    P
    visualdennisβ€’ 8,195

    @visualdenniss

    Posted

    Feels elegant and smooth. Great job with it. Only a minor detail, which i've believe you have forgotten is to add cursor: pointer; to the hover states of radio btns to indicate user that they are interactive elements. Keep up the good work!

    Marked as helpful

    1
  • P
    Jo Youngβ€’ 840

    @Jo-cloud85

    Submitted

    This is my first time doing a loading page. I don't own 100% of the design's originality. I took design references and combined/adapted them from different sources (references listed under my README.md file). I just want to learn how to integrate some of these components/animations into my solution. The hovering transition for the login and register buttons is somehow not very smooth. Not sure if it is because the CSS conflicts with Bootstrap's default settings.

    Intro section with dropdown navigation [Redesign]

    #bootstrap

    3

    P
    visualdennisβ€’ 8,195

    @visualdenniss

    Posted

    Looks like a neat job! Unfortunately page does not load for me, the loader is stuck endlessly, saying transferring data.. :/

    Judging by the screenshot, i like the gradient you have used, however i think the yellow color in the provided image does not go very well with it, too many tones and colors on a single page. I'd suggest using an alternative image decorated with shapes but with no more than a single color. Also the constrast between paragraph and background seems to be a bit low, as well as nav text having diff color than heading/paragraph makes it look a bit inconsistent.

    Keep up with the creative work and experimenting!

    0
  • P
    visualdennisβ€’ 8,195

    @visualdenniss

    Posted

    Great job both in redesign and implementing the animation ideas to your project! Weiter so!!

    0
  • P
    visualdennisβ€’ 8,195

    @visualdenniss

    Posted

    Hey Kinga,

    very nice work with the stats preview card!

    I have a suggestion regarding the color filter on the img:

    • remove opacity: 0.7 and filter:brightness(0.8) from the .image-container.
    • instead add to .image-container img { mix-blend-mode: multiply; opacity: 0.75;}

    and now it should look much closer to the actual design :) Also add object-fit: cover; to the img to prevent it from being distorted.

    Hope you find this feedback helpful!

    Marked as helpful

    1
  • P
    visualdennisβ€’ 8,195

    @visualdenniss

    Posted

    Hallo Mikolay,

    apart from the web performance issues, great job in implementing your own ideas on top your inspiration :) Lots of nice little touches and details, e.g. bg moving around with cursor position and the rapidly flashing images changing layout is an interesting take!

    Unfortunately your source code on github does not include the JS file you have written yourself, only the minified version. Otherwise, i could give more feedback maybe.

    Keep up the great job and creativity!

    0
  • Josue Anes-Pazβ€’ 150

    @GenuineMiyashita

    Submitted

    Completed the 3rd project in my goal to remake previous solutions in React. Very minimal TypeScript, kinda feels weird even including it. The main goal with each project redesign is to add some sort of interaction even if it's just HTML/CSS. This time, if you click on the image you'll hear an actual song!

    Built With

    • React
    • Tailwind CSS
    • TypeScript

    Changed/Added

    • Different image
    • Different background
    • Clickable image to play song

    Credits

    • Artwork by Nairu on Pixiv
    • Song by Arulo on Mixkit
    • Background from Hero Patterns

    Order Summary [React/Tailwind/TypeScript]

    #react#tailwind-css#typescript

    2

    P
    visualdennisβ€’ 8,195

    @visualdenniss

    Posted

    Always love to see redesigns and work of people who keep pushing their boundries. This one is a great one, so keep them coming!

    Also, pretty chill song (ツ).

    3
  • P
    Jo Youngβ€’ 840

    @Jo-cloud85

    Submitted

    Another API challenge completed! This is much tougher than the advice API generator app challenge because of the number of errors or conditions to check for, against each user's GitHub data.

    Unlike the advice API, this GitHub API requires an authentication key thus for security reasons (because I have not learned enough about the backend side), I have removed my auth. key temporarily so the search will not work on your side. Technically, with .gitignore, you can hide your key but any script that is stored on the client side instead of the server side, with a link to a key, is still not very safe. Thus, if you want to test the code, you gotta get your own auth key from GitHub and add it to a config.js file.

    Nevertheless, the light and dark toggle and the media queries should still work. I will come back to modify it once I learn the backend side.

    Cheers!

    GitHub user search app [using jQuery]

    #jquery

    3

    P
    visualdennisβ€’ 8,195

    @visualdenniss

    Posted

    Hey,

    great job again!

    I don't understand why it requires auth from you, this should simply work without any auth; https://api.github.com/users/visualdenniss I've also just tested it now by entering this link in URL bar in an incognito browser and it returns the data as usual without me having logged in at all.

    1
  • P
    visualdennisβ€’ 8,195

    @visualdenniss

    Posted

    Hey Vlad,

    final result looks good πŸ’œ it needs few tweaks: Firstly, you need to make your main container as position: relative, so that your absolutely positioned element is relative to that instead of body. Because there is no need to make that little avatar image behave like a direct children of the whole page. After that simply tweak the top value from 36% to 25% and you are good to go :)

    For bg patterns, i recommend checking out my solution here

    Hope you find this feedback helpful!

    Marked as helpful

    1
  • P
    visualdennisβ€’ 8,195

    @visualdenniss

    Posted

    Hello Anna,

    your code is neatly organised and the result looks great!

    However the animation seems to cause little issue at the beginning. On the initial load, because of how framer-motion works, it simply pushes all other elements of spending_infoWrapper__twylt to shifts down, which i don't think is the intended behaviour. Adding a min-height to the chart_wrapper__uoUU4 should fix it. I noticed the same problem when i was doing this challenge, so this has worked for me.

    • Speaking of heights, you should try to avoid giving fixed heights or max-height to any text containing elements such as spending_wrapper__bt0no . The height should be determined by the content of containers. Also usually max-width instead of fixed width is better.

    • Relatedly i'd suggest you to avoid using px, better option would be to use the responsive em/rem. Here is a great resource on YT for clarifying all the differences between rem/em and explain why to use them: https://www.youtube.com/watch?v=dHbYcAncAgQ

    Hope you find this feedback helpful!

    Marked as helpful

    1
  • P
    markusβ€’ 860

    @markuslewin

    Submitted

    Advice generator app

    #accessibility#astro#cypress#tailwind-css#progressive-enhancement

    1

    P
    visualdennisβ€’ 8,195

    @visualdenniss

    Posted

    Amazing work! 1/1 matches the design.

    But what caught my attention is that the speed it returns new advice. So far, in all solutions i've seen for this challenge, there was a 2 second waiting time between to make new request, which i think APIs own rate limit. It also works this way in my version where back to back clicks don't return anything.

    However in your version it seems to return an advice as soon as clicked, no matter how many times in a row without any time between. I wonder what is it in the app that makes this possible? Is all data pulled out locally? I've tried to check source code but not familiar with astro etc. It looks like it has something to do with faker js, but on the docs i'vent seen a category called "advice" and advice: faker.lorem.paragraph() points to lorem parapgraph but ur app shows a real text not lorem. Would be much appreciated if you could maybe share the secret sauce :) Thanks!

    Marked as helpful

    2
  • Codenaudβ€’ 80

    @codenaud

    Submitted

    πŸš€ Hello from the outer space...

    This is my solution for: "Profile card component".

    I tried adding a new style class [d-flex, d-column], just to see how it would look. But I don't really know if this is a good practice or a good way to do it. Maybe it looks a bit strange. I don't know. πŸ€”

    πŸ§‘β€πŸš€ Bonus [code]:

    A little css ease-out transition with scale-transform for the avatar image.

    I would like to thank @visualdenniss for his inspiration and big knowledge.

    I'll be happy to hear any feedback and advice! Thank's

    πŸ‘½ See ya! πŸ‘½

    Profile card component

    3

    P
    visualdennisβ€’ 8,195

    @visualdenniss

    Posted

    Hey thanks a lot for the shout-out 😳 Really happy to hear about inspiring you, it motivates me to go further as well!

    Final result looks awesome! Just couple tips to consider for your future projects:

    • Try to avoid setting max-height or any fixed height for text containing elements, as it can cause various issues, such as content overflow when the data changes or the user changes their settings for the base font-size etc. etc.

    • Avoid using px as much as u can, better option would be to use the responsive em/rem. Here is a great resource on YT for clarifying all the differences between rem/em and explain why to use them: https://www.youtube.com/watch?v=dHbYcAncAgQ

    Hope you find this feedback helpful!

    Marked as helpful

    1
  • P
    visualdennisβ€’ 8,195

    @visualdenniss

    Posted

    Nice solution and sweet typewriting effect for the placeholder.

    It looks like you are using duplicated elements for the image / date to display/hide them with changing breakpoints. That part is tricky with the flexbox. Alternatively you can use a single css grid using grid-template-areas and then simply assign elements differently when breakpoints changes, then you wouldn't not need two different elements. Here is a screenshot example how it would look like: https://imgur.com/1TdAwnN

    Hope that's helpful. Keep up the good work.

    Marked as helpful

    1