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

All comments

  • Abdul Subhan•1,600
    @Esabdul
    What are you most proud of, and what would you do differently next time?

    I'm proud that I completed this project from start to finish, including solving merge conflicts and fixing deployment issues. Next time, I'll keep the folder structure clean from the beginning and double-check my file paths to avoid broken styles or images.

    What challenges did you encounter, and how did you overcome them?

    I faced issues with GitHub Pages not showing my CSS and images. The problem turned out to be incorrect file paths that started with slashes. I also had some Git merge conflicts,but I resolved them using GitHub Desktop and the terminal with guidance.

    What specific areas of your project would you like help with?

    I would appreciate feedback on how I structured my HTML and CSS. I'm especially interested in learning how to better organize small components and follow best practices for readability and maintainability.

    QR Code Component using Flexbox and Mobile-First Design

    1
    P
    Sean Buckle•410
    @seanbuckle

    The project is very well put together.

    In terms of the HTML <div> tags, they should be avoided; instead, use more semantic ones such as <section>. Here is a Link.

    However, only use <div> if there is no other alternative.

    For the CSS, use relative units em rem rather than absolute px for fonts and widths, but also use logical properties like width to inline-size. For classes, keep them concise.

    Below is example CSS with slight improvements:

    * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  min-block-size: 100dvh;
  padding: 20px;
  display: grid;
  place-items: center;
  font: 400 0.938rem/normal san-serif;
  background-color: hsl(212, 45%, 89%);
}

img{
  max-inline-size: 100%;
  block-size: auto;
}

.qr-card {
  max-inline-size: 20rem;
  padding-inline: 16px;
  padding-block: 16px 24px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  text-align: center;
  background-color: white;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); 
}

.qr-card__img {
  border-radius: 10px;
  margin-bottom: 9px;
}

.qr-card__body {
  padding-inline: 8px;
  color: hsl(220, 15%, 55%);
}

    I used BEM for the classes, but it's not everyone's cup of tea.

    Happy coding!

    Marked as helpful
  • meddifera•20
    @meddifera
    What are you most proud of, and what would you do differently next time?

    I'm most proud of choosing the correct difficulty level this time so I can actually finish and submit the challenge.

    What challenges did you encounter, and how did you overcome them?

    The most challenging part would be to style the bullets in a different way than the text. The keyword to the solution is li::marker in CSS. The other part is the table at the end of the page. I hid the table borders and used <hr> and styled it with CSS.

    What specific areas of your project would you like help with?

    The project itself was ok. The git part was probably the hardest bit but I guess practice makes perfect. We just have to keep doing it and don't be afraid to look like a fool to your future self because that's probably the only person who's going to judge you that really matters. Be kind to yourself because you have to treat others like you treat yourself.

    Simple recipe page adhering to web content accessibility guidelines

    1
    P
    Sean Buckle•410
    @seanbuckle

    For the table, hiding all the borders was the right way to go, but the <hr> is not needed instead, try something like:

    tr{
/* Rest of code */
border-bottom: 1px solid lightgray;
}
tr:last-child{
border-bottom: 0px;
}

    The tag selectors will need to be replaced with classes for the code above.

    Here is a reference link to Last child - MDN Web Docs

    This may help you a bit with git: https://docs.github.com/en/get-started/start-your-journey/hello-world

    Happy coding!

  • P
    Sean Buckle•410
    @seanbuckle

    Looks good for a first project.

    A quick tip make it your own e.g. color scheme, other features etc.

    Happy coding!

  • P
    Sean Buckle•410
    @seanbuckle

    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
  • P
    Sean Buckle•410
    @seanbuckle

    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
  • P
    Sean Buckle•410
    @seanbuckle

    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
  • P
    Sean Buckle•410
    @seanbuckle

    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
  • P
    Sean Buckle•410
    @seanbuckle

    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
  • P
    Sean Buckle•410
    @seanbuckle

    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