Skip to content
OverviewSolutions
24
Comments
7
P
Sean Buckle
@seanbuckle

All comments

  • Paul•470
    @mayor-creatorSubmitted 9 months ago

    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
    Sean Buckle•410
    @seanbucklePosted 9 months ago

    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•140
    @RandomGuy20Submitted 9 months ago

    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
    Sean Buckle•410
    @seanbucklePosted 9 months ago

    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-SSubmitted 10 months ago

    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
    Sean Buckle•410
    @seanbucklePosted 10 months ago

    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
    @RachmtbsSubmitted 11 months ago

    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
    Sean Buckle•410
    @seanbucklePosted 11 months ago

    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
  • beowulf1958•1,450
    @beowulf1958Submitted 11 months ago

    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
    Sean Buckle•410
    @seanbucklePosted 11 months ago

    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
  • Sean Buckle•410
    @seanbucklePosted over 1 year ago

    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
  • Sean Buckle•410
    @seanbucklePosted over 1 year ago

    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