Skip to content
OverviewSolutions
14
Comments
7
Dinil Thilakarathne
@Dinil-Thilakarathne

All comments

  • Dinil Thilakarathne•250
    @Dinil-ThilakarathnePosted over 1 year ago

    Hi!, Congratulations on successfully completing the challenge! 🚀

    • Your code is impressive, but I have some valuable recommendations that could take it to the next level.

    CSS : 🎨

    • Looks like the card component has not been displayed well. So let me explain, How you can easily adjust the component using CSS properties.

    • By setting the height and width of your card component, you can ensure that it maintains its size even when the window is resized.

    /* card  */
.card{
    height: 500px;
    width: 400px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    border-radius: 20px;
}
    • You can learn more from 📚 here
    • Now your card looks well.

    Thank you, I'm glad to hear that my response was helpful! If you have any more questions or need further assistance, feel free to ask.

    Dinil Thilakarathne

    0
  • Dinil Thilakarathne•250
    @Dinil-ThilakarathnePosted over 1 year ago

    Hey there! Great job on completing the challenge! 🎉

    Here are some suggestions to improve your code:

    You can use this JS code for change the background color of rating buttons

    for (let i = 0; i < ratingBtns.length; i++) {
  ratingBtns[i].addEventListener('click', function() {
    for (let j = 0; j < ratingBtns.length; j++) {
      ratingBtns[j].classList.remove('active');
    }
    this.classList.add('active');
  });
}

    Here's a more detailed breakdown of the code:

    • The for loop iterates through all the elements with the class name rating-btns using the length property of the ratingBtns array-like object.

    • For each element, the addEventListener() method is called to attach a click event to it. The click event triggers the callback function.

    • Inside the callback function, another for loop iterates through all the elements with the class name rating-btns again.

    • For each element, the classList.remove() method is called to remove the active class from it.

    • After removing the active class from all the elements, the classList.add() method is called on the clicked element to add the active class to it.

    💡 This code ensures that only one element at a time will have the active class, which can be used to change the appearance of the elements with CSS.

    Hope this is helpful

    Marked as helpful
    0
  • Dinil Thilakarathne•250
    @Dinil-ThilakarathnePosted over 1 year ago

    Hey there! Great job on completing the challenge! 🎉

    Firstly, it's good to see that you are using modern CSS techniques like flexbox and media queries to create a responsive layout. This demonstrates a good understanding of CSS fundamentals. Your use of box-sizing to ensure that padding and borders don't affect the overall size of your elements is also a best practice.

    • Use meaningful class names that describe the content or purpose of the element you're styling. .

    I hope these tips are helpful for you!

    Here are some suggestions to improve the cleanliness of your code:

    • One area where you could improve is in your naming conventions. While some of your class names are descriptive (e.g. "pic-main"), others are not as clear (e.g. "desc"). It's generally best to use descriptive class names that make it easy to understand what an element is without having to look at the CSS.

    • Here, you can specify the radius values for each corner of an element in a clockwise direction starting from the top-left corner. For example: border-radius: top-left top-right bottom-right bottom-left;

    Using shorthand properties like "border-radius" can make your CSS code more concise and easier to read, while also helping you to write code more efficiently.

    Overall, your code looks clean and well-organized, and it's clear that you have a good grasp of CSS fundamentals. Keep practicing and experimenting with new techniques, and don't be afraid to try new things and push the boundaries of what CSS can do!

    Marked as helpful
    1
  • Dinil Thilakarathne•250
    @Dinil-ThilakarathnePosted over 1 year ago

    Hey there! Great job on completing the challenge! 🎉

    Great job on the code! The organization and structure are well-done, making it easy to read and maintain. The use of a Google Font (Outfit) is a nice touch, adding personality and uniqueness to the design. The use of flexbox is also a good choice, allowing for easy centering and responsiveness.

    The code you provided looks well organized and readable. However, here are some suggestions that could further improve the cleanliness of the code:

    • Use consistent indentation - While the code is indented properly, the number of spaces used is not consistent. You could choose a standard number of spaces for indentation (e.g. 2, 4, or 8) and use it consistently throughout the code.

    • Organize CSS properties in a consistent order - You could choose a standard order for CSS properties (e.g. alphabetical, grouped by type) and use it consistently throughout the code. This can make it easier to read and maintain the code.

    • Use shorthand properties - Instead of using individual properties like padding-top, padding-right, padding-bottom, and padding-left, you could use shorthand properties like padding: 15px 0 0 0;. This can help reduce the amount of code and make it more concise.

    • Use CSS variables - Instead of hardcoding colors, font sizes, and other values throughout the code, you could define them as CSS variables and use them throughout the code. This can make it easier to update the code and maintain consistency.

    • Remove unnecessary code - You could remove any code that is not being used or is redundant. For example, the height: 100%; property in .card-image img is not needed because the parent element already has a fixed height of 450px.s will help to make the code even more readable and maintainable.

    These changes will help to make the code even more readable and maintainable. Overall, great job!

    0
  • Dinil Thilakarathne•250
    @Dinil-ThilakarathnePosted over 1 year ago

    Hey there! Great job on completing the challenge! 🎉

    I have some suggestions that could help you improve your code even more. Here are some tips on how to make your CSS code cleaner and easier to read:

    • Use meaningful class names that describe the content or purpose of the element you're styling.
    • Avoid using inline styles and instead use an external stylesheet.
    • Group related styles together and separate them with comments.
    • Use shorthand properties when possible to reduce the amount of code you write.
    • Keep your styles consistent throughout your project.
    • Use CSS variables to keep your code more organized and easier to maintain.

    I hope these tips are helpful for you!

    Here are some suggestions to improve the cleanliness of your code:

    Use consistent indentation: Make sure that all your code is indented consistently. This will make it easier to read and understand.

    • Use meaningful class and ID names: Your class and ID names should describe the content or purpose of the element. Avoid using generic or vague names like "box" or "container".

    • Group related CSS properties: Grouping related CSS properties together can make your code more organized and easier to read. For example, you could group all the background properties together, followed by the font properties, and so on.

    • Use shorthand properties: Shorthand properties can help reduce the amount of code you need to write. For example, you can use "font" instead of "font-family", "font-size", "font-weight", and so on.

    • Remove unnecessary code: Make sure to remove any unnecessary code that is not being used. This can help reduce the size of your CSS file and make it easier to maintain.

    • Add comments: Adding comments to your code can help explain the purpose of certain elements or classes, and make it easier for other developers to understand your code.

    Marked as helpful
    0
  • Dinil Thilakarathne•250
    @Dinil-ThilakarathnePosted over 1 year ago

    Hey there! Great job on completing the challenge! 🎉

    I have some suggestions that could help you improve your code even more. Here are some tips on how to make your CSS code cleaner and easier to read:

    • Use meaningful class names that describe the content or purpose of the element you're styling.
    • Avoid using inline styles and instead use an external stylesheet.
    • Group related styles together and separate them with comments.
    • Use shorthand properties when possible to reduce the amount of code you write.
    • Keep your styles consistent throughout your project.
    • Use CSS variables to keep your code more organized and easier to maintain.

    I hope these tips are helpful for you!

    Marked as helpful
    1
  • Hugo Bolivar Webster III•10
    @BolleyBSubmitted over 1 year ago

    When I placed it in the repository, and clicked the site none of my CSS showed up but in VSCode everything worked fine. Hardest part was trying to fix the Repositorything and I still never fixed it.

    QR Code Component

    2
    Dinil Thilakarathne•250
    @Dinil-ThilakarathnePosted over 1 year ago

    Here are a few steps you can take to try and fix the issue:

    • Double-check the file paths for your CSS file. Make sure that the link in your HTML file points to the correct location for your CSS file. If you're not sure what the correct file path is, try using an absolute file path (e.g. /css/style.css instead of css/style.css) to ensure that the link is correct.

    • Make sure that your CSS file is included in your repository. If your CSS file is missing, GitHub Pages won't be able to load it.

    • Check that the file names are correct. Make sure that the file names for your CSS file and HTML file match exactly, including capitalization.

    • If you're still having issues, try using a relative file path in your link to your CSS file. For example, if your HTML file and CSS file are in the same directory, you could use href="style.css" instead of href="/css/style.css".

    Hopefully, one of these steps will help you resolve the issue and get your CSS displaying correctly on your GitHub Pages website. Good luck!

    1