跟讀練習: Your AI broke the layout. Now what? - 通過影片學習英語口語

選擇練習模式

每種模式都會開啟全屏練習室。

94 句

如果句子過短或過長，請點選 Edit 進行調整。

The most undervalued skill in front-end development right now has nothing to do with prompting, but instead it has to do with identifying and fixing problems,

because every now and then AI is going to get things wrong.

Now this doesn't happen every time you prompt something, and it's not that all of the errors are catastrophic, though that definitely can happen from time to time,

but when these problems do come up there's two kinds of developers that are out there.

There's those that can identify the problem in under a minute and go ahead and fix it relatively quickly, And there's others who spend half an hour reprompting the AI trying to understand what's wrong with it

and trying to get it to fix the problem that it created in the first place.

And being a CSS person, I see this happen with CSS a lot.

So we're going to dive in

and look at some of the things you can do with CSS to be able to solve the problems

that come up and the types of things you want to be looking at and identifying when things happen.

And this is actually a challenge that is in my course, CSS Demystify, that we're going to look at and do together where this is what we want.

And there's some problems right now.

And so let's jump to full screen mode here and I'm just gonna make the font size bigger.

So, you know, for recording purposes, you guys can see what's going on and everything looks okay.

In terms of the markup, I don't see anything that would be catastrophically problematic there.

But when it comes to CSS layout issues, it's really useful to be able to quickly look at things and go red flag right away.

This is a very simple example of the types of things that you might be looking for.

But we have like our text is too close to the top over here.

We obviously have some overflow, which is the easiest problem.

And there's a few other smaller things here that can easily pop up.

So the very first thing is just fixed widths and heights.

Now, LLMs generally don't do this these days, but it is still one of those things that we want to avoid at all costs.

And I always say, if you're going to be setting a size on something, you don't want to set a fixed size, you want to set a constraint.

So I'm going to set a max width here.

And that means, you know, I'm actually able to get smaller than that.

And we can see here it's shrinking and growing instead of being locked in at that size.

And for a height, again, you could set a constraint if you need the constraint, it would be a min height, which means like if this was bigger,

then it would be able to be bigger.

And so like most of the time, height is actually a useless declaration.

And this isn't the type of useless declaration that an LLM will generally make.

It's usually a person will throw that on there.

But if we don't set a height, height auto works.

It's fantastic.

It works with how the browser wants to work as the content has different amounts of space.

It can adjust and grow and shrink and do what it needs to do.

But the types of useless declarations that LLMs do do every now

and then actually does sneak its head and is what's causing the overflow over here.

And if I come and take a look, there's a width 100% right here.

And this is what the issue is.

And if we take this off, you're going to see it fixes itself.

Nice, right?

Some eagle-eyed people watching this might be going, Kevin, that wasn't the problem.

The problem was that you never declared a box sizing border box, but that's not correct.

Even if I put that, let's do it really quickly here, it's going to do a border, not border, box sizing of a border box on here.

It's fixed it a little bit, but it's still not completely there.

And the reason for that is box sizing border box with 100% plus margin, margins are outside of your border box.

It's not included in there.

Just like height, a lot of the time the auto works fine.

Same thing here.

The width of auto works fantastically well, and I don't actually need to declare it width there.

So we can get rid of that one.

Our layout is almost there.

We have the major issue I would say right now is, do I even want margin on here?

When you have an element inside, you generally don't want to put margins outside.

And this is the type of thing that can sneak in sometimes

because you're focused on the one thing that you're writing code for and you go, I need space all around it.

But this would probably make more sense if I took this margin off completely to begin with, which now I guess that width 100% wouldn't be an issue if you did have your box sizing.

But then coming all the way back up to my card, I would replace that with this padding of the 24 pixels here, which adds it all around.

And anytime you need more background, we want to come in with some padding.

So quick things that we can identify there.

And now the main issue is we have extra space here.

We had weird spacing.

We still have weird spacing there.

And the spacing down here at the bottom is also getting kind of weird as well.

Once again, margins start rearing their ugly head.

We had collapsing margins going on.

Now we actually have extra margins happening.

So here on the title where I had this margin top because I needed some extra space that wasn't actually doing anything.

I can remove that.

And not only can I remove it, I actually want to say that the margin top is zero.

We can have a CSS reset here that's getting rid of all of our margins.

That would probably be a little bit more standard, but we can see we got rid of that weird space at the top there.

And then here I would probably want to come down on the content.

And it's not even on the content, it's coming from the paragraph here.

So maybe my content, you know, this is where maybe you actually have a star of a margin of zero, and then that gets rid of all of the spacing.

And then here we can do a display grid

and then a gap of whatever space that we want to have to replace the margin with gaps.

There's a few different strategies here.

I'm not always a fan of this specific one.

There's other ones that I do like.

And of course, this is all part of my course, CSS Demystified, where I talk a lot about this.

This is part of my Making Sense of Layouts module that's here right now.

We have strategies with dealing with margins, which is all about bringing in the different amounts of space, coming in with grid, creating structured ones when we want to do a flex box with grid, all the different things like this.

And the whole point of the course is to understand CSS better.

This specific module about layouts.

I'm doing a new module right now called Writing Resilient CSS

which is all about writing CSS that can scale and be maintainable.

And it's all about getting you to understand CSS better.

So whether you're writing it yourself and you just want to be more efficient and not be fighting with the CSS,

or if you are using an LLM or some other AI tool to write CSS for you and other front end stuff, but every now and then there are problems that come up or things to debug,

you'll be able to identify the problems easily, quickly, and fix them while you're at it.

So if you're interested in that, the link is down below.

And with that, I want to say a very big thank you to my enabler of awesome, Johnny, as well as all my other patrons and channel members for their continued support.

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

下載應用

流利口語所需的一切

AI 發音評分逐句打分

音標練習掌握每個音

詞彙學習建立你的詞庫

詞彙遊戲邊玩邊學

掃碼

Download on theApp Store Get it onGoogle Play

同頻道

FOR YOU

本節課學習要點

本節課將通過分析影片內容，幫助學習者練習英語聽力與口語表達，同時理解前端開發中解決AI佈局問題的思路。學習者可通過影子跟讀（shadowing）掌握影片中的專業術語與流暢表達，提升英語實際運用能力。

核心詞彙與短語

front-end development：前端開發
CSS layout issues：CSS佈局問題
fixed widths and heights：固定寬高
overflow：溢位
box sizing border box：盒模型邊框盒

影子跟讀練習技巧

影片語速適中，語調平和，適合進行英語影子跟讀練習。以下是具體建議：

先逐句播放影片，模仿發音與語調，重點關注專業術語的連讀與重音，如“front-end development”“CSS layout”。使用影子跟讀網站（shadowing site）反覆練習，可提升口語流暢度。
注意影片中解釋問題的邏輯表達，如“the most undervalued skill... has nothing to do with... but instead...”，模仿此類句式結構，增強英語思維的邏輯性。
針對影片中“shrink and grow”“adjust and grow”等短語，練習快速反應與準確發音，通過影子跟讀（shadow speak）強化肌肉記憶，避免卡頓。

通過以上練習，學習者不僅能提升英語聽說能力，還能掌握技術領域的專業表達，實現語言學習與知識積累的雙重提升。

影片中的語法

說話人最常用的結構，並附上影片中的原話：

結構	影片中的用法
定語從句 who / which + 從句 — 補充說明人或事物	overflow, which is · height, which means · margins, which is
被動語態 be + 過去分詞 — 強調發生了什麼，而不是誰做的	is just fixed · being locked

什麼是跟讀法？

跟讀法 (Shadowing) 是一種有科學依據的語言學習技巧，最初開發用於專業口譯員的培訓，並由多語言者Alexander Arguelles博士普及。這個方法簡單而強大：您在聽英語母語原聲的同時立即大聲重複——就像是一個延遲1-2秒緊跟說話者的影子。與被動聽力或語法練習不同，跟讀法強迫您的大腦和口腔肌肉同時處理並模模擬實的講話模式。研究表明它能顯著提高發音準確性，語調，節奏，連讀，聽力理解和口語流利度——使其成為雅思口語備考和真實英語交流最有效的方法之一。

影子跟讀法: 閱讀完整分步指南 →

跟讀練習: Your AI broke the layout. Now what? - 通過影片學習英語口語

選擇練習模式

下載應用

同頻道

Handy CSS layout patterns, and fun ways to elevate them

Use these CSS features instead of JavaScript

Transition to and from display: none

This library changes how JS and CSS work together

No more magic numbers for your breakpoints

More CSS quick tips

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

推薦影片

We've got separation of concerns wrong

Prompt Engineering - Guidelines

The future unfolds! How to optimize Android apps for adaptive layouts

How I Made $30,000 Hacking Broken Access Control

Anthropic just proved AI isn't getting better

8 Tech Choices to Lock In Before Agentmaxxing

"This Doesn't Lie" | Build Your Own English Level Checker with Google AI Studio

Once you see this, You’ll see Competitive Games Differently

Video

How to Create & Style Closed Captions Fast in ActivePresenter 10.5

8 New CSS, JS and HTML Features You Should Know

本節課學習要點

核心詞彙與短語

影子跟讀練習技巧

影片中的語法

什麼是跟讀法？