Namrata Sinha• 530
@nmrtsnh
Submitted
Hello everyone,
I am Namrata and this is my solution for the Expenses chart component challenge.
If you have any suggestions to improve my code, please feel free to share!
Thank you 🙏
enzmrg 💫
@enzo-mir
All comments
- enzmrg 💫• 870
@enzo-mir
Posted
Hi ! I love the way that you make the hover effect on the chart's elements and the design is really nicely made ! Just the responsive could be improve without any breakpoint with a
min-widthof 100% should be good and try to avoidmarginto positionning ;)I loved the solution !
0 - AdelaChmel• 20
@AdelaChmel
Submitted
Any feedback is welcomed :)
enzmrg 💫• 870@enzo-mir
Posted
Hi solution ! Maybe should be nicer if the mobil breakpoint would be at E.g : 600 px of viewport because 375px is a bit small at my sense.
Well done ;)
0 - Agnik Bakshi• 480
@Agnik7
Submitted
Hi everyone, This is my solution for the Rest Countries API with Color Theme Switcher challenge.
I have used ReactJs, TailwindCSS and Material Icons to finish this project, and have tried to stick to the design as much as possible.
enzmrg 💫• 870@enzo-mir
Posted
Hello ! Awesome solution but something went wrong when you try to get details of some countries
- E.g : American Samoa
Try to fix it for a fully respected challange !! Well done ;)
Marked as helpful
1 - Gift Richard• 520
@fibonacci001
Submitted
OMG you guys, I just finished another solo React project building this gorgeous Easybank landing page and can I get a high five?! 🖐️ Got those slick animations going, components breaking things into reusable bits - I'm basically a pro-React developer now! 😎
But let's get real - accessibility was kinda my weak point if I'm honest. 🤓 I was nerding out hard about toggle interactions and hover states when I should've been asking: but what about screen reader users?!
So I've gotta work on my inclusivity game for sho! Here's some ways I can have MORE fun (!) while making sites that work for errbody:
🔤 Semantic HTML is my BFF (but like cooler than my actual BFF maybe?)
🎨 Ooh baby those color contrasts are SPICY and accessible!!🌶️
📽 Alt text for images - now screen readers can enjoy my glorious creations too!
There's always more to learn when it comes to web access I know, but I'm so jazzed to keep improving. Because the web is for EVERYONE, am I right or am I right?? 🙌
My code organization is getting bonafide lit too - scoping CSS by component ftw! Less clashes than high school, woohoo! 💃 Sure I can tweak some things to share styles globally but I've come a long way from one messy CSS file, phew! 😅
So let me know if you've got tips for me my coding queens and kings! ✨ And high five to more inclusive and kick-butt websites for all users!! 🖐️🖐️ Raised hands AND hand clap emoji for the people in the back!! 🙌👏
enzmrg 💫• 870@enzo-mir
Posted
Awesome project the only things that i can say :
- There is a lack of spacing between elements and line spacing
- And careful to
tabindexbecause the application is not really accessible be keyboard
Well done this solution deserve compliments !
1 - Ulrich1979• 160
@Ulrich1979
Submitted
This was a good exercise, i loved the design of this site. Nevertheless it took me a few hours. Your feedback or any suggestions to improve my code is very welcome.
enzmrg 💫• 870@enzo-mir
Posted
Hello that is a very nice solution the only issue is the footer doesn't look like the design :
- There is no background color
- The shape doesn't appear this way
And concerning your code : Nothing to say you have sementics tags maybe in JavaScript :
- Declare readable contants such as "top_nav" instead of "x"
- Use
classListto improve the code it will be better withclassList.add(),classList.remove()orclassList.toggle()
Well done ;)
0 - Namrata Sinha• 530
@nmrtsnh
Submitted
Hello everyone,
I am Namrata and this is my solution for the Huddle landing page with alternating feature blocks challenge.
If you have any suggestions to improve my code, please feel free to share!
Thank you 🙏
enzmrg 💫• 870@enzo-mir
Posted
Awesome challenge ! Just to be fair the footer/header does not match with the design in mobil view else if nice responsive web app.
Well done ;)
Marked as helpful
0 - Shakeel Ahmad• 60
@Shakeel-Coder
Submitted
i tried my best as i am the beginner in the front-end development. but i miss some serious issues such as email validation before submit and back from success message. i tried hard but i didn't know how to do this. so please if you have submitted this solution and know how to do this give me the some suggestion about that. i hope you check and give me the feedbacks.
enzmrg 💫• 870@enzo-mir
Posted
Hello there, nice challenge ! There are a lot of things to say but firstly :
- Try to avoid
divelement and use instead html sementics tag - Your parents elements :
body,div#maingot no height to be the container and you can not easily center the main content - Set
min-widthto your containers it will help for responsive
I guess that is your first FrontEnd Mentor project ? Well donne ! ;)
Marked as helpful
0 - Try to avoid
- cwatso• 70
@cwatso
Submitted
I have used flexbox to center this vertically by setting the height to 100vh, but I am curious if there is a more widely accepted way of doing this? Would love some feedback.
enzmrg 💫• 870@enzo-mir
Posted
Hello ! nice challenge ! To avoid the
100vhon your body try this :html,body {width : 100%; height:100%}; body {display : grid; place-items : center}And that's it you have a centered container ! Well done ;)
1 @Isis-gsantos
Submitted
Any commentaries are welcome!
enzmrg 💫• 870@enzo-mir
Posted
Hello nice work !!
I did same as you in the first place concerning le accrodion that you can open only one but this doesn't work like that you have to add a way to toggle the asks. And careful at your responsive, your button trim the content. Theses little mistakes are ignorable, that's just for the perfection ;)
Well done !
Marked as helpful
0- PKareem Gurung• 220
@kareemgurung
Submitted
Any feedbacks are welcomed. Thanks in advance.
enzmrg 💫• 870@enzo-mir
Posted
Hello ! nice solution jus be careful at you breakpoint between 768px and 1440px, your svg at the second section make and horizontal scroll cause of his width I guess, try to fix it !
1 - Yeni• 180
@YeniUvwo
Submitted
my middle boxes kept getting squashed when scaling down between my screens
enzmrg 💫• 870@enzo-mir
Posted
Hello ! nice work, to avoid this "middle box squashed" try to set you section in grid as :
display : grid; grid-template-columns : repeat(3, 1fr);
and set the
grid-template-columnsto1frat you breakpoint to get 1 column it will be more responsive friendly ! Well done ;)Marked as helpful
0 Hello! This is my Vue solution for Job-listing challenge. Tips are welcomed!
enzmrg 💫• 870@enzo-mir
Posted
Hello, this is a nice solution ! one tips ;)
- When you add tags something like
FrontendandSeniorand remove the first, the list doesn't filtering well see for the table of tags
Else if nice challenge !
Marked as helpful
1- When you add tags something like
- Juan Galvez• 50
@Galvez121
Submitted
It was a perfect project to practice my useState. I would some feedback on my css.
I could not find a way to make my svg component smaller in the media queries.
It helped me to learn how to deploy a React website using Git Hub.
enzmrg 💫• 870@enzo-mir
Posted
This is a nice challenge !
- Try to reset margin, padding and box-sizing to avoid the body
margin - Fix the size of you card container even if it's rating or submited
- Hover effect on submit button
cursor : pointer
Else if nice animation on rating ! Well done ;)
1 - Try to reset margin, padding and box-sizing to avoid the body
- PMaciej Lichoń• 810
@MaciekLichon
Submitted
React, Typescript, SCSS, localStorage
enzmrg 💫• 870@enzo-mir
Posted
Hello ! All of the app is nicely coded the one thing I have to say is :
- When the Editor/preview space is scrolling try to fix the sidebar to the viewport height and maybe make a scroll in the sidebar if you have too much markdown.
And if you can telle me what is the code/component to make others preview when you use
``or####, i'll appreciate :). Nice challenge !0 Did i do the accessibility part of this challenge correctly? Thanks, for any feedback in advance.
enzmrg 💫• 870@enzo-mir
Posted
Nice way to make this challenge maybe try to implement that the first accordion should be open at the start of the visit, finally as the preview.
Well done !
3- enzmrg 💫• 870
@enzo-mir
Submitted
🕓≈ 6h Api : search for an other api beacause cleanuri Api doesn't work there is a problem with
corsas if you use theno-corsmode it's maybe broken :(- I used instead url-shortener-service
enzmrg 💫• 870@enzo-mir
Posted
Preview is broken ! If someone can help me to fix it ?
0 - Arshad Ali Kaldane• 650
@IamArshadAli
Submitted
🙋♂️ Hello, Everyone,
Here is my solution for the Sunnyside Agency Landing Page.
- Scored
93%on Google Pagespeed Insights! 🤩 - Built with
ReactJS| Designed withTailwindCSS🛠️ | Mobile-First approach 📱 - Utilized
prettier-plugin-tailwindcssto auto-sortTailwindCSSclasses 🎨 - Separated CSS files for each component for better readability 📔
- Utilized
BEMprinciples to create a consistent structure ofTailwindCSSclasses - Minified the
CSSfiles to improve site performance 🚀
Do you have any insights to share❔
I'll be happy to hear them. 🤓
Code Together | Learn Together | Grow TogetherSunnyside Agency Landing Page Design using ReactJS & TailwindCSS
#bem#react#tailwind-css#vite#lighthouseenzmrg 💫• 870@enzo-mir
Posted
Looks amazing ! maybe careful at your navigation between 770px and 640px (breakpoints), it is visible and not hidden by the burger nav.
0 - Scored
@DennyIsNaive
Submitted
This project took some time because I had to choose from many different APIs all of which presented different data from each other. Overall, this project was very fun and has helped solidify my understanding of how APIs work. I even learnt a library, what a great experience.
enzmrg 💫• 870@enzo-mir
Posted
This look really good i had the same problem with API libs hehe but you could custom your marker with : markerIcon = L.icon({ iconUrl: "......svg", iconSize: [36, 46], iconAnchor: [20, 45], }); mark = L.marker([lat, lng], { icon: markerIcon, }).addTo(mapper);
In the "leaflet" package and try to put the api visitor at the start for logic but I don't consider the screenshot of preview 😅
Well done !
Marked as helpful
1- Toni• 420
@ToenSh
Submitted
This is the biggest and most challenging project I've completed here on frontend mentor and it was a pretty fun one. It's my second attempt at a fullstack project and it was the first time I used a service like supabase to handle the authentication and database hosting. For the rest of the backend (api routes) I chose to build my own express server so I could practice doing that more. The code isn't the cleanest right now because I haven't really done much refactoring at this point, but I'm going to do it (and testing) in the following days so any suggestions on that or any other areas of the code like the logic, styling, best practices or design patterns are very welcome.
enzmrg 💫• 870@enzo-mir
Posted
Well done only the preview but i guess that is due to animations when it's observe, but good job !
0 - Renukta-21• 130
@Renukta-21
Submitted
I could explain something you struggle to understand, any feedback is welcome :)
enzmrg 💫• 870@enzo-mir
Posted
Good job ! Just sad the little scroll in desktop view and between 1400px and 650px of screen view you have no padding to your layout, it's stick to the border of screen, try to fix it ! :)
0 - solitary_coder• 1,000
@kabir-afk
Submitted
Hey there , this was my attempt to ip-address-tracker app , for the resources I've used you can check my github readme.... as far as the data is concerned it may/may not be accurate.. not my fault , api at work needs to be worked upon...the map fails to be interactive , but i'll work on that later . . . and one more thing , the API I used didnt have ISP in json so I replaced it with country instead , what else ? idk. . . cheers!! 🥂🥂
enzmrg 💫• 870@enzo-mir
Posted
Hi ! firstly good job ! One things is on the responsive of the map :
- You should dispach map and header background in 2 grid instead of using flat height or margin
- Place you'r main content as "position : absolute" with "display : flex" in column and give gap Maybe for the api try to see my solution, I have used the "fly" method to travel with animation after ip checked.
Else if, nice one !
Marked as helpful
0
