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
OverviewSolutions12Comments39

All comments

  • Lucas 👾• 104,580

    @correlucas

    Submitted

    👾 Hello, Frontend Mentor coding community. This is my solution for the ChatApp CSS Illustration.

    This challenge was really challenging! The hardest thing was the background svg images, I tried to create these gradient elements inside the css with content: ' ' and after/before but for a reason that I don't know a huge gap was created in the bottom. So I took the shortcut to finish the solution and I've exported the svg elements from Figma ❤ and placed it in the body as background-image. Then I add some animations and changed a bit the design.

    🍚Follow me in my journey to finish all HTML/CSS only challenges (Only 4 missing)! Gotta Catch ’Em All

    Ill be happy to hear any feedback and advice!

    ChatApp CSS Illustration (Vanilla CSS)

    7

    Josh• 560

    @jkellerman

    Posted

    One of the best ones i've seen, well done!

    1
  • Rubai Rahman• 40

    @Rubai-Rahman

    Submitted

    I had trouble with the API , Mostly To rendering the Native-Name. As I am a beginner it was pretty hard for me to render the nested object. And I tried several time to remove the focus outline from the search bar and select Region . But can't remove . the outline .

    React App With Tailwind CSS and Color Switch Mode

    #react#tailwind-css

    1

    Josh• 560

    @jkellerman

    Posted

    Nice solution!

    FYI, removing focus outline isn't good for accessibility.

    https://pauljadam.com/guides/focus-outlines.html

    https://www.a11yproject.com/posts/never-remove-css-outlines/

    0
  • Josh• 560

    @jkellerman

    Posted

    Really good! Can't fault your solution.

    Just a word on accessibility make sure li elements are in ul or ol. 👍

    0
  • Josh• 560

    @jkellerman

    Posted

    Hey nice solution 👍

    Just some feedback, your products-number element doesn't have a fixed width. When you shrink the viewport the number overflows into the button. You need to change width: 126.6px to min-width: 126.6px.

    Also, if you want the text in the button to not go on multiple lines, a little trick is to add 'whitespace: nowrap' to button element.

    Hope this helpful.

    0
  • Josh• 560

    @jkellerman

    Posted

    Very nice! well done.

    Just one thing, you may need set a limit on the amount of digits that can be entered or set a fixed height to the output container, if you create a really big number the output container grows and ends up stretching your whole app.

    Marked as helpful

    0
  • Josh• 560

    @jkellerman

    Posted

    Hey,

    The photography section is not in the right place, it's currently sitting underneath the graphic design section which is leaving a big blank space on the right.

    Marked as helpful

    1
  • João Pedro Droval• 60

    @PvMDragonic

    Submitted

    Tried to add some extra polish to the original idea, with icons for each color theme and some dynamism to the calculator "screen" by having it hold long math expresions.

    Calculator App

    #sass/scss#bem

    1

    Josh• 560

    @jkellerman

    Posted

    Really good!

    Just a heads up at the bottom is says password generator app, was kind of confused, I don't think that is supposed to be there.

    Great solution though 👍

    1
  • Reyan• 130

    @reyanshverma980

    Submitted

    If you find anything which can be improved or is wrong practice, feel free to give your feedback.

    All Feedback welcome

    Job listing with Nextjs and tailwind css

    #next#tailwind-css

    1

    Josh• 560

    @jkellerman

    Posted

    Hey Reyan, very nice solution.

    Just one suggestion:

    In mobile view, your li elements are too thin which is squashing the some of the contents together and the span element that says "featured" is overflowing for the first li element. A quick fix would be to set a min-width of the li element to 90% and you'll see that the content isn't squished anymore.

    Hope this helps. Apart from that looks great!

    Marked as helpful

    0
  • Josh• 560

    @jkellerman

    Posted

    Well done, it's looking good!

    Just a few suggestions on accessibility.

    1. make sure you have alt text for images
    2. Don't set outline to none on input fields(see links below)

    https://pauljadam.com/guides/focus-outlines.html https://www.a11yproject.com/posts/never-remove-css-outlines/

    1
  • Matias• 40

    @MatiDN

    Submitted

    If you notice when you click on the hero img and scroll down, if your screen doesn't fill the top of the content, the background color doesn't cover the entire bottom area. I was thinking for a while but I couldn't think of how to solve it, if anyone knows a solution to this it will be welcome, thanks.

    E-commerce product page

    #sass/scss

    1

    Josh• 560

    @jkellerman

    Posted

    You could try placing the overlay outside of your container class, I think what's happening is the overlay is being confined to its parent elements.

    Here is a good tutorial on this https://www.youtube.com/watch?v=gLWIYk0Sd38&t=167s

    Hope this helps!

    1
  • karthikeya pvs• 190

    @karthik5860

    Submitted

    Hello I found it difficult to do this project and also making this responsive I feel I have made lots of mistakes or there are better ways in doing this so please give some feedback in comments Thank you

    Responsive page using grid and flex

    1

    Josh• 560

    @jkellerman

    Posted

    Hey, well done, i like the animations!

    Just some pointers that can help you improve.

    1. Make sure all images have alternate text for accessibility
    2. You need to add some margin between each tab, they are too close together
    3. Looks good for mobile and desktop but needs to be responsive for all screen sizes, the tabs are outside the container for tablet e.g.

    All the best!

    0
  • Mese• 100

    @bahdman

    Submitted

    My heart and soul was put into the creation of this project, this is best way possible i know how to at the moment. If there are any bugs or omissions, do let me know. Thanks.

    E-commerce landing page with HTML CSS and JS

    1

    Josh• 560

    @jkellerman

    Posted

    Well done! I especially like the autoplay on the carousel.

    Just two things i noticed straight away.

    1. There is no cursor pointer for when you click the cart button.
    2. Was a bit thrown off that you when you click on the square's it doesn't go to the slide, the autoplay keeps playing.

    Apart from that looks great!

    0
  • Yonatan Afewerk Teshome• 720

    @Yehonatal

    Submitted

    i thought it would be easier i guess i was wrong Layering the illustrations was a big problem i couldn't figure out, and positioning them as well any help would be great! this was really hard i don't even know why :( i think the big problem am facing is structuring the html been 4 weeks since i started learning web dev this was the most frustrated i have been for a while. i have seen the "id needs to be unique error but i don't know any other way of doing it . just started learning js as well been a couple days any pointers would be great on that too "

    FAQ Accordion Card

    1

    Josh• 560

    @jkellerman

    Posted

    The layout looks good, the only thing I would suggest is to close all other tabs when one is open, that way the container won't expand.

    If you are referring to using id's on elements, you should use id for one element only, as it indicates the style for the element is unique. If you need to multiple elements to have the same style use classes.

    0
  • Ajayi Michael• 400

    @Michaelajayi150

    Submitted

    • What did you find difficult while building this project? - I had difficulty with the color scheme because the colors provide in the style guide didn't all match the proposed design, But I improvised though...

    Also share what you found difficult and how you went about it and if you haven't I will love to help as well

    Shorty - Responsive web app that shortens links

    #pwa#react#tailwind-css#vite#fetch

    1

    Josh• 560

    @jkellerman

    Posted

    Hey, nice solution.

    Just a quick suggestion, don't remove the outline in input fields as it is bad for accessibility.

    See these: https://www.a11yproject.com/posts/never-remove-css-outlines/ https://pauljadam.com/guides/focus-outlines.html

    Apart from that, all looks great!

    Marked as helpful

    0
  • LarryLobster• 270

    @Larbearto

    Submitted

    Hey Mentors!

    What's the best way to handle the box for the responsive design??

    I learned a lot while I was messing around with the z-index, and position properties. If anyone has any suggestings on different solutions to handle the box i'd love to hear it.

    Thanks!

    Faq Accordion with Tailwindcss

    2

    Josh• 560

    @jkellerman

    Posted

    Hey mate,

    The link to your site, takes us to vercel, not your solution.

    Marked as helpful

    0
  • Josh• 560

    @jkellerman

    Posted

    Nice work!

    Just a suggestion, when the open all tabs it expands the container. A work around would be to close all other tabs when one is open.

    All the best and happy coding!

    Marked as helpful

    0
  • Mateusz• 180

    @userMatMik

    Submitted

    Hello FM Community! This is my first upload here so dont be harsh ;)

    I've made this project using Vanila JS because I felt that this will be a great opportunity to use some more advanced JS features for example: JS Routing and Promise.all()

    I didnt follow FM Design i went more in neumorphism style and I've added few things from me like Leaflets maps ( dark and light mode) and preferred color scheme.

    I'm not sure if I used Promise.all() properly so I will be very greatfull is somone can take a look at it. The function is called getBorderCountrysName () and it's in app.js file.

    Take care guys :)

    REST Countries API with neumorphism design and Leaflet Maps

    #fetch#sass/scss

    2

    Josh• 560

    @jkellerman

    Posted

    Very nice, especially the addition of leaflet maps.

    0
  • Josh• 560

    @jkellerman

    Posted

    Good job! Looks great.

    Just a few things to point out. Desktop and mobile is great, but needs to responsive inbetween. Also, the sneakers logo isn't showing in mobile.

    1
  • Ignacio Andrés Molina• 300

    @Strocs

    Submitted

    Hey! I always love working with API REST, this challenge is a good starting point. I built this in React and also I added a basic animation to the dice, just for fun. All feedback is welcome! Cheers 😄.

    Advice Generator | ReactJs

    #accessibility#animation#react#vite

    1

    Josh• 560

    @jkellerman

    Posted

    Nice animation, good work !

    0
  • Szymon• 80

    @mastertukan

    Submitted

    I'm specifically looking for JS advice as I don't feel that comfortable using it yet and I'm sure certain aspects could be improved!

    Any feedback is welcome and highly appreciated!

    Tip calculator app

    1

    Josh• 560

    @jkellerman

    Posted

    Looks good!

    One thing I will say is using var is not the standard anymore, you should be using const or let when declaring variables.

    Marked as helpful

    1
  • Matias• 70

    @Matblv

    Submitted

    Hi everyone, i hope you can tell me about other solutions and corrections for my project

    FAQ Accordion Card

    2

    Josh• 560

    @jkellerman

    Posted

    Well done! Looks good, just one suggestion.

    When you open all tabs, it pushes them down and then you can't see the bottom one anymore. To avoid this you could close all other tabs when the selected one is open.

    0
  • Nneoma Njoku• 1,210

    @SatellitePeace

    Submitted

    I could not get the URL stored in the local storage to load I kept getting errors

    Any advice of how to solve this problem will be greatly welcome

    • Also I think my Javascript code is very disorganized and a bit difficult to read

    • I will appreciate tips for refactoring and best practices for writing clean Javascript code

    • Lastly, i added a delete button in form of an icon so the user can delete a url without having to refresh the page

    URL shortening site With HTML5/SCSS VANILLA JAVSCRIPT AND API

    #bem#sass/scss#fetch

    1

    Josh• 560

    @jkellerman

    Posted

    I've had a quick look and checked the applications tab in chrome dev tools. The links are saving but not loading.

    I would do something along the lines of:

    • create a function that loads the todos.

    E.g function loadTodos() {

    const todos = localStorage.getItem(todos);

    return JSON.parse(todosString) || [ ]; }

    • create function that saves the todos

    E.g function saveTodos() {

    localStorage.setItem(todos, JSON.stringify(todos)); }

    The loadTodos() function should run every time the page loads and saveTodos() should run whenever the user shortens a url.

    Hope this helps! Happy coding

    Marked as helpful

    0
  • NKWETAKEM TABO BRUNO• 490

    @BLADEHEDA

    Submitted

    This challenge was amazing but the real deal was at the level of handling email validation text input with regular expressions. Any feedback would be highly welcomed and most especially critics on how to imorove mu designs

    intro-component-with-signup-form

    1

    Josh• 560

    @jkellerman

    Posted

    There's seems to a few issues, that you should take a look at.

    1. Error message only shows for the first name input,
    2. Any field that is left blank should get an error message
    3. Once a field has been inputted correctly the error message should disappear

    Apart from that, design looks good!

    Hope this helps :)

    0
  • Josh• 560

    @jkellerman

    Posted

    You have an issue with your container, it expands when entering digits into the input field. I suspect you will need to give the container a fixed width in pixels to stop this from happening.

    Marked as helpful

    0