The first 1000 people to use the link will get a free trial of Skillshare Premium Membership: https://skl.sh/kevinpowell02211
Join the Discord: https://discord.gg/nTYCvrK
Video on gap in flexbox: https://youtu.be/VvqyUUROmJw
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
💬 https://discord.gg/nTYCvrK
—
Keep up to date with everything I’m up to
✉ https://www.kevinpowell.co/newsletter
—
Help support my channel
👨🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://teespring.com/stores/making-the-internet-awesome
💖 Support me on Patreon: https://www.patreon.com/kevinpowell
—
My editor: VS Code – https://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 YouTube channel, make sure to follow me on Instagram and Twitter.
Instagram: https://www.instagram.com/kevinpowell.co/
Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://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!
source
The first 1000 people to use the link will get a free trial of Skillshare Premium Membership: https://skl.sh/kevinpowell02211
Now we need "web development for designers"
But honestly, your videos helped me a lot at making sense of CSS. You do an amazing job at explaining how things work.
Just learn the basics of Graphic Design, it might come in handy
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
VERY NICE!
Kevin, you have made me an infinitely better designer. If I have a CSS question, I don't scour the documentation. I pull up YouTube and find a video you've created that helps me. You haven't let me down yet! So grateful!
… And you look your design and know that "it can look better" (The polite way to tell) = Your design can give nightmares to whoever, are those colors for a serious webpage or it is for a clown webpage, you should be condemned to injure the eyes of internet users.
Are there awards for teachers like Kevin?!? I nominate him for every category 👏🏾👏🏾👏🏾
Thanks, it' s very interesting.
At CSS overflow-wrap: break-word;
I've been a web developer for years and I still struggle with design…
Worth watching 🙂
Would you recommend units like rem, em, ch for padding, gap and padding? I'm not sure if it's always appropriate
Man, your examples and live coding are amazing. Best guide I've seen on YT.
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.
Kevin the CSS wizard! 😉
Love this❤again thank you for making such a wonderful video 😇
Tips & tricks😉
Fantastic tips and great explanations. Thanks!
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!
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 🙂
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"!
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.
I love how Kevin wasn't even able to say "pixels".
Over here in Notepad++ learning from my mistakes following along
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.
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.
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!
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
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.
Thank you, Kevin! You are really making the web look better.
It's spelled 'breathe' ..
Does anyone know of any potential downsides to using something like:
.content-width {
width: 80vw;
max-width: 1100px;
margin: 0 auto;
}
i learned more on this video with code aside than the most of design ui videos i saw on my life jaja
I thought big font size is ugly…but it looks good, unexpected!
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!
That's great. Like how 2 3 lines can change entire feel of a website.
The absurd crab angiographically try because street ideally enter near a depressed ear. normal, quack japan
Really really awesome stuff here 🔥
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.
It's been a while, last I was here Kevin was not wearing glasses 😃 great content as always. Thank you
Thank you 🙏🏼