Skip to content
OverviewSolutions
25
Comments
6
Harsh Jain
@thisisharshjain

All comments

  • Harsh Jain•475
    @thisisharshjainPosted about 3 years ago

    Hello Shubhankar-Sengupta, Nice work here. I'll quickly point out few issues in your solution:

    1. There is too much space between avatar image and their title, On screen width between 770-990 it looks little wierd
    2. You forgot to put bg color
    3. Giving top and bottom marigin on main container will look better
    4. You can get rid of those HTML validation error by using forward slash (/) in image path Except these small issues i think everythings looks good. great work keep grinding 😄💪🏻
    Marked as helpful
    0
  • Amr Fouad•90
    @A-Fouad-CodeSubmitted about 3 years ago

    Please check out my code and if you find anything that you would've done differently share your ideas with me..

    Thanks in advance.

    HTML and CSS only

    1
    Harsh Jain•475
    @thisisharshjainPosted about 3 years ago

    Heyy A-Fouad-Code, Good work on this one! Also, Explaining your approach on readme is a very good practice 😉 So, 1. Moible design looks little congested, Giving more whitespace would look better 2. On wide screens there's too much empty space, You can give max-width and height for them. Everything else looks fine. Great work keep grinding 😄💪🏻

    Marked as helpful
    0
  • Ivelin Mitev•140
    @ivelinsmSubmitted about 3 years ago

    Hi!

    Do you know any good tutorials on mobile-first design? I have never done that and I would like to try.

    Because, as you can see, my code isn't very "responsive" and I used some pretty dumb ways to make it look a little bit better.

    Pure HTML and CSS solution

    2
    Harsh Jain•475
    @thisisharshjainPosted about 3 years ago

    Heyy ivelinsm, That's a pretty neat solution. There's a whole playlist on mobile-first build by Net ninja on youtube. Check that out! Also, a few tips to make your solution look better on mobile devices:

    1. You can decrease padding of #content so content inside have more space
    2. You can decrease overall font-size (like html { font-size: 50%; } ) Nice work buddy, keep grinding 💪🏻
    Marked as helpful
    1
  • Harsh Jain•475
    @thisisharshjainPosted about 3 years ago

    Heyyy pccipru, Nice work man! Making this in vanilla HTML CSS is another challenge and you did great. I found a few small issues:

    1. If i click all accordions then top and bottom one's are cut (You can either increase height of container accordingly or maybe wrap all accordions inside a div and set overflow-y to auto)
    2. Below 1200px width the image on left doesn't stays in center
    3. On mobile screens, give .text-container a little padding. That will look little better Everything else looks good to me 😄 Keep grinding 💪🏻
    Marked as helpful
    1
  • Amr Fouad•90
    @A-Fouad-CodeSubmitted about 3 years ago

    If you have any comments or ideas on how I can make my code better or the design look better please share your thoughts with me.

    HTML and CSS only

    2
    Harsh Jain•475
    @thisisharshjainPosted about 3 years ago

    Heyy @A-Fouad-Code, I'll point out a few things here,

    1. Main card isn't centered instead on top-left side
    2. Color overlay on image doesn't looks that good. maybe change the opacity a little
    3. Try to use semantic elements when possible
    4. Reducing the padding-top on .stats will look better
    5. It kinda breaks between 770-1199px Except these few small issues, You've done a good job! 😄 Kepp grinding 💪🏻
    0
  • Harsh Jain•475
    @thisisharshjainPosted about 3 years ago

    Heyy @AhmedAbdullah11, Congrats on completing your first challenge! 😄 Your card sticks to sides from 380-450px, decrease the max-width of your card and padding. Other than that everything else looks great! Keep grinding 💪🏻

    0