Skip to content
OverviewSolutions
6
Comments
9
Romel Williams
@omerome83

All comments

  • Romel Williams•180
    @omerome83Posted over 2 years ago

    Nice job on the challenge!

    Might I suggest one thing though? Please take a read on Semantic HTML. This will make your HTML code have more meaning - instead of the old way where the document is simply wrapped in <div> tags.

    For example in your code, instead of a <div class="main-container">, you can have <main class="main-container">.

    Source: https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure#html_layout_elements_in_more_detail

    Marked as helpful
    0
  • Romel Williams•180
    @omerome83Posted over 2 years ago

    Great job on the challenge.

    I would suggest instead of using so many <div> tags in your code, is to use Semantic HTML tags. Using tags like <main> and <section> can break up the code into parts which makes it easier to understand as the <div> tag alone doesn't do much.

    Additional information: https://www.w3schools.com/html/html5_semantic_elements.asp

    Also, it's considered better practice to separate your .css into an external file instead of it being embedded in your HTML. That way if you have multiple pages, you only need to make code changes once.

    Additional information: https://www.w3schools.com/html/html_css.asp

    Marked as helpful
    0
  • Romel Williams•180
    @omerome83Posted over 2 years ago

    Nice job on the challenge. :)

    Might I suggest adding a hover to the sign up button because I noticed it doesn't do anything when I mouseover on it.

    You can do something by adding a :hover pseudo class to the .cta class and adjusting the lightness for the HSL to a slighter higher value than the original bright yellow on the button and you should be good to go.

    For example:

    .cta:hover {
  background-color: hsl(71, 73%, 64%);
}
    0
  • Romel Williams•180
    @omerome83Posted over 2 years ago

    Great job on the challenge!

    My only suggestion is to have a hover for the sign up button as when I currently try to mouseover, nothing happens.

    You can do so using something like this by adjusting the lighting value for the HSL by creating an additional CSS variable like below:

    .card__section__bottom__left button:hover
{
/* --color-primary-brightYellow-hover: hsl(71, 73%, 64%); */
  background-color: var(--color-primary-brightYellow-hover);
}
    Marked as helpful
    1
  • Romel Williams•180
    @omerome83Posted over 2 years ago

    Great job on finishing.

    I would just suggest adding a hover state in your CSS when you mouse over on the "Sign Up" button.

    .signup-button:hover {
  background-color: hsl(71, 73%, 65%);
}

    Something like this, for example, would give the user an indication the link is "live".

    1
  • Nathasha•150
    @NathashaR1997Submitted over 2 years ago

    Hey Everyone, I have completed the challenge using the grid.

    Check out my following article, where I have briefly explained the steps I have followed to complete this challenge.

    https://uxplanet.org/challenge-005-3-column-preview-card-component-6c9b4e797f98

    Thank you for checking this out, and feel free to leave your feedback and thoughts!! Any feedback and tips are welcome.

    Many Thanks! Nathasha 😊

    3-Column Preview Card Component Using CSS Grid

    1
    Romel Williams•180
    @omerome83Posted over 2 years ago

    Great job on the challenge and I love how you documented your steps.

    My suggestion would be to add a hover state over each of the "Learn More" buttons.

    It doesn't have to be anything complicated, but something like this could work:

    .first-column .button:hover { 
  border: 2px solid hsl(0, 0%, 100%, 0.75);
  color: #E28525;
}
    0
  • Soojeong•220
    @kongguksuSubmitted over 2 years ago

    edited: I fixed the bug and now the codes are simplified!

    This is my first Frontend Mentor JS challenge. I'm learning JavaScript but I realized it's still quite challenging for me to adapt what I learned into actual project, even for a small one like this.

    I couldn't follow the DRY principle (Do not Repeat Yourself) and ended up writing a ton of codes that were repeated over and over again.

    Please let me know if there is a better way to fix this :)

    Interactive Rating Component

    3
    Romel Williams•180
    @omerome83Posted over 2 years ago

    Awesome job! May you have more to come!

    My suggestion and feedback would be to try and use CSS Variables - especially for font colors and backgrounds. They really make things a lot easier when going through the code. Then when you need to make a slight color adjustment, you only need to make the change once at the top.

    Marked as helpful
    1
  • Romel Williams•180
    @omerome83Posted over 2 years ago

    Nice job. I just noticed two things to take a look at:

    In your code where you have:

    <h3>30-day, hassle-free money back guarantee</h3>, I would use the <h2> tag instead and then the next heading would probably be <h3>. Just so the headers are in order.

    Also, I didn't notice that your <Sign Up> button does anything noticeable when hovered. You can slightly change the color or add an effect to the button using something like the :hover selector.

    Marked as helpful
    0
  • FrancoPagnotta•35
    @FrancoPagnottaSubmitted about 3 years ago

    Hi everyone! I hope you are well🙆‍♂️

    My name is Franco Pagnotta, I am a FrontEnd developer and this is my solution for this challenge.🙌🚀

    Tell me what you think and give me your opinion!

    Good development for you💪

    FAQ Accordion Card with HTML, CSS and JavaScript

    2
    Romel Williams•180
    @omerome83Posted about 3 years ago

    I think you did a great job! The only thing I could nitpick about is adding semantic HTML tags (<main>, <footer>, etc.) in your code. But again, I like it!

    Marked as helpful
    1