Web design tips for developers

Рет қаралды 98,271

Күн бұрын

The first 1000 people to use the link will get a free trial of Skillshare Premium Membership: skl.sh/kevinpowell02211
Join the Discord: / discord
Video on gap in flexbox: • Gap in flexbox & how t...
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
💬 / discord
---
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
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 KZfaq channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Пікірлер: 169

@KevinPowell 3 жыл бұрын

The first 1000 people to use the link will get a free trial of Skillshare Premium Membership: skl.sh/kevinpowell02211

@xenialxerous2441 3 жыл бұрын

Hey Kev👋🏻! You look awesome here, really handsome!!✌🏻

@fernwood 3 жыл бұрын

Great video. I’m a seasoned developer who really needs to up my design skills once and for all. I took advantage of your Skillshare link to sign up for a year. Do you have any design videos recommendations for videos that would be useful for developers?

@lindsayreiner9872 2 жыл бұрын

Kevin, you have made me an infinitely better designer. If I have a CSS question, I don't scour the documentation. I pull up KZfaq and find a video you've created that helps me. You haven't let me down yet! So grateful!

@t20sgrunt36 3 жыл бұрын

Decent rule of thumb for copy width. Neve have copy blocks go beyond 800ish pix, and aim for 600-700px max-width. Also on headings aim for an “F” pattern- meaning the top line will often be the longest( if the design warrants it). Always appreciate your videos. You’re the best

@quickcodingtuts 3 жыл бұрын

If only I found this channel earlier. This is some really useful stuff!

@KevinPowell 3 жыл бұрын

Welcome aboard!

@travholt 3 жыл бұрын

The best time to plant a tree is twenty years ago. The next best time is now!

@rohan1765 3 жыл бұрын

Quick tip - if you want to support the youtubers like Kevin for their generous work , you can avoid skipping ads , it'll surely help 🙂

@sashatv138 3 жыл бұрын

This is a good point.

@gearsighted 3 жыл бұрын

The irony is that all of the ads are for weblow and elementor...kind of funny that youtube is kind of undermining the excellent info Kevin provides by suggesting we use WYSIWYG editors instead.

@BlurryBit 3 жыл бұрын

I wouldn't skip it if it was not a page builder. Sorry 😭

@toma1610 3 жыл бұрын

I always skip 99.9% of the ads in all videos.

@dexterfairweather6846 3 жыл бұрын

I'm so glad I found your channel, you have a really good sense of design for both UI and programming, and explain your process well. Much appreciated!

@mascatrails661 2 жыл бұрын

As you were talking about line length it finally clicked why I had such a hard time reading text books in school 20ish years ago. I sometimes had to use my fingers or a ruler to keep track of which line I was on and needed to move to next. Thanks for all the great tips as always

@hayounglee5929 3 жыл бұрын

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!

@PaulSebastianM 3 жыл бұрын

Man, your examples and live coding are amazing. Best guide I've seen on YT.

@creativereasons7588 3 жыл бұрын

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!

@ryaaan0751 Жыл бұрын

Hi Kevin, just want to say thank you for the video contents that you put on youtube, I have been consuming it for some time now and it helped me a lot with my learning and boost my confidence on web development. Appreciate you and hope you continue to make more helpful contents like always. Have a good one!

@joyvideos1802 3 жыл бұрын

I am always looking for web design standards which i used to get from you videos. Thank you Kevin 😊

@skillzorskillsson8228 3 жыл бұрын

Great suggestions Kevin ! 2 other things i feel is super important for a great design is font family and Color Scheme. I know you have a video about which font to use and i believe i have seen a video about colors made by you too :) You really make great videos, very much appreciated

@yerassylabilkassym7609 3 жыл бұрын

Thank you! Very helpful video that I was looking for. I had some problems with design and you helped me a lot)

@MrBr1ghsid3 3 жыл бұрын

This is greatly appreciated. Thank you Kevin!

@NN-kj4py 3 жыл бұрын

Kevin, I was taught we should not be changing the size of elements. In my opinion a plain tag should be added to CSS.

@MoldovaAndrei 3 жыл бұрын

Thank you, Kevin! You are really making the web look better.

@suvrotica Жыл бұрын

Kevin your channel is one of the best. Not just the content but also your demeanor makes all the difference. Could you do svelte and sveltekit 1.0?

@Chelseasweethearts 4 ай бұрын

Kevin! This was awesome thanks so much for these valuable tips!

@markmcguire1894 3 жыл бұрын

Fantastic tips and great explanations. Thanks!

@ead5590 3 жыл бұрын

This was super helpful. Thanks a lot! ✌🏻

@sashatv138 3 жыл бұрын

I will never be tired to thank you, Kevin! Thank you!!!

@hassanshaiba9481 3 жыл бұрын

Thats what I was looking for... Thanks for this great content you providing here... Keep it up

@dineshrout2527 3 жыл бұрын

You've made simple things look awesome.

@poykhuntod44 Жыл бұрын

I can't stop learning from you. Thank you so much your are amazing.

@albertoa.r.5995 3 жыл бұрын

These are great tips! Thanks

@swarupusare 3 жыл бұрын

Love this❤again thank you for making such a wonderful video 😇 Tips & tricks😉

@virajshukla2584 3 жыл бұрын

Thanks Kevin, great tips 👍

@nikhildhakal3727 3 жыл бұрын

Useful. I always wanted a base css to avoid using design frameworks but use only flexbox.

@maman1414 3 жыл бұрын

I didn't realize I watch this video until end There is many thing I learned in this video, thanks man, nice content 👍

@inklingboi8431 3 жыл бұрын

thank you. i really need this X)

@kiranfrancis7397 3 жыл бұрын

I am a beginning in UI developing and thanks for daily updates.... it is very helpful to me

@AhmedMubarak255 3 жыл бұрын

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

@Dedseq 3 жыл бұрын

Hey Kevin, This is great stuff!

@jonasjo9091 3 жыл бұрын

Really really awesome stuff here 🔥

@zero758 3 жыл бұрын

I needed this so hard

@venkateshanap3271 3 жыл бұрын

This is what I looking for.. Thank you sir

@pulok9909 3 жыл бұрын

Pretty helpfull tutorial. Thanks Kevin.

@troika_473h 3 жыл бұрын

Thanks for the video!

@CodingNuggets 3 жыл бұрын

I am definitely not a web designer, but I'm learning that it is an essential in today's age of being a developer. Thanks Kevin. See you soon!

@hanhai8515 3 жыл бұрын

thank you for the great content, subscribed

@nro337 3 жыл бұрын

Thanks for the great video!

@stonecrow00 3 жыл бұрын

thank you for this. Pretty important part of design I think most of us overlook.

@AA-em3lw 3 жыл бұрын

Thanks, Keven, great Work and informative as always (=

@joeloftus6148 3 жыл бұрын

As always, you da man! I'll refer back to this video when I'm staring at my screen, wondering why my stuff isn't as pretty as other stuff.

@tarikamaterasu238 3 жыл бұрын

No wonder they call you King of CSS thank you for the great tips

@sabbirahmmed3841 3 жыл бұрын

Thank you so much for awesome video

@parampreetrai7093 3 жыл бұрын

That's great. Like how 2 3 lines can change entire feel of a website.

@CharlesSmall 3 жыл бұрын

Thank you Kevin.

@matiasvaccaro453 3 жыл бұрын

i learned more on this video with code aside than the most of design ui videos i saw on my life jaja

@provocateach Жыл бұрын

I *love* your ConvertKit shirt!

@peterholzer4481 3 жыл бұрын

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.

@stephenpino235 3 жыл бұрын

Awesome love your vids

@victorbadaro 3 жыл бұрын

thanks for the awesome content =)

@mohammadnoushadsiddiqui4786 3 жыл бұрын

Thankyou so much sir

@klingonac79 3 жыл бұрын

U nailed it!

@Morrile1 3 жыл бұрын

Very interesting and practical points. Many websites seem to be predominantly image based whereas in my case it's 99% text with a few images; so I have some very long pages. Limiting the characters in a line would mean even longer pages yet I understand the practicability of doing so. The only solutions I know of (feel free to make suggestions) is to split the page up into segments with either tabs or accordions, accordions are my preferred option.

@KevinPowell 3 жыл бұрын

You need to be really careful with accordions or tabs, both from an accessibility POV, and a lot of users might miss the into. If there is that much, could there be more pages instead? Or is it that bad if you need to scroll more? You could have a sticky navigation with anchor links that can make it easier to move between sections, for example :)

@nikkoalpha2 3 жыл бұрын

Consider using CSS columns for longer text sections.

@Morrile1 3 жыл бұрын

Apologies for the late reply. Valid points and suggestions, many thanks. Was trying to keep the website only a single level below the root for every language. However, I can create a second level below the root and split the contents into separate web pages under the first level title. For desktop mode both the main menu and languages menu are visible left and right of the central content.

@aashayamballi 3 жыл бұрын

Thank you 🙏🏼

@BlurryBit 3 жыл бұрын

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.

@mohammadnoushadsiddiqui4786 3 жыл бұрын

I m so happy with it

@nadicadizdarevic2835 2 жыл бұрын

Thanks, it' s very interesting.

@streamx2 3 жыл бұрын

Thank you

@OrincyWhyteDesigns 2 жыл бұрын

Are there awards for teachers like Kevin?!? I nominate him for every category 👏🏾👏🏾👏🏾

@DerMBen 2 жыл бұрын

Now we need "web development for designers" But honestly, as a design student, your videos helped me a lot at making sense of CSS. You do an amazing job at explaining how things work.

@toma1610 3 жыл бұрын

If I think on pixels, for a paragraph how size might be the max-width on main container right after the ? 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 KZfaq comment allows, on my 1440px monitor, about 150 characters.

@Danachew 3 жыл бұрын

Hey Kevin! These are awesome tips and I was pretty jazzed for already implementing a few of them. I'll have to look around your videos, but do you have something that discusses how to design for different combinations of elements and content? Like for example, let's say the project has a slideshow, or things you can do when you have a picture and a block of text (something I always struggle with). Small forms, navigation bars with logos placed in different spots within them. Stuff like that. I would say my biggest problem when I'm attempting to create a design, is just coming up with ideas that display the given content the best. I know the obvious advice would be to look at other designs. But I find a lot of the times what I have to work with (text and image content from the client) ends up not looking great even if I use something I've seen on another website.

@KevinPowell 3 жыл бұрын

I don't have anything specific, no. As you said, looking at how others do things is a good first step. The content being different does change things, but sometimes it's also looking at why it works for them and not for you. What's different at that point? What can you do to accomodate those differences, or push them more in a specific direction?

@Danachew 3 жыл бұрын

@@KevinPowell Excellent points. Honestly I've never tried to analyze the why or why not beyond "Well the stuff that I have to use just isn't good enough". I'll pretty much wash my hands of it and move on hoping the next thing pans out xD. I'm definitely going to go back to some botched attempts and give them further thought like you suggested. Thanks Kevin!

@mohanrawat6979 3 жыл бұрын

even its my exam today, i will watch ur contents.. you the best

@KevinPowell 3 жыл бұрын

Good luck on the exam!

@ttbooster 2 жыл бұрын

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

@haythamkenway1561 3 жыл бұрын

Great video 👍 your channel helped me a lot thank you ! 🙏. and I have not related question. can you speak French because you are in montreal?

@aqua7897 3 жыл бұрын

I really like your videos but I would love to have an actual course of SCSS, for some people it is harder to learn and you will be helping me a lot if do it

@Y_NAUT 3 жыл бұрын

What do you think about Bootstrap generators like Shuffle? How much of your work is done manually?

@bornoahmed4004 2 жыл бұрын

tnx

@Anth-ony 3 жыл бұрын

Regarding the line length, couldn't you just put a max-width on the container class of 60ch as well? What would this be basing the characters off of then? The default body font-size?

@romelmahmud6004 3 жыл бұрын

thank you a lot.

@RubberDuckCoding 2 жыл бұрын

VERY NICE!

@domanickharper 3 жыл бұрын

Over here in Notepad++ learning from my mistakes following along

@fopesanchezebhota713 3 жыл бұрын

Nice work Kevin, you've been a mentor and good teacher. Thank you. However, I did try joining the discord channel, but it is not working.

@neilm7902 3 жыл бұрын

LOL... You described my life within the first 20 seconds of this video.

@Victor_Marius 3 жыл бұрын

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"!

@beaconbecay1648 3 жыл бұрын

Kevin the CSS wizard! ;)

@AhmedHassan-cm3yn 2 жыл бұрын

Worth watching :-)

@okijohn7153 Жыл бұрын

Kelvin Powell i love you so much. Indeed you know how your design look. Very funny

@User-nn9uw 3 жыл бұрын

great video

@mind_of_a_darkhorse 3 жыл бұрын

Great and helpful video!

@XavierSmithXcellence 3 жыл бұрын

For this developer who has crap design skills, this is quite useful. Thank you for sharing.

@benjaminfortune2707 3 жыл бұрын

4:15 *Breathe 😉

@samuelpalacios9933 3 жыл бұрын

Hey Kevin! 👋 hope you're good. Today I just notice that it is already as default for me to put a value of 62.5% to the base font size of my html tag, I would like to know your opinion about it. Thank u, keep creating this content I love it!🧡

@KevinPowell 3 жыл бұрын

It's fine :)

@qwerty-or1yg 3 жыл бұрын

My biggest problem is just starting a new project and navigation bars, headers and footers. Like it's just all over the place

@MyDpop 3 жыл бұрын

Thanks for your tips. Here is mine for 13:38. Instead of writing three selectors, combine them into one: .bg-dark :is(h1, h2, h3) { color: #fff; }

@KevinPowell 3 жыл бұрын

yeah, I was thinking of using :is() there but didn't want to confuse people if they didn't know what it was :D - I need to make a video on it!

@MyDpop 3 жыл бұрын

That's why we all like your channel@@KevinPowell. You bring clarity to the css confusion. 😊

@pradhumansharma2658 3 жыл бұрын

I thought big font size is ugly...but it looks good, unexpected!

@nav-ks6qj 3 жыл бұрын

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

@dankierson 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!

@Bempus 3 жыл бұрын

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 :)

@akalrove4834 3 жыл бұрын

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.

@Abdullah-sy9hx 3 жыл бұрын

So close to 200K subs! I'm from 26K best of luck 👍

@KevinPowell 3 жыл бұрын

Thanks for being around for so long, and yeah, getting close now!

@rathernotdisclose8064 3 жыл бұрын

Good tips. Are you just saving the non-font web design tips for another video then?

@KevinPowell 3 жыл бұрын

To be honest, type related stuff dominates design decisions. I do have some videos on picking colours as well though 🙂

@adamhenriksson6007 3 жыл бұрын

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.

@KevinPowell 3 жыл бұрын

I have a video looking at that :)

@Ostap1974 3 жыл бұрын

Use text-align justify together with hyphens: auto;

@abe10 3 жыл бұрын

🤯

@IAmLesleh 3 жыл бұрын

Doesn't work very well in my experience. You need a library that will add soft hyphens in the appropriate places for the language of the document, e.g. Hypher.js.

@Ostap1974 3 жыл бұрын

@@IAmLesleh Can you share what do you mean with "doesn't work very well"?

@IAmLesleh 3 жыл бұрын

@@Ostap1974 I tried it out in Firefox and it didn’t add any hyphens at all.

@Ostap1974 3 жыл бұрын

@@IAmLesleh 1. have lang on html properly defined. 2. set text-align: left by default 3. use @supports(hyphens: auto) to conditinally set text-align to justify and hyphens to auto.