Skip to content
OverviewSolutions
21
Comments
22
hao pham
@jerry-the-kid

All comments

  • hao pham•745
    @jerry-the-kidPosted 9 months ago

    Hi Yesim. Your web works great in desktop but there are some things to avoid like using margin left like 22rem. It's not good practice in responsive, what if your screen really big (the input and the picture will only on the left and remain big space in the right) and what if your screen like in tablet or mobile ( it will overflow outside the screen or it will on the left only ).

    My solution it you do like you usually do like set width and max-width and margin 0 auto so the item in center. I usually do that to. And for helper text you should use left : 10% or so replace to margin-left.

    Marked as helpful
    1
  • hao pham•745
    @jerry-the-kidPosted 9 months ago

    Hi Alexandre Shin,

    I wanted to commend you on your exceptional work, particularly the captivating shadow animations in the background. However, I noticed a minor issue in your code that I believe could be improved upon.

    In your card implementation, you've specified a height attribute. While this doesn't necessarily break functionality, it's generally considered a bad practice. The reason being, when you set a fixed height for an element, it can lead to content overflow if the content within the element exceeds this predefined height.

    A more advisable approach would be to allow the height of the element to adjust dynamically based on its content. By omitting the height attribute, the element's height will naturally expand or contract to accommodate its content, ensuring a more flexible and robust design.

    Keep up the great work, and I hope this feedback proves helpful in refining your code further.

    1
  • Kaho•130
    @shiv-chanSubmitted about 3 years ago

    When dragging and dropping a to-do item, the screen will be flickering a bit. If you have any advice to solve this problem, please let me know.

    Also, Todo.js has a lot of lines of code. Should it be abstract? Any tips for more clean and readablecode?

    Thanks!

    React To-do App

    1
    hao pham•745
    @jerry-the-kidPosted about 3 years ago

    Awesome application, But if you can save theme and todo thing in local-storage => so i can use again.

    • In the middle of radio btn and text if i can click it => it check it will be better.
    • I have done one. But it cannt drag and drop (┬┬﹏┬┬). So you do it better than me :D. Anyway beautiful app and your skill is very good 🔥🔥
    0
  • hao pham•745
    @jerry-the-kidPosted about 3 years ago

    Wow. So smooth <3

    0
  • Lesley Wesley•365
    @LesleyWesleySubmitted about 3 years ago

    Hey guys!

    One question I had was that I noticed that if the total outputs are more than $100, it changes the size of the calculator. I was just wondering how you would fix this, whether you would use max-width or another method?

    Other than that, I worked really hard on the JS for this project, and I'm pretty proud of getting it to work, but I'm open to any suggestions for how to improve!

    Also, I wasn't sure how to initiate the calculations since there wasn't a submit button, but I ended up making everything happen after you press "Enter." I'm curious about how others approached this, though.

    Tip Calculator with Flexbox and JS

    2
    hao pham•745
    @jerry-the-kidPosted about 3 years ago
    • Size you can set overflow-x : scroll with the fixed width.
    • Intead of pressed 'Enter'. You can addEventListener('input') (when you input number ) or addEventListener('focus') (' after input from when you focus to other thing ).
    Marked as helpful
    0
  • hao pham•745
    @jerry-the-kidPosted over 3 years ago

    At .card__image img You can add object-fit: cover, so your image have responsive.

    In Your Body use min-height : 100vh instead of height: 100% so in your mobile version, the card isn't hidden.

    There are my advices and i think in your .card__content has so much space in bottom (desktop-version). Your solution is good anyway. Well done 🎉✨

    Marked as helpful
    1
  • hao pham•745
    @jerry-the-kidPosted over 3 years ago

    Wow. well done ✨✨

    But your in .left__text input[type="email"] you can set font-family : inherit; so when you input text you won't have default font-family.

    Some issues in smaller height i think. You can try to fix that :)). Sr i don't known how to fix that :((.

    Marked as helpful
    0
  • hao pham•745
    @jerry-the-kidPosted over 3 years ago

    You did very good this time. Here are my advices :

    1. At body you can set background-size : cover.
    1. At .container you can set max-width: 1200px, width : 95%, margin : 3rem 0; that will be ok than : margin: 2rem 3rem 0 3rem. you can custom again my width, max-width if you like.
    1. At .article img you should set should smaller like : 60% and set object-fit: contain so img will be smaller follow the sceen width.
    1. You should smaller font-size when smaller screen. My advice is learn about rem unit or clamp in css.

    https://www.sitepoint.com/understanding-and-using-rem-units-in-css

    Clamp : https://youtu.be/U9VF-4euyRo?t=4

    That's good to go. Happy codding 😁

    1
  • bunee•2,020
    @buneeIsSloSubmitted over 3 years ago

    Hi it's me, bunee! I really wanted to learn CSS grids, I figured this challenge would be a great start.

    I've learnt quite a bit solving this challenge. As embarrassing as it is to admit, I spent more time centering the testimonials container than learning about grids themselves... Shout out to @tediko, His solution really helped me solve this issue.

    Not to sound cheesy but, I need some good resources on "how to center a div" :')

    Also if you could take a look at my code and give me some feedback, I'd respect it. Also also, Let me know how you feel about the animations.

    Click here to view the Live Site

    Click here to view the Code

    Testimonials Section | CSS Grids | Anime.js | Mobile first

    3
    hao pham•745
    @jerry-the-kidPosted over 3 years ago

    Damn. It's hot. Responsive as well. Well done 🎉🎉

    Marked as helpful
    0
  • Bao Nguyen•100
    @quocbao19982009Submitted over 3 years ago

    Hi, thanks for taking your time to look at this challenge. I am practicing CSS and HTML as a newbie and hoping to get some feedback from our fellow web designers. In this challenge, I found a few questions to mind:

    • When setting up the grid, should I use unit Pixel (px) or Percentage (%)? Both work fine but using percentages may move the context inside and mess up the align-items. Pixel is good and very constant but it doesn't feel responsive(?)
    • I am using 2 screens: a 2k and a FullHD screen. I found that the size of the website is not the same on the two screens (Ex: too big on fullHD but small on 2k screen). Should I change them to the same resuluation or is there any standard that I need to take into consideration? Thank you!

    HTML, CSS

    3
    hao pham•745
    @jerry-the-kidPosted over 3 years ago

    Chào ông. Ngày xưa tui cũng có những câu hỏi như ông. Thấy tốt là ông cũng đặt câu hỏi như vậy :)) Tui cứ tưởng ai cũng là PX fan :))

    Câu 1 : Là ông có thể dùng cả 2 thứ luôn là px và % ông có thể đăt như sau width: 80%; max-width : 400px. Vì khi vậy khi ông thu nhỏ screen thì vẫn có 400px đến một lúc nó sẽ so sánh 80% với 400px nếu 80% nhỏ hơn 400px thì nó sẽ thu lại theo 80%.

    VD : width : 80% = 375px < 400px thì nó sẽ theo width. còn width: 80% = 500px thì nó sẽ theo max width (vì lớn hơn). Viết rút gọn như sau : width : calc(min(80%, 400px)). Rảnh thì ông có thể coi video : https://www.youtube.com/watch?v=U9VF-4euyRo&t=262s

    Câu 2 : Theo tui khi đi sâu vô thì ít ai dùng px. Mà thay thế bằng rem sẽ giải đc trường hợp trên. px thì sẽ dùng ở mấy cái ít thay đổi như border, boder-radius.... kiểu vậy.

    Đặt bằng rem thì nó sẽ cỡ font của hệ thống vd html { font-size : 62.5% } thì giờ 1rem = 10px (100% = 16px) ; Rồi ông có thể làm mọi thứ bằng rem

    VD : width: 4rem; = width: 40px

    Ở màn hình lớn có chiều dài rộng hơn ông có thể làm @media cho màn hình rộng html { font-size : 75% }. Giờ 1rem = 12px. Mọi thứ sẽ giãn ra theo rem

    Video tham khảo : https://www.youtube.com/watch?v=N5wpD9Ov_To

    Marked as helpful
    1
  • hao pham•745
    @jerry-the-kidPosted over 3 years ago
    1. You can set .top-section { max-width: 450 px; margin: auto} (recommend)

    or .title_description { max-width: 450 px; margin: auto}

    1. You can use <br> tag (That's fine. Sometimes i use it)

    Desktop version is ok. You have some bugs at mobile version. Try to fix it. Happy coding <3

    Marked as helpful
    0
  • hao pham•745
    @jerry-the-kidPosted over 3 years ago

    Tips :

    For border u can have a div contain 3 cards div and set like border : 20px; overflow: hidden

    Feedback : I think you should have breakpoint smaller than 992px for mobile screen.

    Well done. For your first challenge <3

    Marked as helpful
    0