Skip to content
OverviewSolutions
13
Comments
17
Danae Lescano
@Lescano713

All comments

  • Danae Lescano•270
    @Lescano713Posted 3 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 4 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 3 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 3 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 3 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 3 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 3 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 3 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 3 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
  • Danae Lescano•270
    @Lescano713Posted 4 months ago

    Your data management is excellent. Another way to handle it is by using fetch to retrieve data from a JSON file and then dynamically creating and adding elements to the DOM. However, you have some issues with adapting the content to different screen sizes. I noticed that you divided the content into two containers. If you start coding with a mobile-first approach, you can use media queries for widths above 420px to set the boxes-container with 'grid-template-columns: repeat(auto-fit, minmax(13em, 1fr))'. This way, the boxes will occupy the full width of the boxes-container, and the rows will automatically adjust.

    0
  • Abdullah Zafar•180
    @ei-abdullahSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of making my first project using TailwindCSS and regular expressions and for my future projects, I want to enhance my tailwind CSS further more.

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

    I faced problems when I was creating regular expression patterns for the valid email address and through the help of chatGPT, I was able to understand and implement it for faster email validation.

    Newsletter sign-up form solution through TailwindCSS and RegEx

    1
    Danae Lescano•270
    @Lescano713Posted 4 months ago

    Here are three improvements you could make:

    Order of CSS Files: Ensure that style.css is loaded after output.css if there is a possibility of style conflicts. This ensures that custom styles in style.css take precedence.

    Descriptive alt Text for Image: Update the alt attribute for the image to provide a more descriptive text. This enhances accessibility and SEO.

    Comment in JavaScript: Add a comment in the JavaScript code to explain the purpose of the code, improving readability and maintainability.

    Marked as helpful
    0
  • Alex•350
    @Sharky83Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    liked being able to carry out the eventlistener on the share icon.

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

    struggling to get the JS to work with the social_container in the correct positions.

    i am submitting a little early for general comments/advice...

    but this will also allow me to look at other solutions, to learn from and resubmit!

    article preview component

    1
    Danae Lescano•270
    @Lescano713Posted 4 months ago

    Your CSS code is well-structured, but there are a few areas where improvements can be made to enhance readability, maintainability, and efficiency:

    1. Avoid Repeated Styles:

    There are multiple instances where you set the same styles for different selectors. For example, the border-radius properties are applied multiple times. Consider using a common class for these styles to avoid repetition.

    1. Group Related Styles:

    Group similar styles together to improve readability. For example, the .author_container styles are scattered. It would be better to keep all .author_container related styles together.

    1. Consistent Naming Conventions:

    Ensure that naming conventions are consistent. For instance, .author_container and .author_name follow a certain pattern, but .social_container and .share_svg use different patterns. Consistent naming helps with maintainability.

    1. Use Shorthand Properties:

    Utilize shorthand properties where possible. For example, you can combine border-top-left-radius and border-top-right-radius into a single border-radius property if the values are the same.

    Marked as helpful
    0
  • Danae Lescano•270
    @Lescano713Posted 4 months ago

    You can group all the colors and font sizes using the :root selector. This makes it easier to change the styles later.

    I noticed you call the p and h4 selectors within each div. Another approach is to target the div, h4, and p directly, as they share the same properties. If you need to exclude a specific div, you can use the CSS :not selector. Alternatively, consider using <section> instead of div for the cards, and <header> instead of the first div.

    Marked as helpful
    0
  • adewalemudasiru•120
    @adewalemudasiruSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    It took quite some time but I was able to complete the challenge and I plan to do better in the next.

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

    I couldn't get the CSS background-image property to work for some reason, and I don't understand. I took the problem to my codepen to figure out the issue and found out I messed up the CSS selector, which should have been obvious, but I didn't see it; hence, the challenge took longer than expected. I first tried using the before pseudo-element, which worked but wasn't giving me the desired result.

    I know the challenges are supposed to be mobile first but I like to approach it from the biggest screen first and that gave me an unexpected issue. I expected the vh of the desktop to work the same for mobile but it didn't or maybe I just don't understand the concept and implementations well enough. This resulted in me having to figure out how to add a margin to the top and bottom of the grid content and it took about 4hrs to finally get it to work. I believe this is a beginner mistake that would have been quickly fixed by a pro.

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

    I'd be happy if someone could explain some of the common challenges with desktop first design when building for both mobile and desktop and how to tackle the problems.

    Frontend Mentor 7th Challenge - Testimonial Grid Section

    2
    Danae Lescano•270
    @Lescano713Posted 4 months ago

    I had the same problem with vh, and I resolved it by setting min-height: 100vh on the body. To be honest, I asked ChatGPT, but it didn't know. So, I applied borders and realized that the problem was vh. I think the issue was that the content couldn't grow if I used height: 100vh as a fixed size.

    In my case, I created the page starting from the desktop version. If you want to learn more ways to use grid and reduce the number of media queries, you can take a look at my code, particularly the main section. " grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense;"

    1
  • fiza•100
    @CodewithfizaSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    From this project i am able to learn about css grid.

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

    responsiveness.

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

    But when i make it responsive for mobile screen how to add some spacing at the end?

    four card feature using html and css

    1
    Danae Lescano•270
    @Lescano713Posted 4 months ago

    You can group all the colors and font sizes using ::root; this will help you add or remove colors without having to go to each element. Another way to import font families from Google is by using @import url('https://...'). If you have more than one font, you can combine them into a single @import statement.

    I also like to use CSS Grid. If you want to reduce the use of media queries while maintaining a responsive page, I suggest researching how to implement grid-template-columns: repeat(auto-fit, minmax(13em, 1fr)).

    0