Skip to content
OverviewSolutions
41
Comments
19
Asmaa Elfatayry
@asmaa-elfatayry

All comments

  • Asmaa Elfatayry•870
    @asmaa-elfatayryPosted 8 months ago

    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-elfatayryPosted over 1 year ago

    @OUSSAMAACHICHE Thanks and good luck to you too 🙏

    1
  • Krish Parekh•40
    @krish3957Submitted almost 2 years ago

    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.

    Responsive page using flexbox

    1
    Asmaa Elfatayry•870
    @asmaa-elfatayryPosted almost 2 years ago

    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
  • Asmaa Elfatayry•870
    @asmaa-elfatayryPosted about 2 years ago

    I hope this helps you

    https://youtu.be/srvUrASNj0s

    Marked as helpful
    0
  • Asmaa Elfatayry•870
    @asmaa-elfatayryPosted about 2 years ago

    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-stahlSubmitted about 2 years ago

    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 🫶🏼

    Interactive Rating Component

    2
    Asmaa Elfatayry•870
    @asmaa-elfatayryPosted about 2 years ago

    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-stahlSubmitted about 2 years ago

    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 🫶🏼

    Interactive Rating Component

    2
    Asmaa Elfatayry•870
    @asmaa-elfatayryPosted about 2 years ago

    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
    @thullyoufrnSubmitted about 2 years ago

    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!

    NFT Preview Card Component

    2
    Asmaa Elfatayry•870
    @asmaa-elfatayryPosted about 2 years ago

    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
  • Asmaa Elfatayry•870
    @asmaa-elfatayryPosted about 2 years ago

    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
  • Asmaa Elfatayry•870
    @asmaa-elfatayryPosted about 2 years ago

    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•60
    @r0mankeysSubmitted about 2 years ago

    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

    NTF Preview Card Component

    2
    Asmaa Elfatayry•870
    @asmaa-elfatayryPosted about 2 years ago

    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
  • Asmaa Elfatayry•870
    @asmaa-elfatayryPosted over 2 years ago

    Great work Michelle

    1