Hello Kevin, I am really enjoining these videos on magazine layouts and text styles. I am planing to make a magazine layout annual report for my NGO at the end of this year, my only concern is printing, would you be kind enough to make a video (or a series) on HTML and CSS for printing? The end goal is to have a responsive website, and a printed a5 report from one source.
print media queries are not something I like very much 😂 - it's a pretty deep rabbit hole. You can do a lot with them, but it's a whole other world! I should look at doing some content on them, but if I do get to it, it might be a long time.
I would be really interested in knowing if 'margin-inline-end' would be an accepted css property for ::first-letter, instead of margin-right. Edit: I tested it in Chrome and it does work.
Actually, I found a more reliable selector that :first-child, the way I had structured my HTML made that selector not work. There is the :first-of-type - so the selector .article-body > p:first-of-type will find the first 'p' element within the article-body div. That worked for me. Amazing what you learn when you are prompted to do some research!
Thank you, I was trying to capitalize the first letter, but it seems that I unnecessarily added first child property even though I only had one paragraph. Thanks for your awesome explanation, it gave me immense clarity.
Great video and great information 👍 ! Thanks! By the way, do you have any BOOK for SALE? ...something about CSS, FLEXBOX, GRID. Otherwise can you please recommend me any? Thanks!
Awesome! so good to see a bit of magazine-inspired layouts on the web. One thing to keep in mind is that this is exactly the kind of thing where browser inconsistencies are still an issue, as they don't calculate line height in exactly the same way.The initial-letter property was coined to address that, but so far only Safari implemented it, with Firefox currently working on it and no signals from the Chrome team.
Ah, was wondering the difference between first-letter and initial-letter. I looked back into initial-letter quickly, but when I saw it was only Safari, I didn't bother diving into it. I wonder if some of the other things like leading-trim might help with that as well?
@@KevinPowell initial letter allows us to be explicit on the amount of lines that the letter should span. If it ever gets implemented, it'd be amazing
Hello Kevin, Im a big fan of yours.... thanks for this vid.... i learnt new stuff.... (That float left technique would never have come to my mind.....)
Hello!!! ... Is there a pseudo-elements that allows you to change the color or size or font of a paragraph? .. for example ... in the sentence: "Course of css and html" ... I want to curve the last 3 words of that sentence - "css and html"- without using span, how would I do it?... ...
@@KevinPowell yup, I did it, but it doesn't look right: unityhome.online/projects.html Instead I wrapped it in a div. 🙃 It's in progress... And kinda plain right now.
Glad for the type of video but this title got my hopes up.. it definitely could have said something about drop caps or first-* pseudoelements or something. I thought I was going to get a way to tokenize or separately style words or phrases within a block of text, which is what I use spans for. First line is cool, but is there a last line?
Your video made me re-visit pseudo-class docs and I learned about the forgiving selector concept/rule, which I totally forgot of. Thanks for inspiration!
This is really cool, sir! I'm currently building my first full-stack website, and your videos have been really inspiring. I wish I found your videos when I first started web-dev!
You have so many great recommendations such as using em for padding, rem for font sizes etc. Could you please make a cheat sheet of these with a brief description of your reasoning?
Please do a deep dive on pseudo classes and elements I would love that! Thank you!
Thanks, Kevin!
God bless!
Omg yes please make a video about pseudo elements!
So cool. I'm starting to embrace the cascade thanks to you!
You also could use initial-letter for that with less code and more outcome
Actually you could if it had any support 😜
Hi, love your vids. I am using a generic font and the content is bigger then the lekker itself. Any suggestions on that? Kind regards, Jan
vulu ... ocay ...
It was great. Thank You :)
Just please Speak more slowly.
Please make a video about difference between pseudo elements and pseudo classes.
I had no idea there are so this many pseudo elements!
Proceeds to add drop cap to every paragraph
0:55 made me think of Fosters Home for Imaginary Friends:
Blue: "P. I. Z. Z. A."
Mac: "Pizza?"
Blue: "Pizzaz!"
Hello Kevin,
I am really enjoining these videos on magazine layouts and text styles.
I am planing to make a magazine layout annual report for my NGO at the end of this year, my only concern is printing, would you be kind enough to make a video (or a series) on HTML and CSS for printing?
The end goal is to have a responsive website, and a printed a5 report from one source.
print media queries are not something I like very much 😂 - it's a pretty deep rabbit hole. You can do a lot with them, but it's a whole other world! I should look at doing some content on them, but if I do get to it, it might be a long time.
@@KevinPowell if you did make something on them, it would be amazing, but you don't have to do something you don't enjoy :-)
I would be really interested in knowing if 'margin-inline-end' would be an accepted css property for ::first-letter, instead of margin-right.
Edit: I tested it in Chrome and it does work.
yes, logical properties ftw!
I was on steam! I was 2dreinstein
Fantastic, Kevin. I'm about to try this on a site I'm using.
Actually, I found a more reliable selector that :first-child, the way I had structured my HTML made that selector not work. There is the :first-of-type - so the selector .article-body > p:first-of-type will find the first 'p' element within the article-body div. That worked for me. Amazing what you learn when you are prompted to do some research!
Hello Kevin. Thanks. I needed a lot.
Thank you, I was trying to capitalize the first letter, but it seems that I unnecessarily added first child property even though I only had one paragraph. Thanks for your awesome explanation, it gave me immense clarity.
Great video and great information 👍 !
Thanks! By the way, do you have any BOOK for SALE? ...something about CSS, FLEXBOX, GRID. Otherwise can you please recommend me any?
Thanks!
This is super interesting. bravo sir from the Gambia
can you do an episode dedicated to avif/jpegxl? I dunno how you'd do that lol, but I keep waiting for that.
Awesome! so good to see a bit of magazine-inspired layouts on the web. One thing to keep in mind is that this is exactly the kind of thing where browser inconsistencies are still an issue, as they don't calculate line height in exactly the same way.The initial-letter property was coined to address that, but so far only Safari implemented it, with Firefox currently working on it and no signals from the Chrome team.
Ah, was wondering the difference between first-letter and initial-letter. I looked back into initial-letter quickly, but when I saw it was only Safari, I didn't bother diving into it.
I wonder if some of the other things like leading-trim might help with that as well?
@@KevinPowell initial letter allows us to be explicit on the amount of lines that the letter should span. If it ever gets implemented, it'd be amazing
Hello Kevin,
Im a big fan of yours.... thanks for this vid.... i learnt new stuff.... (That float left technique would never have come to my
mind.....)
Cool stuff here. I love typography. Congrats on 300k, Kevin!
Another video, another learning experience.
::first-letter and ::first-line. Never thought about them but as soon as i saw them I was like "of course!" Nice.
thank you sir this helped me alot ....learned a new thing
as always an enrichment! thx a lot!
Please make a deep drive video on pseudo classes and elements. It will very helpful for us. Thank you.
I love short videos like this! Some youtubers talk too much, but I think you talk the right amount! 😁
what exactly is the float:left doing here? Is the first letter being taken out of the paragraph?
Thanks a lot! I used these pseudo-elements in my project and it looks awesome.
I found that "border: 4px inset white" really sets off the drop cap a good (only) use for the inset line style?
I'm so used to only using solid that idea didn't even cross my mind, lol. Could be a good use case for a few of the different border-styles I think!
This is really neat! Thanks for letting us know.
6:50 or just select the firt letter of the article-body? maybe idk the html
Interesting. Thanks, KP.
Kevin, your videos are very helpful.
Thanks for this x
Please, pseudo class and pseudo element
what is ideal image size for slider ??
Please do a deep dive on pseudo elements and pseudo classes.
Hello!!! ... Is there a pseudo-elements that allows you to change the color or size or font of a paragraph? .. for example ... in the sentence: "Course of css and html" ... I want to curve the last 3 words of that sentence - "css and html"- without using span, how would I do it?...
...
Curve it? not much you can do. But yeah, you'd need a span for changing different parts within a paragraph, other than what I looked at here.
Thank you teacher :))
:give-me the ::pseudo-video!
Best way to start a day! Thanks Kevin
Thanks for this video! A doubt, do you use float often or only in specific cases, like you did in this video?
Only in specific situations :) - it's pretty rare that I use them these days
Pretty cool!
Noice!!!
Perfect
epic(ining)
Wew 😌
Has anyone ever pulled off neumorphic shadows on an SVG that has an irregular path? 🤨
Might be hard to make it look good, but using filter for the shadows should work... but as I said, I don't know if it would look good!
@@KevinPowell yup, I did it, but it doesn't look right: unityhome.online/projects.html Instead I wrapped it in a div. 🙃 It's in progress... And kinda plain right now.
Glad for the type of video but this title got my hopes up.. it definitely could have said something about drop caps or first-* pseudoelements or something. I thought I was going to get a way to tokenize or separately style words or phrases within a block of text, which is what I use spans for. First line is cool, but is there a last line?
Sorry about that, I'll look to update it to prevent any confusion!
As for last-line, we don't, only first-line.
@@KevinPowell You don't have to change just for my complaint about dashed hopes. You did style some text without spans after all
7:11 “article” pronunciation: clear, unambiguous, easy to spell out. 10/10
Your video made me re-visit pseudo-class docs and I learned about the forgiving selector concept/rule, which I totally forgot of. Thanks for inspiration!
This is really cool, sir! I'm currently building my first full-stack website, and your videos have been really inspiring. I wish I found your videos when I first started web-dev!
You have so many great recommendations such as using em for padding, rem for font sizes etc. Could you please make a cheat sheet of these with a brief description of your reasoning?
from ethical hacking i think i have learn enough basic of html css and js should i move on to nxt ?
Depends what you want to do. There are *so* many different directions that you can go in, it really depends on what your goals are :)
@@KevinPowell IT is so vast and good thing about is that if u learn something it will be usefull in very direction just the position is different
@@KevinPowell absolute true👍 if you don't have goal you can't achieve anything in your life
I found my goal too late but now I am happy 😃 😇☺
I love it!!! I used to do this on my site years ago, but with and its issues, gave up on it. NOW I'll reintroduce it! Thanks, sir!!
Awesome!
15 hrs ago😳