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
OverviewSolutions23Comments10

All comments

  • David Gichuru• 360

    @dxiDavid

    Submitted

    The component is using JSON from localhost which means that the built version doesn't have any content. I haven't quite figured out how to solve this yet, but I'm making progress.

    notifications page made with react js

    #accessibility#react

    2

  • David Gichuru• 360

    @dxiDavid

    Posted

    I'm not sure why the screenshot makes it look so stretched out 🤔. The live view looks just fine.

    0
  • Julian-Carlosama• 10

    @Julian-Carlosama

    Submitted

    I have two questions! I would know the best practices for this project. I know it's basic, but I want to give me your feedback.

    Thank you for your time and consideration.

    Creating that QR code with Javascript.

    1

    David Gichuru• 360

    @dxiDavid

    Posted

    Hello @Julian-Carlosama 👋🏾

    Congrats on completing the challenge 🎉

    I have a few suggestions on how you can improve your code:

    1. HTML📃

    • Make sure your content is wrapped inside a <main> landmark tag. If you want to learn more about semantic HTML tags you can find that here.
    • Make sure that your images have alt text for screen readers which will improve accessibility for your future websites. Try to have descriptive text so that the person knows exactly what the image is.

    2. CSS📄

    • Avoid setting fixed values for dimensions like width and height. Instead set a max-width and max-height for your elements
    • Avoid using absolute units like px for anything other than border-radius or box-shadow. Use responsive units like em and rem which will make your projects more responsive.
    • To center your card you can try the following methods
    1. Using grid
    body{
     min-height: 100vh;
     display: grid;
     place-items: center;
}
    1. Using flexbox
    body{
     min-height: 100vh;
     display: flex;
     flex-direction: column; 
     justify-content: center;
     align-items: center;
}

    Another useful tip is to build a habit of setting custom properties for the styles found in the style guide and any other styles you might re-use.

    You might also want to set up utility classes for centering things to avoid repeating yourself throughout the code.

    Your solution looks great

    I hope you found this helpful 😁

    Happy Coding 🥂

    Marked as helpful

    1
  • Kamil Wiater• 230

    @WiaterKa

    Submitted

    I have problems with the proper centering of the content on the page (there's more space on the left) and adding quotation mark.

    Also I think that CSS could be more condensed - any ideas how to make it more understandable and shorter?

    Thanks in advance for all suggestions!

    Happy coding!

    Testimonial Grid (no RWD)

    3

    David Gichuru• 360

    @dxiDavid

    Posted

    Hello @WiaterKa 👋🏾

    Congrats on completing the challenge.

    To solve your centering problem, try wrapping everything in a wrapper div or main container and center it using flexbox or grid.

    body {
  background-color: hsl(210, 46%, 95%);
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width: 1100px;
  height: 572px;
}

    For the above code you've written, declare a min-height first then use flexbox. Please do not give the body a fixed height or width after. The auto margin is also unnecessary.

    One last thing, avoid using pixels for dimensions, font sizes, or spacing. You're better off using em or rem.

    I hope you found this helpful, happy coding🥂

    Marked as helpful

    2
  • JavierRiv97• 10

    @JavierRiv97

    Submitted

    Hey! I'm not sure why but I cant seem to find the font styles in the read me file for this project. is this something I won't have access to until I get the pro membership? thanks in advance :)

    Product Preview Card

    2

    David Gichuru• 360

    @dxiDavid

    Posted

    Hello @JavierRiv97 👋🏾

    The exact font sizes are for pro members otherwise, use your knowledge of CSS and best judgment to get as close as possible to the design. Don't worry though, It's not that hard.

    Also, ensure that your projects meet accessibility requirements by adding alt text to your images for screen readers.

    Make sure that your Body content is wrapped in landmarks like <main> or <article>. You can find out more on semantic HTML here

    Happy coding🥂

    0
  • Akiraz14• 50

    @Akiraz14

    Submitted

    Hello there, I’m Akiraz 🐺

    This solution really took me a while (longer than I expected), I wanted to do it myself but also review other people's code to make sure my approach was correct and my HTML and CSS code was clean, scalable and maintainable. It was a very fun and educational process.

    Any feedback on how I can improve my coding skills is welcome!

    Thank you. ✌️😎

    QR Code Component (Flexbox + BEM)

    #bem

    1

    David Gichuru• 360

    @dxiDavid

    Posted

    Hello there @Akiraz14 👋🏾

    I have a suggestion that will help you write better code

    • when setting custom properties, try giving them descriptive names like --primary-font-color instead of --color-1st. It will make your CSS easier to read and understand. Also, try to set custom properties for styles such as font-size, font-weight, (basically things you see in the style guide)border-radius since they will most likely be used on more than one occasion.
    • Limit the use of pixels to things like box-shadow and border-radius, otherwise use relative units.
    • only look for references when you are absolutely stuck and cannot find a way out. don't waste time doubting yourself. If you have a working solution then good. come back and refactor later

    The attention to detail in your solution is impressive💪🏾

    Keep Going, happy coding🥂

    Marked as helpful

    1
  • David Gichuru• 360

    @dxiDavid

    Posted

    Hello @adarsaparasar

    I have a few suggestions on how to improve the solution

    • First contain everything inside the <main> </main> tags to improve accessibility. After that, put your container div then wrap the main elements, which are the picture and text, in divs of their own then use flexbox to position them.

    • The markup you've written just has one container and that makes things unnecessarily difficult to control. Take the time to really think about the structure of your content which will make styling it easy.

    • Avoid using absolute values like pixels for margins, padding, and font size and use relative values like em and rem which improves responsiveness and accessibility

    • Use max-width and max-height instead of width and height for a more responsive design. Also, avoid redeclaring the same values in a media query or active state if nothing is changing, it just makes your code messy and hard to read. Only declare what is changing.

    • Last but not least try as much as possible to stick to the colors in the design

    I hope you find this helpful, happy coding 🥂

    1
  • Mark• 70

    @Iron-Mark

    Submitted

    Hello! I would be very grateful to receive your feedback on this project.

    You could check out the GitHub repo link (I took time to document it ^-^ )

    Questions:

    • What is the better approach you think I can do in solving this website, compared to what I have done?
    • Can you point out some of the mistakes I did, and some suggestions/corrections?

    I struggled/was unsure of:

    • How I solve the overlay part
    • The 2nd container (Image)
    • The responsiveness of the website

    Responsive Stats Preview Card Component

    1

    David Gichuru• 360

    @dxiDavid

    Posted

    Hey @Iron-Mark

    Congrats on completing the challenge 👏🏾 The solution looks really good.

    Here's how you could make a few improvements:

    • Make sure the title or main heading is contained in the <h1> </h1> tags to get rid of those warnings and improve accessibility then adjust the font size to fit the design.

    • As for the overlay, since there's no fancy animation going on in this situation, just put the image in a div, set the background color to that overlay color, and then slightly reduce the opacity of the image.

    <div class="ctn-img">
      <img src="./images/image-header-desktop.jpg" alt="people in an office">
</div>

    .ctn-img {
       background-color: hsla(277, 100%, 24.5%, 0.57);
}
.ctn-image > img{
       filter:brightness(40%)
       filter:opacity(40%);
}

    You could also play around with other filters like brightness and saturation to get closer to the design. This will save you several lines of CSS code and markup. Just make sure the image fits in the div and you should be good.

    Hope you find this helpful 🙂

    Happy coding

    Marked as helpful

    1
  • David Gichuru• 360

    @dxiDavid

    Posted

    I'm not sure why I have those warnings

      <div class="reviews">
           <div class="stars">
                <ul>
                    <li>
                      <img src="./images/icon-star.svg" alt="star">
                    </li>
                    <li>
                      <img src="./images/icon-star.svg" alt="star">
                    </li>
                    <li>
                      <img src="./images/icon-star.svg" alt="star">
                    </li>
                    <li>
                      <img src="./images/icon-star.svg" alt="star">
                    </li>
                    <li>
                      <img src="./images/icon-star.svg" alt="star">
                    </li>
                </ul>
           </div>
   </div>
    0
  • Ezequiel Córdova Sotomayor• 870

    @3eze3

    Submitted

    Well, first of all I've been a little busy with a lot of things, but I still finished this project and the ones I'm missing haha 🤷♂️, I really liked this project, it made me review topics that I thought I already mastered as Css grid, the problem of collision of margins and some other issues, however I finished it and I feel I did well. As you know if you have any help to improve my code or design please comment.

    Clipboard Landing Page (Grid CSS) ❤🧐

    #accessibility#bem

    2

    David Gichuru• 360

    @dxiDavid

    Posted

    Hi, Ezequiel Córdova Sotomayor! 👋

    This solution is awesome, congrats 🎉

    I have a few suggestions for you to improve the code

    You might want to set the breakpoint a little higher than 490px to allow

      .track__snippets {
    flex-direction: column;
  }

    to stack items in that section on top of each other starting at a larger screen size (somewhere around 900px)

    You could also try to put the sections inside <main> to avoid the warnings

    <main>
    <section class="track">
    <section class="access">
    <section class="workflow">
    <section class="clipboard">
</main>

    I hope you find this helpful 😁

    Marked as helpful

    1