Web design tips for developers
HTML-код
- Опубликовано: 20 июл 2024
- 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 RUclips 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!
The first 1000 people to use the link will get a free trial of Skillshare Premium Membership: skl.sh/kevinpowell02211
Hey Kev👋🏻! You look awesome here, really handsome!!✌🏻
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?
Kevin, you have made me an infinitely better designer. If I have a CSS question, I don't scour the documentation. I pull up RUclips and find a video you've created that helps me. You haven't let me down yet! So grateful!
Quick tip - if you want to support the youtubers like Kevin for their generous work , you can avoid skipping ads , it'll surely help 🙂
This is a good point.
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.
I wouldn't skip it if it was not a page builder. Sorry 😭
I always skip 99.9% of the ads in all videos.
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
If only I found this channel earlier. This is some really useful stuff!
Welcome aboard!
The best time to plant a tree is twenty years ago. The next best time is now!
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!
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!
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
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!
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!
Man, your examples and live coding are amazing. Best guide I've seen on YT.
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
I am always looking for web design standards which i used to get from you videos. Thank you Kevin 😊
Thank you! Very helpful video that I was looking for. I had some problems with design and you helped me a lot)
Kevin, I was taught we should not be changing the size of elements. In my opinion a plain tag should be added to CSS.
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?
This is greatly appreciated. Thank you Kevin!
Thank you, Kevin! You are really making the web look better.
Thats what I was looking for... Thanks for this great content you providing here... Keep it up
Kevin! This was awesome thanks so much for these valuable tips!
Fantastic tips and great explanations. Thanks!
This was super helpful. Thanks a lot! ✌🏻
Love this❤again thank you for making such a wonderful video 😇
Tips & tricks😉
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!
I can't stop learning from you. Thank you so much your are amazing.
I didn't realize I watch this video until end
There is many thing I learned in this video, thanks man, nice content 👍
Useful. I always wanted a base css to avoid using design frameworks but use only flexbox.
These are great tips! Thanks
I will never be tired to thank you, Kevin! Thank you!!!
It's been a while, last I was here Kevin was not wearing glasses 😃 great content as always. Thank you
I am a beginning in UI developing and thanks for daily updates.... it is very helpful to me
You've made simple things look awesome.
Thanks Kevin, great tips 👍
thank you. i really need this X)
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.
Hey Kevin, This is great stuff!
Pretty helpfull tutorial. Thanks Kevin.
Really really awesome stuff here 🔥
thank you for this. Pretty important part of design I think most of us overlook.
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.
thank you for the great content, subscribed
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.
This is what I looking for.. Thank you sir
Thanks, Keven, great Work and informative as always (=
Thanks for the video!
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.
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.
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 :)
Consider using CSS columns for longer text sections.
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.
Thanks for the great video!
No wonder they call you King of CSS
thank you for the great tips
That's great. Like how 2 3 lines can change entire feel of a website.
i learned more on this video with code aside than the most of design ui videos i saw on my life jaja
I needed this so hard
Thank you so much for awesome video
Are there awards for teachers like Kevin?!? I nominate him for every category 👏🏾👏🏾👏🏾
I *love* your ConvertKit shirt!
Thank you Kevin.
Awesome love your vids
thanks for the awesome content =)
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 RUclips comment allows, on my 1440px monitor, about 150 characters.
Thanks, it' s very interesting.
Thankyou so much sir
I love how Kevin wasn't even able to say "pixels".
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
I m so happy with it
Thank you 🙏🏼
U nailed it!
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.
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?
@@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!
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?
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"!
even its my exam today, i will watch ur contents.. you the best
Good luck on the exam!
Thank you
LOL... You described my life within the first 20 seconds of this video.
Kevin the CSS wizard! ;)
Kelvin Powell i love you so much. Indeed you know how your design look. Very funny
Over here in Notepad++ learning from my mistakes following along
What do you think about Bootstrap generators like Shuffle? How much of your work is done manually?
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?
Would you recommend units like rem, em, ch for padding, gap and padding? I'm not sure if it's always appropriate
tnx
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.
For this developer who has crap design skills, this is quite useful. Thank you for sharing.
VERY NICE!
4:15 *Breathe 😉
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!
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.
Worth watching :-)
My biggest problem is just starting a new project and navigation bars, headers and footers. Like it's just all over the place
great video
thank you a lot.
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 :)
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;
}
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!
That's why we all like your channel@@KevinPowell. You bring clarity to the css confusion. 😊
Great and helpful video!
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!🧡
It's fine :)
Big fan of your channel! Keep up the content!
If you can’t justify why you’re justifying the text, don’t do it.
I center align all my H elements. When I used the max-width:70ch; they all started to align to the left. WDF?
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
So close to 200K subs! I'm from 26K best of luck 👍
Thanks for being around for so long, and yeah, getting close now!
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.
I have a video looking at that :)
Good tips. Are you just saving the non-font web design tips for another video then?
To be honest, type related stuff dominates design decisions. I do have some videos on picking colours as well though 🙂
king