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

  • P
    Paul• 420

    @mayor-creator

    Submitted

    Hello, I have completed yet another project using CSS flex box, sass/scss and JS DOM. I had fun building. What are some best practices when implementing javascript functionality. Any suggestion on how to improve this or my code will be appreciated. Thank you.

    FAQ accordion

    2

    P
    Sean Buckle• 410

    @seanbuckle

    Posted

    The design is well-implemented.

    I would recommend using the <details> and <summary> tags, as they come with all the functionality you're looking for.

    I can be built without JS using name="" attribute.

    no support for name="" on Firefox, fairly new feature.

    See link: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

    Marked as helpful

    0
  • Josh• 120

    @RandomGuy20

    Submitted

    I couldn't figure out how to get GitHub to locate the image file for the background. Worked on Live Server but not GitHub Pages.

    Order Summary Component Solution

    1

    P
    Sean Buckle• 410

    @seanbuckle

    Posted

    Add . at the start to reference a folder/directory.

    Music Icon use the following:

    ./images/icon-music.svg

    For the background image two .. are needed, as it is not the same folder/directory, as the stylesheet.

    Background image use the following:

    ../images/pattern-background-desktop.svg

    Marked as helpful

    1
  • João Paulo• 70

    @JoaoPaul-S

    Submitted

    O projeto foi bem fácil, inicialmente usei apenas flex, mas com o grid alguns pequenos problemas foram resolvidos, o único que restou foi quanto a coloração da imagem pra isso usei um overlay com a cor fornecida pelo arquivo do desafio, mas ficou diferente acho que tem a ver mais com a saturação da cor mas não conseguir fazer funcionar, a forma que fiz está correta? Há uma forma melhor de fazer? e quanto a saturação de cor nas imagens tem como mexer com isso?

    Stats Card usando flex e grid

    1

    P
    Sean Buckle• 410

    @seanbuckle

    Posted

    In this particular example, colour saturation is not needed.

    I would recommend the following:

    • Remove the .overlay
    • Add background-color: var(-accent-color); to .workspace
    • Remove background-color and opacity from img
    • Add mix-blend-mode: multiply; to img

    Here is a link for mix blend mode: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

    Marked as helpful

    0
  • Racheal• 10

    @Rachmtbs

    Submitted

    What I found difficult was linking the image. I have always had an issue with this; I know how to find a link and add it, but I have never had success when the image is on my own computer. Centering the card on the canvas proved challenging. I am unsure about the font and the background color in the learning process. I would appreciate any helpful feedback. What am I doing wrong, and how can I improve?

    Flex grid

    2

    P
    Sean Buckle• 410

    @seanbuckle

    Posted

    Limit the number of <div> tags you use.

    Try to use more semantic ones, such as <header> <nav> <main> <article> <section> <footer>

    It will make it a lot easier to read the code not only for you, but also the browser.

    See link: https://www.w3schools.com/html/html5_semantic_elements.asp

    Try this for the image:

    <img src="./assets/images/image-avatar.webp" alt="Greg Hooper's Avatar">

    When it comes to centring in this particular case when using grid just use the following:

    display: grid;
place-items: center;

    For font, look at this link: https://developer.mozilla.org/en-US/docs/Web/CSS/font

    To make font and colour values reusable consider using CSS variables.

    See link: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

    Possible layout:

    body{
display: grid;
grid-template-rows: 1fr auto;
}

    <body>
<main>
<article class="card">
//card contents
<article>
</main>
<footer class="attribution">
</footer>
</body>

    Links on layouts and grid see below:

    https://1linelayouts.glitch.me/

    https://css-tricks.com/snippets/css/complete-guide-grid/

    Marked as helpful

    0
  • P
    beowulf1958• 1,170

    @beowulf1958

    Submitted

    There were a few things I was unable to solve:

    How can I get a radio button to focus and active using keyboard?

    The background doesn't look quite right on my smart phone; am I doing something wrong with background-image?

    Accessible CSS only accordion made with Sass / scss

    1

    P
    Sean Buckle• 410

    @seanbuckle

    Posted

    You have used <details></details> and <summary></summary>, so the keyboard functionality for focus is built-in. Use the tab key and spacebar or enter.

    In terms of the background image, check your file path. See below:

    ./app/assets/images/background-pattern-desktop.svg
../../assets/images/background-pattern-mobile.svg

    Marked as helpful

    0
  • P
    Sean Buckle• 410

    @seanbuckle

    Posted

    For the code layout I would recommend using something similar to this:

    <main>
main content here
</main>
<footer class="attribution">
attribution text here
</footer>

    body{
display: grid;
grid-template-rows: 1fr auto;
}

    I would recommend using the following to centre layouts in this particular case:

    main{
display: grid;
place-items: center;
}

    Check out this link: https://1linelayouts.glitch.me/

    Marked as helpful

    0
  • P
    Sean Buckle• 410

    @seanbuckle

    Posted

    For centering layouts the best option is CSS Grid.

    display:grid;
place-items:center;

    Check out this link: https://1linelayouts.glitch.me/

    Marked as helpful

    1