Skip to content
OverviewSolutions
49
Comments
20

Douo

@DouooAddis Ababa940 points

A mobile dev brushing up on frontend skills! Thanks for checking out my work, and please feel free to let me know if anything is not working as it should, especially the older projects 😊.

I’m currently learning...

Python

Latest solutions

View more solutions

Latest 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.

View more comments