Skip to content
OverviewSolutions
18
Comments
26
Macdeesh
@macdeesh

All comments

  • Elaineβ€’11,400
    @elaineleungSubmitted over 2 years ago

    At first I built this with the goal of just making it function as intended, but I later felt to challenge myself to make this a more inclusive app with better accessibility, which meant I opted to use radio inputs for the tip percentages instead of just buttons and also to make the tab button work with the inputs. This took me a really long time because the biggest challenge was in how to group a visually hidden radio input with a text input (i.e., the custom text input) and work out all the logic with :focus, :checked, etc., and also how to make everything work smoothly when tabbing. Because of this, writing out the CSS and HTML was actually a lot harder than the JS, since I needed to figure out how to use the hidden custom radio button to affect the styling of the text input. I think it's pretty close to completion after some major updates, just need to clean and refactor, and do a tad more with the tabindex😌

    I found @sedcakmak's solution to be an excellent reference when I was trying to make improvements to my code, so shoutout to her πŸ™‚

    Would love to hear some input from the accessibility experts out there or any user really!

    Responsive tip calculator app with plain JS and Sass

    2
    Macdeeshβ€’610
    @macdeeshPosted about 2 years ago

    Hi Elaine, this looks really nice ! Very good work !! Bravo !!

    In case the amount of the bill is a big number like more than 7 zeros, the result of the calculation in Tip amount/person and total/person is too long and take place over the calculator, to fix this add an overflow-x: scroll on the amount fields.

    You forget to make the error message when the number of people is not added or 0. Or maybe it's by choice ?

    Marked as helpful
    1
  • Adebowale Adeagboβ€’40
    @Adebowale3Submitted about 2 years ago

    As I am a beginner, I found adjusting the QR to stay in the middle without moving on a laptop screen, I am also not sure whether my arrangement are well structured.

    Responsive QR code page

    3
    Macdeeshβ€’610
    @macdeeshPosted about 2 years ago
    This comment was deleted about 2 years ago
    0
  • Macdeeshβ€’610
    @macdeeshPosted about 2 years ago

    Hello Kevin, For the header-image, it looks oversized. Try max-width: 100%.

    Marked as helpful
    1
  • Briuwuβ€’750
    @BriuwuSubmitted over 2 years ago

    Hello~! (β‰§βˆ€β‰¦)γ‚ž

    For this challenge, I have finally decided to try framer-motion, but only the basic stuffs (lol), I still struggled on managing my CSS, so it's really messy... maybe I should consider learning styled components soon.

    HTML ISSUES: I can't seems to fix it, it says I have a duplicate id on my linear gradient ?? I don't really understand it, so please if you have any solutions please comment it. (fixed)

    Please do check this one out! If you have any feedback or tips! Please comment it!

    Thank you! (β‰§βˆ‡β‰¦)οΎ‰

    Social Media Dashboard using Reactjs

    2
    Macdeeshβ€’610
    @macdeeshPosted over 2 years ago

    Helloo Briuwu,

    Your work looks pretty good !! Well done !! I had a look at your code just to answer to your question about the HTML issues. I'm sure that you know that the id is unique, and we can't use more than one id name's in our HTML. Maybe you couldn't localize the error because the project is bootstrapped with Create React App. The linear gradient is used with the Instagram SVG 3 times with the same id, so you need to change or delete the id of 2 of those 3 SVGs. How I don't know but I found one of the id here :

    <div class="social-each Light Instagram">
  <div class="social-title">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
       <defs>
         <linearGradient id="a" x1="100%" x2="0%" y1="0%" y2="100%">

    I think fixing it is a bit tricky, as I don't have enough knowledge in JS, I can't help you more, but if you want to fix the issue have a look at this repo : https://github.com/exogen/babel-plugin-inline-react-svg/pull/1 Or this one : https://github.com/airbnb/babel-plugin-inline-react-svg/issues/57

    Marked as helpful
    1
  • Obaida Shurbajiβ€’250
    @obaidash99Submitted over 2 years ago

    Hello everyone! Here is my Solution for this Amazing Challenge!

    I found it hard and tricky to make the SVG backgrounds of some sections in the design. It is my first time using SVG photos, so it is not perfect.

    Hope you like it!

    Witing for feedback.

    Huddle landing page with curved sections.

    1
    Macdeeshβ€’610
    @macdeeshPosted over 2 years ago

    Hello Obaida, That looks pretty good ! Well done ! Have a look at the report above, it shows a few issues that you can fix. I also have some suggestions for you :

    • I would recommend using pseudo-element ::before and ::after to put the Custom shape dividers inside the CSS. That way, you can remove the decorative elements from the HTML structure.

    • Add obvious focus visible styles to every interactive element. This should be obvious and differ from the hover style, it helps keyboard users know where they are on the page.

    • For the email input, it should be <input type="email" id="email" name="email">, and before that you should add a label : <label for="email">.

    • Don't forget to write a good alt text to your image. Try to not use words like image or hyphenated phrases as if it's code, it is a human-readable description.

    Marked as helpful
    0
  • Macdeeshβ€’610
    @macdeeshSubmitted over 2 years ago

    Hello everyone !! If you have any comments or suggestions to improve my code, feel free to comment. Your feedback is appreciated. Thank you.

    Profile card component

    2
    Macdeeshβ€’610
    @macdeeshPosted over 2 years ago

    Hey Obaida, Thank you for your advice, I already saw it in the report as an accessibility issue and to be honest it was intentional to use h2 instead of h1, because normally this card component should exist as a div inside a body of a full web project, and it has no meaning to use a level-one heading in a profile card. Anyway, thank you again, and I hope we keep in touch with constructive feedbacks for our next projects. Happy coding.

    0
  • Macdeeshβ€’610
    @macdeeshPosted over 2 years ago

    Hello lilKriT, Just to answer to your question, maybe you can add ".." before the URL of the background image :

    background-image: url("../img/icon-supervisor.svg"); Instead of background-image: url("/img/icon-supervisor.svg");

    In your place, I will also use the pseudo-element ::after with the specific class and add : content: url("../img/icon-supervisor.svg");

    Marked as helpful
    0
  • Macdeeshβ€’610
    @macdeeshPosted over 2 years ago

    Hello Liam Burke,

    This is how you can improve your code :

    1- You should wrap the Equilibrium image with an anchor tag. It has :hover state, which means that it should be an interactive element. It also applies the other elements that have :hover state.

    2- I would do the hover effect on this using pseudo-elements like ::before or ::after. Also, for the other SVG icons you can put it inside pseudo-elements, as the icons are all decorative.

    3- For the hover effect (now attached to an interactive element wrapping the image and the eye icon) remove width on the img and set it to be display block max width 100%.

    4- I would recommend using h1 instead of h2, your page should contain a level-one heading.

    5- I don't recommend that you style the creator name using strong in your HTML, try font-weight inside CSS if you want to make it bold.

    0
  • Mattβ€’20
    @brewaskewSubmitted over 2 years ago

    Sharpening up my css skills. Starting to get positioning down better. Took some time to figure out how to put an overlay color on the main image when hovering over it, but after some google searching I was able to get it working.

    Card using HTML5, CSS3, and Flex

    3
    Macdeeshβ€’610
    @macdeeshPosted over 2 years ago

    Hello Matt,

    This is how you can improve your code :

    1- You didn't use the icon-view SVG when hovering the image. I would do the hover effect on this using pseudo-elements rather than adding extra in the HTML. Also, for the other SVG icons you can use pseudo-elements like ::before or ::after, as the icons are all decorative.

    2- The anchor tag for the heading should be inside a heading element.

    3- You should have no text in spans alone. Always use meaningful elements, like paragraphs, headings, lists etc.

    4- Don't forget to write a good "alt" text to your image. Try to not use words like image or hyphenated phrases as if it's code, it is a human-readable description.

    5- Font size should never be in px, always rem (or rarely em when you want it to inherit from a parent)

    6- You can add a class to the anchor of the creator name and style it instead of styling the span.

    Marked as helpful
    0
  • Macdeeshβ€’610
    @macdeeshPosted over 2 years ago

    Hello Safwan,

    You need to make some change in the HTML:

    1- I would recommend using h1 instead of h2, your page should contain a level-one heading.

    2 - Your Article needs heading. Consider using h2-h6 elements to add identifying headings to all articles. Or I suggest using <div> instead of <article>.

    3- Think about when you use the Web. What do you expect when you see a hover effect? You know something is clickable, right? That means it's an interactive element. Every place you see a hover style, you need to include an interactive element, like an anchor tag or button. So you should wrap the Equilibrium image and the other elements with an anchor tag.

    4- I would do the hover effect on this using pseudo-elements rather than adding extra in the HTML, but that's not essential. Also, for the other SVG icons you can put it inside pseudo-elements like ::before or ::after, as the icons are all decorative.

    5- Font size should never be in px, always rem (or rarely em when you want it to inherit from a parent)

    6- Don't forget to write a good "alt" text to your image. Try to not use words like image or hyphenated phrases as if it's code, it is a human-readable description.

    Marked as helpful
    0
  • Macdeeshβ€’610
    @macdeeshPosted over 2 years ago

    Hello Rado,

    This is how you can improve your code :

    1- What do you expect when you see a hover effect? You know something is clickable, right? That means it's an interactive element. Every place you see a hover style, you need to include an interactive element, like an anchor tag or button. That is essential to fix.

    2- I would do the hover effect on this using pseudo-elements rather than adding extra in the HTML, but that's not essential. Also, for the other SVG icons you can use pseudo-elements like ::before or ::after, as the icons are all decorative.

    3- You should have no text in spans alone. Always use meaningful elements, like paragraphs, headings, lists etc.

    4- Font size should never be in px, always rem (or rarely em when you want it to inherit from a parent)

    Marked as helpful
    0
  • Macdeeshβ€’610
    @macdeeshPosted over 2 years ago

    Hello Emanuel Hmar,

    You need to make some change in the HTML:

    1- Your <head> element is missing a required instance, so you must add a <title>.

    2- I would recommend using h1 instead of h2, your page should contain a level-one heading.

    3- Think about when you use the Web. What do you expect when you see a hover effect? You know something is clickable, right? That means it's an interactive element. Every place you see a hover style, you need to include an interactive element, like an anchor tag or button. So you should wrap the Equilibrium image and the other elements with an anchor tag. That is essential to fix.

    4- I would do the hover effect on this using pseudo-elements rather than adding extra in the HTML, but that's not essential. Also, for the other SVG icons you can put it inside pseudo-elements like ::before or ::after, as the icons are all decorative.

    5- Font size should never be in px, always rem (or rarely em when you want it to inherit from a parent)

    0