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
OverviewSolutions7Comments1

All solutions

  • Submitted

    Responsive Social Media Dashboard

    • HTML
    • CSS
    • JS

    1

    • Can every card be a separate <article>? For the follower cards I did this but for the overview part I wrapped them in a <section>.
    • In the follower cards I put the icons directly into the headings. Is this allowed, and does it create any accessibility concern?
    • In the cards for the numbers can I use <p>? They are very short, and I don't know if they fit into the paragraph's definition. Should I use <div> instead?
    • To implement the 2 background colors, I used an extra wrapper element in the <header> and set the max-width on that:
    .header-wrapper,
main,
footer{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

    • With the above, I didn't have to set a max-width and a margin(to center the content) on the <header> and <body>. I set the background-color on these two and this way the colors cover the viewport's width. Is this a good/correct way to implement this? I thought about using linear-gradient but I don't think I can round the corners with that, and also positioning the elements to the background-image would be a nightmare.

    • Based on the challange description and the design images the cards are interactive elements. Should I make them focusable and tabbable?

    • I did the color changes with custom properties. I originally wanted a pure CSS solution using the :has() pseudo-class in this selector: :root:has(#checkbox-field:checked) and changing the custom properties' values in this. But after checking the browser support for the has:() I instead used a simple JS script.Would the selector above be valid?

    Thank you for the feedback, and if you have any insight or suggestion even if it's not related to my questions I greatly appreciate that too.

  • Submitted

    Time tracking dashboard

    • HTML
    • CSS
    • JS

    2

    • How can I change the color of an svg image?
    • If an element, in this case the svg image(3 point) has a hover state, and it's container also has one, can you make it so when you hover directly on the svg image only the image's hover state is active and it's container's isn't?
    • When you hover over an activity(work, play, etc.) and it gets "lighter", I implemented that with a ::before pseudo-element. Should have I simply changed the background color?
    • For the first time in the JS script I created the HTML elements and gave them their text content - based on the JSON file - in one function, but later I seperated them into two: createActivities() and updateText(). In the first version I would have had to delete the HTML elements then create new ones when you wanted to view another period's stats. In the new version I have to use fetch() in both functions. So my question is which one is better in terms of speed/performance: deleting and creating HTML elements or the 2 fetch() or if there is better method for it?

    Thank you for the feedback, and if you have any insight or suggestion even if it's not related to my questions I greatly appreciate that too.

  • Submitted

    Responsive tip calculator app

    • HTML
    • CSS
    • JS

    1

    • Should I include a <form> element? I didn't put in one, because the page doesn't submit any data from the inputs.

    • Does the "Select Tip %" has to be a <label>. If yes, what should I give for it's for attribute.

    • The input fields are text type. I originally wanted to use number type, but then the spin buttons show up. When I searched for a way to remove it, the only way I found was a non-standard one(::-webkit-outer-spin-button pseudo-element). Is there a proper way to do it?

    • I gave inputmode="numeric" for the input fields, since I couldn't set them to type="number"(because of the spin buttons), but the w3c validator gives a warning since it's not supported by every browser. Is there a better way for this whole number type input field?

    • It's a broad question, but is there any problem with my script? Until now I only wrote 10-20 line scripts with simply one or two event listeners (I tried to provide proper description with comments).

    Thank you for the feedback.

  • Submitted

    Responsive Notifications page

    • HTML
    • CSS
    • JS

    1

    • The "Mark all as read" button is a <p> element. On the preview image when the mouse hovers on it the cursor changes. I don't think that it would make sense to make it into an <a> since it doesn't link anywhere. So I just changed the cursor type in CSS. Did I make the right choice?
    • For the small image on the right side I used outline instead of border in the hover state because with border it would push the element below it down every time you hover over it and it looked awful. Does the outline and border have some major difference(beside that the former doesn't take up space) that I should look out for?

    Thank you for the feedback.

  • Submitted

    Responsive News homepage using CSS Grid and Flexbox

    • HTML
    • CSS
    • JS

    2

    • The alt text for the images. I'm sure that the first one is for purely decorative purposes, but I'm not so sure about the other three, so I gave them alt text. Was it correct?

    • For the title of the 3 numbered articles I put an <a> into a <h2> for semantic purposes. Is it correct to give a link the semantic meaning of a heading this way?

    I greatly appreciate any kind of feedback.

  • Submitted

    Social proof section with basic HTML and CSS (responsive)

    • HTML
    • CSS

    1

    • To make the stair-like layout at the bottom of the page for the reviews, I gave a fixed height for that row in the <main>. I've read that it is usually not a good idea to give fixed height to anything. Is there a better/proper way for it?
    • Do I need to put the personal reviews in a <q>/<blockquote>?
    • For the 5 star reviews I implemented the stair-like layout with relative position. Another idea was to do it the same way like the personal reviews but with fixed width. Is it a good way to do it?

    I greatly appreciate any kind of feedback.