Web design tips for developers



The first 1000 people to use the link will get a free trial of Skillshare Premium Membership:

Join the Discord:

Video on gap in flexbox:

It can be hard to know how to improve the look of your site. You know it looks bad, but you don’t know why! In this video, I break down 5 tips to help you make your sites and projects look better :).

/// Chapters

00:00 – Introduction
00:51 – line-length
04:14 – letting things breath
10:27 – contrast with color
14:17 – text-alignment
17:25 – contrast with font properties

#css

This video is sponsored by Skillshare

Come hang out with other dev’s in my Discord Community
💬

Keep up to date with everything I’m up to

Help support my channel
👨‍🎓 Get a course:
👕 Buy a shirt:
💖 Support me on Patreon:

My editor: VS Code –

I’m on some other places on the internet too!

If you’d like a behind the scenes and previews of what’s coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

Instagram:
Twitter:
Codepen:
Github:

And whatever you do, don’t forget to keep on making your corner of the internet just a little bit more awesome!

36 comments

  1. Would you recommend units like rem, em, ch for padding, gap and padding? I'm not sure if it's always appropriate

  2. About hyphenation: At least Chrom(e/ium) and Firefox have decent hyphenation support, so you may not need a javascript library for that. Just set hyphens: auto in CSS and set the lang attribute so that the browser knows which hyphenation rules to apply. YMMV depending on your language and your quality standards, of course.

  3. Sound advice. But on first seeing the video title I had hoped for more regarding graphic design layout.
    Heh-heh, there ain't nothin' free from Mistah KP!

  4. I always wonder.. Why are some of these not standard? A lot of the time it feels like "You should ALWAYS make this change", then why is it not default? I enjoy these videos as I am terrible with design in general so thank you for making them :D. Just having some general shower-thoughts 🙂

  5. When I heard you about margin of 5rem I was thinking like "wtf", but when I saw it I was like "wow, that's talent"!

  6. Justified text is also bad for accessibility. It makes it hard to read the text in general but more so with people with visual/reading disabilities.

  7. If I think on pixels, for a paragraph <p> how size might be the max-width on main container right after the <body>? 960px is ok? because if I set 90% for example, the paragraph will still look too wide for monitors of 2400px wide or more. Or less than 960? Do you always use “ch” to size the wide? As a reference, the YouTube comment allows, on my 1440px monitor, about 150 characters.

  8. Awesome! That 60ch thing would be life changing, totally serious ❤️

    I do hope it supports all the new browsers, but there's no reason why it shouldn't.

  9. To describe your lecture, I just need one word. FANTASTIC! I'm a javascript developer and I am trying to make services alone and that's when I realized that I know how to make things using my programming skills, but I don't have the ability to imagine how they should look at all. Knowing how things should layout on the website helped me a lot!

  10. Hello kev, I am having a issue with putting my webpage inside of an iframe and the webpage showing inside i did not upload it just want to test it

  11. Kevin, I was taught we should not be changing the size of <h1-h6> elements. In my opinion a plain <h> tag should be added to CSS.

  12. Does anyone know of any potential downsides to using something like:
    .content-width {
    width: 80vw;
    max-width: 1100px;
    margin: 0 auto;
    }

  13. Been checking out your videos lately, you inspired me to design random CSS in my spare time again and its really helped in my work projects plus all your top tips, thanks a lot Kevin!

  14. The absurd crab angiographically try because street ideally enter near a depressed ear. normal, quack japan

  15. If you use max-width: 75ch; you get a line length of around 75 characters regardless of font. Then you don't need to eyeball the width with rem.

  16. It's been a while, last I was here Kevin was not wearing glasses 😃 great content as always. Thank you

Leave a comment

Your email address will not be published. Required fields are marked *