Skip to content
OverviewSolutions
8
Comments
5
Eni
@EnidaShehu

All comments

  • Kristi Lino•10
    @iluminatiomeaSubmitted over 1 year ago

    Hello everyone, I wanted to take this step without Bootstrap, using only HTML and CSS. You are free to give me suggestions and advice, I welcome them. Thank you.

    QR-Code HTML-CSS without Bootstrap

    1
    Eni•180
    @EnidaShehuPosted over 1 year ago

    Congratulation on completing your first challenge Kristi!

    A few helpful tips would be:

    1.Instead of using a fixed padding value, consider using a responsive approach with relative units like percentages or viewport units (e.g., padding: 10%) to adapt the section's size based on the screen dimensions.

    2.Improve class names: Instead of using generic class names like "card6" and "cashflow," consider using more descriptive and meaningful class names that reflect the purpose of the elements. For example, you could use classes like "qr-card" and "qr-code-img" to make the code more understandable.

    Keep up the good work :)

    Marked as helpful
    0
  • Eni•180
    @EnidaShehuPosted over 1 year ago

    Good job on your solution!

    To make the container edges round you can add the classes and CSS code below:

    .cont-1 { border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; }

    .cont-3 { border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; }

    I would also advice you to use rem instead of px when sizing elements. The main advantage of using rem units is their scalability and responsiveness. When you define sizes using rem, they adjust proportionally to the font size of the root element. This means that if you changes the default font size in their browser settings, all elements specified in rem will automatically adapt accordingly.

    Keep it up :)

    Marked as helpful
    1
  • Eni•180
    @EnidaShehuPosted over 1 year ago

    Congratulations on completing this challenge Nikhil :)

    A few helpful tips I would give you are:

    1 - Fix the spelling of the "container" class: In the <div> element with the class container, there is a typo. Change the class name from conatiner to container to correct it.

    2 - The image doesn't swap when the screen size changes. To achive that add both images on your html as below:

    <img src="images/image-product-desktop.jpg" class="image-1" alt="parfume-bottle" /> <img src="images/image-product-mobile.jpg" class="image-2" alt="parfume-bottle" />

    After that add the CSS:

    /* for current screen size*/

    .image-1 { width: 100%; border-top-left-radius: 10px; border-bottom-left-radius: 10px; }

    .image-2 { display: none; }

    /for smaller screen size/

    @media screen and (max-width: 375px) {

    .image-1 { display: none; }

    .image-2 { border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 0px; display: flex; width: 100%; }

    .image-1::before { content: url("images/image-product-mobile.jpg"); } }

    I hope this helps. Keep up the good work :)

    Marked as helpful
    1
  • Eni•180
    @EnidaShehuPosted over 1 year ago

    Good job overall :)

    To improve the code, you can consider the following suggestions:

    1. Remove duplicated CSS properties: The font-family property is specified twice in the body style. You can remove the second declaration to avoid redundancy.

    2. Add comments for clarity: Consider adding comments to the CSS code to provide clear explanations for each section or rule. This can be helpful for both yourself and other developers who may work on the code in the future.

    Marked as helpful
    1
  • levy_m•60
    @LevyMatiasSubmitted over 1 year ago
    • I create my own prototype with adobe xd
    • I liked to do this project
    • I accept any suggestions

    QRCode Component

    1
    Eni•180
    @EnidaShehuPosted over 1 year ago

    Good job overall :)

    A few suggestions I would make are:

    1. Make the page responsive: Currently, the page has a fixed width and height, which can make it difficult to view on smaller screens. Making the page responsive by using relative units like percentages or ems can ensure that the page looks good on all screen sizes.

    2. Use more descriptive class and id names: The current class names like "paragraph-primary" and "paragraph-secondary" do not provide much context about their purpose. Using more descriptive names like "heading" and "subheading" would make it easier to understand the layout of the page.

    Keep up the good work!

    Marked as helpful
    1