Skip to content
OverviewSolutions
9
Comments
6
Colten Siemer
@Coltensiemer

All comments

  • Pedro Lucas•20
    @pedroldlimaSubmitted over 1 year ago

    Cards HTML and CSS

    It's not very original to the base project, but I hope the community likes it, I accept criticism

    Cards about cars

    3
    Colten Siemer•200
    @ColtensiemerPosted over 1 year ago

    Hey Pedro,

    Great job with this solutions! Your code looks well done and the result is great. I like how you mark comments on your CSS to help keep it more easy for others to read and understand.

    I would recommend to always include an alt"" with text inside. This is for accessbility. It is a good habit to get!

    Check out this resource to learn some more! https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

    Marked as helpful
    1
  • phoenixjmh•10
    @phoenixjmhSubmitted almost 2 years ago

    Flying by the seat of my pants on this one, first challenge. Flex seems useful. Responsive design is tricky for a beginner. Took 3 hours :D

    Flexbox;html;css;

    1
    Colten Siemer•200
    @ColtensiemerPosted almost 2 years ago

    Hey!

    Great work on this project! The solution turned out great.

    On thing I noticed in your html:

    Avoid using more than one <h1> per page.Your second <h1> may be better off as an <h2> or just a <p> . Having more than one <h1> may cause screen readers to jump to all <h1. tags before continuing down the page.

    Check out this resource! https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements

    1
  • Colten Siemer•200
    @ColtensiemerPosted almost 2 years ago

    Hey Ricardo!

    This solution looks great! You did a great good with the layout and accuracy.

    There is something I noticed on your HTML. For inputs it is best practice to make sure your have a label for the input for accessibility.

    The Label needs to have a 'for' attribute that matches the inputs 'name' attribute.

    I recommend to read up on this. Here is a great resource! https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

    Keep it up!

    Marked as helpful
    0
  • Colten Siemer•200
    @ColtensiemerPosted almost 2 years ago

    Hey Michael!

    Great job on the challenge. This finale product is responsive as it should be.

    Here is something i notice which I think would to help your product.

    HTML: Instead of using 'Div' everywhere, Use <h1> and <p>. This is better practice and better for accessibility.

    Here is a great resource to view about HTML syntax and structure:

    https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals

    Marked as helpful
    0
  • Zakariyacee•10
    @ZakariyaceeSubmitted almost 2 years ago

    Q1. For javascript i feel like i could've wrote a simpler and more effective code but i didnt since i didn't know where to start. what could have been a better way to write that code.

    Q2. for mobile devices my website could still be scrolled horizontally no matter what i did and i wonder what i could've done to make the website stay still horizontally as it already was ok vertically.

    Thank you for any feedback, its very much appreciated!

    Responsive and interactive rating component

    2
    Colten Siemer•200
    @ColtensiemerPosted almost 2 years ago

    Hello! The design is really good and works smoothly! To your question about how you could improve the javascript:

    Adding an event listener works for each input works, however, that takes a lot more code and if you ever added more inputs, then you have to manually add another,

    A better practice is to use a 'for' loop that goes over all the input inside a listener event.

    for (let i = 0; i <input.length; i++){ //input is selected with 'queryselectorAll'

    then an if statement

    if (input[i].checked ) { rating.innerHTML = input[i].value } //rating is a getElementById }

    This will allow any of the input buttons that are checked to change the innerHTML to the input value (value is labeled in html).

    Try this method out if you want some extra learning.

    0
  • ToroDev•20
    @heitorcallipoSubmitted almost 2 years ago
    1. Trying to use more "em" and "rem", is it correct to use that way?
    2. As a simple challenge, but very good to train some CSS skills, hit me with some ideas of what to do correctly.
    3. Been struggling to know how to separate the paragraph as well as the preview one, so used <br/> tags, is it correct that way?

    Product Review Main Solution

    2
    Colten Siemer•200
    @ColtensiemerPosted almost 2 years ago

    Hey nice work on this one!
    You have the desktop layout looking great.

    I would recommend to try to make it responsive to smaller devices (mobile). See the challenges design photos for details about the mobile layout.

    Read about media queries as they are a power house tool in css to make a responsive design. https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries.

    Keep up the hard work!

    Marked as helpful
    0