Skip to content
OverviewSolutions
49
Comments
20
Douo
@Douoo

All comments

  • Guillermo Dominguez•440
    @memominguez
    What are you most proud of, and what would you do differently next time?

    Particular features are:

    • Modal display, with create portal
    • Responsive navbar, with Tailwind CSS
    What challenges did you encounter, and how did you overcome them?
    • Significant prop-drilling for handling the Modal
    • In a challenge review, I would try a state management tool (there is more than one)
    What specific areas of your project would you like help with?

    Somebody solved this challenge? Did you use a state management tool?

    Cowdfunding product page with React and Tailwind CSS

    #react#tailwind-css#vite
    1
    Douo•940
    @Douoo

    Hey Guillermo, I think this looks quite well put together! I think you did many things well; for instance, I like how readable and well-annotated your components are. There are just a few things I noticed could be better.

    1. I suggest you remove the up and down arrow for the text field when inserting a pledge (I was using Firefox to review your website - this styling can differ from browser to browser). Here is a good link regarding how to remove the arrows by W3School
    2. When I click on 'Pledge with no rewards' - I'm presented with a text field which defies the purpose of continuing without having to insert the reward
    3. [Optional] Last thing I want to outline was the fact that I could continue with an empty field (without inserting a price) - it would be a good user experience if I got a feedback that said I need to insert the $ amount

    All in all, I really think you did a great job on the whole. You used proper elements for each usecases which something important in regards to readability and performance. As for me, I didn't use any extra state management tools except for what is basically provided by React (which is useState and useReducer). Hope some of this can help you out, and really great work on the whole, so keep going!

    Marked as helpful
  • BDWNAV•50
    @BDWNAV
    What are you most proud of, and what would you do differently next time?

    I am proud of my flexbox usage as I feel like I used it effectively.

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

    Some challenges I encountered were positioning and I implemented certain flexbox properties to overcome this issue.

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

    I would like to see if I am using flexbox correctly and also efficiently.

    Perfume product card

    1
    Douo•940
    @Douoo

    Hi BDWNAV, good job putting this together! 😊 I got a few suggestions for you here:

    1. I would suggest wrapping the main-div inside the <main>...</main tag as this will semantically helps the code refer main content of the body.
    2. Right now the component in the mobile have a stretched image with height that fills in the screen. This could restrict the flexibility of the component and one fix would be to wrap your card into a container class like as follow:
    .container{
width: min(80%, 600px); 
/*This will give the card a max width of 600px but will give the elements in it 80% maximum width of the screen (if its below 600px) */
margin-inline: auto; /*Centers the element */
}
.main-div{
min-height: 450px;
padding: 1rem;
/*Now you can remove the width constraint here and the 100% height & width property within the mobile view */ 
}

    Then in html

    <main class="container">
   <div class="main-div">...</div>
</main>
    1. Instead of using the <image/> tag with CSS for handling the switching of the desktop and mobile images, try to use the picture element instead since this is a product image and is thus central to the card.
    <picture>
   <source media="(max-width: 375px)" srcset="images/image-product-desktop.jpg" />
   <img src="images/image-product-mobile.jpg" alt="Glass perfume bottle placed against a leafy background" />
</picture>

    Hope some of this can help you out, and really great work on the whole, so keep going!

  • Oseremen Godstime•80
    @devandytech
    What are you most proud of, and what would you do differently next time?

    Am really proud on how the padding works on the box.

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

    The profile pic of Greg Hooper was really overflowing from the box, that the reason for the height to be too much

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

    I would really love any suggestions from anyone, and also the dark line that was created on the left and bottom, how was it created?

    Just html and css

    1
    Douo•940
    @Douoo

    Hi Oseremen, first off, I think you did a great job putting this together! If there is one thing I would change, it is centering the card in the middle and adding a background shadow to your container (card). Something like:

    body{
display:grid;
place-items:center;
min-height: 100vh
}

    Making display property grid - transforms the element into a grid container. A grid container allows you to arrange its child elements into a structured grid layout. Then the place-items:center property centers the grid items both horizontally and vertically within the grid container. Lastly the min-height: 100vh sets the minimum height of the element to 100% of the viewport height (vh stands for viewport height). This ensures that the element's height will always be at least as tall as the visible part of the browser window, making it useful for creating full-height sections or components.Hope this helps you out a bit!

  • Douo•940
    @Douoo

    Hey Veronica, just came across your solution. Impressive - I like your solution and even better, I like your confidence. You did a very good job. A small suggestion though - in your <article> tag you gave it a fixed width of 21.4375rem, by doing this you are taking away the responsiveness and setting a constant width that stays the same for a certain condition (in your case responsiveness). Now there is no problem with this as long as it gets the job done but its not as flexible as it should be. Here is a better solution for it:

    article {
  width: min(21.4375rem, 85%); 
...
}

    This will give it a max width of 21.4375rem but will keep the width at 85% in case its lower than the given width. By doing this you won't need to change or adjust the width property in different media size. Overall, you have done a pretty solid job for this challenge and seeing from your code I have no doubt that you will progress even better with time. Keep up the good work Veronica 👍🏽

  • Douo•940
    @Douoo

    Hi Tuminha, congratulations on finishing the challenge. You have done a decent job on making the landing page look as the design but I see a small technical mistake (in terms of semantics) and room for improvement in your code. For example, you used a <p> tag for a button in the hero section which is not semantically correct. Plus, the hover state of each button is not working. Additional to this, the column for the card list is 2 while on the design is 3 (for the larger screen) and there is a bit of margin to the body. Not sure what is causing this but its recommended that you use a reset css before you start styling. Here is a reset link in case you are interested in learning more about it - https://piccalil.li/blog/a-modern-css-reset/ - what it does is it basically reset the default browser style so that you build every style per your wish (I find this to be very helpful). Although, I'm giving you suggestions on improvement I still think you have done a pretty solid job finishing this challenge and I think you are just starting out. I wish you a good journey of building up yourself 💪🏽

    Marked as helpful
  • Douo•940
    @Douoo

    Congrats on finishing the challenge @mritul 😊, I was going to check your code along with your website visually but the link to the source code (github link) is not working☹️. I also noticed that the images (icons) on the website was not loading - I think the path of the images is not correct.

  • Douo•940
    @Douoo

    Congrats on finishing the challenge 🎉. I have to say the choice between using width: 100% and max-width: 100% for the <img> tag depends on what you want to achieve with your images and how your layout is structured.

    1. width: 100%: This CSS rule will make the image take up 100% of the available width of its containing element. If the containing element's width changes, the image will scale accordingly.
    • Note that this can lead to image distortion if the image's aspect ratio is different from its container (since 100% refers to the parents width).
    1. max-width: 100%: sets the maximum width of the image to 100% of its containing element's width. This is commonly used to ensure that the image doesn't exceed its natural size and maintains its aspect ratio while resizing. It's a good choice for responsive design when you want the image to scale down to fit the container but not exceed its original dimensions.

    Remember, using a <div> to wrap an <img> can be a helpful technique, especially if you want more control over the layout and the behavior of the image. For example, you can use a <div> to create a container for the image and then apply a max-width: 100% to the image inside the <div>. This can be useful for adding padding, margins, or other stylings to the image container.

    Hope this helps you understand when to use width:100% and max-width:100% on imgs 😊

    Marked as helpful
  • Douo•940
    @Douoo

    Hi Krishna, Seems like you are crushing the challenges 💪🏽. The way you used animation, the structure of your content, and responsiveness are all praiseworthy but I faced an issue while testing your website on a mobile device. The navigation menu was not showing up when I clicked on the hamburger menu. Other than this, I say it is awesome 😊. Keep up the good work 👍🏽

    Marked as helpful
  • Douo•940
    @Douoo

    Spot on 👍🏽

  • Douo•940
    @Douoo

    Hi there Paul, this looks like a great start, and I think your code works fine. But I'm not sure why you went with table instead of div for this specific challenge but I take it, you've your own reason. However, I do suggest that you use unordered list <ul> for the layout instead of a table as I believe its semantically wrong. According to MDN documentation, the <table> HTML element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data. More info here.

    You might also need to adjust the typography of the following element:

    • Your result (on the left side of the card)
    • of 100 (under the score - its too small)

    Lastly, you might reduce the border radius on the button and also add a :hover property on it. Additional to this, add cursor: pointer on it as well.

  • Douo•940
    @Douoo

    Hi there @Sensei-Kaboto, Congrats on finishing this challenge. I saw your solution and I have to say in visual terms, it is top-notch and deserves credit. In terms of your code, I believe you can improve naming your CSS classes. I suggest you check out the CUBE or BEM way of organizing your CSS classes. Going over your source code I also saw that you used inheritance in your CSS to achieve some of the styling - which is not recommended in a professional environment. It is widely recommended that you give each of your styles a class. Lastly, the line height of the body text on mobile might be better adjusted (they're too close). Other than these you did a good job. Keep it up 👍🏽

    Marked as helpful
  • Douo•940
    @Douoo

    Hi Caleb, Congratulation on finishing the challenge. It might be a bit difficult to center elements initially but I'm pretty sure that with time you will adapt to the best solution and patter. There are a couple of ways you could use to center an element but I will mention 2 (as I use them most of the time).

    1. CSS Grid:
    .grid-element{
display: grid;
place-items: center; /*This will center the elements inside the grid */
}
    1. CSS Flexbox:
    .d-flex{
display: flex;
justify-content: center; //centers the content on horizontal axis
align-items: center; //aligns the content at center vertically
}

    Depending on how you want to structure your layout, you can use either of these methods. You can check more details about them from Kevin Powell on here: https://youtu.be/rg7Fvvl3taU?si=FSfiY-WPrGgTpUym

  • Douo•940
    @Douoo

    Nice work on completing the challenge @UVARAJAND. You have done a great job in making your solution look close to the design. However, in closer observation, I noticed that your solution seems to have a fixed-width container which limited me from seeing the whole content on a screen width ranging from 450 - 1150px. I hope you can fix this issue as I was forced to scroll horizontally to see the content available on screen. All in all, keep up the good work 👍🏽

    Marked as helpful
  • Douo•940
    @Douoo

    Nice job on finishing the challenge. You have done a good job on making your solution look close to the design and I say there are small adjustments that would make it even better. One would be using the right font family provided along with the design and the other one is getting rid of the shadow from the left side of the card (on the upper part I see shadow which is not necessary). All in all, you did a very good job. Keep up the good work 👍🏽

    Marked as helpful
  • Douo•940
    @Douoo

    Awesome job 👌🏽 . No problems with the color, although I would have preferred to see the footer (attribution) at the very bottom of the page. But that doesn't matter much, its just a personal thing. Plus you nailed the solution. Keep it up moving forward 👍🏽

  • Douo•940
    @Douoo

    Hi there Travis, cheers on finishing the challenge 🍻. I'm not sure if I'm missing something or not but your site's layout is quite different to that of the design. Its not aligned as it should. I wonder if the deployment caused you this problem, because the screenshot I see on your GitHub Read-Me file tells me that you got your code close to the design. All in all, keep up the good work 👍🏽

    Marked as helpful
  • Douo•940
    @Douoo

    Nice work man 👍🏽...Your project structure reminds me of my own workflow. Keep it up!

  • Douo•940
    @Douoo

    Congrats on finishing the project Mario, a couple of things I suggest you do are:

    1. Use div instead of section for the card. Its always better to use div to contain or group your components. I see that you used <section> to wrap-up your card content which is not recommended. Use section when you want a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. you can find more info about the use of <section> here

    Recommended version would look something like this

    <div class="card">
 <img class="card-img"...>
  <div class="card -content">
   ...
 </div>
</div
    1. Its always best practice to give a descriptive alternate text for your html img elements as its the fallback when the image doesn't render properly
    2. Instead of using <span> for the profile name, I suggest you use <a> tag as its a link. That's it from me! Aside from these issues, I saw that the hover state on the profile name are not active. You've done good visually but you could do much much better to improve your code. Keep up the good work 👍
    Marked as helpful