Skip to content
OverviewSolutions
13
Comments
17

Danae Lescano

@Lescano713Lima270 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Danae Lescano•270
    @Lescano713Posted 7 months ago

    Your code looks awesome! You can enhance it by making a few style adjustments, such as adding more padding for better spacing and using max-width instead of breakpoints to create a more fluid, responsive layout

    1
  • RhysT97•120
    @RhysT97Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    Actually finishing the project and getting more comfortable with CSS.

    Not sure what else I'd do differently except maybe use this project as practice for any CSS frameworks I intend to learn.

    What challenges did you encounter, and how did you overcome them?

    Centering the styling of the buttons and retrieving the values of the buttons. This was an project that I had started before but never finished(until now) and I had actually set the innerHTML in Javascript for the button text which I had to remove.

    What specific areas of your project would you like help with?

    Button text centering on Chrome and Firefox seem to be slightly different, if there's any way to improve the centering the text of the buttons that would be much appreciated

    Interactive Card Component

    1
    Danae Lescano•270
    @Lescano713Posted 8 months ago

    I like how you used the linear-gradient property; it looks better than the original design. Overall, your code looks great, but here are a few suggestions for improvement:

    • Try using more semantic tags like main and section.Consider replacing the iteration with a forEach loop.
    • To align the button, you could use align-items on the div.container, or alternatively, use align-self on the button. This will keep the alignment of the other elements to the left.
    • I noticed that when you select an option, the background color doesn’t remain orange.
    • To fix this, you can use the :checked selector or handle it in JavaScript by adding a class to the selected button and another class to the unselected ones.
    • To minimize the code inside the submit() function, you can wrap the message in a separate function and call it from submit().
    • Another way to use querySelector is with querySelectorAll('button[type="submit"]'), which will select the button based on its type.
    Marked as helpful
    1
  • Danae Lescano•270
    @Lescano713Posted 8 months ago

    Hi, your code looks great, but there are some areas where you can improve:

    • HTML Structure: Consider using different semantic tags to group content based on its importance. For example:
    <body>
<main> <!-- For important content -->
<section class="info-1"></section>
<section class="info-2"></section>
</main>
</body>

    You can take a look at this article for more information on semantic HTML.

    • Responsive: You can use both min-width and max-width properties to adapt your container to different screen sizes. Consider that some devices have widths as small as 320px, so your container should adapt accordingly to ensure a good user experience on various devices.

    • Consolidated Vendor Prefixes: Removed redundant vendor prefixes for border-radius and filter properties. Modern browsers generally don’t need these prefixes.

    • Used Shorthand Properties: Simplified border-radius properties and other CSS rules.

    • Consistent Units: Made sure units like px and rem are used consistently for sizing and spacing.

    • Improved Readability: Organized and formatted the CSS for better readability and consistency.

    These changes help keep your CSS more manageable and easier to maintain.

    1
  • luis-gn006•40
    @luis-gn006Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    Thanks to the help from the community i fix the il with padding.

    What challenges did you encounter, and how did you overcome them?

    When i started i wasn't sure how to solve the position in the desktop resolution , but studying more now i know hot to make it

    What specific areas of your project would you like help with?

    The margin left change when makes a jump line,so i will like to know how to fix that and make the margin affect all the paragraph in the ul list item

    Recipe page

    2
    Danae Lescano•270
    @Lescano713Posted 8 months ago

    Your code looks good, but I think you can improve it:

    • To position a container on different screens sizes you can use :
    body{
min-width: 100dvw; 
min-heigth: 100dvh;
display: flex;
align-items: center;
justify-content: center;
}

    The min-width and min-height ensure that if the page increases in size, it will take up the new space completely and center the container.

    • For the bullets next to the list items, you can use:
    ul{
margin-inline-start: -10px
}
li{
padding-left: 10px}

    Instead of using margin, you can use padding to separate the bullets from the <li> elements. If you use margin, it might not work well with inline elements. If you replace a <span> with a <p> element or set the display to block, you might notice that the issue resolves. Some elements are inline or block by default, so you need to understand these properties and their effects in your code.

    Marked as helpful
    0
  • luis-gn006•40
    @luis-gn006Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    Thanks to the help from the community i fix the il with padding.

    What challenges did you encounter, and how did you overcome them?

    When i started i wasn't sure how to solve the position in the desktop resolution , but studying more now i know hot to make it

    What specific areas of your project would you like help with?

    The margin left change when makes a jump line,so i will like to know how to fix that and make the margin affect all the paragraph in the ul list item

    Recipe page

    2
    Danae Lescano•270
    @Lescano713Posted 8 months ago

    Your code looks good, but I think you can improve it:

    • To position a container on different screens sizes you can use :
    body{
min-width: 100dvw; 
min-heigth: 100dvh;
display: flex;
align-items: center;
justify-content: center;
}

    The min-width and min-height ensure that if the page increases in size, it will take up the new space completely and center the container.

    • For the bullets next to the list items, you can use:
    ul{
margin-inline-start: -10px
}
li{
padding-left: 10px}

    Instead of using margin, you can use padding to separate the bullets from the <li> elements. If you use margin, it might not work well with inline elements. If you replace a <span> with a <p> element or set the display to block, you might notice that the issue resolves. Some elements are inline or block by default, so you need to understand these properties and their effects in your code.

    0
  • Danae Lescano•270
    @Lescano713Posted 8 months ago

    Your code is quite clear, but there are a few areas where you could improve it for better readability, maintainability, and performance:

    Avoid Repeating Code: Many of the functions that handle different tip percentages are very similar. You could create a single function that handles the tip calculation based on a percentage.

    Handle Edge Cases: Make sure to handle edge cases where input values might be invalid (e.g., negative numbers or non-numeric values).

    0
View more comments