Kuvashnee Naidoo

Latest comments

• 

  P

  DeKapito•50

  @DeKapitoSubmitted about 20 hours ago

  What are you most proud of, and what would you do differently next time?

  I'm proud of the fact that I managed to implement a page according to the design. Next time I would use BEM naming more to avoid styling plain html tags such as p, ul, li etc.

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

  It was difficult to make consistent paddings for different elements. Also hard to maintain readable and clear css file

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

  How to maintain clean CSS file for the whole project

  

  Recipe page

  1

  10
  

  Kuvashnee Naidoo•370

  @KuvashneeNaidooPosted about 19 hours ago

  Hi @DeKapito

  I have to say, this was very well done ⭐ The use of CSS variables for colors, fonts, and spacing helps ensure consistency across the entire project, making it easier to make updates later. This makes the code much cleaner and easier to maintain 👏

  I think you've done a great job with the CSS! To take it to the next level, I would suggest exploring SCSS. It allows you to take advantage of features like variables, nesting, and mixins, which can make your styles even more flexible and maintainable.

  Here is an example of using mixins. Simply, mixins allow you to create reusable blocks of code in SCSS. In the example below, the @mixin defines a box-shadow mixin that takes a parameter $shadow and applies it to the box-shadow property. @include is then used to apply the mixin wherever needed, passing the specific value for the shadow. This helps avoid repeating code and keeps it modular.

  @mixin box-shadow($shadow) {
      box-shadow: $shadow;
  }
  
  .recipe-picture img {
      border-radius: 1rem;
      @include box-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
  }
  

  You can learn more about SCSS here: SCSS

  Otherwise, nice work completing this solution! 🚀🚀🚀

  Happy coding :)

  Marked as helpful

  0
• 

  MartheA_19•20

  @MartheAudreySubmitted 1 day ago

  What are you most proud of, and what would you do differently next time?

  I am happy I was able to make the text of the webpage responsive without using media queries. It was an opportunity for me to learn something new.

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

  Make the svg image fit its container

  I change the default display value from inline to block.

  Make text responsive without media queries

  I used the clamp() function.

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

  I would like to know if apart from the clamp() function, there is another way to make the text of a webpage responsive without media queries.

  

  Blog preview card

  #pure-css

  1

  10
  

  Kuvashnee Naidoo•370

  @KuvashneeNaidooPosted about 22 hours ago

  Hi @MartheAudrey

  Great work completing this blog preview card! You have done well capturing the layout ⭐👏⭐

  To answer your question: You can make this card component responsive without using clamp() or media queries by utilizing Bootstrap's grid system and flexbox utilities. This is just something that you could consider exploring.

  For instance, you can use the card component in Bootstrap, which automatically adjusts its content based on the screen size. You can also use classes like card-title, card-text, and text-center to manage text layout and responsiveness. This approach eliminates the need for custom font scaling or media queries.

  You can learn more about using the Bootstrap card component here: Bootstrap Card

  Otherwise nice work completing this solution! 🚀🚀🚀

  Happy coding :)

  0
• 

  P

  Mihailo Sparic•260

  @MihailoSparic01Submitted 1 day ago

  What are you most proud of, and what would you do differently next time?

  Next time, I won't underestimate any challenge, no matter how easy it seems. Because of my arrogance, I was in a hurry to finish it so I could jump on to a new challenge, and I messed everything up, so it took a lot longer than it should

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

  Working with pseudo-elements to create a small triangle below the share button and center it, as padding wasn’t included when using left: 50% and translateX(-50%). I had to experiment with different values manually.

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

  General layout in HTML and JS Also, if you have any other suggestions, please feel free to comment. I will be happy to listen to and apply every advice

  

  Responsive article preview component

  1

  10
  

  Kuvashnee Naidoo•370

  @KuvashneeNaidooPosted about 22 hours ago

  Hi @MihailoSparic01

  Excellent work on creating the article preview component. I commend you on managing the display and hiding of the "share" section when the share icon is clicked. It enhances the interactivity of the component. ⭐👏⭐

  One aspect I recommend is adjusting the preview card to be centered on the page, as it's currently slightly above the center. To achieve this, you can modify the CSS for the body element:

  • Use flexbox on the body to center the card both vertically and horizontally.
  • Remove the padding-top: 16rem; to prevent the card from being pushed down.
  • Apply justify-content: center to horizontally align the content within the flex container, keeping it centered across the page.
  • Apply align-items: center to vertically align the content, ensuring the card is centered from top to bottom.
  • Use height: 100vh to ensure that the body takes up the full viewport height.
  • Use margin: 0 to remove any default margin that might offset the card.

  body {
    background-color: #ecf2f8;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }
  

  Otherwise, well done completing this solution! 🚀🚀🚀

  Happy coding :)

  Marked as helpful

  0
• 

  jarthurofv•40

  @jarthurofvSubmitted about 24 hours ago

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

  Any suggestions or tips are more than welcome. thank you everyone!

  

  stats-preview-card-component

  1

  30
  

  Kuvashnee Naidoo•370

  @KuvashneeNaidooPosted about 22 hours ago

  Hi @jarthurofv

  Excellent work creating the stats preview card! It is close to the original design ⭐👏⭐

  Here are some tips you can consider:

  1. Currently, the breakpoint is set at 600px (max-width: 600px), which causes the card details to be hidden on medium-sized screens. Try changing the breakpoint to 768px to ensure the content remains visible and adjusts well as the screen size decreases.

  2. Remember to always include the alt attribute for images. It improves accessibility by helping screen readers describe the image content to visually impaired users and also provides context if the image fails to load.

  Otherwise, nice work on completing this solution! 🚀🚀🚀

  Happy coding :)

  Marked as helpful

  0
• 

  Moundjid Machghour•70

  @PxMachSubmitted 1 day ago

  What are you most proud of, and what would you do differently next time?

  when I finished my Media Querie

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

  the right positioning of all elements

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

  Just have a look at my code and if you have any suggestions I'm here.

  

  Frontend-Mentor-Product-preview-card-component

  2

  20
  

  Kuvashnee Naidoo•370

  @KuvashneeNaidooPosted 1 day ago

  Hi @PxMach

  You did very well creating the product preview card! It includes most of the key elements of the design 👏👏👏

  There is one aspect that I noticed: Based on the design provided, the <h1>Gabrielle Essence Eau De Parfum</h1> and <p class="reduction">$149.99</p> should have the font-family "Fraunces"(https://fonts.google.com/specimen/Fraunces) but this is not reflecting on the page.

  You can import the "Fraunces" font into your stylesheet: @import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@400;500;600&display=swap");

  You can then apply the "Fraunces" font-family to the <h1> and <p class="reduction"> elements such as:

  h1, .reduction {
     font-family: 'Fraunces', serif;
  }
  

  This is just something to try to make the different fonts stand out a bit more and to align more closely with the original design.

  Otherwise, excellent effort!🚀🚀🚀

  Happy coding :)

  1
• 

  Filip Stojkov•370

  @thentrsfsSubmitted 1 day ago

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

  Any advice and comment would help. Thanks :)

  

  Product List using React and Tailwind.css

  #react#tailwind-css#vite

  1

  10
  

  Kuvashnee Naidoo•370

  @KuvashneeNaidooPosted 1 day ago

  Hi @thentrsfs

  Awesome work creating the product list using React and Tailwind CSS! The cart functionality works perfectly, updating the total as expected 👏⭐👏

  Here are some suggestions you can consider:

  1. Consider creating a reusable CartItem component to handle the rendering of each item in the cart, along with its properties (such as name, price, quantity etc.). This will reduce redundancy in the Cart and OrderConfirmed components and make your code more maintainable.

  2. Regarding code style, the indentations are a bit deep. Following the Airbnb JavaScript Style Guide, I recommend using 2 spaces per indent level for cleaner, more readable code.

  As a shortcut, you can install the Prettier extension to automatically format your code each time you save the file. You can follow these steps to install and set it up:

  • Open VS Code and click on the Extensions icon in the left panel.
  • Search for "Prettier" in the search bar.
  • Select the "Prettier - Code Formatter" extension and click the install button.
  • After installation, click the gear icon ("Manage") and select "Extension Settings."
  • In the search box, type "default" and go to the "Text Editor" section. Set Prettier as the default formatter from the dropdown menu.
  • Then, type "format" in the search box, go to "Text Editor > Formatting," and check the boxes to automatically format on paste, save, and typing.

  Otherwise, nice work completing this solution! 🚀🚀🚀

  Marked as helpful

  0