Luyện nói tiếng Anh bằng Shadowing qua video: The Easiest Way to Build Websites
Chọn chế độ luyện tập
Mỗi chế độ mở một phòng luyện tập toàn màn hình.
117 câu
Nếu các câu quá ngắn hoặc quá dài, hãy bấm Edit để chỉnh sửa.
1
After watching this video, you will be able to build better and profitable websites.
2
Plus, you will make them faster than ever before.
3
There are two ways of building a website.
4
The traditional way of building, by writing code, and the other is using a website builder like Webflow or WordPress.
5
This video applies to both groups because it's the same concept.
6
But I will focus on writing code, as it offers more creative freedom and is generally better.
7
So every time I say CSS, it just means styling options in website builders.
8
And every time I say code editor, it translates as WordPress or Webflow.
9
Before I learned how to code, I used WordPress to build websites, and I made a lot of mistakes.
10
I kept making those mistakes even after I learned how to code.
11
Because YouTube taught me how to use WordPress, or how to write code.
12
But, no one ever taught me how to build a website, if that makes any sense.
13
Tell me if it's relatable.
14
You have to rewrite the entire code again, because you hate how the final website looks and function.
15
Or you are staring at a blank page, with no idea where to start.
16
What about your website is taking 10 seconds to load even on 4G?
17
Or worst, your client is asking for revisions after revisions, and nothing seems to satisfy them.
18
So here is the solution to make the best website possible, with the least amount of effort and time.
19
You need to do two things.
20
Number one, design first.
21
I am talking proper design.
22
Figure out who the audience is, and what problem this website will solve for them.
23
Design also includes content.
24
So, once you have figured out who the audience is, and what they want from your website, the right headings and powerful images will come naturally to you.
25
Not just that.
26
You will be able to create the right structure from the very beginning.
27
You will know whether to use cards or not.
28
If yes, then how many cards?
29
How big those cards should be.
30
Because you are now thinking in terms of what the users want.
31
It becomes easier to help them.
32
But design is only step one.
33
Step two is actually implementing that design.
34
Whether you use a no-code tool, or write code manually, it doesn't really matter.
35
You just have to think and plan everything in the phase one itself.
36
So, implementing those design will become a piece of cake.
37
Just beware of the limits of those no-code tools, or your own coding skill set.
38
You don't want to design something which is a pain to implement, because most of the time, the users don't even notice the effort you put into a website.
39
So, we will look at some neat tips and tricks that deliver superb user experience, but very easy to implement.
40
Speaking of easy, first thing you need to do is make a repeatable design.
41
Repeating design make things consistent and look satisfying.
42
Here are some examples.
43
Another tip, break your page into sections.
44
So, you can focus on one thing at a time.
45
First section will be the hero section.
46
Some might say it's the most important part of the website.
47
because an average user spends seconds deciding whether to stay or leave your website.
48
Putting a nice and powerful heading up front will catch their attention.
49
Coming up with the heading is easy.
50
Your main heading should answer this question.
51
What problem you are solving that the user currently have?
52
Remember, the user doesn't care about you.
53
They care about the solution you are providing.
54
Once you got their attention, then you need to expand on that heading with a small paragraph paragraph, ideally two or three sentences, and add an image, video,
55
or a product demo to complement the heading.
56
By combining a strong heading and a paragraph with the right media, you make it very easy for the user to understand your product or service.
57
And once they get what you are offering, you need a call to action.
58
Whether it's a learn more, sign up, or buy now button.
59
Whatever your goal is, put it right there.
60
Now there are two designs for a hero section, the two columns and one column design.
61
Two columns are more popular because it's easier to implement for any screen size.
62
But you can get away with one column as well.
63
Just make sure that the design works on all screens, and not just on computers and laptops.
64
Once you have a strong and engaging hero section, the next section should provide more information about your product or service.
65
Once again, no fluff, just straight to the point.
66
The more transparency, the better.
67
You have someone's attention.
68
Now you need to win their trust.
69
So if it's a product, explain the features and benefits, explain the pricing, and make it easier for them to choose you over the competition.
70
keep asking this question to yourself.
71
What is the purpose of this section?
72
If it's to explain something, just do that, in as simple words as you can.
73
If it's to show off, do that in confidence.
74
Whatever words you use, they must answer a question that a lot of your users have.
75
To know those questions, you can talk to your users and look at your competition.
76
Most of the time, a good heading is an offer that the competition doesn't have.
77
Imagine a website that have this heading, unlimited downloads, unlimited fun, and the competition doesn't have any feature like that.
78
You could also try to answer a very common question in your industry.
79
Here is an example for a heading that is actually an answer.
80
No ads, no privacy risks.
81
a social media website telling this on their sign-up page.
82
Now if you mix headings like these with some crisp illustrations or bold images, you are golden.
83
There are plenty of free websites out there.
84
I am sure you will find them.
85
But the key thing is, you haven't written a single line of code, and yet you're so far ahead in the process.
86
Like most things, website building also follows the classic 80-20 rule.
87
Think and plan before building the website, and save yourself from a lot of pain.
88
I have learned this the hard way.
89
Now coming to colors and fonts.
90
You need at least four colors, including black and white.
91
You can use variations of black and white, but don't go too far.
92
The next two are your accent colors.
93
They will be used to add a bit of character and style.
94
Use them to design your buttons, borders, and gradients.
95
The last part is fonts, and it's best to just stick with one font per website.
96
If you have experience, then you can use two or maximum three fonts per website.
97
But don't worry about fonts and colors, we will use CSS variables to build our website.
98
In no code tools, you can set them as global colors and fonts.
99
The neat thing about variables is, later you can change them, and the results will apply to the whole website.
100
Check it out!
101
If you are planning to use a dark mode toggle, that will also be much easier with variables.
102
Once we have our variables, we need to assign the same classes to the repeating design, because we don't want to write the same CSS over and over again.
103
Speaking of writing less CSS, by using the same classes and variables, it becomes very easy to build and modify the website at any stage we want.
104
I used to directly jump into WordPress or VS Code, and start building the website from scratch with no design or content in mind.
105
The end result was an ugly and useless website that needed to be rebuilt again.
106
Or worst, keep adjusting colors and design till the client was satisfied.
107
So now, I design first, with all the final content and repeatable design planned out.
108
And once I am happy with the design and content, I open VS Code, which is the best code editor for me.
109
Speaking of best, I promised some easy tips and tricks to deliver an exceptional user experience.
110
So, for those of you who stayed till the end, here they are.
111
Dynamic Heading Size Flexible cards
112
SVG icons
113
Snap scrolling.
114
Scale up or down.
115
There you have it.
116
The easiest and fastest way to build powerful websites.
117
Feel free to add a tip or suggestion in the comments section, just below the like and subscribe button.
Tải Ứng Dụng
Mọi thứ bạn cần để nói trôi chảy
Chấm điểm AIChấm từng câu nói
Luyện IPAThành thạo mọi âm
Từ vựngMở rộng vốn từ
Game Từ vựngHọc qua chơi
FOR YOU
Video gợi ý
B22
156 câu
Unfortunately, YouTube Really Is This Simple
Daily ConversationWorking Adults
B21
162 câu
Wonderful website design
Daily ConversationWorking Adults
B21
191 câu
I Rebuilt My Entire Website in Astro… Was It Worth It?
Daily ConversationWorking Adults
B21
83 câu
User Flow vs Task Flow in UX Design
Daily ConversationWorking Adults
B21
126 câu
How I use AI as a senior software engineer and 5 principles of AI explained in 10 minutes
Daily ConversationWorking Adults
B21
50 câu
Video
Daily ConversationUniversity StudentsWorking Adults
B21
336 câu
Best NextJS Folder Structures | Beginner - Intermediate - Advanced
Daily ConversationUniversity StudentsWorking Adults
B2155 câu
80% of Interior Design Basics in 10 minutes
Daily ConversationWorking Adults
B21
48 câu
The smart way to name your content
Daily ConversationWorking Adults
B21
157 câu
Claude Design just got MASSIVE Upgrades (2.0 Update)
Daily ConversationWorking Adults
C14
239 câu
My 4.9-Star iOS App Is Actually a Website: Here’s How I Built It
Daily ConversationUniversity StudentsWorking Adults
B21
206 câu
8 Things I Did to Stop Wasting My Evenings After Work
Daily ConversationWorking Adults
Từ vựng và ghi chú luyện nói cho bài học này
Bài luyện nói trình độ B2 này dựa trên video “The Easiest Way to Build Websites”. Những từ được nhắc lại nhiều nhất trong bài: website, design, code, heading, user. Video này có 117 câu và 1438 từ để luyện shadowing. Phần lời nói dài 10:55. Người nói giữ tốc độ đều, khoảng 132 từ mỗi phút, vừa sức để nói đuổi theo. 86% số từ nằm trong 3.000 từ tiếng Anh thông dụng nhất; phần còn lại nên xem trước khi luyện.
Từ vựng quan trọng trong video
15 từ khó nhất trong video, kèm phiên âm và nghĩa:
| Từ | Phiên âm | Nghĩa |
|---|---|---|
| font danh từ | /fɑnt/ | phông, phông chữ |
| implement động từ | /ˈɪmpləmənt/ | thực hiện, chấp hành |
| satisfy động từ | /ˈsætɪsfaɪ/ | thỏa mãn, thoả mãn |
| paragraph danh từ | /ˈpæɹəɡɹæf/ | đoạn |
| revision danh từ | /ɹəˈvɪʒ.ən/ | tái bản |
| builder danh từ | /ˈbɪl.dəɹ/ | chủ thầu |
| scroll danh từ | /skɹoʊl/ | cuộn, cuốn |
| rebuild động từ | /ɹiːˈbɪld/ | xây lại, xây dựng lại |
| translate động từ | /tɹænzˈleɪt/ | dịch, phiên dịch |
| subscribe động từ | /səbˈskɹaɪb/ | đăng kí |
| adjust động từ | /əˈd͡ʒʌst/ | điều chỉnh |
| variation danh từ | /ˌvɛəɹiˈeɪʃn̩/ | sự biến đổi, sự thay đổi |
| blank danh từ | /ˈblæŋk/ | mẫu in |
| accent danh từ | /ækˈsɛnt/ | trọng âm |
| scratch động từ | /skɹæt͡ʃ/ | gãi |
Cụm động từ bạn sẽ nghe
| Từ | Nghĩa |
|---|---|
| show off động từ | khoe |
Những câu đáng luyện lại
Các câu ngắn, trọn ý trong video mà bạn có thể dùng lại khi giao tiếp hằng ngày:
- Tell me if it's relatable.
- What problem you are solving that the user currently have?
- Remember, the user doesn't care about you.
Ngữ pháp trong video
Những cấu trúc người nói dùng nhiều nhất, kèm đúng cụm từ trong video:
| Cấu trúc | Trong video |
|---|---|
| Thì hiện tại hoàn thành have/has + quá khứ phân từ — việc đã xảy ra nhưng còn liên quan đến hiện tại | have figured · haven't written · have learned |
| Mệnh đề quan hệ who / which + mệnh đề — thêm thông tin về người hoặc vật | something which is · Code, which is |
Phát âm cần chú ý
Người nói dùng 11 dạng rút gọn, ví dụ don't, doesn't, haven't. Hãy nói theo dạng ngắn đúng như bạn nghe.
- Âm “sh” và “zh”: revision /ɹəˈvɪʒ.ən/, illustration /ˌɪləsˈtɹeɪ̯ʃən/, exceptional /ɪkˈsɛpʃənəl/, variation /ˌvɛəɹiˈeɪʃn̩/
- Từ dài — đặt trọng âm cho đúng: repeatable /ɹɪˈpiːtəbəl/, unlimited /ʌnˈlɪm.ɪ.tɪd/, manually /ˈmænj(u)əliː/, ideally /aɪˈdi.ə.li/, transparency /tɹænsˈpæɹənsi/
Những âm người Việt thường gặp khó:
- Cụm phụ âm cuối — đọc đủ từng âm, đừng nuốt âm cuối: font /fɑnt/, implement /ˈɪmpləmənt/, columns /ˈkɑləmz/, gradient /ˈɡɹeɪdiənt/, crisp /kɹɪsp/
- Âm /tʃ/, /dʒ/ và /ʒ/ — tiếng Việt không có, đừng đọc thành “ch” hay “gi”: revision /ɹəˈvɪʒ.ən/, adjust /əˈd͡ʒʌst/, scratch /skɹæt͡ʃ/
- Âm /æ/ — mở miệng rộng hơn âm “e”: variable [ˈvæɹ.i.ə.bl̩], satisfy /ˈsætɪsfaɪ/, paragraph /ˈpæɹəɡɹæf/, manually /ˈmænj(u)əliː/, transparency /tɹænsˈpæɹənsi/
Cách luyện với video này
- Nghe hết video một lần, chưa cần nói, và ghi lại những từ bạn chưa biết.
- Nói đuổi từng câu ở tốc độ bình thường, lặp lại mỗi câu đến khi nhịp của bạn khớp với người nói.
- Ghi âm giọng mình rồi so với bản gốc, chú ý các từ như font, implement, satisfy.
Phương Pháp Shadowing Là Gì?
Shadowing là kỹ thuật học ngôn ngữ có cơ sở khoa học, ban đầu được phát triển cho chương trình đào tạo phiên dịch viên chuyên nghiệp và được phổ biến rộng rãi bởi nhà đa ngôn ngữ học Dr. Alexander Arguelles. Nguyên lý cốt lõi đơn giản nhưng cực kỳ hiệu quả: bạn nghe tiếng Anh của người bản xứ và lặp lại to ngay lập tức — như một "cái bóng" (shadow) đuổi theo người nói với độ trễ chỉ 1–2 giây. Khác với luyện ngữ pháp hay học từ vựng bị động, Shadowing buộc não bộ và cơ miệng phải đồng thời xử lý và tái tạo ngôn ngữ thực tế. Các nghiên cứu khoa học xác nhận phương pháp này cải thiện đáng kể phát âm, ngữ điệu, nhịp điệu, nối âm, kỹ năng nghe và độ lưu loát khi nói — đặc biệt hiệu quả cho người luyện IELTS Speaking và muốn giao tiếp tiếng Anh tự nhiên như người bản ngữ.