1. 4:10 Group related information 2. 5:25 Create contrast through font-size 3. 6:45 Create more contrast through font-weight 4. 7:34 Add contrast through color 5. 10:30 Increase the line-height of the body 6. 12:50 Decrease the line-height of large text

@westernpigeon

2 жыл бұрын

thank you very much

@slykhajiit2

2 жыл бұрын

We could only wish there were a save button for comments in KZread...

me: I'm pretty good with typography, but Kevin always has at least one point to teach me me, 10 minutes in: d'oh me, 20 minutes in: d'oh! me, 30 minutes in: stop saying that, Joel Excellent stuff, and eager for next week's font fam video.

This is so amazingly helpful. As someone learning front-end, it's easy to get lost in the code and syntax and to forget about effective, compelling layouts.

Awesome in every sense! I am guilty of having text that stretches across the screen, etc., yet when you can see how minor changes produce a more professional look, it makes sense. I am learning so much from you Kevin that I am very delighted, and thankful, that you’re sharing your skills. I now need to purchase the T-Shirt 🤩

Man I really love that Kevin includes the points in the description. So helpful.

The ch unit was new to me. Really nice! 👍

@luiscolome75

4 жыл бұрын

The ch unit (I hear about it here in this channel) is really fun to play with. You'll see ;)

@zachfenton608

2 жыл бұрын

Same for me

@rudrapratapsinha8880

2 жыл бұрын

It means chutiya unit, search on Google about it.

I love this video! You don’t just show examples what looks good, but you are explaining why those things is good to use.

I thought you were just another one of those how to make a website youtubers but after watching a couple of your videos I saw that you're actually sharing EXTREMELY IMPORTANT things with us. Thank you.

I just started learning Front end dev. And you are really helpful. Thank you very much. Online course gave me the broad strokes. Your videos are helping me to know about the fine strokes of coding. Look! I started using your text layout tips. It's just sunk in. Thanks a lot!

Another top lesson. Really learning a lot about design from these.

You should make this into a series! Typography, colors/shadows, buttons.. Or something!

@KevinPowell

4 жыл бұрын

That's the plan :) I'll be looking at picking fonts next week :)

@cipherxen2

3 жыл бұрын

I can't see your comment

So glad I found this channel. Thanks for opening the lid on css Kevin. Been bingewatching you all week

Great Design tips Kevin. Looking forward to more Web Design videos like this! Thank you!!

Every time i need UI design tips and tricks there's no place quite like this channel. :)

Man, I've been learning so much Front End & CSS stuff thanks to you Kevin. Thanks mate! Subscribed

Just stepping into web design. Super helpful. Thanks!

I was asking for design videos. You already have design videos! Great video!

This is invaluable content! Thank you Kevin.

The line-height part is something I always mess up. But now I finally got it. 1rem font + 1.5rem line-height and a color of rgb(30, 30, 30) works really well for me... Thanks a lot...

Watched the video, then went over to site I'm working on and added padding to the containers to make the text less wide:). Nice. And I'd forgotten all about the ch unit, must use that more often. Thanks!

Superb work with this video, Keven. Thank you.

Thanks for this! Like most of us, I constantly struggle with layout. The bonus tip was perfect for me, I needed to know what was a good width. :) VERY helpful!

a very awesome course that i've been searching for long. you are the best with it

This awesome tutorial literally illustrates the Robin Williams' book, the one I definitely recommend everyone, the one became my first and most important guide to the basic principles of general design. I mean, great video, man!

I love this channel so much. I just started learning HTML and CSS and this is great content. Cheers!

Just recently come across your youtube channel by mistake, and Ive got to say a huge big thank you. Im just getting back into learning code (HTML, CSS and JS), and Ive spent many, many hours trying to find someone who can explain things to me in a way that I can actually understand. Ive designed a few websites in the past but I really needed to find the best work flow for me. I personally use Adobe's XD software to actually design and map out my projects, but Im having the problem of learning how to code said design into an actual website. Keep up the great content.

@BaptisteLegrand

4 жыл бұрын

It's a long journey! But a rewarding one :)

Extremely helpful video I've seen based on typography! Love you Kevin....

This is incredibly useful - I can make sites very well but some things just seem of and I didn't know why. Thank you, you are a damn blessing I should be paying you!

This one earnt my sub - for whatever that is worth! Great content, keep it up man!

Sort of off-topic, but if you take a line of text in Figma, group it and apply Auto Layout, you can add a fill colour and also padding to create a truly dynamic button. Better than having a grouped layer with a Rectangle shape for the background and a text layer above.

This is really, really helpful for developers like me who want a practical field guide to basic design. Thank you.

That was very informative Kevin... I will surely follow these tips. Thanks again..

Kevin, I really love it when you design things on Figma. I would actually think it will be a great learning experience to see you design something from an imaginary concept. :)

@KevinPowell

4 жыл бұрын

I have something planned like that for a few weeks from now 😁

@siddhantjain2402

4 жыл бұрын

@@KevinPowell 😍😍

My designs automatically just seem a lot better right now after watching this amazing video.

This tutorial is awesome. Thank you very much!

Just discovered your channel , watched 3 videos so far and you've already helped me improved my design and skills 10 fold !! THANK YOU SO MUCH, please keep on doing what you're doing. Quick question if I may (and chat can answer too) Do "pros" use justified at all for text ? I find that sometimes it looks great but often it creates huge spaces between words...

Excellent, so fresh explained and easely! I loved the pig!! So great. :D

This was the most helpful video on web-design that I ever watched. You really can break things down in a way that an ordinary person like me, for whom designing even basics is absolutely not intuitive and often like a mystery, can now finally get it. I just styled my first shopping card on codepen according to your video. And I am looking at it and think "Really? I just did that?" Thanks Kevin. Now I really consider shifting more from backend to frontend coding :)

@KevinPowell

4 жыл бұрын

Really glad that it helped you out!

your teaching is very clear. 💖 Thank you so much

Kevin, you're the CSS GOAT! Keep it up!

thank you so much for the time you put in this video and for the great information you provided to us!!!

well done.. thank you for the video.. straight to point.. a lot of good information

For the last tip you can use this: p { width: clamp(40ch, 50%, 75ch); }. This solution is responsive and keeps the characters on each line between the 40 and 75 range.

Thanks for that, learned a lot about text here !

Awesome video. Thanks Kevin 😍

Thanks for these good advices!

Awesome Video Kevin. Thanks a Lot.

Worth watching 😄

A free course. Thank you.

Thanks for your video. I was learn a lot about web design.

As always a pleasure to see your videos. Really nice tips about fonts. I'm going to work on a couple of designs I'm working at the moment, to see if I can apply some of these tips. Would be nice if you make a video on how to pair typography. Specialy Google fonts, which are the most popular. Thanks again for another great peace of content Kevin!!

@KevinPowell

4 жыл бұрын

That's the plan for next week!

Totally agree with the tips✌️

@tobyflenderson7176

4 жыл бұрын

You again

very useful and quick, thanks

Really good info!

2021: This guy is THE legend!!!!

Amazing! Thank you

Love this thank you.

In the last example, paint the title and the button with the color of the hands making a hearth in the image. That's the element that is going to put the text and the image together.

Very nice video, I checked others and finally sub+

You only get this detailed from an InDesign pro. Great video!

As a print designer trying to learn CSS, none of this was news, but its good to remember when you are fighting with code that the old rules still apply :-)

Good stuff. Thanks for the video! One of the things that I try to do with my typography designs is making sure that it's consistent across the website, and that I don't invent too many idiosyncratic type treatments (e.g., this font style is only used in this type of box, etc.). Is that something that you try to do too or do you not sweat it so much?

Just intuitively, the reasons I came up with as to why long lines of text aren't good: 1. the distance your eyes would need to travel to move to the next line increases, which strains the eyes and also increases your chance of moving to the wrong line. 2. when we see a block of text, our instinct to read is triggered, whereas one long line starts to look like a design element, something that's meant to be looked at and not processed. 3. long lines are like long sentences, they are more stressful to process

Really Great.

front-end dev Ron Smith seems to be a really nice guy :)

You are awesome and thanks

Hey Kevin, been following your videos recently, have learned a lot and started to like css and realize the power and the cool things you can do with it. So thank you. Got a quick question, how do you compare the Figma application you were using in this video with Webflow? curious to know your take on it.

@KevinPowell

4 жыл бұрын

Well, Figma is a design tool, Webflow is to actually makes sites. Figma/XD/Sketch are just for design that then needs to actually get built by a developer.

Typography. Is. Awesome. :-D All of it! From calligraphy &illuminated manuscripts, to print & typewriters, to digital & animation.

you're on top

Dude I’m from Concordia University and I’m watching this!

Thanks a lot

Personally, my eyes won't stop looking at the light gray description for the 3rd complex example due to the simple design. I don't know why, but I've gotten used to glancing at the important background stuff but not really reading it.

Thanks

If there is lot of whitespace you can use watermark in background with a subtle differences in background. opacity:0.666; work good

Kevin, you promote building static websites. However, many clients want to be able to edit content themselves these days!

KP u r awesome.

God Bless sir ^_^

I am 7th one viewing this video i am happy and love your videos. I have started my career as react developer and your css videos helps a lot in understanding css concepts

what about designing a template that will be the base of your entire website, are you aware of this strategy. Do you think you can make a tutorial about this one and also, how to make it responsive? please provide an answer as soon as possible and thanks a lot for your videos. they are very educative.

Curious, are the DesignModo templates and blocks automatically responsive?

@KevinPowell

4 жыл бұрын

Yup yup!

@amyp.575

4 жыл бұрын

@@KevinPowell Isn't that cheating? Can you tell in the code it was made using it? And will it get me the job?

@michaeloosthuizen2383

4 жыл бұрын

@@amyp.575 It is cheating, but then so is using old school software line Dreamweaver or new school software like Bootstrap Studio. If you understand the code then those tools are perfectly legitimate productivity enhancements that get you 90 to 95% of the way quickly and then you do the 10 to 5% magic to make it yours. And yes, anyone who knows what to look for can spot machine generated code, no matter how clean it is. Humans have subtle styles of writing code, if you read other people's code a lot you can often tell who wrote what code by the style.

@designmodo

4 жыл бұрын

Hey, yes! You could try the free version and check the exported code, we're sure you will be really surprised by what you will see 🙌

Hi Kevin your tutorials are very good and helpful, but you always work with light themed design. I would appreciate if you give us tips on how to make a dark themed design look better.

@Gaius_Julius_Caesar_Augustus

Жыл бұрын

Agree

My tip: Alignment. Text should line up with other elements on the page, other elements on the page should line up with text. Vertical alignments are obvious but horizontal alignments can be more subtle. Using the pig as an example: I would draw a horizontal lines across the top and bottom of the body of the pig, then size and space the text and button so that they fill that space. If that sizing becomes awkward I would adjust the size of the pig until a comfortable balance is found. When you look at it without consciously focusing on one particular element your eyes should be relaxed and naturally flow from highest to lowest contrast elements without eye strain. Always keep in mind that bad design can be physically painful to look at because of eye strain. This can be one of the reasons why someone really dislikes a design but can't put their finger on why exactly.

Content starts at 3:23.

I have a questions,should i learn Adobe XD to create the design first and then implement the web page? Or just keep hard coding from scratch.

@KevinPowell

4 жыл бұрын

I find it much easier to have a design first.

Great content you share as always, your arms' unstoppable movements are kind of distracting though :)

@KevinPowell

4 жыл бұрын

Sorry about that!

Hey kevin was wondering best way to layout padding for a website that is with h1, h2 and p tags also do i set padding on the container or on the text tags

@KevinPowell

4 жыл бұрын

I'll use margin to create spacing, rather than padding. I reserve padding only if there is a background-color on something. I tend to remove the margin-top from all my text elements and only play with margin-bottom to start with. Things like h3 often will have a somewhat big margin top though.... so it depends? I could do a lot more videos on typography :)

@philip9677

4 жыл бұрын

@@KevinPowell thanks kev, can you a tutorial how you set up a site that takes care of spacing between heading paragraphs and containers, taking into account a container should they container have paddding or the text

Front-end Developers should always have a basic design skills, even if working with already made designs.

What software are you using?

Really!

iI can't beleive that this course is for free

3:23

Can you tell me does Autoprefixer by mrminc work on Mac OSX

@KevinPowell

4 жыл бұрын

Shouldn't work regardless of operating system

@jdeso3

4 жыл бұрын

@@KevinPowell what I think I figured out is that if it doesn't need to be auto prefixed then it won't do anything and I think that was the case with the code I was using I assume that is correct that it won't auto prefix unless it's needed. Thanks for answering me.

Faith

Really really really 😂

in testimonial example, do we really don't care who say what? I think quite opposite, if I don't know person, then it really doesn't matter what he/she said.

Kevin. I am a web developer and I have a stylesheet I use on ALL apps I make. It is funcional, but not amazing. I am considering paying someome to improve it. Do you have interest?.How much would you ask for a job like this? It is not a website. It is a stylesheet for webapps. Lots of forms, tables, charts, etc...

that $10 in black was absolutely terrible

What sorcery is this 'ch'?

@KevinPowell

4 жыл бұрын

Haha, it's a fun one. I don't get why it doesn't get more love.

Really

why tf I want more lines if I can make fewer lines just longer? having more lines in your paragraph is intimidating and contrary to popular belief it is harder to read