Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Hatem Henchir• 530

    @hatemhenchir

    Posted

    Hey Faith Bianca Aragon, how are you ? I really liked the result of your project, but I have some tips that I think you will enjoy:

    • you can use flexbox to center something with CSS like this : display:flex; justify-content:center; align-items:center; .
    • you use grid like this : display:grid; place-items:center;

    Marked as helpful

    3
  • Hatem Henchir• 530

    @hatemhenchir

    Posted

    Hey Madu Chimeremeze Clinton, how are you ? I really liked the result of your project, but I have some tips that I think you will enjoy:

    • replace <div class="container"> with <main class="container"> and <div class="card"> with <section class="card"> for semantic page.

    Semantic HTML refers to the use of HTML tags that accurately describe the content of a webpage, rather than just its appearance. Using semantic HTML can improve the accessibility and SEO of a webpage, as well as make the code easier to read and understand for developers.

    Here are a few reasons why it is important to use semantic HTML:

    1. Accessibility: Semantic HTML tags provide additional context and meaning to the content of a webpage, which can be helpful for users with disabilities who rely on assistive technologies such as screen readers.
    2. SEO: Search engines use the structure and content of a webpage to understand its relevance and ranking. Using semantic HTML tags can help search engines understand the content and context of a webpage, which can improve its ranking in search results.
    3. Code readability: Using semantic HTML tags can make the code easier to read and understand, which can be helpful for developers working on a project. verall, using semantic HTML can improve the accessibility, SEO, and code readability of a webpage, and is an important best practice in front-end development.

    The rest is great.

    Great work and keep going.

    1
  • Hatem Henchir• 530

    @hatemhenchir

    Posted

    Hey Faith Kalu Onyeani, how are you ? I really liked the result of your project, but I have some tips that I think you will enjoy:

    Media queries are a powerful tool for creating responsive designs that adapt to different screen sizes and device types. Here are a few tips for working with media queries in your mobile design:

    1. Start with a mobile first approach: It can be helpful to design for the smallest screen size first and then progressively add features for larger screens. This can help ensure that the mobile design is optimized and that any additional features are additive rather than disruptive.
    2. Use breakpoints wisely: When using media queries, it's important to choose breakpoints that make sense for the design and to avoid using too many breakpoints. It's often better to use a few well-placed breakpoints rather than trying to target every possible screen size.
    3. Test on multiple devices: It's important to test the design on a range of devices to ensure that it looks and functions as intended. This can help identify any issues with the media queries and ensure that the design is responsive across different devices.

    I hope these tips are helpful! Let me know if you have any other quest.

    Great work and keep going.

    Marked as helpful

    0
  • Hatem Henchir• 530

    @hatemhenchir

    Posted

    Hey Wellington Marques, how are you ? I really liked the result of your project, but I have some tips that I think you will enjoy:

    • To center a div or something with grid do this : display:grid;place-items:center;
    • To center a div or something with flexbox do this : display:flex; justify-content: center; align-items: center;.

    Great work and keep going.

    2
  • Hatem Henchir• 530

    @hatemhenchir

    Posted

    Hey ark.gor, how are you ? I really liked the result of your project, but I have some tips that I think you will enjoy:

    • For semantic page, I think the best choice is to divide your page in 2 section. The first section have 2 articles. The second section have 3 articles (cards).

    Semantic HTML refers to the use of HTML tags that accurately describe the content of a webpage, rather than just its appearance. Using semantic HTML can improve the accessibility and SEO of a webpage, as well as make the code easier to read and understand for developers.

    Here are a few reasons why it is important to use semantic HTML:

    1. Accessibility: Semantic HTML tags provide additional context and meaning to the content of a webpage, which can be helpful for users with disabilities who rely on assistive technologies such as screen readers.
    2. SEO: Search engines use the structure and content of a webpage to understand its relevance and ranking. Using semantic HTML tags can help search engines understand the content and context of a webpage, which can improve its ranking in search results.
    3. Code readability: Using semantic HTML tags can make the code easier to read and understand, which can be helpful for developers working on a project.

    verall, using semantic HTML can improve the accessibility, SEO, and code readability of a webpage, and is an important best practice in front-end development.

    • Implement a Mobile First approach.

    Mobile first design is a design approach in which the design process is started by designing for mobile devices and then progressively adding features for larger screens such as tablets and desktop computers. There are several reasons why implementing a mobile first approach in front-end development can be beneficial:

    1. Increased mobile usage: More and more people are using their mobile devices to access the internet, so it's important to prioritize the mobile experience.
    2. Better performance: Mobile devices often have slower processors and less memory compared to desktop computers, so starting with a mobile design can help ensure that the site performs well on all devices.
    3. Responsive design: A mobile first approach helps ensure that the site is responsive, meaning it adjusts to fit the screen size of the device it is being viewed on. This is important because it provides a better user experience and can improve the site's search engine rankings.
    4. Simplicity: Starting with a mobile design forces designers to prioritize content and simplify the layout, which can result in a more user-friendly experience for all users.

    Overall, a mobile first approach helps ensure that the site is optimized for the growing number of mobile users, while also providing a better overall user experience for all users.

    The rest is great.

    Great work and keep going.

    0
  • Hatem Henchir• 530

    @hatemhenchir

    Posted

    Hey Luan Souza, how are you ? I really liked the result of your project:

    The CSS Grid Layout and Flexbox are both layout tools that allow developers to create complex and responsive layouts for websites and applications. There are a few key differences between the two that can help determine when to use each one:

    1. The main difference between Grid and Flexbox is the layout direction: Grid allows you to create rows and columns, while Flexbox is primarily used for one-dimensional layouts (either in a row or a column).
    2. Grid is better suited for creating larger, more complex layouts with multiple rows and columns, while Flexbox is better for smaller, more simple layouts.
    3. Grid has more layout control and can handle both rows and columns, while Flexbox is better at handling alignment and distribution of items within a layout.

    In general, if you need to create a layout with rows and columns, or if you need more precise control over the layout of your elements, Grid is the better choice. On the other hand, if you need to create a simple, one-dimensional layout and have more flexibility in aligning and distributing elements, Flexbox is a good option.

    It's also worth noting that both Grid and Flexbox can be used together in the same layout, depending on your specific needs.

    Great work, and happy coding.

    Marked as helpful

    0
  • Hatem Henchir• 530

    @hatemhenchir

    Posted

    Hey Rajeev kumar, how are you ? I really liked the result of your project, but I have some tips that I think you will enjoy:

    • You have some trouble in your background image. To fix it, you need to set the width 100% and the height 50% of your background like this:background-size: 100% 50%;.
    • Implement a Mobile First approach.

    Mobile first design is a design approach in which the design process is started by designing for mobile devices and then progressively adding features for larger screens such as tablets and desktop computers. There are several reasons why implementing a mobile first approach in front-end development can be beneficial:

    1. Increased mobile usage: More and more people are using their mobile devices to access the internet, so it's important to prioritize the mobile experience.
    2. Better performance: Mobile devices often have slower processors and less memory compared to desktop computers, so starting with a mobile design can help ensure that the site performs well on all devices.
    3. Responsive design: A mobile first approach helps ensure that the site is responsive, meaning it adjusts to fit the screen size of the device it is being viewed on. This is important because it provides a better user experience and can improve the site's search engine rankings.
    4. Simplicity: Starting with a mobile design forces designers to prioritize content and simplify the layout, which can result in a more user-friendly experience for all users.

    Overall, a mobile first approach helps ensure that the site is optimized for the growing number of mobile users, while also providing a better overall user experience for all users.

    The rest is great.

    Great work and keep going.

    1
  • Hatem Henchir• 530

    @hatemhenchir

    Posted

    Hey Malek, how are you ? I really liked the result of your project, but I have some tips that I think you will enjoy:

    • you have double media query with 1px difference, One media query is enough.
    • I think the Reliable, efficient delivery Powered by Technology should be a h1 and Powered by Technology in span tag.

    The title on a web page is usually tagged as an H1 tag. While this isn't always the case, it makes sense in most cases. By making the title of your page an H1 heading, it shows that it's one of the most important pieces of content on the page. It’s important to remember that SEO can often be about user optimization as well as optimization for search.

    The rest is great!

    Great work, and happy coding.

    Marked as helpful

    1
  • Hatem Henchir• 530

    @hatemhenchir

    Posted

    Hey Mehedi Hasan Likhon, how are you ? I really liked the result of your project, but I have some tips that I think you will enjoy:

    • All images must have alternate text. You can do it like this <img src="./images/bg-desktop.svg" alt="say something">.
    • replace <div class="container"> with <section class="container"> for semantic page. You can read more about semantic HTML here: HTML Semantic Elements.
    • You don't need media query, so you can remove it.

    The rest is great!

    Great work, and happy coding.

    1
  • Prithivi Raj• 140

    @prithiviraj275

    Submitted

    all feedbacks are welcome, thank you

    nft

    2

    Hatem Henchir• 530

    @hatemhenchir

    Posted

    Hey Prithivi Raj, how are you ? I really liked the result of your project, but I have some tips that I think you will enjoy:

    • replace <div class="card"> with <section class="card"> and <div class="attribution"> with <footer class="attribution"> for semantic page. You can read more about semantic HTML here: HTML Semantic Elements.
    • The background image should be in the body, so move all the main style to the body and just add this line in your class main margin: 0 auto; .
    • Consider using rem for font size. If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.
    • I'm notice that the card not have a box shadow. This code, it will help you to do it box-shadow: -11px 10px 19px -3px rgba(0,0,0,0.75); -webkit-box-shadow: -11px 10px 19px -3px rgba(0,0,0,0.75); -moz-box-shadow: -11px 10px 19px -3px rgba(0,0,0,0.75); .

    You can try an online box shadow generator like this Box Shadow CSS Generator.

    The rest is great!

    Great work, and happy coding.

    2
  • Bentaher malek• 730

    @malek-bt

    Submitted

    Hello, thank you for coming and looking at my code!

    This is my solution for this challenge, i'm very happy to complete this challenge . I hope it's up to the standards, but if it's not, please feel free to tell me!

    Thank you in advance.

    Social proof section

    #bootstrap

    2

    Hatem Henchir• 530

    @hatemhenchir

    Posted

    Hey Malek , nice work. I have one tip for you 😁.

    • Try to not repeat your code. You can remove the background color, position and repeat of your body in the media query, just keep the background image.

    Great work, and happy coding

    Marked as helpful

    1
  • anna• 80

    @skulbas

    Submitted

    I tried to use image-set to switch between mobile and desktop background images on different widths, but it didn't seem to work properly at all..

    UPD:

    • improved semantics (<div> => <section>)
    • kinda fixed the bg position (I guess the image-set is too advanced for me yet lmao)

    Order Summary component

    1

    Hatem Henchir• 530

    @hatemhenchir

    Posted

    Hey Anna, nice work. I have some tips for you.

    • To fix the background size, you need to set the width 100% and the height 50% of your background like this:background-size: 100% 50%;.
    • replace <div class="card"> with <section class="card"> for semantic page. You can read more about semantic HTML here: HTML Semantic Elements.
    • Implement a Mobile First approach.

    The rest is great.

    Great work and keep going.

    Marked as helpful

    2
  • Hatem Henchir• 530

    @hatemhenchir

    Posted

    Hey Hamdi, nice work. I have some tips for you.

    • replace <div class="card"> with <section class="card"> for semantic page. You can read more about semantic HTML here: HTML Semantic Elements.
    • The old price 🏷 is not being announced properly to screen readers. You want to wrap it in a Del Element
    • Move all the style in class container in the body and just add this line margin:0 auto; in class container, it will be better.
    • Implement a Mobile First approach

    The rest is great!

    Happy Coding!

    0
  • Hesam• 420

    @hesam-fattahi

    Submitted

    Hey everyone! 👋

    • For the circles on the background, I've used ::before and ::after. The same thing for the pattern on the component. Is there a better way to implement that or this is fine?

    • Should the profile name be a heading or p is okay?

    Thank you

    Profile card component

    #sass/scss

    2

    Hatem Henchir• 530

    @hatemhenchir

    Posted

    Hey Hessam, nice work

    1. for the circle in the background, you can let your image have border white and margin it in the top with some negative pixel like this:margin-top:-53px;.
    2. the profile name should be header, not p.

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding!🍂🦃

    Marked as helpful

    0
  • Hatem Henchir• 530

    @hatemhenchir

    Posted

    This comment was deleted

    1
  • Hatem Henchir• 530

    @hatemhenchir

    Posted

    Hey Malek Bentaher, how are you ? I really liked the result of your project, but I have some tips that I think you will enjoy:

    • Logo Huddle should be in tag, <header> not in <main> like this: <body><header>your logo</header><main>your main page</main><footer>your footer(icons)</footer></body> for semantic page.
    • replace <div class="id"> with <section class="id"> for semantic page. You can read more about semantic HTML here: HTML Semantic Elements
    • Implement a Mobile First approach 📱 > 🖥

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 🍂🦃

    Marked as helpful

    1
  • rockdoginafog• 710

    @rockdoginafog

    Submitted

    This is my first time doing something with css and html. I really enjoyed doing something other than just learning css with no idea what to do with it. I learned so much more than just watching tutorials on yt.

    QR CODE SOLUTION BY A TOTAL NEWBIE

    2

    Hatem Henchir• 530

    @hatemhenchir

    Posted

    Hey rockdoginafog, how are you ? I really liked the result of your project, but I have some tips that I think you will enjoy:

    • replace <div id="border"> with <main id="border"> for semantic HTML. You can read more about semantic HTML here: HTML Semantic Elements
    • the tag HTML must have a Lang attribute like this <html lang="en">
    • if you want to use grid to center a div, you can use display:grid;place-items: center; or you can use flexbox like this display:flex;justify-content: center;align-items: center.

    The rest is great!

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 🍂🦃

    Marked as helpful

    2
  • Hatem Henchir• 530

    @hatemhenchir

    Posted

    Hey Cyber12341, how are you ? I really liked the result of your project, but I have some tips that I think you will enjoy:

    • All the document need title to aid in navigation. You can do it like this <head<title>Frontend Mentor | Product preview card component</title></head>
    • the tag HTML must have a Lang attribute like this <html lang="en">
    • The old price 🏷 is not being announced properly to screen readers. You want to wrap it in a Del Element and include span element with an sr-only text explaining that this is the old price.

    The rest is great!

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 🍂🦃

    Marked as helpful

    1
  • Hatem Henchir• 530

    @hatemhenchir

    Posted

    Hey Lenin, how are you ? I really liked the result of your project, but I have some tips that I think you will enjoy:

    • You can try an online box shadow generator like this Box Shadow CSS Generator

    • this code, it will help you to do it box-shadow: -11px 10px 19px -3px rgba(0,0,0,0.75); -webkit-box-shadow: -11px 10px 19px -3px rgba(0,0,0,0.75); -moz-box-shadow: -11px 10px 19px -3px rgba(0,0,0,0.75);

    The rest is great!

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 🍂🦃

    Marked as helpful

    0
  • Hatem Henchir• 530

    @hatemhenchir

    Posted

    Hey Hamdi Shili, how are you ? I really liked the result of your project, but I have some tips that I think you will enjoy:

    • try to move all the styles to file .css for clean code.
    • To identify the main content of your site you will want to encase your entire component inside a Main Element. You can do it by replace <div class="layout"/> with <main class="layou"/>
    • Implement a Mobile First approach 📱 > 🖥

    With mobile devices being the predominant way that people view websites/content. It is more crucial than ever to ensure that your website/content looks presentable on all mobile devices. To achieve this, you start building your website/content for smaller screen first and then adjust your content for larger screens.

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 🍂🦃

    Marked as helpful

    0
  • Hatem Henchir• 530

    @hatemhenchir

    Posted

    Hey Malek, how are you ? I really liked the result of your project, but I have some tips that I think you will enjoy:

    • Change the height: 220vh; to min-height:100vh it will be centered.
    • you can let you button hover like this .btn1:hover { background-color: hsl(31, 77%, 52%) !important; color: hsl(0, 0%, 95%) !important; border: 1px solid hsl(0, 0%, 95%) !important; } .btn2:hover { background-color: hsl(184, 100%, 22%) !important; color: hsl(0, 0%, 95%) !important; border: 1px solid hsl(0, 0%, 95%) !important; } .btn3:hover { background-color: hsl(179, 100%, 13%) !important; color: hsl(0, 0%, 95%) !important; border: 1px solid hsl(0, 0%, 95%) !important; } `

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 🍂🦃

    Marked as helpful

    1
  • Hatem Henchir• 530

    @hatemhenchir

    Posted

    Hey Kumar Sandeep, how are you ? I really liked the result of your project, but I have some tips that I think you will enjoy:

    • It's a bad idea to center a div or a container using position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

    • to center the card, you can use flex like this : body{display: flex; justify-content: center; align-items: center; height: 100vh;} or you can use a grid like this : body{display:grid;align-items: center;height:100vh}

    • the color of the title is color:hsl(220, 15%, 55%);

    The rest is great!

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 🍂🦃

    Marked as helpful

    2
  • Hatem Henchir• 530

    @hatemhenchir

    Posted

    Hey Bentaher Malek, how are you ? I really liked the result of your project, but I have some tips that I think you will enjoy:

    1.You have used <br>. Using <br> is not only bad practice, it is problematic for people who navigate with the aid of screen reading technology. Screen readers may announce the presence of the element. This can be a confusing and frustrating experience for the person using the screen reader. You can read more in MDN

    2.Consider using rem for font size. If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.

    3.If you are notice in this challenge we are used just one font-family. So you can just do font-family just in the body like this: body{font-family: 'Karla', sans-serif;}

    The rest is great!

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 🍂🦃

    Marked as helpful

    1
  • Amanda Buttineau• 200

    @ab1820

    Submitted

    My 3rd Frontend Mentor Challenge, this time I am building a landing page. This will be the first landing page that I have built. Built with mobile design first in mind. I like to finish the mobile version first, then I set the media to min-width: 800px, and design the desktop version from that.

    Web design will always be continued learning. As the years pass and technology grows, things will change for the markup language and web styling, that's why I will always be learning. But for now, mobile first, responsiveness, CSS Grid and Flexbox are what I am currently working on right now.

    Huddle Landing Page

    1

    Hatem Henchir• 530

    @hatemhenchir

    Posted

    Hey there! 👋 Here are some suggestions to help improve your code:

    • All images must have alternate text. You can do it like this <img src="./images/bg-desktop.svg" alt="say something">
    • In the social icon. Replace the div with footer
    • Your "Icons" were created with the incorrect element. When the user clicks on the icon, they should be directed to a different part of your site. The Anchor Tag will achieve this.
    • Implement a Mobile First approach 📱 > 🖥 With mobile devices being the predominant way that people view websites/content. It is more crucial than ever to ensure that your website/content looks presentable on all mobile devices. To achieve this, you start building your website/content for smaller screen first and then adjust your content for larger screens.

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 🍂🦃

    1