Skip to content
OverviewSolutions
15
Comments
227
raya
@rayaatta

All comments

  • Brian Meinert•160
    @bmeinert8Submitted 9 days ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of figuring out the grid layout on my own this time without and help from GitHub co-pilot or google searching. I'm still fairly new to creating complex layouts with CSS Grid, so this was a big positive for me to be able to figure this one out based on my knowledge from previous documents and projects. I also added my own little hover feature on the desktop display to the cards, just for fun, and to customize the project a bit.

    What challenges did you encounter, and how did you overcome them?

    My biggest challenge was getting the testimonial cards laid out on the grid properly. I had to go through a couple times playing with the grid size and which columns / rows the cards span to get the layout to look properly

    What specific areas of your project would you like help with?

    I'm fully open to any help, tips, suggestions, and constructive criticism, or questioning on any aspects of this project. The more insight the better, in my opinion.

    Responsive testimonial grid challenge

    1
    raya•2,870
    @rayaattaPosted 9 days ago

    Hello @bmeinert8, Congratulations on completing this challenge🎉. I have some few suggestions though:

    1. Personally I don't think it's relevant to separate your css file for the media queries since this reduces performance when dealing with large scale websites

    2 It's not really a good idea to use css id's for styling since this creates specifity issues. It's much better to use classes instead.

    3 Your project is epic.

    Ciao ✌️

    Marked as helpful
    0
  • Davy•290
    @DavyZaneSubmitted 9 days ago
    What are you most proud of, and what would you do differently next time?

    Just a little training.

    What challenges did you encounter, and how did you overcome them?

    None.

    What specific areas of your project would you like help with?

    Nothing special. If you have some comments please share.

    huddle-landing-page-with-single-introductory-section-master

    1
    raya•2,870
    @rayaattaPosted 9 days ago

    Congratulations on completing your project. The link to your GitHub report isn't right though. You probably mistyped it or your repository is saved as private. All in all,project looks cool

    0
  • Øystein Håberg•10,650
    @Islandstone89Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of figuring out all the complexities, layout-wise. I'm also happy that I used container queries in practice! I used it on the "mechanical wireless keyboard" section, where I changed the flex-direction from column to row when its wrapper equals 500px or more.

    What challenges did you encounter, and how did you overcome them?

    The layout was a bit challenging, with some of the images reaching either the left or right edge. This meant that I had to write a lot of rules for the padding on elements. I also had to google how to create the dark orange overlay on one of the images.

    What specific areas of your project would you like help with?

    I'm always open for feedback :)

    Typemaster Landing Page

    1
    raya•2,870
    @rayaattaPosted 3 months ago

    Hey there👋.

    The only thing I think needs updating is the pre-order link. Elements that behave as buttons but are built using other tags such as span, div, a or others, should include a role attribute that equals to button just to improve on accessibility. Other than that impressive solution✌️.

    1
  • dkaffes•140
    @dkaffesSubmitted 10 months ago

    I used <a> for the buttons. Should i use the <button> element?

    What is the difference between <a> and <button> elements for use as a button link?

    The colors part of the style-guide.md was a bit misleading so some colors were picked using a color picker on the preview images given in the design folder.

    Order summary component - Flexbox, responsive and hover state

    1
    raya•2,870
    @rayaattaPosted 10 months ago

    Hello 👋dkaffes, congratulations on completing this challenge 🎉

    I have some suggestions for you.

    1 Divs do not carry any semantic value. You should replace

    <div class="c-order-summary">

    With

    <article class="c-order-summary">

    2 The illustration hero image is decorative. You should leave it's alt attribute empty i.e alt=""

    3 I noticed that you used <h2 class="summary-title"> .since it is the only heading in the document you should replace it with <h1 class="summary-title">.

    Here's a quick guide on how to use them:

    The <h1> to <h6> tags are used to define HTML headings. <h1> defines the most important heading. <h6> defines the least important heading. Only use one <h1> per page - this should represent the main heading/subject for the whole page. Also, do not skip heading levels - start with <h1>, then use <h2>, and so on. You can then style them in you css.

    Unlike what most people think, it's not just about the size and weight of the text It is about maintaining a clear and consistent hierarchy through out the document

    Lastly,concerning your question.

    A button element would be better choice because,if this was a real site.the cancel order would invoke JavaScript to cancel the order and proceed to payment would also call some jscript. But the anchor element is for linking pages or sections of an element so it shouldn't be here

    I hope this helps 🙃

    Otherwise your solution is neat👍

    Happy coding ✌️

    Marked as helpful
    1
  • raya•2,870
    @rayaattaPosted 10 months ago

    Hello 👋, congratulations on completing this challenge 🎉

    I have some suggestions to make your code much more responsive.

    1 You used width: 380px; On the .container This is okay but in case a screen is less than 380px wide then the card overflows the view port. You can make it more responsive by using max-width:min(90%,380px) This means it is 380px but on smaller screens it only covers 90% of the width.

    After making this adjustment your image will overflow because you set it to a fixed width of 370px. It is a bad practice to set a fixed height or width of an image. The most recommended practice is giving it a max-width.Usually

    img {
display:block;
max-width:100%;
}

    This would be a more responsive approach

    2 In order to center the card on any screen add this code snippet to body.

    min-height:100vh;
display:flex;
align-items: center;
justify-content: center;

    Then remove the margin properties from .container

    I hope this helps 🙃

    Otherwise your solution is neat👍

    Happy coding ✌️

    Marked as helpful
    1
  • raya•2,870
    @rayaattaPosted 10 months ago

    Hello Shubham Rawat👋, congratulations on completing your first FED challenge 🎉

    I have some suggestions you might find useful.

    1 Try to make your html more Semantic by wrapping the main page content inside a <main> tag . Replace <div class="container"> With <main class="container">. This changes nothing visually but Using it makes all the difference. Using semantic markup improves

    SEO

    And user experience (accessibility) for people using assistive technology such as screen readers.

    2 The qr code should have text inside the alt attribute stating what it is and where it leads i.e alt="qr code leading to frontendmentor.io

    3 I noticed that you used h2 .since it is the only heading in the document you should replace it with <h1>.

    Here's a quick guide on how to use them:

    The <h1> to <h6> tags are used to define HTML headings. <h1> defines the most important heading. <h6> defines the least important heading. Only use one <h1> per page - this should represent the main heading/subject for the whole page. Also, do not skip heading levels - start with <h1>, then use <h2>, and so on. You can then style them in you css.

    Unlike what most people think, it's not just about the size and weight of the text It is about maintaining a clear and consistent hierarchy through out the document

    I hope this helps 🙃

    Otherwise your solution is neat👍

    Happy coding ✌️

    Marked as helpful
    0
  • raya•2,870
    @rayaattaPosted 10 months ago

    Hello 👋Layan-khalil, congratulations on completing another challenge 🎉

    I have some suggestions you might find useful.

    1 Try to make your html more Semantic by wrapping the main page content inside a <main> tag . Replace <div id="container"> With <main id="container">. This changes nothing visually but Using it makes all the difference. Using semantic markup improves

    SEO

    And user experience (accessibility) for people using assistive technology such as screen readers.

    2 I noticed that you used <h2>Order Summary</h2> .since it is the only heading in the document you should replace it with <h1>.

    Here's a quick guide on how to use them:

    The <h1> to <h6> tags are used to define HTML headings. <h1> defines the most important heading. <h6> defines the least important heading. Only use one <h1> per page - this should represent the main heading/subject for the whole page. Also, do not skip heading levels - start with <h1>, then use <h2>, and so on. You can then style them in you css.

    Unlike what most people think, it's not just about the size and weight of the text It is about maintaining a clear and consistent hierarchy through out the document

    3 I noticed <a href="#">Cancel Order</a>. Since cancel order is intuitively not supposed to be a link. A better element would have been button

    4 I noticed font-size:16px; in your css. You should never use pixels when setting font related properties. Setting font sizes in pixels causes accessibility problems with people who adjusted their default font sizes on their computers.

    The best units for setting font size are relative units such as rem and em which can adjust with the user preferences. Checkout this article why font size should never be in pixels

    I hope this helps 🙃

    Otherwise your solution is neat👍

    Happy coding ✌️

    Marked as helpful
    0
  • raya•2,870
    @rayaattaPosted 10 months ago

    Hello Tharindu D👋, congratulations on completing your first FED challenge 🎉

    I have some suggestions you might find useful.

    1 Try to make your html more Semantic by wrapping the main page content inside a <main> tag . Replace <div class="card"> With <main class="card">. This changes nothing visually but Using it makes all the difference. Using semantic markup improves

    SEO

    And user experience (accessibility) for people using assistive technology such as screen readers.

    2 The qr code should have text inside an alt attribute stating what it is and where it leads i.e alt="qr code leading to frontendmentor.io

    3 I noticed

    <div class="title">

    in your html. Divs do not carry any semantic value therefore you should replace it with

    <h1 class="title">

    I hope this helps 🙃

    Otherwise your solution is neat👍

    Happy coding ✌️

    Marked as helpful
    1
  • raya•2,870
    @rayaattaPosted 10 months ago

    Hello kotyba-km👋, congratulations on completing your first FED challenge 🎉

    I have some suggestions you might find useful.

    1 Try to make your html more Semantic by wrapping the main page content inside a <main> tag . Replace <div class="card"> With <main class="card">. This changes nothing visually but Using it makes all the difference. Using semantic markup improves

    SEO

    And user experience (accessibility) for people using assistive technology such as screen readers.

    2 The qr code should have text inside an alt attribute stating what it is and where it leads i.e alt="qr code leading to frontendmentor.io

    I hope this helps 🙃

    Otherwise your solution is neat👍

    Happy coding ✌️

    0
  • raya•2,870
    @rayaattaPosted 10 months ago

    Hello Erick Sousa Gomes👋, congratulations on completing your first FED challenge 🎉

    I have some suggestions you might find useful.

    1 Try to make your html more Semantic by wrapping the main page content inside a <main> tag . Replace <div class="card"> With <main class="card">. This changes nothing visually but Using it makes all the difference. Using semantic markup improves

    SEO

    And user experience (accessibility) for people using assistive technology such as screen readers.

    2 The qr code should have text inside the alt attribute stating what it is and where it leads i.e alt="qr code leading to frontendmentor.io

    I hope this helps 🙃

    Otherwise your solution is neat👍

    Happy coding ✌️

    0
  • raya•2,870
    @rayaattaPosted 10 months ago

    Hello Divyansh Gemini👋, congratulations on completing your first FED challenge 🎉

    I have some suggestions you might find useful.

    1 Try to make your html more Semantic by wrapping the main page content inside a <main> tag . Replace <div class="card"> With <main class="card">. This changes nothing visually but Using it makes all the difference. Using semantic markup improves

    SEO

    And user experience (accessibility) for people using assistive technology such as screen readers.

    2 The qr code should have text inside the alt attribute stating what it is and where it leads i.e alt="qr code leading to frontendmentor.io

    I hope this helps 🙃

    Otherwise your solution is neat👍

    Happy coding ✌️

    Marked as helpful
    0
  • raya•2,870
    @rayaattaPosted 10 months ago

    Hello PARVATHISOMASUNDARAM👋, congratulations on completing your first FED challenge 🎉

    I have some suggestions you might find useful.

    1 Try to make your html more Semantic by wrapping the main page content inside a <main> tag . Replace <div class="card"> With <main class="card">. This changes nothing visually but Using it makes all the difference. Using semantic markup improves

    SEO

    And user experience (accessibility) for people using assistive technology such as screen readers.

    2 The qr code should have text inside an alt attribute stating what it is and where it leads i.e alt="qr code leading to frontendmentor.io

    3 I noticed that you used h2 .since it is the only heading in the document you should replace it with <h1>.

    Here's a quick guide on how to use them:

    The <h1> to <h6> tags are used to define HTML headings. <h1> defines the most important heading. <h6> defines the least important heading. Only use one <h1> per page - this should represent the main heading/subject for the whole page. Also, do not skip heading levels - start with <h1>, then use <h2>, and so on. You can then style them in you css.

    Unlike what most people think, it's not just about the size and weight of the text It is about maintaining a clear and consistent hierarchy through out the document

    I hope this helps 🙃

    Otherwise your solution is neat👍

    Happy coding ✌️

    0