Looking to hire developers?
@A-amon
@nathanaelsanilo
Submitted
Hai, I'm facing problem to implement responsive background image. In this solution, I have not use any background image. I try to put background image based on breakpoint tailwind presets, but background image on intro section should be overlaying another image and other background image is having a gap on left and right. I'm still exploring how to use background image properly.
Any comments are welcome, Thanks in advance!
@A-amon
Posted
Hello! That's a job well done~ 😀
I hope these suggestions will be helpful:
Marked as helpful
@Nnenna-udefi
Submitted
@A-amon
Posted
Hello! Awesome work on this~ 😀
Here are some tiny suggestions:
<br> tags for the paragraph. Let the words wrap naturally.<body>. Then, set background-size:100%; so that the background image fills up the remaining space.@Rishabh-2001
Submitted
Hello sir/ma'am, This is my first project which I have med all alone. I had to take help at one place to put the eye icon while we hover on equilibrium image. Feel free to share me your thoughts and where I should work better. Thank you.
@A-amon
Posted
Hello! Good job on this challenge~ 😀
Here are few suggestions:
height of .inner-container to 100vh.fill:white; You can refer to this.
Note: You can get the SVG code by opening the SVG file inside your text editor (E.g. VsCode).h1 element. 😂 You can read this to find out more about headings.Marked as helpful
@maym42
Submitted
Hi, i would like to get feedback on my code 🧐💻
@A-amon
Posted
Hello! It's a very good job~ 😀
Here are a few tiny changes I would suggest:
<a> or <button> for the time buttons: Daily, weekly, monthly. (Those on the side) This will let screen reader users to know they are to be clicked. 😉time button's color when the page first loads.function showCardContent(time, data){
for (let i = 0; i < cardsTitles.length; i++) {
currents[i].innerText = data[i].current + "hrs";
prevs[i].innerText = `Last ${time}- ` + data[i].previous + "hrs";
}
/*play the animation */
addAnimationFadeIn();
}
The code above may or may not work but the general idea is there! 😁
Marked as helpful
@LeoSouzaNunes
Submitted
Hello everyone, I would like to receive some feedback about an issue occurred with my mobile content height, for some reason that I completely don't understand it doesn't let me scroll vertically as it suppose to do. Can anyone help me to understand what happened? (I had tried some things as overflow-y or even set a fixed height but nothing happened with the first hidden card)
@A-amon
Posted
Hello! To fix your issues, just remove align-items:center; from body element and set height:fit-content; on main element for mobile size using media queries. 😀
Marked as helpful
@Risclover
Submitted
This one was fairly simple for me! In fact, I was able to complete it in well under an hour, and I'm mad proud of myself for honing my HTML and CSS skills that far.
Any feedback you can provide would be nice. I did have a bit of trouble with the hover effect over the image, so any cleaner solutions would be greatly appreciated!
@A-amon
Posted
Hello! Great job for this. It looks very responsive too~ 😀
@vtorre90
Submitted
How can I improve my JS code?
@A-amon
Posted
Hello! Great job~ 😀
Here are few suggestions:
button or radiobutton elements for the tip selection (Screen reader users won't know it's to be clicked if you use a div.RESET text to Reset. Find out more here 😀innerHTML for the texts, an alternative would be textContent. You can read about their differences here. But for this current use case, both can be used. 😉for(const tipBtn of tipButtons){
tipBtn.addEventListener('click', handleTipClick)
}
const handleTipClick = (event) => {
let tipValue = 1 // Change it to whatever the default tip value is
const selectedTip = event.target.value
if(selectedTip === '5%'){
tipValue = 5
}
let totBill = Number(inputBill.value)/100*tipValue
let totPeople = Number(nrPersone.value)
totTipOutput.innerHTML =(totBill/totPeople).toFixed(2) + "€"
}
The code above is written with the assumption that radio buttons are used 😉. Also, it might or might not work but, the general idea is there. 😀
Marked as helpful
@romariojs94
Submitted
Hello, Guys! i am delivery the best of me in front end 💪.
@A-amon
Posted
Hello! Great work~
I will suggest just a few tiny changes:
alt value. For those you feel is not necessary to tell the user about, you can just leave it as alt="". 🥳h4 to h2 perhaps. Never skip the order. 😉 ReferenceYep, that's about it. 😀
@Kristiana12
Submitted
Hey Everyone! This is my solution to the FAQ section.
I need some help with a transition I have been trying to make but haven't succeeded yet.
When the answer 'hides' I want to transition the height, so that it closes smoothly, I tried to put a transition to .question__answer but I didn't see any effect. Does anyone have any suggestions?
Your answer is very much appreciated! Thank you in advance! :)
@A-amon
Posted
Hmm... such a weird issue! 👀 This might not be the best solution but, after referring to this, turns out that setting the height to a value with any unit other than % will solve it. For example, try height:3rem; instead of auto. 😲
@nlorens
Submitted
Total newbie here! I am having trouble making it responsive, any advice/feedback is much appreciated. Also if there are ways to code the layout more efficiently? Any comment is welcomed :)
@A-amon
Posted
Hello! Great effort~ 😉
Here are some suggestions( or things I think can be fixed)
height setting from .card. Instead, set the height for the image, either in px or other units. I don't recommend using vh or vw for this height. 😀top setting from .card. Then, set the body's height to 100vh. (The card is now at center for any size 🥳)h1 and h2 elements. Maybe put a h1 element containing the challenge's title like <h1> NFT card challenge </h1> and hide it using a screen-reader only 👁 class (You can check these out - Ref1, Ref2. Also, read this to find out about heading tags' usage..eth and .time respectively, you can give those two classes this: display:flex; align-items:center;.position:absolute; right:1.5em; on .time to align it to the right, maybe you can try out justify-content:space-between; on .feature. 😉Awesome work! 😀
Marked as helpful
@Andreeesc
Submitted
I can't get the region filter to work properly, can someone help me find the solution?
@A-amon
Posted
Hello! I might be wrong but in React, you cannot get the latest, updated state right after setting the state. Refer here You have to either use useEffect (and set the trigger to be the 'region' state) or use the 'e.target.value' directly.
Marked as helpful
@martinelias1312
Submitted
Any suggestions on my html semantic markup ? Feedback appreciated !
@A-amon
Posted
Hello! It looks good~ 😀
Maybe just add the .btn class to the .btn-sign_up directly so that the clicking area is as wide as it looks. That's about it from me. 😁
Marked as helpful
@SlimBloodworth
Submitted
Hi Everyone! I finished the challenge and I'm really happy with how it came out. I'm looking for any feed back you might think would be helpful, and I'm very interested in your input on the code itself concerning legibility, organization, content structure, as well as drying up the code. Is there some place where I could have condensed it better? Is there a way I can make it more reusable if someone wanted to make changes, updates, or any other adjustments? Are there any accessibly additions or changes that would benefit the program? Are there any questions you have for me on why I chose to do something the way I did? I always appreciate your feedback and so far it has always been very helpful and educational! Thanks in advance y'all! -Slim
@A-amon
Posted
Hello! Awesome job~ 😀
I've got a few suggestions:
position:relative; on .image-container so that the eye icon/image 👁 is center of this parent container.display:flex;
align-items:center;
alt attribute on your images. I noticed some of them don't have it. You can leave the value empty like this: alt="". 😉cursor:pointer; and color change on hover makes the text in .creator-container looks like a link so, maybe just change the p tag to an a tag instead since it's possible for it to be a link. 🔗Marked as helpful
@Joe-Lindie
Submitted
Good evening,
This is my second Frontend Mentor project, and it was a little too difficult for me. (I've only been studying since September)
There are several bugs I can't fix.
I'm sure there are plenty of other issues, but for my second project, I don't think it's too bad. ALL feedback is welcome.
If anyone could help me fix these bugs, I'd appreciate it.
Lots of love to my web dev community,
Joe
@A-amon
Posted
Hello! Amazing work there~ 😀
I've got a few suggestions:
.nav-bardisplay:flex;
align-items:center;
justify-content:space-between;
.display-img images couldn't fit inside a row on laptop size. You can fix this by setting flex:1; to your picture tags within instead of setting width:25vw;. Then, on mobile, simply use a media query to change that to flex:100vw;..show navbar, you can use media query to override/reset .show styling on desktop sizes. 🖊<button> for the hamburger button since it's a well, button. 😂 I will let screen reader users to know it's one. Check this out 😉.<a> tags.aria-label attribute on the <a> tags and set it to 'Facebook' or other values, then leave the alt attribute empty (This is what I would do 😀). You can check this out.Marked as helpful
@Mozzarella-chz
Submitted
I am still struggling to understand when to use margin vs. padding. In this challenge I only used margin. I really dont know if this kind of coding would be "passing" in a real world setting as the CSS feels clunky to me. But it is functional!
@A-amon
Posted
Hello! You did a great job~ 👏
Just a tiny suggestion, maybe try setting font-family:inherit; to the button so that it uses same font as the others. As for the margin vs padding, personally, I would use padding for what it is (internal spacing) and margin for external spacing (spaces between the element itself and neighboring elements). Here's a good article explaining the difference. 😉
So let's say, I want to have the content of an element to have some spacing from the border, for instance, those .Luxury-block, .SUV-block and .Sedan-block, I would set padding to them instead of assigning margin to each individual items (img, .cars-text) inside of them. 😁
And if I want to put some spacing between each of those block, I would use margin. For example, a margin-right:1rem; for a 1rem spacing between .Luxury-block and .SUV-block. ↔
These are just how I would utilize padding and margin. 😀 It might vary between person, I think.
Marked as helpful
@bws10
Submitted
This is my first attempt at one of these challenges.
I'm trying to teach myself and have no previous experience but looking to learn CSS and JS front end development.
I'm sure my code is a bit messy and i welcome any constructive feedback.
@A-amon
Posted
Hello! It looks great. So is the responsiveness~ 😀
Here are few suggestions:
<main> tag. 🏠<h1> heading. Probably something like this:<h1 class="sr-only">Order summary component</h1>
Note: The .sr-only class is to hide it from view but still available for screen reader. Here is one way to do it. 😉
<button> or <a> for your 'Proceed to payment" and "Cancel" elements.<h1>, you can read up on heading levels if you get Heading levels should only increase by one accessibility issue 👌@hi-reeve
Submitted
hey guys, this is my version of url shortening. please do give me a feedback. Thanks! :D
@A-amon
Posted
Hello! And wow~ Neat work! 😲
Maybe use <a> for the .nav__link, .footer__title and .footer__link. And also wrap those social media icons and header logo in <a> tags too. 😀 As for .nav__toggle, use a button tag.
By the way, how did you make the shortening form unclickable when it's shortening? 🤔 I couldn't find the code via Inspect. 😂
Marked as helpful
@dmitrymitenkoff
Submitted
This has been a fun and challenging project. It's the first time I've used Parcel and new Dart Sass. I'm not an expert in Sass but I'm keen to learn more about using "@use" & "@forward" syntax - so any feedback would be appreciated. Also, if anyone could point me to a good, preferably written, tutorial on a workflow using Parcel, I'd really appreciate that too as I feel in this project I've guessed my way through a lot of Parcel-related stuff. Thanks guys!
@A-amon
Posted
Hello! I gotta say, your code is neat and clean 😉
Here are some suggestions you might find helpful:
li elements should be/have an interactive element. 🖱 They can be button or a. In my solution, I used button and gave them the role="tab". 😁 You can check out accessible tabs if you want to use the same approach. 😀alt="". You can read this. 🙌populateMonthly(), populateWeekly() and populateDaily(), you can create a function populateStats() for e.g., to do all three. The difference in these functions lies in timeframes.weekly.current where the weekly could be replaced with daily or monthly. This can be passed as argument to the newly created populateStats(). 😉function populateStats(timeframe) {
let datacounter = 0;
cards.forEach(card => {
const workHours = card.querySelector('.stats__hrs--num');
const prevWeekHrs = card.querySelector('.stats__prev__hrs');
workHours.textContent = data[datacounter].timeframes[timeframe].current;
prevWeekHrs.textContent = data[datacounter].timeframes[timeframe].previous;
datacounter++;
});
}
The code might or might not work. You'll have to test it out and make changes accordingly. 😂
datacounter variable to do it. forEachcards.forEach((card, index) => {
...
})
By the way, I finally know what to put into typography.scss, thanks to you! 😀 Awesome work~
Marked as helpful
@FelixCriollo
Submitted
thanks for see my challenge.
pd: if you see undefined restart the page :: 'c
@A-amon
Posted
Hello! It's an amazing work, really! 😲
But here are some suggestions:
main landmark tag.const dailyData = [
{
current: 0,
previous:0
},
...
]
@daniel-hennig
Submitted
This challenge was a bit tricky though, because some of the provided images didn't have the blue background shapes as they have in the design images - so that I had to create the shapes by myself with Adobe XD (I edited svg images with XD the first time).
After all, I tried my best best and I highly appreciate any feedback/ suggestions. You can be as harsh as you like on me. What do you like the most? What can I improve? I want to go moon with my skills, so that I can help others better, too:)
@A-amon
Posted
Hello! That was a great animation. The responsiveness is good too~ 😀
Here are few suggestions:
<nav> went nuts! 😅<a> tabs so that the click area is larger and not restricted to the text.Marked as helpful
@RandyBrilliant
Submitted
In this challenge, I try to use my knowledge learn from books and the internet in implementing semantic HTML markup and responsive design for the webpage. Any suggestions and feedback are appreciated. Thank you and happy coding :). [UPDATED] I have fixed the issues thanks to the community :).
@A-amon
Posted
Hello! Great work. The responsiveness looks good too~ 😀
Maybe just change the .card min-height value to fit-content. Else, there is quite some space on mobile size (this change works fine for larger sizes too).
As for the accessibility report:
<dt> and <dd> tags (and other tags as mentioned in the report) under <dl>.<main>. For better understanding on what to do, you may refer thisP.s. Thanks for helping me learn about <dt> and dd tags 😉
Marked as helpful
@Hemsundar15
Submitted
Any feedback would be great!!!
@A-amon
Posted
Great work! It's responsive too~😀
Here are a few suggestions:
<section> inside <main><section>
<h2>Title</h2>
<div>
<h3>Sub-Title</h3>
...
<div>
<h4>Sub-sub-title</h4>
...
</div>
</div>
</section>
^ This is just my understanding though so do read up on it for more accurate explanation 😀
<button> instead of a <div>.<a> tags that wrap around the icons and logo should have a text describing where it links to (For screen reader users) 🔊. And since this text is hidden visually 👻, I usually would use aria-label attribute on the <a> tag. But you can also solve this by adding sr-only class (and do its CSS) to hide the text Reference.Marked as helpful
@CoderPr0
Submitted
This honestly took way too long to make and I feel like I made a ton of mistakes, will probably need to relook into it later. If anyone notices any mistakes, repetitiveness or simply easier ways to do things please let me know.
@A-amon
Posted
Hello! The site looks good. So is the responsiveness 😀
Here are few suggestions:
<main> instead of <header>float:right; to place the arrows to the far right ➡ so that they are all aligned.Marked as helpful
@Hemsundar15
Submitted
Any feedback would be great!!!
@A-amon
Posted
404 repository link 😂