All language subtitles for 005 Heading Component_en

af Afrikaans
ak Akan
sq Albanian
am Amharic
ar Arabic
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bem Bemba
bn Bengali
bh Bihari
bs Bosnian
br Breton
bg Bulgarian
km Cambodian
ca Catalan
chr Cherokee
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
ee Ewe
fo Faroese
tl Filipino
fi Finnish
fr French
fy Frisian
gaa Ga
gl Galician
ka Georgian
de German
el Greek
gn Guarani
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ia Interlingua
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
rw Kinyarwanda
rn Kirundi
kg Kongo
ko Korean
kri Krio (Sierra Leone)
ku Kurdish
ckb Kurdish (Soranî)
ky Kyrgyz
lo Laothian
la Latin
lv Latvian
ln Lingala
lt Lithuanian
loz Lozi
lg Luganda
ach Luo
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mfe Mauritian Creole
mo Moldavian
mn Mongolian
sr-ME Montenegrin
ne Nepali
pcm Nigerian Pidgin
nso Northern Sotho
no Norwegian
nn Norwegian (Nynorsk)
oc Occitan
or Oriya
om Oromo
ps Pashto
fa Persian
pl Polish
pt-BR Portuguese (Brazil)
pt-PT Portuguese (Portugal)
pa Punjabi
qu Quechua
ro Romanian Download
rm Romansh
nyn Runyakitara
ru Russian
gd Scots Gaelic
sr Serbian
sh Serbo-Croatian
st Sesotho
tn Setswana
crs Seychellois Creole
sn Shona
sd Sindhi
si Sinhalese
sk Slovak
sl Slovenian
so Somali
es Spanish
es-419 Spanish (Latin American)
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
tt Tatar
te Telugu
th Thai
ti Tigrinya
to Tonga
lua Tshiluba
tum Tumbuka
tr Turkish
tk Turkmen
tw Twi
ug Uighur
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
wo Wolof
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 00:00:03,000 --> 00:00:07,050 We've seen how to use colors with Tailwind CSS. 2 00:00:07,050 --> 00:00:09,538 Now, all the styles we added so 3 00:00:09,538 --> 00:00:11,624 far are in the RootLayout, 4 00:00:11,705 --> 00:00:14,353 so they will apply to all the pages, 5 00:00:14,353 --> 00:00:15,888 not just Home. 6 00:00:15,888 --> 00:00:18,014 But we'll also want to style 7 00:00:18,014 --> 00:00:19,685 the main page content. 8 00:00:19,761 --> 00:00:21,683 For example, we should make 9 00:00:21,683 --> 00:00:23,391 the heading text bigger. 10 00:00:23,462 --> 00:00:26,275 So let's add some CSS classes here. 11 00:00:26,275 --> 00:00:30,449 We can use "font-bold" to make the text bold. 12 00:00:30,449 --> 00:00:32,868 Then we can make it bigger with 13 00:00:32,868 --> 00:00:34,663 "text-2xl" for example, 14 00:00:34,741 --> 00:00:37,306 which will increase the font size. 15 00:00:37,306 --> 00:00:39,941 "xl" stands for extra-large, 16 00:00:39,941 --> 00:00:42,722 and "2xl" is even larger. 17 00:00:42,722 --> 00:00:45,940 Let's also add some padding to the bottom, 18 00:00:45,940 --> 00:00:46,706 with "pb". 19 00:00:46,783 --> 00:00:48,962 This way there some space between 20 00:00:48,962 --> 00:00:50,944 the heading and the paragraph. 21 00:00:51,010 --> 00:00:53,098 And that's enough for this page. 22 00:00:53,098 --> 00:00:56,204 But if we go to another page, like Reviews, 23 00:00:56,204 --> 00:00:59,442 this heading doesn't have any styles of course, 24 00:00:59,442 --> 00:01:02,401 because we only changed it the HomePage. 25 00:01:02,401 --> 00:01:04,909 Now, we could copy and paste these 26 00:01:04,909 --> 00:01:07,344 CSS classes into the other pages, 27 00:01:07,418 --> 00:01:11,299 but that would result in a lot of duplicated code, 28 00:01:11,299 --> 00:01:14,366 because we have quite a few different pages. 29 00:01:14,366 --> 00:01:17,194 So it's better to extract this code 30 00:01:17,194 --> 00:01:19,779 into a separate React component. 31 00:01:19,860 --> 00:01:22,761 Let's create a new file under "components", 32 00:01:22,761 --> 00:01:25,351 called "Heading.jsx". 33 00:01:25,351 --> 00:01:27,822 And we'll put the common code here. 34 00:01:27,822 --> 00:01:29,975 As usual, this will be a normal 35 00:01:29,975 --> 00:01:31,711 React function component, 36 00:01:31,781 --> 00:01:35,535 returning the code I copied from the HomePage. 37 00:01:35,535 --> 00:01:37,704 Now, we don't want to show the 38 00:01:37,704 --> 00:01:39,367 same text on all pages; 39 00:01:39,439 --> 00:01:41,891 we'll want to pass what goes inside 40 00:01:41,891 --> 00:01:43,433 the element as a prop. 41 00:01:43,503 --> 00:01:45,654 We can use "children" for that, 42 00:01:45,843 --> 00:01:50,214 and then simply display its value inside the "h1". 43 00:01:50,214 --> 00:01:53,485 Ok, so this is a very simple component, 44 00:01:53,485 --> 00:01:55,719 but it will allow us to reuse 45 00:01:55,719 --> 00:01:57,644 the same Tailwind styles. 46 00:01:57,721 --> 00:02:00,769 All we need to do is use "Heading" 47 00:02:00,769 --> 00:02:02,203 instead of "h1". 48 00:02:02,293 --> 00:02:04,181 So, here we can replace this 49 00:02:04,181 --> 00:02:06,070 code with the new component, 50 00:02:06,137 --> 00:02:08,704 that we need to import, of course. 51 00:02:08,704 --> 00:02:10,648 And if we save, the Home page 52 00:02:10,648 --> 00:02:12,457 should still look the same. 53 00:02:12,524 --> 00:02:15,486 Sometimes you just need to reload the page, 54 00:02:15,486 --> 00:02:18,891 because the browser is caching old content. 55 00:02:18,891 --> 00:02:22,000 But the heading now has the right styles. 56 00:02:22,000 --> 00:02:24,142 What we need to do at this point 57 00:02:24,142 --> 00:02:25,883 is update the other pages, 58 00:02:25,950 --> 00:02:28,894 to use this same Heading component. 59 00:02:28,894 --> 00:02:32,101 Now, since we need to update all the pages, 60 00:02:32,101 --> 00:02:35,190 what we can do is find all the right files, 61 00:02:35,190 --> 00:02:37,501 by searching for "", 62 00:02:37,630 --> 00:02:40,055 that's the element we want to replace. 63 00:02:40,055 --> 00:02:42,481 So, starting from the AboutPage, 64 00:02:42,481 --> 00:02:44,831 we can replace it with Heading, 65 00:02:44,907 --> 00:02:47,965 making sure to import the new component. 66 00:02:47,965 --> 00:02:50,516 And if we go and check the About page, 67 00:02:50,516 --> 00:02:53,226 we can see that it's using the bigger font. 68 00:02:53,226 --> 00:02:55,619 Now it's just a matter of repeating 69 00:02:55,619 --> 00:02:56,781 the same process, 70 00:02:56,849 --> 00:03:00,194 which is a bit boring, but shouldn't take long. 71 00:03:00,194 --> 00:03:02,924 This is the Reviews page sorted. 72 00:03:02,924 --> 00:03:06,275 We only have the two review pages left. 73 00:03:06,275 --> 00:03:08,616 Let's do the Hollow Knight one, 74 00:03:09,375 --> 00:03:11,229 and test that it works. 75 00:03:11,229 --> 00:03:14,194 Finally, there's the Stardew Valley page. 76 00:03:14,229 --> 00:03:17,001 Let's use the Heading component here, 77 00:03:17,309 --> 00:03:19,884 and go and check if it's displaying correctly. 78 00:03:20,089 --> 00:03:23,259 Ok, we replaced all the "h1" tags with 79 00:03:23,259 --> 00:03:25,679 our custom Heading component, 80 00:03:25,763 --> 00:03:29,248 that applies the right Tailwind CSS classes. 81 00:03:29,248 --> 00:03:31,923 This way, if in the future we decide 82 00:03:31,923 --> 00:03:33,929 to change the heading style 83 00:03:34,003 --> 00:03:36,601 we'll just need to modify this file, 84 00:03:36,601 --> 00:03:39,824 and the changes will apply to all the pages. 6079

Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.