@MelvinAguilar
Submitted
Hi there 👋, I’m Melvin and this is my solution for this challenge. 🚀
🛠️ Built With:
- TailwindCSS
- npm - prettier
Any suggestions on how I can improve and reduce unnecessary code are welcome!
Thank you. 😊✌️
Looking to hire developers?
@Azkanorouzi
@MelvinAguilar
Submitted
Hi there 👋, I’m Melvin and this is my solution for this challenge. 🚀
🛠️ Built With:
Any suggestions on how I can improve and reduce unnecessary code are welcome!
Thank you. 😊✌️
@Azkanorouzi
Posted
Hello melvin, great solution congrats on finishing that, I am really surprised by how precisely identical your solutions are to the main design, are you using some kinda app or something to help you get the most accurate size in px? if you do please let me know, and keep it up, your work is really impressive, hope you continue this journey and never give up, good luck.
@correlucas
Submitted
👾 Hello, Frontend Mentor coding community. This is my solution for the Testimonials Grid Section.
Feel free to leave any feedback and help me improve my solution or make the code clean!
🤩 I had a lots of fun building this challenge! Mainly because I understood how to apply a focus effect on the card hovered with only CSS and I've also created my own design changes and personal improvements to the challenge elements.
SPECIAL THANKS to @elaineleung that show me how to add different animation stats for the cards in the intro.
I added some features:
I'll be happy to hear any feedback and advice!
@Azkanorouzi
Posted
Hello Lucas, I hope you are doing great 😃. focus effect is absolutely gorgeous👀, would you give me a hint on how to do this by myself if you don't mind?
Marked as helpful
@KaanKaramese
Submitted
My solution for stats preview card challenge. All feedbacks are welcome. (especially regarding accessibility and responsive design)
@Azkanorouzi
Posted
hello Kaan 😀 your card's text collapses sometimes I guess you should set your card's height on auto so that it can grow depending on content inside of it , if that didn't work play around with padding between the texts a little bit, I hope it helps . nice job btw 👍
Marked as helpful
@FluffyKas
Submitted
This is my first Junior challenge completed! ^^ I'm more or less satisfied with the final result but I had a hard time coming up with a nice-looking layout for medium screen sizes and I feel like I had to use one or two small "hacks" to make things look like how I wanted. I sometimes felt a bit frustrated and confused about the length of this design, as so far I only did smaller components, but I'm sure this is something I'll get used to ^^
Pretty please give me your honest feedbacks about it, I'm sure there's plenty to improve on my html, how I organised my code and on these small "hacks". One of these hacks was how I aligned the feature divs in the workflow section. The images are not the same width and height, which made the text look all over the place. The only solution I could came up with is to set a fixed height for the image holder divs, but I'm sure there's a more elegant way to do this (probably it's just my lack of knowledge of flexbox).
I'd appreciate it if you take time to look at my work. Have a lovely day everyone! :)
edit: After looking at the report, I'd like to ask, do I need to provide an alt
for all images even if I set aria-hidden
for them?
@Azkanorouzi
Posted
it looks pretty nice , good job 🥳
I had not used the reset before, and tried to use it this time around. Whilst it cleared the inputs automatically, i still have to figure out its proper use as my variables are not being reset - reset.addEventListener("reset", function())
@Azkanorouzi
Posted
hello chamu nice work ! I would be appreciate if you take a look at my solutions and give me your honest advice😊
@Halo-last
Submitted
I've first tried to make it through Mobile, I had trouble adjusting the margin for the stats of the card for mobile. And for the re-sizeing of the font for dekstop is a bit wrong will work on it.
@Azkanorouzi
Posted
good job ✌️
@BelayAdamu
Submitted
My third project on Frontend Mentors. I'm slightly dissatisfied with my solution because I used a different API for tracking IPs than what was suggested by Frontendmentor. This is because the recommended one allows only up to 1000 calls whereas the one I used allows up to 10000 calls a month. But as you will find out results of the this API are somewhat less accurate. Please do provide me suggestions on where I can find alternative APIs for the app. It goes without saying comments on other features of the app are also very welcome. Thank you
@Azkanorouzi
Posted
well done it is impressive !
Marked as helpful
@brediedis
Submitted
This is my first challenge, so i have a couple of questions
In the style guide file there are defined desktop and mobile resolutions. In that case, does the desktop version of the page has to look good up until that specified mobile resolution or it's just up to me when i switch to mobile or i can also make up my own "tablet" version of the site? Because i think my solution switches to mobile too early.
When using SCSS for example, is it advisable to use media queries in each class / selector if the breakpoints are mostly if not all the same?
Thank you!
@Azkanorouzi
Posted
hello you can make your tablet version as well .
@NecheyGrace
Submitted
Please give me honest and sincere feedbacks.
@Azkanorouzi
Posted
hello Amera nice work ! I have some feedbacks that might be helpful though , first you need to use <a> tag for links in footer of your solution and also you should probably use cursor : pointer for buttons .
and at some points for small screens devices for instance at 250px width and less your icons and images become too small I think this happen because you are using relative units for your icons or images .
I would be appreciated if you have any opinion or advice for my solutions and happy coding btw.😊
@vanzasetia
Submitted
Hello Everyone! 👋
Newbie challenges are tricky challenges. 😬
Now for the questions:
button
element for Change and use anchor tags for Proceed Payment and Cancel Order. Do you think it's true or not?Order Summary
words, do you think it can be a heading or other tag?Of course, other comments or any issues that you may find, feel free to write it down.
Also if you want me to give my feedback on your solution, feel free to give me the link on the community feedback! I will be glad to help you too!
Thanks!
@Azkanorouzi
Posted
good job ✌️🙌 please take a look at my solution for this challenge and let me know if you have any feedback I would be appreciate 😊 your feedback has been helpful for me last time .
Marked as helpful
@asadali209
Submitted
Feedbacks are appreciated :) Main problem was adjusting background image which I somehow solved by using background-size: contain. This is the first time I have used this property.
@Azkanorouzi
Posted
nice job
@muhammadshajjar
Submitted
Hello, everyone! 👋
Open to any feedback and recommendations, Would love to hear some feedback or suggestions on improving my code quality. Your suggestions and feedback are highly appreciated.
Happy Coding :)
@Azkanorouzi
Posted
hi muhammad congratulation . it looks perfect but in my opinion you should use media query for desktop and big screen devices at about 1100px width . because when width go further than 1100 px image is too big or you can just reduce the width of you image at that point . 😊✌️
Marked as helpful
Loved working on this project. Got to use the Owl Carousel2 for the first time for the testimonials. I'm not yet done with the tablet responsiveness and setting the background images well but so far I'm loving the progress.
@Azkanorouzi
Posted
good job it seems quite good ✌️
@MagWebDev
Submitted
Hey. Please I need a feedback for this challenge. Please check if I'm even going in the right direction. How to get this color on image? I tried to use :after pseudoclass but it didn't work. Will be gratefull for your feedbacks.
@Azkanorouzi
Posted
hello if you want to add a color overlay to your img you can create an empty div tag and give it a color and decrease opacity and after that you can increase z-index of that div so its going to appear right after the image. good luck and happy coding 😊🙌 remember that div tag must be after img
Marked as helpful
@lancemartija
Submitted
Hi again! I would like to present to you my version of this project. I'm pretty sure I got it accurately, though what I'm absolutely sure of is that my Grid game is mediocre! Hahaha. Anyway, check it out and please don't hesitate to leave your opinion about my work.
I would love to know what you think I should improve with my HTML5 semantics and the way I use Grid so that I'll be able to improve them next time.
Thank you and keep on coding!
@Azkanorouzi
Posted
good job mate
@AntonioHouTX
Submitted
Any feedback would be greatly appreciated!
@Azkanorouzi
Posted
hello 😊 add this line of code to have a better hover effect for buttons(replace them ) : id of your button:hover{ background : transparent; color:white; border:2px solid white; } id of your button{ transition : .5s; } also you should increase button height so its gonna be more similar . good luck mate 🙌
Marked as helpful
@abno-24
Submitted
I have build this design using flexbox and grid. It was quiet simple project and I have done my best to make it responsive. Please have a look on it and feel free to give feedback. Please let me how can I improve my CSS Skill. Thank You.
@Azkanorouzi
Posted
👍💫
@naveensing575
Submitted
The CSS code is not fully responsive but I enjoyed doing my FIRST task #Front_end_developer_journey
@Azkanorouzi
Posted
hello my friend if you notice there is a bit difference in background it looks like it does not cover all the image . I had same problem until I find out how to fix it. you can simply use img tag instead of background property and use src to import image to img tag to fix it after that you can create an empty div just after the img tag and give it a color and reduce opacity in order to give it a color overlay and you are good to go . nice work btw
Marked as helpful
@afrussel
Submitted
Learn a lot while working on this challenge, specially the flipping animation part. Make this template like anyone can easilly download this and use for their purpose. Tried my level best to make it like professional template.
@Azkanorouzi
Posted
Good job mate
@AllanKirui
Submitted
I collaborated on this project with Veronika Palto (https://www.frontendmentor.io/profile/JepardMay)
Any feedback you might have is welcomed (:
@Azkanorouzi
Posted
Well done congratulation
Marked as helpful