Shadowing Practice: More CSS quick tips - Learn English Speaking with Video

בחר מצב תרגול

כל מצב פותח חדר תרגול במסך מלא.

248 משפטים

אם המשפטים קצרים או ארוכים מדי, לחץ על ערוך כדי להתאים אותם.

Hello my friend and friends.

A little while ago I put out a video looking at five quick tips.

People really seem to like that.

They suggested some and I have a few of my own that I want to share.

So today I have five quick tips that we're going to be taking a look at including a few bonus ones.

So it's more like seven or eight tips.

Why am I saying five?

I don't know.

It's my favorite number.

So we're doing five.

Let's start with overscroll behavior which you can see here.

I have this scrolling thing that I have set up and

if you get to the bottom of something like that

and you keep scrolling it will continue to scroll the entire page

which can be annoying or if i'm scrolling up uh then the same thing can happen

if we're you know it can actually scroll up

when you want to be scrolling only within an element

so to fix this and there is a big a watch out for this one

that we're going to look at as well

but let's let's get it set up first so over scroll behavior of contain

and uh code pen does not like it apparently but now

if i'm scrolling down and scrolling down i'm I'm still scrolling and it's locked into this area.

And then the same thing going up, we're locked into this.

The reason I'm saying to watch out for this is, especially on mobile, it's less of an issue on desktop because you can always find a way around.

But if you're on a mobile device that's a touch device, people ask me about this all the time, by the way.

This is just the responsive mode that's built into the dev tools of all the browsers, I think.

So same thing, the overscroll behavior, I can scroll in this area.

So I can scroll down, I can scroll down.

If I get to the bottom and I'm trying to scroll with my finger, it's not going to continue scrolling.

This can be a good thing for like side swiping things.

So if you have horizontal scrolling, this can be a good idea to put in.

The thing you want to watch out for is say this is 120 viewport block size.

So it's a nice big tall area.

So the user scrolls down and then they get to like this part and they're scrolling.

And I have space on the side so I can actually like I can still grab a hold outside of that area.

but like I'm at the bottom and I can't even see the bottom

and that's really annoying right and there's no way for me to keep going whereas

if I turn this off let's remove that

and this will have to update so now once again we click we scroll down

but we get to like here

if I'm scrolling I'm scrolling we get all the way down to the bottom

and then I keep clicking and scrolling it will actually pull me down still

so it's one of those things you definitely want to test double check

that it's giving you the desired results that you're after

but again for horizontal scrolling especially on touch devices it can be handy

and there are other times where you definitely might want to implement this

but just be careful with it

if the things are getting tall cool next up we have carrot color

which is a fun one in

that uh not a lot of people know about it

so you can see i'm set up carrot color orange red right here

and that means

when i click into these you can see the carrot is actually orange red it's getting the color in there

if we don't have that it's just going to be the default of white

which there we go it is updated so

if you want something a little bit more on brand you can just use your carrot color on your inputs

and nice and easy the only problem here

and this is our first bonus tip is the carrot by

itself isn't super obvious right it's kind of small there's not

a lot you can see we can actually change the carrot

shape now sort of this is a progressive enhancement it's only in chrome at the moment

so let's i am in chrome so So we have my carrot color set up, so we can come here and say carrot shape.

And if you're going to be changing the carrot color, you might as well change the shape while you're at it, just to add a little something.

So I think the default is bar.

Let's see if that actually changes anything.

No, yeah, that's the default one, so that hasn't changed.

We could change this to a block and block is if you want to do like the old, you know, like these, and you might not want orange, red, that's like super deep like this.

Let's see if we can do a HSL from, I should probably use OKLCH.

We're going to say orange, red, LHSL over 0.5 to lower the opacity of it.

I haven't tried this.

This is where we're freelancing here.

Yeah, you can reduce the opacity of it.

So yeah, that could be something interesting

that you bring in just to make things look a little bit more interesting along the way.

If you have a certain style that you're after with a monospace font or something.

So that is the color shape.

The other option you do have here is underline or underscore?

I'm seeing underline as the autocomplete, but I'm pretty sure it's underscore that we want to use here.

And there you go.

I've come in.

It's kind of hard to see.

Let's just put this opacity back up to one.

This is a relative color, by the way, if you've never seen it before.

And yeah, you can have underscores coming in as well.

So we have a few different options there.

And moving on from carrot shape, we have accent color, which is the same idea of getting into the world of coloring things.

So you can see I have my checkbox here.

This we want to get things more on brand to match our carrot color that we just changed.

So on the HTML, this is an inherited property.

So just declare it as high up as you need to.

We can say accent color, accent color, just accent.

And we're going to with orange red here as well.

And all of these will change over to using that color.

There's a few good things with this.

First of all, the support's pretty good.

It will work for all of these elements.

And you'll notice the checkbox, the color of the checkmark is black right now.

If we change this to say yellow, actually no, yellow would stay black because yellow is very bright.

Let's change this to, what's a dark color?

100

I can't think of a good dark color off the top of my head for some reason.

101

I always use light keywords.

102

And the dark ones are never dark, right?

103

Let's try dark green.

104

I'm guessing is actually dark.

105

Ah, there we go.

106

And now you can see the check mark is automatically switched to white.

107

So it's always going to take the higher contrast.

108

The same with our radios.

109

The color of the radio there will always use the higher contrast color automatically.

110

And so, yeah, nice easy win there.

111

Accent color.

112

And then you can just get on brand super easily.

113

So a nice quick win with that one.

114

This can definitely be something that's included in your CSS resets even.

115

I think it's a nice one to throw in there.

116

The next step, a bit of a warning, it'll be a bit of a flashbang because I want to talk about colors.

117

So the background will be white on this one and it will be bright.

118

And the reason I want to talk about that is because I want to look at the color scheme shorthand.

119

Once again, this is something I include in most of my resets.

120

If I'm going to have a light and a dark color scheme, I'm going to put a light and a dark here.

121

And that means use whichever is the user preference.

122

For me, it is dark.

123

So you can see everything is switched over.

124

If you don't know about Color Scheme, the reason it's fantastic is the defaults is it will change the text colors.

125

So I don't have anything declaring my text colors other than my title up at the top there.

126

So because of that, the text color is automatically changing.

127

The background color is automatically changing.

128

The inputs are even switching.

129

My scroll bar is switching everything automatically switches when we switch over

130

because what it's doing is putting the user agent styles into a dark mode so

131

if you forget some styling along the way say for an

132

input you don't have these bright white inputs sitting around or it could be many other things but

133

if ever you forget to style something it won't stick out like a sore thumb which is quite nice

134

there is some limitation to this

135

if you're going to do it you probably want to have

136

some way for a user to also manually switch between

137

because people will have their user preferences set up that they might not want to be reading a website in.

138

A lot of people who have dark user preferences still prefer light websites for long reading

139

or people want to switch if it's nighttime.

140

They might want to switch to a dark theme even if their system settings are in a light theme.

141

So this is a nice first step

142

and I'll put a link in the description to a video

143

where where I look at how we can go more in depth with this

144

and build out an actual toggle and everything else, because I've done that.

145

So I'll include a link in the description to a video that goes a bit more in depth on this, how we can build a bit of a color scheme with the toggle, while also using the light dark here.

146

As a little bit of a bonus in future CSS, or if you don't mind, not as great color handling, another, or not color handling,

147

browser support, it's getting there, but it's not perfect yet, is you could do something like color and use the light dark function.

148

And that allows you to pass two colors here.

149

So these could be custom properties that I'm putting in.

150

But let's just say that my color, my light text color should be red, which will look terrible.

151

We're going to say red and we're going to say, let's do the light blue.

152

So if I have a, maybe we'll do, yeah, we'll just say red, whatever.

153

You can see the text has actually changed over to light blue right now.

154

And if I emulate this, so if you go into your dev tools, I guess this is another bonus tip in your dev tools control shift

155

or command shift on a mac p brings up your command palette

156

and you can emulate emulate your different things

157

so preferred color scheme of light

158

and now you can see the text color switched over to red

159

and then control shift p command shift p on a mac emulate

160

and you can do not emulate

161

or you can switch over to other ones you can emulate all the different media query stuff

162

so do not we go back over to our baby blue right there yeah color scheme is fantastic

163

and makes life really easy

164

and i'm really looking forward to light dark getting to the

165

point where browser support is good enough to start using it in production

166

and i had to look uh this is of the time

167

of recording it is baseline newly available we're at about 85 support as far back as safari 17.5

168

so probably a little bit longer realistically unless it's a personal project

169

but yeah we're getting to the point where we're going to be hitting that crossover pretty soon i think

170

anyway that's it for our color scheme let's jump on over to our last one

171

which is our place content where my demo apparently did not want to load

172

when i got to the page here there it is

173

and this is place content or place items

174

and we're also looking at another one along the way

175

so here on my section i still think this is the

176

easiest way to center things in css these days is throwing a display grid on the thing

177

and then using either a place items of center

178

or a place content of center

179

and both of these can work with grid the place items will work

180

if you only have one thing in there so

181

if I only had an h2 the item is going to be centered horizontally

182

and vertically when we have multiple items it's creating two rows of content

183

so it's centering them vertically within the rows

184

which isn't quite what I want so instead we can use our place content center

185

which places the entire grid in the center

186

and it's probably the easiest way to center something you can

187

actually do this now again browser support's not good enough anyway

188

but you can also do this in a div now

189

or block level elements I should say

190

because this is a section not a div even though semantically

191

they're more similar than you might expect unless you're like actually attaching a title to the section, but I digress.

192

We can do a align content of center and then a justify items of center,

193

and it will center things.

194

Let's see, there we go.

195

You might be going, wait, Kevin, shouldn't this be the other way around?

196

Yeah, in Flexbox world, you would use the opposite of these two, but in the block context, we do it this way.

197

That definitely feels frustrating.

198

I know a lot of people got mad when this came out

199

that it's the opposite of what we would use with Flexbox.

200

It actually does make sense

201

when you look at how the items versus the content keywords work when we're doing alignment on things like this.

202

It's just one of those things that we've built a pattern we're familiar with, so it is kind of frustrating that they are like that.

203

You still need two lines here to be able to do this.

204

So just having a display grid and a place content center is better browser support anyway, so we might as well use that,

205

I think, even in the future.

206

Unless you really don't need a grid context for some reason, I'm probably still going to go this route,

207

but there's probably situations where maybe the other one would be handy to have.

208

The other one I did want to mention is if the content inside is the...

209

Let's just take this off.

210

We can take this off and we're going to add a position relative here.

211

Position relative because I want to talk about the place things.

212

So on a positioned element now, you can use the item or self things, if that makes sense.

213

Let's do that.

214

That's my H2.

215

So my H2 is going to get a position of absolute and I can actually do a place self.

216

Oh, no, we need one more thing.

217

I'm going to say inset of zero.

218

So top, bottom, left and right of zero.

219

and then I can do a place self of center and that will work and go in the middle.

220

So this is the placement of things would work.

221

So this is the same as an align self

222

and a justify self of center because all of those have been brought over to the positioning as well, right?

223

So if I say justify self center, we'll get it on the justify axis.

224

So it's centered this way.

225

And if I did an align self, we're going to center it vertically instead.

226

Because whenever we use the place, it's a shorthand for the justify and align.

227

So it's justify self and align self of center.

228

Same as when I did it over here with the place content of center.

229

That's the shorthand for align content and align and justify content of center.

230

So yeah, a bunch of different ways you can center things.

231

A few bonus tips along the way there.

232

I'll put links to the original video down below

233

and they should be on screen to the couple I mentioned along the way including

234

that one on the color scheme stuff that I talked about and with

235

that I want to say a very big thank you to

236

my enabler of awesome johnny as well as all my other patrons

237

and channel members for their continued support

238

and of course until next time don't forget to make your corner of the internet a little bit more awesome

239

and we're almost at a million subs as the time of

240

this going out probably really close maybe we passed it maybe

241

not just want to say a very big thank you to everyone for helping me get there

242

if we haven't yet hit it and you haven't yet subscribed please do consider subscribing to help me get there.

243

That'd be pretty cool.

244

It's a big milestone for us YouTubers.

245

So yeah, thank you to everybody who has continued to support me, whether it's through Patreon, channel membership, or just watching and sharing my videos.

246

Yeah, it's been a fun ride, and we finally got to a million, or are getting to a million.

247

But whatever it is, thank you so much, everybody.

248

And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.

הורד אפליקציה

כל מה שאתה צריך כדי לדבר בשטף

הגיית AIציון לכל משפט

תרגול IPAשלוט בכל צליל

אוצר מיליםבנה את מאגר המילים שלך

משחק אוצר מיליםלמד תוך כדי משחק

סרוק QR

Download on theApp Store Get it onGoogle Play

אותו ערוץ

FOR YOU

המלץ על סרטון

28 משפטים

#ZFold8 Has A Big Problem, it Isn't #iPhoneDuo #appleiphoneduo #samsungvsapple #iphoneduovszfold8

Daily ConversationWorking Adults

184 משפטים

10 Essential React Native Tips Every Developer Must Know

Daily ConversationUniversity StudentsWorking Adults

78 משפטים

The easy way to keep your repos tidy.

Daily ConversationUniversity StudentsWorking Adults

15 משפטים

Fix These 5 Settings ⚙️ #contentmarketing #contentcreation #marketing

Daily ConversationWorking Adults

40 משפטים

Dopamine Menu for Doomscrolling Ideas | How to Make a Dopamine Menu (ADHD & Self Improvement)

Daily ConversationUniversity StudentsWorking Adults

353 משפטים

Opus 5.5 Just Changed Video Editing Forever (free skills)

Daily ConversationUniversity StudentsWorking Adults

218 משפטים

Next.js 16.3 got good (if you care)

Daily ConversationWorking Adults

50 משפטים

Video

Daily ConversationUniversity StudentsWorking Adults

151 משפטים

We've got separation of concerns wrong

Daily ConversationUniversity StudentsWorking Adults

15 משפטים

CAN YOU STOP SCROLLING | Common Adverbs in everyday English | B1–B2 Shadowing Practice

Daily ConversationWorking Adults

אוצר מילים והערות הגייה לשיעור הזה

שיעור הדיבור הזה ברמה C1 מבוסס על הסרטון “More CSS quick tips”. המילים שחוזרות הכי הרבה: color, center, dark, scrolling, content. בסרטון הזה יש 248 משפטים ו-3033 מילים לתרגול Shadowing. הדיבור נמשך 14:18. הדובר מדבר מהר, כ-212 מילים בדקה, אז צפו לצלילים מחוברים ומקוצרים. 86% מהמילים נמצאות בין 3,000 המילים הנפוצות ביותר באנגלית; כדאי ללמוד את השאר לפני שמתחילים.

אוצר מילים מרכזי בסרטון הזה

15 המילים המתקדמות ביותר בסרטון, עם ההגייה והמשמעות שלהן:

מילה	הגייה	משמעות
scroll שם עצם	/skɹoʊl/	מגילה, מְגִלָּה
carrot שם עצם	/ˈkæɹət/	גזר \ גֶּזֶר
annoy פועל	/əˈnoɪ̯/	הֵצִיק
frustrate פועל	/ˈfɹʌsˌtɹeɪt/	תִּסְכֵּל
keyword שם עצם	/ˈkiː.wɜːd/	מִלַּת מַפְתֵּחַ
reset פועל	/ɹiːˈsɛt/	אפס
horizontal שם תואר	/ˌhoɹəˈzɑn.təl/	אפקי
subscribe פועל	/səbˈskɹaɪb/	נִמְנָה
inherit פועל	/ɪnˈhɛɹɪt/	יָרַשׁ
safari שם עצם	/səˈfɑːɹ.i/	ספארי
milestone שם עצם	/ˈmaɪlˌstoʊn/	אבן מיל, אבן דרך
palette שם עצם	/ˈpælɪt/	פתכה
attach פועל	/əˈtæt͡ʃ/	חיבר
font שם עצם	/fɑnt/	גּוֹפָן
thumb שם עצם	/ˈθʌm/	אגודל

Phrasal verbs שתשמעו

מילה	הגייה	משמעות
come out פועל	/ˌkʌm ˈaʊt/	יָצָא
go out פועל		יָצָא
go up פועל		עָלָה

משפטים שכדאי לחזור עליהם

משפטים קצרים ושלמים מהסרטון שאפשר להשתמש בהם בשיחה יומיומית:

Why am I saying five?
Let's see if that actually changes anything.
This is where we're freelancing here.
The other option you do have here is underline or underscore?
Let's change this to, what's a dark color?

דקדוק בסרטון הזה

המבנים שהדובר משתמש בהם הכי הרבה, עם המילים המדויקות מהסרטון:

מבנה	בסרטון
משפטי תנאי (Conditional sentences) if + clause, will/would + verb — תנאי ותוצאה שלו	if I have a, maybe we'll do · if I say justify self center, we'll get
הווה מושלם (Present perfect) have/has + past participle — פעולה שקרתה בעבר ועדיין יש לה חשיבות או השפעה עכשיו	have set · hasn't changed · haven't tried
סביל (Passive voice) be + past participle — הדגש הוא על מה שקורה, לא על מי שעושה את הפעולה	is updated · is automatically switched · is switched
משפטי זיקה (Relative clauses) who / which + clause — מידע נוסף על אדם או דבר	color, which is · thumb which is · people who have

הגייה ששווה לשים לב אליה

הדובר משתמש ב-79 קיצורים וצורות מקוצרות, כמו I'm, we're, don't. אמרו אותם בצורה הקצרה, כפי שאתם שומעים אותם.

הצלילים של “sh” ו-“zh”: shorthand /ˈʃɔɹthænd/, limitation /lɪmɪˈteɪʃən/
מילים ארוכות — שימו לב להטעמה: opacity /oʊˈpæsɪti/, vertically /ˈvɝ.tɪ.kəli/, horizontal /ˌhoɹəˈzɑn.təl/, manually /ˈmænj(u)əliː/, limitation /lɪmɪˈteɪʃən/

צלילים שדוברי עברית מתקשים בהם:

/w/ — שפתיים מעוגלות, לא /v/: keyword /ˈkiː.wɜːd/, swipe /swaɪp/, query /ˈkwɪɹ.i/, whichever /wɪt͡ʃˈɛvɚ/
/æ/ — פתוח יותר מה-“אֶ” העברית, לא כמו “a” ב-“cup”: carrot /ˈkæɹət/, opacity /oʊˈpæsɪti/, shorthand /ˈʃɔɹthænd/, enhancement /ɪnˈhæns.mənt/, freelance /ˈfɹiˌlæns/
/r/ — הלשון לא נוגעת בשום מקום, לא ה-“ר” הגרונית: scroll /skɹoʊl/, carrot /ˈkæɹət/, browser /ˈbɹaʊ.zəɹ/, shorthand /ˈʃɔɹthænd/, underscore /ˈʌn.dɚˌskoɹ/

איך לתרגל עם הסרטון הזה

הקשיבו לכל הסרטון פעם אחת בלי לדבר, ורשמו את המילים שאתם לא מכירים.
התחילו במהירות 0.75×, תרגלו Shadowing משפט אחר משפט, וחזרו למהירות רגילה כשזה מרגיש קל.
הקליטו את עצמכם והשוו למקור, תוך תשומת לב למילים כמו scroll, carrot, annoy.

מהי טכניקת השאדואינג?

שאדואינג היא טכניקת למידת שפה מבוססת מדע שפותחה במקור להכשרת מתורגמנים מקצועיים ופופולרית על ידי הפוליגלוט ד"ר אלכסנדר ארגואלס. השיטה פשוטה אך עוצמתית: אתה מקשיב לאודיו באנגלית ילידית וחוזר עליו בקול רם מיד — כמו צל העוקב אחרי הדובר עם עיכוב של 1–2 שניות בלבד. בניגוד להאזנה פסיבית או תרגילי דקדוק, שאדואינג מכריח את המוח והשרירים בפה לעבד ולשחזר דפוסי דיבור אמיתיים בו זמנית. מחקרים מראים שזה משפר משמעותית את דיוק ההגייה, האינטונציה, הקצב, הדיבור המחובר, הבנת השמיעה ושטף הדיבור — מה שהופך אותו לאחת השיטות היעילות ביותר להכנה לIELTS Speaking ולתקשורת באנגלית בעולם האמיתי.

טכניקת Shadowing: קרא את המדריך המלא שלב אחר שלב →

Shadowing Practice: More CSS quick tips - Learn English Speaking with Video

בחר מצב תרגול

הורד אפליקציה

Handy CSS layout patterns, and fun ways to elevate them

Use these CSS features instead of JavaScript

Transition to and from display: none

Your AI broke the layout. Now what?

This library changes how JS and CSS work together

No more magic numbers for your breakpoints

Native popovers with smooth animations (no JS required)

3 modern CSS properties to add to your reset

5 CSS fouls that I see way too often

Has AI killed Tailwind?

Why I use single-color gradients in my CSS

Build smarter color systems with relative colors

#ZFold8 Has A Big Problem, it Isn't #iPhoneDuo #appleiphoneduo #samsungvsapple #iphoneduovszfold8

10 Essential React Native Tips Every Developer Must Know

The easy way to keep your repos tidy.

Fix These 5 Settings ⚙️ #contentmarketing #contentcreation #marketing

Dopamine Menu for Doomscrolling Ideas | How to Make a Dopamine Menu (ADHD & Self Improvement)

Opus 5.5 Just Changed Video Editing Forever (free skills)

Next.js 16.3 got good (if you care)

Video

We've got separation of concerns wrong

CAN YOU STOP SCROLLING | Common Adverbs in everyday English | B1–B2 Shadowing Practice

אוצר מילים והערות הגייה לשיעור הזה

אוצר מילים מרכזי בסרטון הזה

Phrasal verbs שתשמעו

משפטים שכדאי לחזור עליהם

דקדוק בסרטון הזה

הגייה ששווה לשים לב אליה

איך לתרגל עם הסרטון הזה

מהי טכניקת השאדואינג?