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
OverviewSolutions10Comments31

All comments

  • Zaid Ansari• 100

    @zaidansari42

    Submitted

    Redesigned it again to give it a better code quality.

    QR code component

    #accessibility

    1

    Deepak Parmar• 490

    @deepak-parmar

    Posted

    @zaidansari42, for best practice I suggest...

    • You should use figure/figcaption tag for the image and the paragraph, caption tag is specifically used for table.
    <figure>
      image
      h1
      <figcaption>
           p
      </figcaption>
</figure>

    This would improve accessibility and won't change the design. Hope this helps 👍

    Marked as helpful

    0
  • Kohsey• 40

    @KohseyPower

    Submitted

    Hi everyone !

    This is my final submition for this challenge. Don't bother to tell me If I made mistakes.

    Feedback are welcome ! Thanks in advance

    Achieved I think

    2

    Deepak Parmar• 490

    @deepak-parmar

    Posted

    @KohseyPower,

    You can apply multiple classes on an element by separating them with space like this, <div class="column Luxury"></div>, but you cannot add more than one class= attributes to an element like this <div class="column" class="Luxury"></div>

    Marked as helpful

    0
  • Deepak Parmar• 490

    @deepak-parmar

    Posted

    @glg-dev, Nice work on the challenge, your design has no flaw at all.

    You've used radio input for rating buttons, which I find the best way to implement this component; so kudos to that. 👏

    • Your page reloads right after clicking the submit button and .thanks section is briefly visible before the page reloads. For that I suggest you use submit event-listener instead of click and prevent submission of the form by using preventDefault( ) method of event object and them call the submitForm( ) function
    submitButton.addEventListener("submit", (event) => {
    event.preventDefault();
    submitForm()
}
    • Next, for accessibility of the component wrap .container and .thanks elements using main tag and .attribution element using footer

    Hope these helps, keep coding! 👍

    Marked as helpful

    0
  • Deepak Parmar• 490

    @deepak-parmar

    Posted

    @Arslanj9,

    • Your path to main.js is not working, remove / from the beginning of it. It should be just js/main.js or add . in front on it for best practice like this, ./js/main.js

    • Submitting a form reloads the page, so after clicking the submit button the page reloads and returns to its original states; to prevent that use submit event-listener

      submitBtn.addEventListener("submit", (event) => {
    event.preventDefault()
    btnClick()
  })

    event.preventDefault() will stop the submission process of the form.

    • For accessibility issue, wrap your header using main tag

    I hope this work out. keep coding 👍

    Marked as helpful

    2
  • Deepak Parmar• 490

    @deepak-parmar

    Posted

    @anhhuynh1506, Visually your work looks so great.

    You just have resolve some accessibility issues...

    • Document should have one main landmark: for this wrap your whole section element using main tag.
    • Page should contain a level-one heading: heading elements (h1-h6) should always be in order and should always start from the level-one heading h1. For your "Order Summary" heading use h1 instead of h2. You already have font-size property set for the heading, so you'll just have to make a few changes there.

    The design won't change a bit, but these changes will improve the accessibility of your component. Again nice work on the challenge. Keep coding! 👍

    0
  • Deepak Parmar• 490

    @deepak-parmar

    Posted

    @lauriselvijs, Your work looks amazing, nice work on theme switching!

    • The dice button and the divider becomes hard to spot in light mode. Applying filter: invert(1) to both will work just nicely.
    • and also add cursor: pointer to dice button and theme-switching button for better UI feedback.

    Marked as helpful

    0
  • Deepak Parmar• 490

    @deepak-parmar

    Posted

    @kaminskimaciej, visually your works looks great!

    First of all, you need to renew the screenshot and regenerate the report of your submission.

    After then, you just have to eliminate some of the accessibility issues...

    • Heading elements should always be used in order from h1-h6. For your .title element use h1 tag instead of h2, it won't change anything in the design.
    • The same error is also caused by the h5 tag later in your code. I suggest not using h5 and use <p> tag for it, since it is more like a label than a header.
    • Next, you need to wrap your whole .container element inside the landmark tag <main>, cause all pages must have a landmark element.

    You code looks decently clean, I suggest using some code formatter to automate that part.

    I hope this clears up the issues. 👍

    0
  • Deepak Parmar• 490

    @deepak-parmar

    Posted

    @KAMA-Kasckak-Martin,

    your image is not being loaded, replace / with ./ at the beginning of your image's path (like this, ./images/image-qr-code.png)

    • / at the beginning means it'll looks for files at the root of the URL which is https://kama-kasckak-martin.github.io but your solution is available at https://kama-kasckak-martin.github.io/QR/

    • ./ will look for files from where it is currently hosted at.

    If this is confusing I recommend this article from MDN Docs https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_URL Especially, Absolute URLs vs relative URLs section.

    and this one from W3Schools

    https://www.w3schools.com/html/html_filepaths.asp

    These might clear out lots of thing Pathing doubts.

    Marked as helpful

    0
  • Deepak Parmar• 490

    @deepak-parmar

    Posted

    @pouyanasr, visually your work looks great, nice work!

    but your use of h4 and h5 right after using h1 is raising an Accessibility Issue: Heading levels should only increase by one. There cannot be discontinuity between heading elements, these should be used in order. h2 should follow after h1 and so on.

    I suggest that you use p tag stats and just give them font-size value just as h5 and h4 which you can see in the browser console. This way the design won't change and will be still accessible.

    Other than that I see that your code has inconsistent spacing, It's a bit of a hassle to make the code look clean, I recommend using code formatter in your code editor.

    I hope these helps, keep coding! 👍

    Marked as helpful

    0
  • Deepak Parmar• 490

    @deepak-parmar

    Posted

    @DylanMuldoon, instead of div to hold .car-card element use the semantic tag <section>. That would improve the accessibility further more since articles have sections.

    1
  • Vasyl• 550

    @vasyaqwe

    Submitted

    It was a pretty ease one. Didn't have any difficulties along the way. One thing I think would be cool to implement is the typewriter animation when the advice comes in. I googled it a little but no results.

    Advice generator

    1

    Deepak Parmar• 490

    @deepak-parmar

    Posted

    @vasyaqwe,

    For typewriter animation you can use JavaScript's setInterval() function to add each letter to .advice-text paragraph once advice is fetched. https://developer.mozilla.org/en-US/docs/Web/API/setInterval

    Still, this would take some research. I'm sure you'll have fun.

    And for the accessibility issue, I suggest use h1 for the .advice-number element instead of span, because screen reader devices won't know where to start reading the content without a landmark element such as h1. You've already set font-size for .advice-number so using h1 won't affect the design but will improve accessibility of your app.

    Hope these helps. 👍

    Marked as helpful

    1
  • Amina Ibrahim• 10

    @aminafolio

    Submitted

    I couldn't get the footer to go to center and I haven't learnt css grid yet. I will start learning it today. Other than the concepts I dont know, is the project okay, it terms of responsiveness and closeness to design?

    QR Code Landing page

    #bootstrap

    1

    Deepak Parmar• 490

    @deepak-parmar

    Posted

    @aminafolio,

    The attribution section isn't necessary to keep since it's not part of the designs and might interfere with the design. I usually don't keep attribution.

    However you need to take care of some accessibility issues. Screen reader devices requires landmark element to jump on when page loads therefore...

    • Wrap your .root element with landmark tag main
    • prefer to wrap .attribution using footer tag, if you're planning to keep it.

    Other than these, your work looks nice and code is decently structured. Nice work 👍

    Marked as helpful

    0
  • Deepak Parmar• 490

    @deepak-parmar

    Posted

    @VoidArchive, Your work looks great!

    However, You got an accessibility issue: Page should contain a level-one heading, because of using <h2> tag before <h1>.

    • This is because for better accessibility, heading elements should start from h1. h1-h6 tags holds more important for semantic meaning of the element rather than visual meaning.
    • I understand that using <h1> tag on "Improve your front-end sk..." header will increase its size and won't be as accurate as the design. You can override this by giving <h1> font-size: 22.5px which is the default font-size of <h2> tag. This way your page will start from a level-one heading and will also maintain its design.

    And if margin and padding still confuses you...

    • Margin is the space occupied by the element outside of itself.
    • Padding is the space occupied inside of itself.

    You can learn all about it on MDN Docs

    I hope these help, keep up the coding work!

    Marked as helpful

    0
  • Tarun• 140

    @XENO2410

    Submitted

    Another Newbie project completed Tried flexbox for the first time, though not that much used it in this. If any suggestions pls ping me up, will help me improve. Thnks:)

    HTML CSS

    1

    Deepak Parmar• 490

    @deepak-parmar

    Posted

    @XENO2410, Nice work on the challenge!

    • You're yet to implement active state for "Learn More" buttons, it should have transparent background and border when hovered on.

    You need to use some semantic HTML tags to improve accessibility of the component...

    • Wrap the essential elements of the page using the landmark tag <main>
    • Sedans, Suvs, etc. are header to its respective section so they need to be treated as header using h1-h6 tags.
    • Use appropriate tag to wrap text, and use div just as container.
    • the Credits element serves as the footer of the webpage, in this case you can wrap that element into footer tag.

    One of the best resource to research all this is the MDN Docs. I hope these tip helps. Keep coding 🤘

    Marked as helpful

    0
  • Deepak Parmar• 490

    @deepak-parmar

    Posted

    @RodrigoPatricio,

    • the dice button requires a label to it for accessibility, add aria-label attribute with value "refresh advice" to solve this error.
    0
  • Deepak Parmar• 490

    @deepak-parmar

    Posted

    @shrutitalukder,

    • instead of normal buttons use radio buttons to choose rating.
    • when clicked on a rating button, it does not maintain its active state after clicking, you can implement it using :checked pseudo selector for radio button. This way whenever a rating button is clicked its background will stay orange.
    • for centering rating button, I suggest to use flexbox instead of struggling with list.
    0
  • Deepak Parmar• 490

    @deepak-parmar

    Posted

    @Troy, Add CSS cursor property to change the mouse cursor to pointer while hovering over Learn More buttons to show interactivity.

    Marked as helpful

    1
  • Deepak Parmar• 490

    @deepak-parmar

    Posted

    @Wandole, Use semantic tags like...

    • <main> instead of <div> for .fourCards element
    • <header> for .heading element
    • <section> for each .card element

    These would provide semantic meaning to the content and resolve accessibility issues.

    Visually your work looks great! 👌

    1
  • Deepak Parmar• 490

    @deepak-parmar

    Posted

    @sandovalmelo, nice work on the challenge! 👏

    • just create main element and move the whole card-container div inside it to resolve accessibility issues.

    Marked as helpful

    0
  • Daniel J Zambite• 10

    @CometCrisis

    Submitted

    This is the first project I finished and the most challenging part was starting from scratch but I learned a lot through the process.

    • I wasn't too confident with the CSS portion. I had to google a lot to figure out how to add curves to the card div and to the image. I also didn't know how to add box-shadow to the div so i googled that too. Overall, I had to google a lot to figure out how to put everything together which I think shows in my code.

    QR code card solution using CSS Flexbox

    1

    Deepak Parmar• 490

    @deepak-parmar

    Posted

    @CometCrisis, It looks great! 👏

    • your qr-code image is in the same directory as your index.html, the path images/image-qr-code.png is wrong it should be just image-qr-code.png

    and for some accessibility,

    • Use main tag to contain section element
    • and use footer element to contain attribution

    You need to generate new screenshot and report. You should wait for a few minutes for GitHub Pages deployment process to finish and then submit the challenge. (You can see the progress on Actions tab after making changes to your files)

    0
  • Deepak Parmar• 490

    @deepak-parmar

    Posted

    @preetamvarun, Advice is only generated when clicked on the button but not when the page loads. You should call the function once getAdvice( ) in your main.js.

    It would be better to call the function once page is loaded, like this... window.onload = getAdvice("https://api.adviceslip.com/advice")

    Marked as helpful

    0
  • Deepak Parmar• 490

    @deepak-parmar

    Posted

    @kattycreates, very well created!

    Great work on eliminating with accessibility issues.

    • Your solution is missing some space around it on mobile view.
    • and your active states are not showing up when hovered on them. (I'm sure view icon on the image should appear when hovered on and same for the other two links) I get that the name "active states" in the design is misleading here.

    Marked as helpful

    0
  • HutHut• 310

    @j-hutchison

    Submitted

    I struggled to get the image with purple overlay to the correct colour, any tips? Is there another / better way of doing this, i used the css, background property giving two parameters, gradient and image url.

    Thanks!

    Stats Component with CSS Grid and Flexbox

    3

    Deepak Parmar• 490

    @deepak-parmar

    Posted

    Hey @j-hutchison,

    First, the page and the image already looks so great. 👌

    As for the image, to get close to design, try...

    • adding image using <img> tag instead of applying as background.
    • give image's parent element (the section tag in your case) Soft Violet background color.
    • apply mix-blend-mode: multiply to blend the image with Soft Violet given to its parent
    • and set the image's opacity to 75%

    Someone helped me out on this and it did the trick for me, hope it works for you. 👍

    Marked as helpful

    0
  • Deepak Parmar• 490

    @deepak-parmar

    Posted

    @nathangalung, your solution is not live yet. github-pages deployment process is failed for some reason, it's also an issue for your NFT card solution as well.

    • you might wanna rename your .html file to index.html this way main webpage will directly show up without mentioning their file names.
    • although your code is alright, good work on that part 👌, you should use the semantic <main> tag and <h1> instead of <h2> for main text header to dodge a few accessibility warnings.

    Marked as helpful

    0