Hi Jen, I see you stopped making videos. We're really learning a lot from your content and knowledge. it's extremely rare style nowadays. Thank you so much for this I have learned tons in a very short time and effectively. we hope to see more content from you someday soon. warm greetings
I love your videos. Even though I have 18 years experience in web development, I seem to always learn something new from your videos. Enjoying it. Please keep up the good work! :-)
I mean yeah, I am impressed how well all of this grid stuff works, but I am in awe seeing how clean my html markup looks after the treatment. No superfluous containers and weird classes, but everything makes sense! Thank you so much for your great videos!
I've just started on my html/CSS/J's journey and I'm so excited for the future! My goal is meaningful design with great accessibility principles. Thank you so much for these videos!
I'd love to see more creative layouts such as this. Two things to consider: 1. Would be interesting to consider effects of vertical responsiveness 2. Instead of using the bold element it would be more semantically correct to use a pseudo element
This was incredibly helpful, thank you! It's odd, I've known of you for nearly 10 years and heard you speak a number of times but somehow never happened upon your RUclips channel. I love your work. You should set up a Patreon, I'd sponsor happily. Thanks again!
You are amazing! i don't comment very much. i'm doing an exam of web design, (i do a course of graphic design) and you made it so interesting. i was hating this, until i discovered you. Your videos are in auto-play by a week or so. Great content keep going and thank you very much!
Awesome use of CSS grid! I curious about the first column; would it affect anything if it was taken out? Also in this particular case, would `` be an improvement on the ``?
hr would actually create a horizontal rule. If the goal is a truly empty element, br is a very cool idea. At some point, we'll probably get an empty element for situations like this.
Jen this is amazing. So in a way, CSS grid turns child elements automatically into 'virtually' absolute elements that you can place anywhere inside the grid. Good bye Flexbox. Btw, that writing-mode trick was sweeeeeeet :D
Thanks so much for your videos and amazing examples! Why not use an instead of the in this case? It might be at least slightly more semantic than seeing as the 'bold', red line is a line (or 'rule') after all. Also, is recommended over as a way of bolding text? Does anyone know how screen readers say information contained inside of ?
To me, using the b tags sounds confusing. Most people seeing it will wonder why its used, but if it was a div no one would wonder. Less metal power used while parsing code is better imho.
I’ve seen art design like that before and it is freaking cool! Simple, spacious and interesting. I’m sorry but I will be stealing this design and making one of my own ;) I will be sure to credit you if I put something like this in a project of mine. Thanks! Best videos ever.
Hello, I've recently started teaching myself web development and have learned SO much from you and your channel. I'm starting to design my portfolio, and I would really like to this design as a part of it and was wondering if that was okay with you?
Isn't span just that non-semantic and non-optically-enhanced element? Instead of telling the browser to do nothing bold, tell the browser to have a blank element to which I give properties?
Yes, we’ve been talking about how to do it. Related, how to style Grid tracks without having to put a lot is empty elements in the marketplace. It’s likely these things will be worked on as Grid Level 3.
Like other people in the comments, I'm not a fan of using a element for content-free visual parts of the grid. But why use an element in the HTML rather than generating a pseudo-element inside the grid container? And even if you need more than two content-free cells, you can nest them inside a generated pseudo-element with display: contents, right? I think that, other than for adding classes and maybe ID's, the HTML structure shouldn't be touched for styling unless necessary. And I fail to see how it's necessary, or even preferable, here.
I think using the b element wouldn't be such a good idea as it does have associations with holding bold content and people viewing it may expect it to have text content rather than a styling hook. A span or a div is just an empty box. I do understand your thinking behind using a b.
That's really cool, but I would be curious what the average person would think if they saw a site like that. People would be tilting their head to read it.
You know, your content is really great but... that noise (in the audio) is kind of driving me nuts. I get that you may not want to buy a decent mic for something that probably doesn't earn you any money but... maybe run a bit of noise suppression on it in some audio tool of your choice? At least I would really appreciate that. :)
I'm sorry the sound is bad for you. I am using a very expensive radio quality professional mike. I'm not sure what happened that it sounds bad for some people. Perhaps you are on a slow internet connection and the compression is amplifying background fuzz? How is the sound on the most recent videos? Better?
Ah, it's still tolerable but I feel that it's kind of a shame, especially if you use an expensive mic. You should be able to get more out of it. Artifacts due to compression are very different (and I'm watching this at max. quality). Unless you've already actively asked some people, I'd suspect that many notice it but only a few bother to comment on it - because it's pretty distinct. In e.g. "The Firefox Shape Path Editor", the noise is not as loud as in "Hot metal : Pasteup". I assume that you've already ensured that the input levels are set correctly during recording and that you supply phantom power if the mic needs it. Other than that, it's unfortunately beyond what I know about audio recording.
Learned a new "trick" today: Writing Mode. That can take designs to a whole new level. I'm looking forward to the video teaching when to choose width keywords. I cycled through a few the other day until something wokred, but I'd rather know than guess.
You are amazing. I just found you out and altough I'm just scratching the surface of css grids and web developing in general, I feel your power, you are like a jedi master. Thank you for this. You've gained a subscriber
jen , Your videos takes me on the journey . I am listening you from the morning and now its night time , i did not get bored for a second. plz don't stop making videos ,,,,,its an request ......... you are awesome.
Stop trying to be edgy by randomly using b elements. And definitely stop a Encouraging others to use deprecated and discouraged tags. As you said, it's not officially part of the html spec anymore, thus it's behaviour in browsers will be nondeterministic. It could have weird unintended side effects or even simply stop being supported by browsers, breaking your page. There's literally no benefit to using a b over a standard div... Even an svg rect would make far more sense
Hi.. your design videos are very helpful. If you find some time could you please make a video on responsive table.. with auto column width, with word-wrap if the content exceeds a certain width..(or usage of minmax(max-content, 150px) in table
What I find insanely cool, and keep in mind I was coding html around 1999/2000ish before moving on to a completelly unrelated technology is not only the accuracy and granular placement we get with css, especially grid but the ability create graphics, like your red bar, backgrounds, etc... without loading any images on the page. I haven't tested this but I have to assume that the responsiveness and speed of page loading (without downloaded graphics) has to be signifcantly faster and it's challenging me to create my first designs completely css based. It's been too long but I'm glad to be back in this focus and really enjoying learning CSS. Lastly, I like how you went back and found a design style that was prevalent in a completely different technology. Very, very cool.
Yes, things have come a long way. So many graphics we had to make. So many sprites with rounded corners and such. Now, it’s all in code. And yes, it makes rendering a webpage much faster.
@@LayoutLand It's certainly good stuff. I found your podcast last night "The Web Ahead". I'm looking forward to digging into the content. You are one very busy woman! I really enjoy your approach to the tech, the people, the content. It appears to me Ms. Simmons that you certainly have led a life well lived. Anyway, Happy Monday :-)
This is a really cool demo and I learned some new tricks. Thanks :) I do have a comment about the element. The element doesn't mean bold, and hasn't done since HTML 5. It's also in the HTML 5.2 spec and the draft HTML 5.3 spec, so I'm not sure why you say it's not really recommended and not officially part of the HTML specification any more. Now that's out of the way, I'm going to watch some more of these videos :)
I recorded these videos last July, and I mentioned the date while recording at the moments where I knew things would change. For example, explaining the state of Grid implementation in browsers, or the state of the Firefox Grid Inspector. I knew those things would evolve, and I wanted people to know that my information was accurate as of last summer, but would change.
Hi Jen, I see you stopped making videos. We're really learning a lot from your content and knowledge. it's extremely rare style nowadays.
Thank you so much for this I have learned tons in a very short time and effectively. we hope to see more content from you someday soon. warm greetings
She's so cool. One of the few devs who really understands the old school styles while bringing them to the browser.
I love your videos. Even though I have 18 years experience in web development, I seem to always learn something new from your videos. Enjoying it. Please keep up the good work! :-)
My favorite developer-educator on YT, by far.
I mean yeah, I am impressed how well all of this grid stuff works, but I am in awe seeing how clean my html markup looks after the treatment. No superfluous containers and weird classes, but everything makes sense! Thank you so much for your great videos!
I've just started on my html/CSS/J's journey and I'm so excited for the future! My goal is meaningful design with great accessibility principles. Thank you so much for these videos!
I've seen your vids all over my recommendations and I thought you had a huge channel lol. You're great at this I'm already a big fan. Keep em coming!
i'm so glad that i finally found out this wonderful incredible channel. Support you with all my love
One of my favorite graphic design "styles" and you make it responsive!
I'd love to see more creative layouts such as this.
Two things to consider:
1. Would be interesting to consider effects of vertical responsiveness
2. Instead of using the bold element it would be more semantically correct to use a pseudo element
This was incredibly helpful, thank you! It's odd, I've known of you for nearly 10 years and heard you speak a number of times but somehow never happened upon your RUclips channel. I love your work. You should set up a Patreon, I'd sponsor happily. Thanks again!
Best Grid explanations I've seen, really appreciate your knowledge.
I miss your podcast!
Why are there always two down votes on these excellent videos?
Who are these pair of malcontents?
You are amazing! i don't comment very much. i'm doing an exam of web design, (i do a course of graphic design) and you made it so interesting. i was hating this, until i discovered you. Your videos are in auto-play by a week or so. Great content keep going and thank you very much!
Another fantastic tutorial.
Awesome use of CSS grid! I curious about the first column; would it affect anything if it was taken out? Also in this particular case, would `` be an improvement on the ``?
hr would actually create a horizontal rule. If the goal is a truly empty element, br is a very cool idea.
At some point, we'll probably get an empty element for situations like this.
Jen this is amazing. So in a way, CSS grid turns child elements automatically into 'virtually' absolute elements that you can place anywhere inside the grid. Good bye Flexbox. Btw, that writing-mode trick was sweeeeeeet :D
why good bye flexbox? Each has its own use case.
This is a gold mine. Thanks so much!!!
does anyone knows the name of the book in the beginning of video??
This was so helpful! Thank-you so much!
Very nice work! Nowadays a pseudo element can be used instead of the b to create design elements.
A question: how to write over the grid gaps (grid+writing mode and "Experiments")? I thought the text should be placed into the grid cells.
I'm really enjoying these videos, thanks for putting them out there.
How about an inline SVG instead of the b tag?
Very inspiring, thanks again.
Thanks so much for your videos and amazing examples!
Why not use an instead of the in this case? It might be at least slightly more semantic than seeing as the 'bold', red line is a line (or 'rule') after all.
Also, is recommended over as a way of bolding text? Does anyone know how screen readers say information contained inside of ?
trying to learn more advanced css right now, never appreciated women in tech more
thanks for the great work
This is really interesting. Thanks for sharing. Is it possible to take that red-text vertical line and add a 3D look to it simply by rotating it?
Just subscribed. Your channel is gold! Thanks for the informative videos.
I love your work and tutorials!!
Love your videos!
This is amazing! Thank you Jen!
To me, using the b tags sounds confusing. Most people seeing it will wonder why its used, but if it was a div no one would wonder. Less metal power used while parsing code is better imho.
brilliant, thanks for creating and sharing this video!
What is title of the book you're showing? The works were from Piet Zwart and Jan Tschichold?
I’ve seen art design like that before and it is freaking cool! Simple, spacious and interesting. I’m sorry but I will be stealing this design and making one of my own ;) I will be sure to credit you if I put something like this in a project of mine. Thanks! Best videos ever.
YES! Love love love these videos!
Hello, I've recently started teaching myself web development and have learned SO much from you and your channel. I'm starting to design my portfolio, and I would really like to this design as a part of it and was wondering if that was okay with you?
Thank you ! Awesome video
I traying to learn from you'r lessons ..thnx
Why's the G getting in the gap?
Isn't span just that non-semantic and non-optically-enhanced element? Instead of telling the browser to do nothing bold, tell the browser to have a blank element to which I give properties?
Whoa! Mind blown! Thank you!
Super. You are so good
Why didn't I know this before....!!!!
Mind blown!
You said don’t do it and you say but it’s a good idea to do it in that specific case
I so want to be able to style the grid gaps
Yes, we’ve been talking about how to do it. Related, how to style Grid tracks without having to put a lot is empty elements in the marketplace. It’s likely these things will be worked on as Grid Level 3.
Like other people in the comments, I'm not a fan of using a element for content-free visual parts of the grid. But why use an element in the HTML rather than generating a pseudo-element inside the grid container? And even if you need more than two content-free cells, you can nest them inside a generated pseudo-element with display: contents, right?
I think that, other than for adding classes and maybe ID's, the HTML structure shouldn't be touched for styling unless necessary. And I fail to see how it's necessary, or even preferable, here.
Fantastic!
so cool I love this ..
I think using the b element wouldn't be such a good idea as it does have associations with holding bold content and people viewing it may expect it to have text content rather than a styling hook. A span or a div is just an empty box. I do understand your thinking behind using a b.
"B" is for "bring attention to element" , and it's still in the spec.
good videos thx
If we were in the video game, she is the old boss lady who kicked our asses!!!
nice I love Jan Tschichold too ;-)
Thank you!!!
it is amazing
Good job
Now if only we had a baseline grid for the entire page...
The CSS Working Group is working on that! It's so, so, tricky. And we had other things to get to first. But it's up next for 2019.
Oh, that's the best CSS-related news I've heard in quite some time. Thank you!
@@LayoutLand Are you referring to "subgrid" or something else entirely?
*gulp* there's elements all over my company's codebase
I love you ❤️🙌🏾🙈
❤️
C
O
O
L
Hhahaha. It took me a minute to get why you wrote each letter on one line. It's `writing-mode:vertical-rl; text-orientation: upright;`
Why not just use the strong tags
finally i know how to pronounced him
YOUR DOPE!
That's really cool, but I would be curious what the average person would think if they saw a site like that. People would be tilting their head to read it.
You know, your content is really great but... that noise (in the audio) is kind of driving me nuts. I get that you may not want to buy a decent mic for something that probably doesn't earn you any money but... maybe run a bit of noise suppression on it in some audio tool of your choice? At least I would really appreciate that. :)
I'm sorry the sound is bad for you. I am using a very expensive radio quality professional mike. I'm not sure what happened that it sounds bad for some people. Perhaps you are on a slow internet connection and the compression is amplifying background fuzz? How is the sound on the most recent videos? Better?
Ah, it's still tolerable but I feel that it's kind of a shame, especially if you use an expensive mic. You should be able to get more out of it.
Artifacts due to compression are very different (and I'm watching this at max. quality). Unless you've already actively asked some people, I'd suspect that many notice it but only a few bother to comment on it - because it's pretty distinct.
In e.g. "The Firefox Shape Path Editor", the noise is not as loud as in "Hot metal : Pasteup".
I assume that you've already ensured that the input levels are set correctly during recording and that you supply phantom power if the mic needs it. Other than that, it's unfortunately beyond what I know about audio recording.
Two H1s on a page. Hmm
i like turtles
What an inspiration you are, Jen.
Learned a new "trick" today: Writing Mode. That can take designs to a whole new level. I'm looking forward to the video teaching when to choose width keywords. I cycled through a few the other day until something wokred, but I'd rather know than guess.
You are amazing. I just found you out and altough I'm just scratching the surface of css grids and web developing in general, I feel your power, you are like a jedi master. Thank you for this. You've gained a subscriber
First time I've seen overlap between my book design life and my web dev life. H'ray for Jan Tschichold and Jen Simmons.
jen , Your videos takes me on the journey . I am listening you from the morning and now its night time , i did not get bored for a second. plz don't stop making videos ,,,,,its an request ......... you are awesome.
A year later, this is still relevant.
Stop trying to be edgy by randomly using b elements. And definitely stop a
Encouraging others to use deprecated and discouraged tags. As you said, it's not officially part of the html spec anymore, thus it's behaviour in browsers will be nondeterministic. It could have weird unintended side effects or even simply stop being supported by browsers, breaking your page. There's literally no benefit to using a b over a standard div... Even an svg rect would make far more sense
Ur the Leonardo da Vinci of web layouts.
Awesome tutorial +++++ thank you 🙂🙂
Very inspiring video.
Your so bright!
Hi.. your design videos are very helpful. If you find some time could you please make a video on responsive table.. with auto column width, with word-wrap if the content exceeds a certain width..(or usage of minmax(max-content, 150px) in table
a m a z i n g responsive, propsss
Thank you Jen. Your content is fantastic! Very helpful. 👍
holy shit this is great. just imagine tschichold, bayer or el lissitzky seeing this evolving use of their style.
What I find insanely cool, and keep in mind I was coding html around 1999/2000ish before moving on to a completelly unrelated technology is not only the accuracy and granular placement we get with css, especially grid but the ability create graphics, like your red bar, backgrounds, etc... without loading any images on the page. I haven't tested this but I have to assume that the responsiveness and speed of page loading (without downloaded graphics) has to be signifcantly faster and it's challenging me to create my first designs completely css based. It's been too long but I'm glad to be back in this focus and really enjoying learning CSS. Lastly, I like how you went back and found a design style that was prevalent in a completely different technology. Very, very cool.
Yes, things have come a long way. So many graphics we had to make. So many sprites with rounded corners and such. Now, it’s all in code. And yes, it makes rendering a webpage much faster.
@@LayoutLand It's certainly good stuff. I found your podcast last night "The Web Ahead". I'm looking forward to digging into the content. You are one very busy woman! I really enjoy your approach to the tech, the people, the content. It appears to me Ms. Simmons that you certainly have led a life well lived. Anyway, Happy Monday :-)
Excellent explanation, good job!
code poetry, beautiful!
AMAZING
Love all your content
Omg, this is so beautiful! ❤️
Brilliant
She’s a legend
Great work Jen!
This is a really cool demo and I learned some new tricks. Thanks :) I do have a comment about the element. The element doesn't mean bold, and hasn't done since HTML 5. It's also in the HTML 5.2 spec and the draft HTML 5.3 spec, so I'm not sure why you say it's not really recommended and not officially part of the HTML specification any more.
Now that's out of the way, I'm going to watch some more of these videos :)
That was awesome
Thanks for watching!
How come these videos refer to summer 2017 time and again?
I recorded these videos last July, and I mentioned the date while recording at the moments where I knew things would change. For example, explaining the state of Grid implementation in browsers, or the state of the Firefox Grid Inspector. I knew those things would evolve, and I wanted people to know that my information was accurate as of last summer, but would change.