Lucas Valverde• 10
@ValverdeLucas
Submitted
Asmaa Elfatayry
@asmaa-elfatayry
All comments
- Asmaa Elfatayry• 870
@asmaa-elfatayry
Posted
Hi Lucas, Great start, but don't give the container height let him fit the content and change just the padding to get a better design. Keep going
0 - Asmaa Elfatayry• 870
@asmaa-elfatayry
Submitted
Asmaa Elfatayry• 870@asmaa-elfatayry
Posted
@OUSSAMAACHICHE Thanks and good luck to you too 🙏
1 - Krish Parekh• 40
@krish3957
Submitted
As we are making this only for mobo and desktop device, when we resize our window to some width between this to it become very weird and do not look good.
Asmaa Elfatayry• 870@asmaa-elfatayry
Posted
HI Krish, you really did a great job. to remove the warning, you should add all the content of the body in the <main></main> tag.
to make the design responsive you should change the flex in small screen like this: flex-direction:column;
hope this can help you: https://www.youtube.com/watch?v=zqSXT4pHD9g https://www.youtube.com/watch?v=S0a7PEOi0do
Or you can use grid too: https://www.youtube.com/watch?v=rg7Fvvl3taU
Marked as helpful
1 - Have-Samuel• 350
@Have-Samuel
Submitted
The Responsiveness was quite challenge, any reference will do me good. Thanks
Asmaa Elfatayry• 870@asmaa-elfatayry
Posted
I hope this helps you
https://youtu.be/srvUrASNj0s
Marked as helpful
0 - Abhishek• 40
@Abhishekv-v
Submitted
Asmaa Elfatayry• 870@asmaa-elfatayry
Posted
Hi, Abhishek you should update all the URL paths it should be dot then / like this./ before the path of the image to get out from the CSS file first with . then enter the images folder with /
Marked as helpful
1 - Roxanne• 260
@rox-stahl
Submitted
Updating the selected/rating script into inner HTML. I got it working, then I worked on some CSS and it went away. I tried multiple ways to manipulate, but have gotten stuck. I would love your suggestions!
~Thanks so much 🫶🏼
Asmaa Elfatayry• 870@asmaa-elfatayry
Posted
to resolve the Accessibility error
- you should put all the content of body in <main></main> tag
https://www.w3.org/WAI/ARIA/apg/example-index/landmarks/main.html
https://www.tatianeaguirres.com/blog/2020-10-30-8-landmark-roles-that-every-front-end-should-know/
hope this helps you
Marked as helpful
0 - Roxanne• 260
@rox-stahl
Submitted
Updating the selected/rating script into inner HTML. I got it working, then I worked on some CSS and it went away. I tried multiple ways to manipulate, but have gotten stuck. I would love your suggestions!
~Thanks so much 🫶🏼
Asmaa Elfatayry• 870@asmaa-elfatayry
Posted
Hi Roxanne,
you did a great job but You only have two simple problems
first, you should make this loop block : ratings.forEach((rating)) outside the addEventListener function Parentheses after this : submitButton.addEventListener("click",()=>{})
second, you don't need these two lines
let rateId = e.target.id; const numberBtn = document.getElementById(rateId);
you can just do this:- const numberBtn=e.target; and it will work you don't need access to id after e.target this syntax makes an error
finally, don't forget add the e in Parentheses of addEventListener like this ("click", (e) => {})
0 - Thullyo• 40
@thullyoufrn
Submitted
Hello Everyone! 👋
I'm very happy to finish my second challenge here at Frontend Mentor! 😁
During development I was able to practice my CSS skills a lot. It was really nice to learn more and get used to coding in this language, which is essential for the frontend stack.
Well, I have a few questions to ask you guys:
- How can I make a parent the same height as the child?
- How can I vertically center elements inside a inline-block div?
I thank you for the attention!
Asmaa Elfatayry• 870@asmaa-elfatayry
Posted
Hi, Tullio
congratulation to finish the challenge
1- I think you should give the width to the parent first and then give the child width:100% to take the same width as the parent
2- to center elements vertically there are many ways :
https://www.w3docs.com/snippets/css/how-to-vertically-align-inline-inline-block-elements.html
https://tahsch.industrialmill.com/frequently-asked-questions/how-do-i-center-an-inline-block-element-in-css
0 - FHER AMABLE RICSE• 170
@FherAmableRicse
Submitted
is it possible to change placeholder(input) color in js?
Asmaa Elfatayry• 870@asmaa-elfatayry
Posted
yes to change the placeholder color using js you can use :
document.getElementById('the-id-name').style.placeholderColor = newColor;
or you can change it directly using CSS
https://www.geeksforgeeks.org/change-an-html5-input-placeholder-color-with-css/
to solve the Accessibility error you should put all the content of the body in the <main></main> tag
https://www.w3.org/WAI/ARIA/apg/example-index/landmarks/main.html#:~:text=The%20main%20landmark%20should%20be%20a%20top-level%20landmark.,main%20landmark%2C%20each%20should%20have%20a%20unique%20label.
Marked as helpful
1 - Okereke Clement Kalu• 170
@Clement1kalu-okereke
Submitted
I found the grid template areas very difficult can anyone recommend articles or videos to learn it?
Asmaa Elfatayry• 870@asmaa-elfatayry
Posted
here are some sources I hope help you
https://www.geeksforgeeks.org/comparison-between-css-grid-css-flexbox/
https://www.youtube.com/watch?v=-Wlt8NRtOpo
https://www.youtube.com/watch?v=t6CBKf8K_Ac
https://www.w3schools.com/css/css_grid.asp
and to resolve the ACCESSIBILITY ISSUES :
put all the content of body in <main> </main> tag
The page should contain a level-one heading so you should make the main title in <h1></h1> tag not h3
1 - Roman• 40
@r0mankeys
Submitted
I unfortunately was unable to complete this challenge exactly perfectly (the eye svg activated when hovered) and would greatly appreciate feedback on my code and how others who have tried this managed to make it happen with plain CSS
Asmaa Elfatayry• 870@asmaa-elfatayry
Posted
Hi, Roman
you do a great job to make the eye SVG when you hover you simply can make a div and put the SVG image or icon give the style with position or any style you want and finally make the div display none and when hover the display will be block
I will leave you some sources I hope the sources will clarify for you more:
https://www.geeksforgeeks.org/how-to-create-image-overlay-hover-using-html-css/
https://tutorialdeep.com/knowhow/create-image-hover-overlay-effect-css/#:~:text=The%20short%20answer%20is%3A%20use%20the%20CSS%20property,Create%20Image%20Hover%20Overlay%20Effect%20Transparent%20Using%20CSS
0 - Michelle• 150
@mcdulingm
Submitted
I started this a while back but at least I'm finally posting it. Any feedback will be appreciated. :)
Asmaa Elfatayry• 870@asmaa-elfatayry
Posted
Great work Michelle
1 - Kayla Moore• 20
@kaykaym01
Submitted
Personally struggled with sizing the image correctly using Flexbox. Any suggestions ?
Asmaa Elfatayry• 870@asmaa-elfatayry
Posted
hi Kayla, you did a great job but in the folder of images you have two images for the product one for desktop and one for mobile so you should make the background with the CSS background-image property and set it with the image for desktop and when we get the screen of a mobile 375px change it with responsive to be the image for mobile hope that will be helpful https://www.w3schools.com/cssref/pr_background-image.asp https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
to remove accessibility issues you should put all the content of the body tag in main tag <main>
</main>0 - Ahmad Muktar• 40
@Ahmuktar
Submitted
Asmaa Elfatayry• 870@asmaa-elfatayry
Posted
hello Ahmad,
-
you have a problem you didn't upload the folder of images so the image didn't appear so reupload the folder of images.
-
to remove accessibility issues you should add the attribute alt to the img tag this attribute appears when something wrong happens to the picture then the "alt" text will appear. you can see more here: https://www.w3schools.com/TAGS/att_img_alt.asp
-
finally, you should add all the content of the body in the <main></main> tag
0 -
- Akash Nandi• 160
@nandi1514
Submitted
Asmaa Elfatayry• 870@asmaa-elfatayry
Posted
hello, you have a problem that you write the path of image <img src="images/icon-ethereum.svg" alt="ethereum"> and you didn't upload the folders of images or you change the place of images and you didn't correct the path so the image can't appear so reupload the folder of images again. see this https://www.w3schools.com/Html/html_filepaths.asp
-and you should put all the code in the body element in <main></main> tag
0 @SOKOUDJOU-LEOPOLD
Submitted
What are the best practices
Asmaa Elfatayry• 870@asmaa-elfatayry
Posted
hello SOKOUDJOU, You have some problems:
first, you should use the same colors and style you will find this in the folders you download that named style. guide
second in the src of the img you must write ../ before the path image-qr-code.png to correct it hope this link help you https://www.w3schools.com/Html/html_filepaths.asp
third you should make a live site in GitHub and not take screen you can watch this video https://www.youtube.com/watch?v=o5g-lUuFgpg
and finally to solve ACCESSIBILITY ISSUES you should put all the code of the body inside <main></main> tag
0- Pawan Bhandarkar• 130
@BhandarkarPawan
Submitted
I would love for someone to review the HTML components I used. I decided to go with the Figure and fig caption elements for the card, instead of the traditional div. This felt appropriate based on the descriptions for these elements on the MDN docs. Is there an benefit or caveat to this approach?
Asmaa Elfatayry• 870@asmaa-elfatayry
Posted
hello Pawan, you do a great job. to remove accessibility issues you should add the attribute alt to the img tag this attribute appears when something wrong happens to the picture then the "alt" text will appear. you can see more here: https://www.w3schools.com/TAGS/att_img_alt.asp
second : you should add all the content of the body in the <main></main> tag
1 - Mahmoud Tag• 160
@Mahmoud-Tag
Submitted
Asmaa Elfatayry• 870@asmaa-elfatayry
Posted
hello Mahmoud, to remove accessibility issues you should add the attribute alt to the img tag this attribute appears when something wrong happens to the picture then the "alt" text will appear. you can see more here: https://www.w3schools.com/TAGS/att_img_alt.asp
second :
- you should add all the content of the body in <main></main> tag
- the page should have one h1 main heading
Marked as helpful
0 - Ubaid Hassan• 30
@webbb-wizard
Submitted
I appreciate all feedback from our community.
Asmaa Elfatayry• 870@asmaa-elfatayry
Posted
Hello Ubaid, you did a great job, but it seems that when you upload the challenge the image file is not found, So do not change its location or delete it and re-upload the image folder
Marked as helpful
1
