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!
The first 1000 people to use the link will get a free trial of Skillshare Premium Membership: https://skl.sh/kevinpowell02211
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 🙏🏼
Hey Kevin, This is great stuff!
Good tips. Are you just saving the non-font web design tips for another video then?