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
Log in with GitHub
OverviewSolutions22Comments50

All comments

  • Ayush Kanyal• 120

    @ayushkanyal

    Submitted

    Added main tag to contents section, alt attributes for image elements and an h1 heading to help screen readers identify the main heading of the page.

    Responsive Results-summary-page #1

    2

    Christian• 970

    @FLCHRIS

    Posted

    Hi there!! ✌️

    Congrats on completing this challenge!! 🥳

    Answering your question.

    You can use BEM Methodology, this methodology helps you to create shorter and more efficient code, and thus avoid specificity problems.

    Also here are some tips to improve your code... 🙃

    HTML: 🧱

    Your main content should be inside the main tag, more info here

    You should not forget to use the h1 tag, it is very important on your website. You must remember that it is only used once, and continue successively with h1, h2, ..., h6 and NOT SKIP HEADER LEVELS. More info about that here

    Your img tags must have the alt attribute. You should not forget it. More info here

    CSS: 🎨

    I can see that you have a little reset for the default styles that the browser gives, that's ok. But you can improve it by using other resets like the following:

    Your solution is very good. 💯

    Happy coding! ✌️🙃

    Marked as helpful

    1
  • Christian• 970

    @FLCHRIS

    Posted

    Hi there!, congrats on completing this challenge!! 🎊🥳

    Your solution is very good, but it has some bugs 😥, here are some tips to improve your code 💯.

    let's start with the HTML code:

    Your main contend could be inside the main tag. This tag should not be inside another tag, for example the section, footer, nav, header tags.

    It is not correct to use the a tag, inside the button tag ❌. Remove the button tag and just use the a tag.

    // This is not correct ❌
<button class="hero__button button">
  <a href="#">Get Started For Free</a>
</button>

// This is correct ✅
<a href="#">Get Started For Free</a>

    You must remember that you should not skip header levels, that is very wrong ❌. I leave you a link so you can take a look.

    For some of your images alt text is not enough, and in other images you don't even add it.

    To fix the insufficient text error. ✅

    I recommend making sure that the image alt text provides a brief but equivalent alternative to the image's content and functionality. Screen readers and browser rendering inform users that the object is an image, so don't use the alt text:

    • Image of ❌
    • Photo of ❌

    On the other hand, if the alt text is empty alt='' is fine if the image doesn't indicate anything or does not add value to the web page.

    You must remember that alt text helps people with disabilities know what the image shows, so the alt text should be very descriptive. I leave you a link so you can take a look.

    SCSS 🎨

    Your Grow Together, ..., Your User content, is overflowing because you are not using the width and max-width property correctly. 😥

    Add the max-width: 400px property to your images; and the problem will have solved a little. It also removes a bit of the gap, with a gap: 2rem;, it already looks much better.

    Your code is really good 💯, keep it up don't give up!!! 🙃

    I hope I've helped you 😄

    Happy coding! 👨‍💻

    0
  • Christian• 970

    @FLCHRIS

    Posted

    Hi there!! ✌️

    Congrats on completing this challenge! 🥳🎉

    Here are some tips to improve your solution... 💯

    HTML: 🧱

    Your content should be inside the main tag.

    Header elements implements six levels h1-h6, with h1 being the most important and h6 being the least important. avoid omitting header levels, your page should start with the header h1 and successively with h2...h6. More info here.

    The image <img src="./images/image-web-3-desktop.jpg" alt="header" width="100%" height="auto"> is only decorative, it does not add value to your page web, so do the following <img src="./images/image-web-3-desktop.jpg" alt="" aria-hidden="true" width="100%" height="auto"> more info here.

    I hope I've helped 😄

    Happy coding! 🙃

    0
  • ahmedabdalazeem49• 220

    @AhmedAbdalazeem49

    Submitted

    I think that i have some problems with box which have the annual price and icon and change link. this problem raise when the width is under 500px. I hope to here what i should do to prevent this problem form raising.

    Order Summary Component

    2

    Christian• 970

    @FLCHRIS

    Posted

    Hi there!! ✌️, I can see that your view in mobile colapse.

    This bugs is very easy to fix. 😄

    Let me show you... In your <div class="container"></div> tag, add the width: 90%; property.

    .container {
    width: 90%; // Add this
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 400px;
}

    And that's it to fix it!! ✅

    Happy coding!! 🙃

    Marked as helpful

    0
  • NaQu• 570

    @NaQu2003

    Submitted

    Better way to postion those circles? I used here background image but i'm not sure if i did it right :/

    Profile card

    1

    Christian• 970

    @FLCHRIS

    Posted

    Hi there ✌️

    Congrats on completing this challenge!! 🥳🎉

    Solving your question... I have always said that there is more than one solution to a problem 😄, Your way of solving it, it was great.

    I leave you another way of how I could have done it... 🙃

    body {
  position: relative;
  overflow: hidden;
}
body::before {
  content: "";
  position: absolute;
  top: -300px;
  left: -300px;
  width: 600px;
  height: 600px;
  background-image: url("../images/bg-pattern-top.svg");
  background-size: cover;
  z-index: 5;
}
body::after {
  content: "";
  position: absolute;
  bottom: -300px;
  right: -300px;
  width: 600px;
  height: 600px;
  background-image: url("../images/bg-pattern-bottom.svg");
  background-size: cover;
  z-index: 5;
}

    As you can see, using the position property and pseudo-elements is another way to do it.

    I hope I've helped you 😄

    Happy coding!! ✌️

    Marked as helpful

    1
  • Christian• 970

    @FLCHRIS

    Posted

    Hi there! ✌️

    Congrats on completing this challenge!! 🥳

    Your solution is very good, but it has some bugs... 😥

    Here are some tips to improve it 🙃

    HTML

    Your main content should be inside the main tag, more info here.

    You must not use the h1 tag more than once. You must remember that it is only used once, and continue successively with h1, h2, ..., h6 and NOT SKIP HEADER LEVELS. More info here.

    CSS

    Your reset is good, but you can improve it by using some popular resets like the following 🚀:

    I recommend that you learn the BEM methodology, this methodology is a way to name the classes of the nodes of your HTML and then attack them with CSS in an easy, simple and clear way. 💯🚀

    Your code is really good 💯, keep it up don't give up!!! 🙃

    I hope I've helped you 😄

    Happy coding! 👨‍💻

    Marked as helpful

    0
  • P
    anthony• 60

    @anthonydwan

    Submitted

    1. I would like to improve on how to structure my CSS, e.g. I don't think I am utilizing padding effectively.
    2. There are still differences between the design's heading and mine but the dimensions, fonts are the same - not sure why there is a difference.

    QR component with HTML/CSS only

    1

    Christian• 970

    @FLCHRIS

    Posted

    Hi there!! ✌️

    Congrats on completing this challenge! 🥳🎉

    Here are some tips to improve your solution... 💯

    HTML 🧱

    Your content should be inside the main tag.

    CSS 🎨

    I recommend that you learn the BEM methodology, this methodology is a way to name the classes of the nodes of your HTML and then attack them with CSS in an easy, simple and clear way. 💯🚀

    Your code is really good 💯, keep it up don't give up!!! 🙃

    I hope I've helped you 😄

    Happy coding! 👨‍💻

    1
  • ahmedabdalazeem49• 220

    @AhmedAbdalazeem49

    Submitted

    I want to know any alteration to my code. but i would to share that I am very happy to code like this and to build some simple projects like those.

    NFT Preview code

    1

    Christian• 970

    @FLCHRIS

    Posted

    Hi there!! ✌️

    Congrats on completing this challenge! 🥳🎉🎊

    Here are some tips to improve your solution... 💯

    HTML 🧱

    Your main content should be inside the main tag. For example:

    <body>
    <main>
        /*Your content*/
    </main>
</body>

    Your website does not have the h1 tag ❌. Header elements implements six levels h1-h6, with h1 being the most important and h6 being the least important. avoid omitting header levels, your page should start with the header h1 and successively with h2...h6. More info here.

    CSS 🎨

    Your reset is good, but you can improve it by using some popular resets like the following 🚀:

    Your solution is very good! 💯🚀

    Happy coding! ✌️🙃

    Marked as helpful

    1
  • erntTt• 30

    @erntTt

    Submitted

    I don't really know if there's need of a media queries? I check at a resolution of 375px and was good, what do you think?

    HTML/CSS

    3

    Christian• 970

    @FLCHRIS

    Posted

    Hi there!! ✌️

    Congrats on completing this challenge! 🥳🎉

    Solving your question... No, it's not necessary, your code works fine like this.

    BUT... your code has some bugs, here are some tips to improve it. ✅

    HTML 🧱

    Your content should be inside the main tag.

    CSS 🎨

    Your reset is small, it's ok. But you can improve it with the following popular resets: 🚀

    I recommend that you learn the BEM methodology, this methodology is a way to name the classes of the nodes of your HTML and then attack them with CSS in an easy, simple and clear way. 💯🚀

    Your code is really good 💯, keep it up don't give up!!! 🙃

    I hope I've helped you 😄

    Happy coding! 👨‍💻

    Marked as helpful

    1
  • Christian• 970

    @FLCHRIS

    Posted

    Hi there! ✌️

    Congrats on completing this challenge!! 🎉🥳

    I can see that you have some problems in your code. Here are some tips to improve your solution...

    HTML 🧱

    You should not use more than twice h1 tag. You must remember that it is only used once, and continue successively with h1, h2, ..., h6, and NOT SKIP HEADER LEVELS.

    Some images add value to your website and some don't. For example, the icon of the cart in the button does not carry any value, it must be empty.

    You can use the <picture> tag for this challenge. The picture tag helps us provide versions of the same image but in different resolutions, saving bandwidth and speeding up load times. More info here

    Your content should be contained by benchmarks. To avoid these accessibility issues, make sure your content is within a reference region with HTML5 elements 🙃. Example:

    <html lang="en">
    <head>
        ...
    </head>
    <body>
        <header>
            ...
        </header>
        <nav>
            ...
        </nav>
        <main>
            ...
        </main>
        <footer>
            ...
        </footer>
    </body>
</html>

    CSS 🎨

    Your reset is good, but you can improve it by using some popular resets like the following 🚀:

    Your solution is very good! 💯🚀

    Happy coding! ✌️🙃

    1
  • Christian• 970

    @FLCHRIS

    Posted

    Hi there!! ✌️

    Congrats on completing this challenge! 🥳

    I saw that you used the position property, to center your content, it's ok, but it can give you some problems. Instead use the grid property, like the following:

    body {
    min-height: 100vh; // Add this
    display: grid; // Add this
    font-family: var(--ff-accent);
    background-color: var(--clr-secondery-200);
    color: var(--clr-neutral-500);
    font-size: var(--fs-14);
    font-weight: var(--fw-regular);
    /* padding: 1.75rem 1rem; */
    /* width: 23.4375rem; */
    /* position: absolute; */
    /* top: 50%; */
    /* left: 50%; */
    place-content: center; // Add this
    /* transform: translate(-50%, -50%); */
}

    I hope I've helped 🙃

    Happy coding!! ✌️

    Marked as helpful

    0
  • Christian• 970

    @FLCHRIS

    Posted

    Hi there!! ✌️

    Congrats on completing this challenge!! 🎉🎉🥳

    Solving your question... You can the following 🙃

    body {
    min-height: 100vh; // Add this
    max-width: 1400px;
    background-color: hsl(212, 45%, 89%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    font-family: 'Outfit', sans-serif;
}

.qrcode-container {
    background-color: hsl(0, 0%, 100%);
    padding: 15px;
    border-radius: 16px;
    text-align: center;
    margin-bottom: 20px;
    max-width: 300px; // And add this
}

    I don't recommend that you use the height property, but rather the min height property. The height property can cause you problems. 😥

    Your solution is very good! 🎉

    Happy coding!! 🎉🙃

    0
  • Carlito• 190

    @Introxiety

    Submitted

    I want some feedbacks on how I write my code maybe there is unnecessary things I shouldn't do, I also can't center the background image just like what is in the given example.

    Flexbox-gap-em&rem

    2

    Christian• 970

    @FLCHRIS

    Posted

    Hi there!! Congrats on completing this challenge 🥳🥳🎉

    To resolve the error you can do the following:

    body {
background-image: url(images/pattern-background-desktop.svg);
background-size: contain;
background-position: top;
background-color: hsl(225deg, 100%, 94%);
}

    I hope I have been helpful

    Happy coding! ✌️🙃

    Marked as helpful

    0
  • Christian• 970

    @FLCHRIS

    Posted

    Hi there! Congrats on completing this challenge!! 🥳🎊

    Here are some tips to improve your solution.

    HTML: 🧱

    Its main content is not contained within the main tag. wrap your main content inside the main tag.

    Header elements implements six levels h1-h6, with h1 being the most important and h6 being the least important. avoid omitting header levels, your page should start with the header h1 and successively with h2...h6. More info here.

    CSS: 🎨

    I didn't see a reset in your css file, I recommend you use it, using it will save you future headaches when designing your page. Here some resets:

    I hope I've helped! 🙃

    Happy coding! ✌️

    0
  • proabre• 190

    @proabre

    Submitted

    Hey guys! any feedback is acceptable because there may be something that I missed but is visible for u guys so let me have your comment and have an update...I will be thankful for your feedbacks ...so please drop your comment here...

    responsive fylo landing page with html and css

    1

    Christian• 970

    @FLCHRIS

    Posted

    Hi there! Congrats on completing this challenge!! 🥳🥳🎊

    Here some tips to improve your solution. 💯

    HTML: 🧱

    Your main content should be contained within the main tag. and so put all the sections inside it.

    Your forms should be inside the form tag, not the div tag. and it's not the a tag it's the button or input:submit tag.

    You cannot use the h1 tag more than once. You must remember that it is only used once, and continue successively with h2, h3, h4, h5, h6, and not skip header levels.

    Social media links have no text available. You can add the aria-label='your text' attribute to fix that problem.

    Change the div tag with the header-link class to the nav tag.

    I suggest you do some research on HTML5.

    CSS: 🎨

    Your reset is good, but you can improve it by using some popular resets like the following 🚀:

    I hope I've helped you

    Happy coding! ✌️

    Marked as helpful

    1
  • Christian• 970

    @FLCHRIS

    Posted

    Hi there! Congrats on completing this challenge. 🥳🎊

    Your solution is very good, I love it! 🙃

    Here are some tips to improve your code.

    Your img <img src="images/illustration-intro.png" alt="Intro illustration"> and <img src="images/illustration-stay-productive.png" alt="Keep illustration productive"> tags are decorative, they should not have alt text.

    In your form, you use the click event to submit the form, and the correct way is to use the submit event. More info here.

    I hope I've helped you 🙃

    Happy coding! ✌️

    0
  • Christian• 970

    @FLCHRIS

    Posted

    Hi there! Congrats on completing this challenge!! 🥳

    Your solution is good, but it can be improved.

    HTML:

    Your blue image background, You shouldn't have alt text, because it doesn't add value to your page, it's just decorative. The correct way would be: <img src="./images/bg-pattern-card.svg" alt="" class="cover-image">.

    Header elements implements six levels h1-h6, with h1 being the most important and h6 being the least important. avoid omitting header levels, your page should start with the header h1 and successively with h2...h6. More info here.

    CSS:

    Your styles are in your index.html, that's ok, but the correct way would be to have it in another file, in this case styles.css

    I didn't see a reset in your css file, I recommend you use it, using it will save you future headaches when designing your page. Here some resets:

    I hope I've helped! 🙃

    Happy coding! ✌️

    Marked as helpful

    1
  • Christian• 970

    @FLCHRIS

    Posted

    Hi there!, congrats on completing this challenge!! 🥳

    I have some tips to improve your solution. 💯

    HTML: 🧱

    Header elements implements six levels h1-h6, with h1 being the most important and h6 being the least important. avoid omitting header levels, your page should start with the header h1 and successively with h2...h6. More info HERE

    CSS: 🎨

    I didn't see a reset in your css file, I recommend you use it, using it will save you future headaches when designing your page. Here some resets:

    Sometimes the color for the hover effect is not found, because it only lowers the intensity of the color.

    Example:

    button:hover {
background-color: rgba(56, 41, 224, .7);
}

    it is the same color hsl(245, 75%, 52%) to rgba(56, 41, 224, .7) only I converted it from hsl to rgba.

    I hope I've helped you!

    Happy coding! ✌️

    0
  • Feernandou• 190

    @Feernandou

    Submitted

    Any comments or suggestions are welcome, thank you very much.

    QR Code

    #sass/scss

    1

    Christian• 970

    @FLCHRIS

    Posted

    Hi there!, congrats on completing this challenge!! 🥳🎊

    I have some tips to improve your solution. 💯

    HTML:

    • Header elements implements six levels h1-h6, with h1 being the most important and h6 being the least important. avoid omitting header levels, your page should start with the header h1 and successively with h2...h6. More info HERE
    • Your main content should be conteined in the main tag. More info HERE
    • Your img tag, should have alt attribute.

    SCSS:

    Your reset is good, but you can improve it by using some popular resets like the following 🚀:

    I can see that your variables are in the partials folder, but your reset is inside your styles.scss file. If you want to organize your files I recommend the following (it's my way of doing it, you can find another way that suits you):

    -- scss
---- components
------ _button.scss
------ _nav.scss
---- utilities
------ _variables.scss
---- layout
------ _footer.scss
------ _main.scss
---- base
------ _reset.scss
---- index.scss

    Those are some example files, I hope and they are clear. 🙃

    I hope I've helped you

    Happy coding! ✌️

    Marked as helpful

    1
  • Christian• 970

    @FLCHRIS

    Posted

    Hi there!, Congrats on completing this challenge!!!! 🥳🎊

    Solving your doubt, You can change the color using the filter property, with the following values brightness(0) invert(100%) -> filter: brightness(0) invert(100%);

    Also here are some tips for your solution. 🙃

    In this challenge it is not necessary to use the nav tag, because it does not have a navigation menu.

    In your CSS code, I see that you have a small reset, that's ok, but you can improve it with the following more popular resets.

    Your solution is very good, keep it up!.

    Happy coding! ✌️

    0
  • Christian• 970

    @FLCHRIS

    Posted

    Hi there! ✌️, congrats on completing this challenge 🎉🎉🥳🥳

    Here some tips to improve your solution. 💯🚀

    • HTML:

    • Your main content should be conteined in the main tag. More info HERE

    • Header elements implements six levels h1-h6, with h1 being the most important and h6 being the least important. avoid omitting header levels, your page should start with the header h1 and successively with h2...h6. More info HERE

    • CSS

    • I didn't see a reset in your css file, I recommend you use it, using it will save you future headaches when designing your page. Here some resets:

    • Normalize.css

    • Reset.css

    • My Custom CSS Reset of Josh Comeau

    • To make your page responsive, do the following:

    .content {
width: 90%; /* <- add this rule */
display: flex;
flex-flow: column wrap;
/* flex: 0 14%;  <- delete this rule */
justify-content: center;
align-items: center;
background-color: hsl(0, 0%, 100%);
padding: 10px;
border-radius: 10px;
max-width: 300px; /* <- add this rule */
}

    Your solution is very good, keep it up!

    Happy coding 🙃

    Marked as helpful

    0
  • Christian• 970

    @FLCHRIS

    Posted

    Hi there! ✌️, congrats on completing this challenge. 🥳🎉

    I can see that your solution is good, but there are some improvements to your solution. You are not using the main tag to wrap your main content, I recommend you that you do. For more details HERE

    In your CSS code, I see that you have a small reset, that's ok, but you can improve it with the following more popular resets.

    Answering your last question, Its design is good, it adapts to mobile and desktop devices, You don't need media query.

    Another way can be as follows:

    body {
height: 100vh;
padding: 9.5rem 0rem 9.4375rem 0rem;
font-size: 15px;
background: var(--light-grey, #D5E1EF);
display: grid;
place-content: center;
}

    I hope I've helped

    Happy coding!

    Marked as helpful

    0
  • Adel• 820

    @Adel-Harrat

    Submitted

    I had difficulty with creating that border bottom effect when hovering 😭

    I did it with after: pseudo element but still I felt like my solution to this issue is somehow not right, if anyone can help .. I would appreciate that a lot (NB: I'm using tailwindcss)

    Loopstudios landing page solution

    #accessibility#react#tailwind-css#vite

    1

    Christian• 970

    @FLCHRIS

    Posted

    Hi there! ✌️ Congrats on completing this challenge 🥳🎉

    Answering your question, your solution is good, but as you commented, it can be improved a bit and by removing some tags from your code.

    This is a way of how I would animate the menu, using only TailwindCSS.

    <ul className={`flex items-center gap-5`}>
{items.map((item) => (
<li key={item.id}>
<a
href={item.link}
className={`group relative block text-center text-tw-white after:content-[''] after:absolute after:bg-white after:bottom-0 after:left-0 after:h-[2px] after:w-0 hover:after:w-full after:transition-all`}
>
{item.text}
</a>
</li>
))}
</ul>

    As you can see, I removed the span tag and just used the after pseudo-element.

    I hope I have helped you, and solved your problem. 🙃

    All the best, Christian.

    Happy coding! ✌️

    Marked as helpful

    0
  • Christian• 970

    @FLCHRIS

    Posted

    Hi!, congrats on completing this challenge. 🥳🎊

    Here some tips to improve your code. 🚀

    Background images are for decorative purposes, they do not add value to your website. What you can do to fix it is the following, add the aria-hidden='true' attribute and set the alt attribute to empty, like so alt=''. You can also choose to use the background-image property, thus avoiding using the above.

    Example:

    <img src="images/pattern-background-desktop.svg" id="img1" alt="" aria-hidden='true' >
<img src="images/pattern-background-mobile.svg" id="img2" alt="" aria-hidden='true' >

    I can see that you have a little reset for the default styles that the browser gives, that's ok. But you can improve it by using other resets like the following:

    Your solution is very good. 💯

    Happy coding! ✌️🙃

    Marked as helpful

    0