Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions21Comments22

All comments

  • hao pham• 745

    @jerry-the-kid

    Posted

    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-kid

    Posted

    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-chan

    Submitted

    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-kid

    Posted

    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-kid

    Posted

    Wow. So smooth <3

    0
  • Lesley Wesley• 345

    @LesleyWesley

    Submitted

    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-kid

    Posted

    • 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-kid

    Posted

    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-kid

    Posted

    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-kid

    Posted

    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,060

    @buneeIsSlo

    Submitted

    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-kid

    Posted

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

    Marked as helpful

    0
  • Bao Nguyen• 100

    @quocbao19982009

    Submitted

    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-kid

    Posted

    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-kid

    Posted

    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-kid

    Posted

    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
  • Art• 420

    @Art-wdt

    Submitted

    Hey! This is my new work. My second challenge with JavaScript. Now I use jQuery. I would be glad to any advice :) Any suggestions you might have! Any comments!

    This time all accordion items are closed by default

    Feedback definitely appreciated

    FAQ Accordion with jQuery

    1

    hao pham• 745

    @jerry-the-kid

    Posted

    Your javascript on all accordion items are very good <3. But some open too fast.

    And you can make arrow rotate (180deg) and heading bolder when click that will be perfect.

    you can make faq__question curson : pointer.

    Marked as helpful

    1
  • 2C1F1X• 35

    @Cruc1f1x

    Submitted

    is using flexbox instead of grids unacceptable or looked down upon for creating this kind of a layout in front end development?

    CSS flexbox

    1

    hao pham• 745

    @jerry-the-kid

    Posted

    No. Using flex-box for 1 dimension layout is the best choice. More complex layout you can use grid but just 3 columns you can just use flexbox. I use flex-box in this challenge too <3

    And your solution is very good. I love it .

    Marked as helpful

    0
  • hao pham• 745

    @jerry-the-kid

    Posted

    At the mobile design you can set :

    .content-1 { border-bottom-left-radius: 0px}

    .content-3 {border-top-right-radius: 0px}

    More easy way is to have a div contain 3 div content and set it to have boder-radius: 20px, overflow: hidden

    Marked as helpful

    0
  • hao pham• 745

    @jerry-the-kid

    Posted

    For responsive you can add :

    .card { width: 95%; max-width: 350px } instead of width : 350px.

    Marked as helpful

    0
  • hao pham• 745

    @jerry-the-kid

    Posted

    Nice done. But for responsive you should add :

    Card you can change to be like : width: 70rem => width: 85%; max-width: 70rem;

    You should add width to 50% to class = 'information' and class = 'image-filtered'

    And mobile you can change class = 'information' to width :100% and set box-sizing: border-box;

    But there still many bug :v. But for beginner it ok. Keep try and make it perfect.

    0
  • Bao Nguyen• 100

    @quocbao19982009

    Submitted

    Hi, this is my first project on CSS and HTML as a web development beginner. Any feedback would be nice, Thank you. My problem during the project is the Unit, in order to get a responsive website I use units such as Percentage (%), vh, and vw. However, sometimes they do not give the outcome that I wish. Also, there is a lot of confusion regarding Max and Min (hight, width) use in CSS, is there any tips or document that you can recommend it would be very appreciated.

    CSS, HTML, Responsive Mobile and Desktop

    2

    hao pham• 745

    @jerry-the-kid

    Posted

    Nhìn tên có vẻ Việt Nam mà để Finland cũng ko biết tôi nên nói tiếng gì :)

    Ở 1000px -> 900px width là của ông bị vỡ là card nó bị quá width.

    1. 1000px -> 900px screen card oveflow Solution: @media (min-width: 798px) .card-content {width: 50%}
    1. 900px -> 800px screen data overflow : Solution : (ugly but fixed :V. Or you can decrease all font-size of card at 900px). @media (min-width: 798px) .data { flex-wrap: wrap;}
    1. 900px -> 800px picture not 100% height : You should set background-img instead of <img>

    Marked as helpful

    1
  • hao pham• 745

    @jerry-the-kid

    Posted

    Well done, beautiful. At >= 800px screen, in cards-container you should set max-width to like 400px (or something) and add more margin top that would be perferct. Beautiful anyway.

    0
  • Keshava Varma• 20

    @half-clutch

    Submitted

    how to keep the shape of the card same for lower resolution? in my case the height increases to compensate for the text until it goes to mobile layout.

    Responsive design - mobile first

    1

    hao pham• 745

    @jerry-the-kid

    Posted

    At (min-width: 900px) : You can change width: 80% or more than; max-width: 900px because you set width: 60%; max-width: 900px and 900px < 60% => width will be 60% and card will be smaller by width. At mobile phone screen you can set max-width to 370px or something. And it's good to go. Sr for my poor english :))

    0
  • hao pham• 745

    @jerry-the-kid

    Posted

    Well done. But in card-row try not using height, you can use padding top, bottom to card or margin bottom to element to create height. If you use height you can use min-height instead. At screen 790px in card-row, you can use flex-direction: column; align-items: center; to have mobile version and remove height. For learning you can see my solution. Sr for my bad at english. Well done anyway.

    1
  • hao pham• 745

    @jerry-the-kid

    Posted

    Well done. But maybe you can replace width 320px to max-width : 320px, width : 33.33% (3 cols) or width: 100%(1 col) for responsive. And try not to use height. Sr my bad at english. well done anyway.

    Marked as helpful

    0