Pratique du Shadowing: More CSS quick tips - Apprendre l'anglais à l'oral avec la vidéo

Choisissez un mode d'entraînement

Chaque mode ouvre une salle d'entraînement en plein écran.

248 phrases

Si les phrases sont trop courtes ou trop longues, cliquez sur Edit pour les ajuster.

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.

Télécharger l'application

Tout pour parler couramment

Prononciation IAChaque phrase notée

Phonétique (IPA)Maîtrisez chaque son

VocabulaireEnrichissez votre lexique

Jeu de vocabulaireApprenez en jouant

Scanner le QR

Download on theApp Store Get it onGoogle Play

Même chaîne

FOR YOU

Vidéo recommandée

28 phrases

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

Daily ConversationWorking Adults

184 phrases

10 Essential React Native Tips Every Developer Must Know

Daily ConversationUniversity StudentsWorking Adults

78 phrases

The easy way to keep your repos tidy.

Daily ConversationUniversity StudentsWorking Adults

15 phrases

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

Daily ConversationWorking Adults

353 phrases

Opus 5.5 Just Changed Video Editing Forever (free skills)

Daily ConversationUniversity StudentsWorking Adults

218 phrases

Next.js 16.3 got good (if you care)

Daily ConversationWorking Adults

50 phrases

Video

Daily ConversationUniversity StudentsWorking Adults

15 phrases

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

Daily ConversationWorking Adults

82 phrases

Rubik's Cube: How to Develop FASTER Turning Speed!

Daily ConversationWorking Adults

151 phrases

We've got separation of concerns wrong

Daily ConversationUniversity StudentsWorking Adults

Vocabulaire et conseils d’expression pour cette leçon

Cette vidéo contient 248 phrases et 3033 mots à répéter en shadowing. La partie parlée dure 14:18. Le locuteur parle vite, environ 212 mots par minute : attendez-vous à des liaisons et à des sons réduits. 86 % des mots font partie des 3 000 mots les plus courants en anglais ; le reste mérite d’être vu avant de commencer.

Vocabulaire clé de cette vidéo

15 mots moins courants de la vidéo, avec leur prononciation et leur sens :

scroll /skɹoʊl/ (nom) — rouleau (de papyrus ou de parchemin), papyrus. A roll of paper or parchment; a writing formed into a roll.
carrot /ˈkæɹət/ (nom) — carotte. A vegetable with a nutritious, juicy, sweet root that is often orange in colour, Daucus carota, family Apiaceae, especially the subspecies sativus.
justify /ˈd͡ʒʌstɪfaɪ/ (verbe) — justifier. To provide an acceptable explanation for.
align /əˈlaɪn/ (verbe) — aligner. To form a line; to fall into line.
bonus /ˈbəʊ.nəs/ (nom) — bonus. Something extra that is good; an added benefit.
grid /ɡɹɪd/ (nom) — grille. A rectangular array of squares or rectangles of equal size, such as in a crossword puzzle.
accent /ækˈsɛnt/ (nom) — accent. A higher-pitched or stronger (louder or longer) articulation of a particular syllable of a word or phrase in order to distinguish it from the others or to…
element /ˈɛləmənt/ (nom) — élément. One of the simplest or essential parts or principles of which anything consists, or upon which the constitution or fundamental powers of anything are based.
default /dɪˈfɔlt/ (nom) — défaut, non-respect. The condition of failing to meet an obligation.
relative /ˈɹɛl.ə.tɪv/ (nom) — parent. Someone connected by blood, marriage, or adoption; someone in the same family.
preference /ˈpɹɛf(ə)ɹ(ə)ns/ (nom) — préférence. The selection of one thing or person over others (with the main adposition being "for" in relation to the thing or person, but possibly also "of")
contrast /kənˈt(ʃ)ɹæst/ (nom) — contraste. The degree of this difference.
declare /dɪˈklɛɚ/ (verbe) — déclarer. To assert or announce formally, officially, explicitly, or emphatically.
subscribe /səbˈskɹaɪb/ (verbe) — abonner, s'abonner. To write (one’s name) at the bottom of a document; to sign (one's name).
chrome /kɹoʊm/ (verbe) — chromer. To plate with chrome.

Les verbes à particule que vous entendrez

look at (verbe) — regarder. To observe or watch.
set up /ˌsɛt ˈʌp/ (verbe) — mettre en place, installer. To make ready for use.
put in (verbe) — mettre, insérer. To place inside.
bring up (verbe) — élever. To mention.
come out /ˌkʌm ˈaʊt/ (verbe) — sortir. To be discovered; to be revealed.
get on (verbe) — monter, enfourcher. To board or mount (something), especially a vehicle.
go out (verbe) — sortir. To leave, especially a building.
go up (verbe) — monter, s'élever. To move upwards.

Prononciation à surveiller

Le locuteur utilise 79 contractions et formes réduites, comme I'm, we're, don't. Prononcez-les sous leur forme courte, telles que vous les entendez.

Les sons « sh » et « zh »: contrast /kənˈt(ʃ)ɹæst/, limitation /lɪmɪˈteɪʃən/, shorthand /ˈʃɔɹthænd/
Mots longs — placez bien l’accent: horizontal /ˌhoɹəˈzɑn.təl/, limitation /lɪmɪˈteɪʃən/, manually /ˈmænj(u)əliː/, opacity /oʊˈpæsɪti/, vertically /ˈvɝ.tɪ.kəli/

Comment s’entraîner avec cette vidéo

Écoutez la vidéo en entier une fois sans parler et notez les mots que vous ne connaissez pas.
Commencez à la vitesse 0,75×, répétez phrase par phrase, puis revenez à la vitesse normale quand cela devient facile.
Enregistrez-vous et comparez avec l’original, en faisant attention à des mots comme scroll, carrot, justify.

La grammaire de cette vidéo

Les structures que le locuteur utilise le plus, avec les mots exacts de la vidéo :

Structure	Dans la vidéo
Phrases conditionnelles if + proposition, will/would + verbe — une condition et son résultat	if I have a, maybe we'll do · if I say justify self center, we'll get
Present perfect have/has + participe passé — une action passée qui compte encore maintenant	have set · hasn't changed · haven't tried
Voix passive be + participe passé — l’accent est mis sur ce qui arrive, pas sur qui le fait	is updated · is automatically switched · is switched
Propositions relatives who / which + proposition — une précision sur une personne ou une chose	color, which is · thumb which is · people who have

Qu'est-ce que la technique du Shadowing ?

Le Shadowing est une technique d'apprentissage des langues fondée sur la science, développée à l'origine pour la formation des interprètes professionnels. Le principe est simple mais puissant : vous écoutez de l'anglais natif et le répétez immédiatement à voix haute — comme une ombre suivant le locuteur avec un décalage de 1 à 2 secondes. Les recherches montrent une amélioration significative de la précision de la prononciation, de l'intonation, du rythme, des liaisons, de la compréhension orale et de la fluidité.

Technique du shadowing : lire le guide complet étape par étape →

Pratique du Shadowing: More CSS quick tips - Apprendre l'anglais à l'oral avec la vidéo

Choisissez un mode d'entraînement

Télécharger l'application

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

Opus 5.5 Just Changed Video Editing Forever (free skills)

Next.js 16.3 got good (if you care)

Video

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

Rubik's Cube: How to Develop FASTER Turning Speed!

We've got separation of concerns wrong

Vocabulaire et conseils d’expression pour cette leçon

Vocabulaire clé de cette vidéo

Les verbes à particule que vous entendrez

Prononciation à surveiller

Comment s’entraîner avec cette vidéo

La grammaire de cette vidéo

Qu'est-ce que la technique du Shadowing ?