Skip to content
OverviewSolutions
14
Comments
13
Burak CLN
@brkcln

All comments

  • Burak CLN•385
    @brkclnPosted about 3 years ago

    Hey there, thanks for the sharing.. There are many ways for centering,

    • You may wanna look at this link. This might be what you're looking for.
    0
  • Burak CLN•385
    @brkclnPosted about 3 years ago

    Hey there, thanks for the sharing your work. Its pretty good. But i can say 2 3 thing about that.

    • its not centered, may wanna look at ..(You can use flexbox for that.)
    • setting fixed "height" and "with" not a good practice can overflow when text too much,
    • for padding and margin may wanna use "em" units, "rem" better for "font-size" good work keep up^^
    0
  • Burak CLN•385
    @brkclnPosted about 3 years ago

    Hello there, thanks for sharing your work. I can say 2 3 thing about your work..

    • Avoid to set "width and height" most of time you don't need,
    • Don't use "Pixel" for width, height its not a good practice and not responsive, use "em, vh or %" can search it. Padding and margin use "em" for sure..
    • Don't set width on body not a good practice,
    • For font-size you can use "rem" more responsive and new try to avoid "pixel",
    • And its not centered use of "height, left, right" etc.. Keep up ^^
    Marked as helpful
    1
  • Burak CLN•385
    @brkclnPosted about 3 years ago

    Hello there, thanks for sharing.. i can say 2 3 thing for your work.

    • Its looking like this on "chrome" https://prnt.sc/1qee9ew, and "opera" https://prnt.sc/1qee9xe lookin like this maybe wanna look at..
    • When i resize the screen its look like this https://prnt.sc/1qeea8c,
    • On tablet its overflowing https://prnt.sc/1qeeap5,
    • avoid to set "height" if u really wanna set height do it on "parent" like main.. keep up^^
    Marked as helpful
    1
  • Sandy Marrone•145
    @SamCastle16Submitted about 3 years ago

    Hello everyone!

    This is my first attempt at doing this. I only have two months learning HTML and CSS, and obviously this will have errors, so I hope you will tell me what you think about my development of this mini-project and what things could be changed and improved. It would be greatly appreciated!

    Order Summary responsive Pure CSS

    1
    Burak CLN•385
    @brkclnPosted about 3 years ago

    Hello there, Thanks for submitting your project. You did well, 3 - 4 thing i can say..

    • avoid to set "height" not a good practice (most of time),
    • I see unnecessary codes in the codes you wrote. Maybe you wanna look at,
    • For the font size try to use "rem" instead of "em" [watch this] (https://www.youtube.com/watch?v=pautqDqa54I)
    • Can add "main",
    • Can add "container" better experince, good work, keep up :)
    Marked as helpful
    1
  • Tejas Shekar•10
    @TejasShekarSubmitted about 3 years ago

    p.s. its been less than a month since I started my web dev journey and apologies if you feel that my questions are noob-ish.

    1. The box shadow is feather light and I just could not find out how to do it.
    2. Background wave svg did not render on github pages even though I dont have any issues when I previewed the site using live server.
    3. Any other suggestions for improvement are happily welcomed.

    Thankyou.

    Built using purely HTML and CSS

    2
    Burak CLN•385
    @brkclnPosted about 3 years ago

    Hey there, Thanks for the posting your work.. For your 2.question

    • Have look at your "file path", probably problem here.. Look Here
    • I don't fully understand the problem. This can help; [shadow generator] (https://cssgenerator.org/box-shadow-css-generator.html)
    Marked as helpful
    0
  • stephmunez•435
    @stephmunezSubmitted about 3 years ago

    Hello, this is my 3rd project. Just wanna ask if there's a better way of placing the elements in the card especially the user img I only used margin for it. Otherwise, any feedback is appreciated.

    Profile card component

    1
    Burak CLN•385
    @brkclnPosted about 3 years ago

    Hello there, Thanks for the post. You need a little more basic knowledge of "FLEXBOX" and "GRID". You can use flexbox for the "layout"

    • DONT margin, padding on "img" its not a good practice. Use them on wrapping div.
    <div> 
<img src="">
</div>
style 
div {
margin
padding 
height 
}
img {
width: 100% or max-width: 100%
height: auto
object-fit :cover // search this.
}

    You can use like this better practice.

    • try to avoid "setting height" not a good practice do it with padding,flexbox,grid etc. (just use it if necessary)
    • Search "absolute position" it can help you.. Keep working.
    Marked as helpful
    1
  • Atinder•100
    @atinderbirsinSubmitted about 3 years ago

    Hi,

    This is my first challenge on this site and it took a little while to understand but still i tried my best and this is final result , if there's anything that i should change to improve my skills please let me know!..

    Stats preview card component

    1
    Burak CLN•385
    @brkclnPosted about 3 years ago

    Hello there, Thanks for the posting your work.. The only problem is stats i guess not same line u can change that. good work.

    Marked as helpful
    1
  • Burak CLN•385
    @brkclnPosted over 3 years ago

    Hello there, thanks for the posting your work.

    • In my laptop your site looking like this (https://prnt.sc/1kq5u90), Its Vertical i didn't read all code but probably cause of media or flex,
    • on mobile - tablet ; its overflowing (https://prnt.sc/1kq75cp)Maybe you want to look at it too. Good work.. Keep it up..
    Marked as helpful
    1
  • Burak CLN•385
    @brkclnPosted over 3 years ago

    Hey there, good job.

    • You can use "border-radius" for borders,
    • For purple filter, background color on main div not a good practice, try to use ":before" and "absolute: position". You can check google for information,
    • Your image not responsive, "object-fit: fill" not good for it try "cover",
    • Some margin on stats, when i shrink it they are touching the bottom,
    • On mobile its overflowing, play with flex-wrap, font-size and padding try to fix it,
    • On tablet its not good, have to change it i guess, And the last one try to "not" set height not good practice.. Some of your code not working. Delete some of them..
      I'm sorry for my bad english, keep working^^
    0
  • Bektemir•35
    @bektonixSubmitted over 3 years ago

    Hello! I am new here. Honestly, I didn't tried as hard as I should on this first project. There are 3 unsolved tasks:

    1. Responsive images - I think it meant to be something like this: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
    2. Violet overlay (or what is it) - I tried to implement it with complementary div and its 50% opacity. But it's not what it should be :(
    3. Card's margin. On desktop and mobile there is different percentages, so what unit should I use? Thank you beforehand. Have a good day!

    Stats preview card component

    3
    Burak CLN•385
    @brkclnPosted over 3 years ago

    Hello there, these are not a big problem no worrys :)

    • First responsive image try this; wrap with div and set width and height for the div
    <div>
<img src="">
</div>
Css: 
div {
height: 300px, 50%, 10em etc..
width:  300px, 50%, 10em etc..
}
img {
width: 100%;
height: auto; 
}

    You can change width to max-width if you want up to you..

    • Second one for overlay u have to use "position: absolute" and parent should be "position: relative"

    just check it out : this is old but still working :)

    • The last one for margin - padding --> em* (recommended) or " % " for font-size rem*(recommended) and u can use "vh" for height
    Marked as helpful
    0
  • ujjwal•60
    @ujjwal454Submitted over 3 years ago

    can some one see it in mobile view and let me know if there is a problem or it is fine

    profile card page

    1
    Burak CLN•385
    @brkclnPosted over 3 years ago

    its okey on mi8 lite (chrome and opera) just on opera card background "not white" its "black." rest of its okey good job^^

    Marked as helpful
    1