Skip to content
OverviewSolutions
27
Comments
5898
Abdul Khaliq 🚀
@0xabdulkhaliq

All comments

  • Abdul Khaliq 🚀•72,480
    @0xabdulkhaliqPosted 4 months ago

    Hello Nanba 👋. Congratulations on successfully completing the challenge! 🎉

    • I have a suggestion regarding your code that I believe will be of great interest to you.

    MAKING QR CODE ACCESSIBLE 📸:

    • The QR Code Component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute which should explain the purpose of the image.
    • The alt with qr-code is not even explaining for what the QR image need to be used.
    • So update the alt with meaningful text which explains like QR code to frontendmentor.io
    • Example: <img src="./images/image-qr-code.png" alt="QR code to frontendmentor.io" class="qr-code-img">

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful
    2
  • Faye•10
    @FayeKsSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of completing my first project after a month of watching and reading tutorials.

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

    The challenges i had while working on this project mostly had to do with CSS. I overcame them by using google, Chatgpt, and Youtube tutorials. Overall, i would say Kevin Powell's Youtube tutorials helped the most.

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

    Any constructive criticism on how i can better my html and css skills is welcome.

    Responsive QR Code solution using Html and CSS

    1
    Abdul Khaliq 🚀•72,480
    @0xabdulkhaliqPosted 7 months ago

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have a suggestion regarding your code that I believe will be of great interest to you.

    MAKING QR IMAGE ACCESSIBLE :

    • The QR Code Component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute which should explain the purpose of the image.
    • The alt with qr is not even explaining for what the QR image need to be used.
    • So update the alt with meaningful text which explains like QR code to frontendmentor.io
    • Example: <img src="/images/image-qr-code.png" alt="QR code to frontendmentor.io">

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    I Gladly welcome you to the Frontend Mentor Community, Happy Coding!

    0
  • Gwenaël Magnenat•1,310
    @gmagnenatSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I find my solution close to the design, so I'm quite happy about it. I learned more about the use of pixel vs rems and tried to apply this at the maximum in this solution.

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

    It took me some time to figure out how to handle properly the different spacing and sizes. At first the challenge seems easy but there are many small details. With proper line-height and letter-spacing it helped get as close as possible to the design. I wrapped the card content in a form with a submit button, I will search more if there are specific markup to add to improve accessibility.

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

    I'd like suggestion on how to use more mixins to reduce the main.scss. If you can give me recommendation on accessibility markup I could add?

    Product preview card (SCSS, BEM)

    #sass/scss#bem
    1
    Abdul Khaliq 🚀•72,480
    @0xabdulkhaliqPosted 7 months ago

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have a suggestion regarding your code that I believe will be of great interest to you.

    HTML 🏷️:

    • I need to address a minor semantic improvement which may help accessibility devices to properly announce the old price of the perfume.
    • Currently the old price is not being properly announced, you have used span element for that with text-decoration: line-through css property.
    • Instead of customizing span there's actually a native semantic html element which comes handy in these situations. it is del element
    • So you can use like this <del>$169.99</del>
    • These are the tips which improves the accessibility in real world situations.
    • If you have any questions or need further clarification, you can always check out my submission and/or feel free to reach out to me.

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful
    3
  • Abdul Khaliq 🚀•72,480
    @0xabdulkhaliqPosted 7 months ago

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have a suggestion regarding your code that I believe will be of great interest to you.

    CSS 🎨:

    • Let me explain, How you can easily center the component for better layout without usage of absolute positioning.
    • We don't need to use absolute to center the component both horizontally & vertically. Because using absolute will not dynamical centers our component at all states
    • To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚.
    • For this demonstration we use css Grid to center the component
    body {
    min-height: 100vh;
    display: grid;
    place-items: center;
}
    • Now remove these styles, after removing you can able to see the changes
    .temple {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
    • Now your component has been properly centered.

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful
    2
  • Célia•30
    @Celia-HCSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I'm glad I tried to apply what I learned about sass and bem notation. I'm sure I've still got a lot to learn, but this practical exercise has helped me to review the basics, which will help me to progress further.

    What challenges did you encounter, and how did you overcome them?
    • Organising my code and using the correct html semantic
    • Position of the markers of the lists
    What specific areas of your project would you like help with?

    It's my first attempt at using Sass and BEM notation. Any feedback on this is welcome, I'm not sure I'm using these tools correctly yet.

    Recipe with sass

    #sass/scss#bem
    1
    Abdul Khaliq 🚀•72,480
    @0xabdulkhaliqPosted 7 months ago

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have a suggestion regarding your code that I believe will be of great interest to you.

    PREVENT LAYOUT SHIFTS 📉:

    • Your solution needs to be improved to prevent Cumulative Layout Shift (CLS) which results a visually unstable or janky website, particularly on mobile devices.
    • This can happen because of leaving the Image and/or video elements without adding explicit width and height attributes.
    • The multimedia elements like img which aren't explicitly declared with height and width attributes are usually re-sized using CSS (either on the image itself or the parent container). When this happens, the browser can only determine their dimensions and allocate space for them once it starts downloading the 'unsized images' and/or videos.
    • You may notice that when the browser fetches these images, your page content is constantly being pushed down or moved around from its original position (i.e., layout shifts) as the browser resizes the images and positions them on your page.
    • Currently the img element have no explicit width and height to prevent CLS,
    <img src="assets/assets/images/image-omelette.jpeg" alt="Omelette and salad" class="container__img">
    • Here's an example which could help you to prevent CLS,
    <img src="assets/assets/images/image-omelette.jpeg" width="1312" height="600" alt="Omelette and salad" class="container__img">
    • The height and width needs to have the actual measurements of that corresponding image. I shown mobile image as an example because Mobile devices can be easily affected by CLS than Desktop devices.

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful
    2
  • Mihai Niculae•250
    @mihainrsSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I have focused more on the overall responsiveness this time around, ensuring it looks good on 1920, 1440, tablets and smaller mobile screens, and I have managed to get the CSS and HTML part out of the way fairly quickly.

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

    Once again, given my inexperience with Javascript, I struggled quite a bit to get the code to work, and even in its current state, it's not exactly as it should be.

    Still, I was able to get it all down myself which it's pretty nice. I clearly have to create many more projects to get used to and better at it haha

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

    Any feedback helps, as always!

    Contact-form

    1
    Abdul Khaliq 🚀•72,480
    @0xabdulkhaliqPosted 7 months ago

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have a suggestion regarding your code that I believe will be of great interest to you.

    CSS 🎨:

    • Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using margin or padding.
    • We don't need to use margin and padding to center the component both horizontally & vertically. Because using margin or padding will not dynamical centers our component at all states
    • You already using Flexbox for layout, but you didn't utilized it's full potential. Just add min-height: 100vh; to properly center the component.
    • Now remove these styles, after removing you can able to see the changes
    #main-container {
  margin-top: 5em;
}
    • Now your component has been properly centered

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful
    1
  • Aynard•120
    @arnoldagabaSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I think I'm proud of being able to apply the skills I gained already so without using JavaScript. I think I should learn JavaScript to make my work easier next time.

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

    I read somewhere that I'd need to use JavaScript to come up with the QR code. I later learned that I could use a Static image to ease my work as workaround of not using JavaScript.

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

    For this project specifically, I think I'm okay though I'd welcome any input on how I could have done things better.

    QR code component using flex box

    1
    Abdul Khaliq 🚀•72,480
    @0xabdulkhaliqPosted 7 months ago

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have a suggestion regarding your code that I believe will be of great interest to you.

    QR iMAGE ALT TEXT 📸:

    • The QR Code Component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute which should explain the purpose of the image.
    • The alt with QR Code is not even explaining for what the QR image need to be used.
    • So update the alt with meaningful text which explains like QR code to frontendmentor.io
    • Example: <img src="/images/image-qr-code.png" alt="QR code to frontendmentor.io">

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful
    1
  • mkhantk•200
    @mkhantkSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    It doesn't take much time like the last one. Sort of improvement.

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

    It all went well. Another practical experience.

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

    Any suggestions? Thanks.

    Responsive product preview card using flexbox

    2
    Abdul Khaliq 🚀•72,480
    @0xabdulkhaliqPosted 7 months ago

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have a suggestion regarding your code that I believe will be of great interest to you.

    PiCTURE TAG 📸:

    • Looks like you're currently using media queries for swapping different version of image,
    <img src="images/image-product-desktop.jpg" alt="product-image-desktop" class="image1">
<img src="images/image-product-mobile.jpg" alt="product-image-mobile" class="image2">

.image1 {
  width: 100%;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  min-width: 50%;
}
.image2 {
  display: none;
}

@media (max-width: 600px) {
  .image1 {
    display: none;
  }
  .image2 {
    display: block;
    width: 100%;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
  }
}
    • So let me introduce the picture element. It's commonly used for responsive images, where different image sources are provided for different screen sizes and devices, and for art direction, where different images are used for different contexts or layouts.
    • Example:
    <picture>
  <source media="(max-width: 768px)" srcset="small-image.jpg">
  <source media="(min-width: 769px)" srcset="large-image.jpg">
  <img src="fallback-image.jpg" alt="Example image">
</picture>
    • In this example, the <picture> tag contains three child elements: two <source> elements and an <img> element. The <source> elements specifies different image sources and the conditions under which they should be used.
    • Using this approach allows you to provide different images for different screen sizes without relying on CSS, and it also helps to improve page load times by reducing the size of the images that are served to the user
    • If you have any questions or need further clarification, you can always check out my submission and/or feel free to reach out to me.

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful
    2
  • Abdul Khaliq 🚀•72,480
    @0xabdulkhaliqPosted 7 months ago

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have a suggestion regarding your code that I believe will be of great interest to you.

    LABELS 🔖:

    • input elements wants a label associated with it
    • A <label> is used to create a caption for a form control. The <label> can be associated with a form control either implicitly by placing the control element inside the label element, or explicitly by using the for attribute
    • Effective form labels are required to make forms accessible. The purpose of form elements such as checkboxes, radio buttons, input fields, etc, is often apparent to sighted users
    • Even if the form element is not programmatically labeled. Screen readers users require useful form labels to identify form fields, So here using aria-label="{values}" attributes for input is enough to be accessible
    • Example:
    <input type="text" aria-label="First Name" placeholder="First Name" id="first-name" name="first-name">

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful
    1
  • Payal G•50
    @payalg22Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I took relatively less time developing this one, in addition to proper usage of CSS properties. I'm now very comfortable using Flex.

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

    It was a task to align elements vertically, majorly the buttons as close to the design. However, after moving things around, it turned out to be super easy.

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

    I did manage to get through it pretty easily, however, any suggestions would be great.

    Flexbox for proper alignment and responsiveness

    1
    Abdul Khaliq 🚀•72,480
    @0xabdulkhaliqPosted 7 months ago

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have a suggestion regarding your code that I believe will be of great interest to you.

    IMPROPER USAGE OF ALT 📸:

    • The alt text "profile photo" for img is somewhat vague and not descriptive enough.
    • It fails to adequately convey the content or purpose of the image, which is essential for accessibility and user experience.
    • A more appropriate alt text could describe the specific content or function of the avatar, such as "Jessica's profile picture for social media" or "Avatar representing Jessica for social link." This would provide clearer information to users who rely on screen readers or encounter image loading issues.
    • The alt attribute should explain the purpose of the image, in our case the image is a portrait of Jessica. So alt with her name itself is enough.
    • E.g. alt="Jessica"
    <img src="./assets/images/avatar-jessica.jpeg" alt="Jessica" id="profile">

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful
    0
  • Abdul Khaliq 🚀•72,480
    @0xabdulkhaliqPosted 7 months ago

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have a suggestion regarding your code that I believe will be of great interest to you.

    CSS 🎨:

    • Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using margin or padding.
    • We don't need to use margin and padding to center the component both horizontally & vertically. Because using margin or padding will not dynamical centers our component at all states
    • To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚.
    • For this demonstration we use css Grid to center the component.
    body {
    min-height: 100vh;
    display: grid;
    place-items: center;
}
    • Now remove these styles, after removing you can able to see the changes
    section {
  margin: 15vh auto;
}
    • Now your component has been properly centered

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful
    0
  • polinagusakova•250
    @polinagusakovaSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    .

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

    .

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

    .

    3 column preview card

    1
    Abdul Khaliq 🚀•72,480
    @0xabdulkhaliqPosted 7 months ago

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have a suggestion regarding your code that I believe will be of great interest to you.

    INCORRECT USAGE OF HEADINGS ⚠️:

    • This solution consists incorrect usage of <h1> so it can cause severe accessibility errors due to incorrect usage of level-one headings <h1>
    • Every site must want only one h1 element identifying and describing the main content of the page.
    • An h1 heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page.
    • In this solution there's three <h1> elements (Sedans, Suvs, Luxury), you can preferably use <h2> instead of <h1>. Remember <h1> provides an important navigation point for users of assistive technologies so we want to use it wisely
    • So we want to add a level-one heading to improve accessibility by reading aloud the heading by screen readers, you can achieve this by adding a sr-only class to hide it from visual users (it will be useful for visually impaired users)
    • Example: <h1 class="sr-only">3-column preview card component</h1>
    • If you have any questions or need further clarification, you can always check out my submission for this challenge where i used this technique and feel free to reach out to me.

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful
    0