Adding Global Styles in Next.js _ NextJs Tutorial for Beginners #11
18 views
Feb 13, 2024
In the eleventh tutorial video titled "Adding Global Styles in Next.js," beginners are guided through the process of incorporating global styles into Next.js applications. This tutorial demonstrates how to define and apply global CSS styles across all pages and components within a Next.js project. Viewers will learn various methods for adding global styles, including importing external CSS files, using global CSS modules, or leveraging the built-in Styled JSX feature. The tutorial also covers best practices for organizing global styles and managing global CSS variables. By mastering the techniques presented in this tutorial, beginners can ensure consistency and coherence in the visual presentation of their Next.js applications.
View Video Transcript
0:00
рдпрд╛рдж рд╣реИ рд╡реЛ рд╣рдорд╛рд░реА рдкрд╣рд▓реА next application
0:01
рдЬреЛ рдХрд┐ рд╣рдордиреЗ create next app рдХреА рд╕рд╛рдЗрддрд╛ рд╕реЗ рдмрдирд╛рдИ рдереА рдЙрд╕рдХреЗ рдЕрдВрджрд░ рдЖрдкрдиреЗ CSS modules рджреЗрдЦреЗ рд╣реЛрдВрдЧя┐╜я┐╜
0:07
рдЕрдЧрд░ рдЖрдкрдиреЗ рдирд╣реАрдВ рджреЗрдЦреЗ рддреЛ рдЖрдк рдпрд╛ рддреЛ рдкреБрд░рд╛рдиреЗ рд╡реАрдбрд┐рдпреЛ рдореЗрдВ рдЬрд╛рдХреЗ рджреЗрдЦ рд▓реЗрдирд╛ рд╣реИ рдпрд╛ рдЦреБрдж рд╕реЗ рдПрдХ рдирд╣реАрдВ next app рдмрдирд╛ рдХрд░ рджреЗрдЦрдия┐╜я┐╜
0:12
рдХреБрдЫ CSS modules рд╣реЛрддреЗ рд╣реИрдВ рдФрд░ рдЙрди modules рдХреЗ рдЕрдВрджрд░ рдХреА classes рдХреЛ рдЗрд╕реНрддреЗрдорд╛рд▓ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣я┐╜я┐╜
0:17
рд╡реЛ рдЬреЛ рд╣рдорд╛рд░рд╛ next.js рдХрд╛ homepage рд╣реЛрддрд╛ рд╣реИ рдЙрд╕рдХреЗ рдЕрдВрджрд░ рдХреНрдпрд╛ рд╣рдо рд╡реЛ рдХрд╛рдо рдЕрдкрдиреЗ custom components рдореЗрдВ рдХрд░ рд╕рдХрддреЗ рд╣реИя┐╜я┐╜
0:22
absolutely yes рд╣рдо рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ рд╣рдо CSS рд▓рд┐рдЦ рд╕рдХрддреЗ рд╣реИрдВ рдФрд░ рдЙрдирдХреЛ рдЗрд╕реНрддреЗрдорд╛рд▓ рдХрд░ рд╕рдХрддреЗ рд╣реИя┐╜я┐╜
0:27
рдЕрдкрдиреА next.js application рдХреЗ рдЕрдВрджрд░ рдХрд┐рд╕ рддрд░рд╣ рд╕реЗ structure рдХрд░рдирд╛ рд╣реИ CSS рдХя┐╜я┐╜
0:31
рдХрд╣рд╛рдБ рдкрд░ рдХрд┐рд╕ рддрд░рд╣ рд╕реЗ рдХреМрди рд╕реА class рдХреЛ рдЗрд╕реНрддреЗрдорд╛рд▓ рдХрд░рдирд╛ рд╣реИ рдЗрд╕ рд╡реАрдбрд┐рдпреЛ рдХреЗ рдЕрдВрджрд░ рдЖрдк рд▓реЛрдЧреЛрдВ рдХреЛ рдмрддрд╛рдУрдВрдЧрд╛ рдХреНрдпрд╛ рдЖрдкрдХреА strategy рд╣реЛрдиреА рдЪрд╛рд╣рд┐рдП CSS рдХреЛ рд▓реЗрдХрд░ рдЕрдкрдиреА next.js website рдХреЗ рдЕрдВрджя┐╜я┐╜
0:40
рдФрд░ рд╣рд╛рдБ рдореИрдВ рдЕрдкрдиреЗ рдЙрд╕реА рдмреНрд▓реЙрдЧ рдХрд╛ рдПрдХреНрдЬрд╛рдордкрд▓ рд▓реЗрдХрд░ рдЖрдкрдХреЛ рдмрддрд╛рдУрдВрдЧрд╛ hunting coder рдХреЛ рд╣рдо рд▓реЛрдЧ continue рдХрд░реЗрдВрдЧя┐╜я┐╜
0:45
рдХреНрдпреЛрдВрдХрд┐ рдпрд╛рд░ рдЙрд╕рдХреЛ рд╣рдореЗрдВ awesome рдмрдирд╛рдирд╛ рд╣реИ рдЙрд╕рдХреЛ рд▓реЗ рдХрд░ рдЬрд╛рдирд╛ рд╣реИ conclusion рддрдХ рдПрдХ рдмрд╣реБрдд рдмрдврд╝рд┐рдпрд╛ blog рдмрдирд╛рдирд╛ рд╣реИ рдПрдХ profitable blog рдмрдирд╛рдирд╛ рд╣реИ рдЪрд▓рддреЗ рд╣реИрдВ computer screen рдореЗрдВ рдФрд░ рд╣рдо рд▓реЛрдЧ рд╡рд╣рд╛рдБ рдкрд░ рдЗрди рд╕рдм concepts рдХреЛ рджреЗрдЦреЗрдВрдЧя┐╜я┐╜
0:57
рдкрд┐рдЫрд▓реЗ рд╡реАрдбрд┐рдпреЛ рдореЗрдВ рд╣рдо рд▓реЛрдЧреЛрдВ рдирд╣реАрдВ рджреЗрдЦрд╛ рдерд╛ рдХрд┐рд╕ рддрд░рд╣ рд╕реЗ рд╣рдо рд▓реЛрдЧ modules рдХреЛ use рдХрд░ рд╕рдХрддреЗ рд╣реИя┐╜я┐╜
1:10
рд╣рдордиреЗ рдпрд╣ рджреЗрдЦрд╛ рдерд╛ рдХрд┐ home.module.css рдЕрдЧрд░ рд╣рдордиреЗ file name рдХреЛ .module.css рдореЗрдВ end рдХрд┐рдпя┐╜я┐╜
1:16
рддрдм рд╣рдо рд▓реЛрдЧ рдЗрд╕рдХреЛ рдХреИрд╕реЗ as a module use рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ рдЖрдЬ рдореИрдВ рдХреНрдпрд╛ рдХрд░рдиреЗ рд╡рд╛рд▓рд╛ рд╣реВрдБ, рдЖрдЬ рдореИрдВ рдЖрдкрдХреЛ рдХреЛ рдпрд╣ рджрд┐рдЦрд╛рдиреЗ рд╡рд╛рд▓рд╛ рд╣реВрдБ, рдХрд┐ рдХрд┐рд╕ рддрд░рд╣ рд╕реЗ, рдЬреИрд╕реЗ рд╣рдо рд▓реЛрдЧ style sheet add рдХрд░рддреЗ рд╣реИрдВ, рд╡реЛ рдХреИрд╕реЗ рдХрд░реЗрдВрдЧреЗ, рдпрд╣ рдЪреАрдЬ рдореИрдВ рдЖрдкрдХреЛ рдЖрдЬ рдмрддрд╛рдиреЗ рд╡рд╛рд▓рд╛ рд╣реВрдБ, рдЬреИрд╕реЗ рдорд╛рди рд▓реЛ рдЖрдкрдХреЗ рд╡рд╛рд╕ рдПрдХ CSS style sheet рд╣реИ, рдЖрдкрдиреЗ рд▓рд┐рдЦреА рд╣реИ, рдорд╛рди рд▓реЛ рдореИрдВ рдПрдХ style.css рдмрдирд╛рддрд╛ рд╣реВрдБ
1:49
рдареАрдХ рд╣реИ by the way by the way рдореИрдВ рдпрд╛рди рд░рди рдХрд░ рд▓реВрдВрдЧрд╛ рдореИрдВ рдпрд╛рди рд░рди рдХреНрдпреЛрдВ рд▓рд┐рдЦрддрд╛ рд╣реВрдБ рдпрд╛рд░ рдмрд╛рд░-рдмрд╛рд░ рдорддрд▓рдм рдирд╣реАрдВ рдореЗрд░я┐╜я┐╜
1:58
style sheet add add index server
2:15
рдХрд┐ рдпрд╛рд░ рдХрд┐рд╕ рддрд░рд╣ рд╕реЗ рдореИрдВ modules рдХреЛ add рдХрд░ рд╕рдХрддрд╛ рд╣реВрдБ рдареАрдХ рд╣реИ рдпреЗ рддреЛ рд╣рдорд╛рд░рд╛ рдПрдХ рддрд░реАрдХрд╛ рдея┐╜я┐╜
2:19
CSS рдпреВрдЬрд╝ рдХрд░рдиреЗ рдХрд╛ рдХрд┐ рд╣рдордиреЗ module рдХреЛ import рдХрд┐рдпрд╛ рдареАрдХ рд╣реИ styles рдореЗрдВ рдПрдХ object рдЖ рдЬрд╛рдПрдЧрд╛ рдЙрд╕ object рдХя┐╜я┐╜
2:25
рдХреБрдЫ рдЗрд╕ рддрд░рд╣ рд╕реЗ use рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИ рдмрдврд╝рд┐рдпрд╛ рдЖрдкрдиреЗ рдХрд╛ рдмрдврд╝рд┐рдпрд╛ рд╣рд╛рдБ рдмрдврд╝рд┐рдпрд╛ рдЕя┐╜я┐╜
2:28
рдЕрдм рдпрд╣рд╛рдБ рдкрд░ рдореИрдВ рдЪрд╛рд╣рддрд╛ рд╣реВрдБ рдХрд┐ рдореИрдВ just рдПрдХ CSS file import рдХрд░рдия┐╜я┐╜
2:33
рдЪрд╛рд╣рддрд╛ рд╣реВрдБ style.css рдареАрдХ рд╣реИ рд╡реЛ рдореИрдВ рдХреИрд╕реЗ рдХрд░реВрдБрдЧрд╛ рдореИрдВ рдХреЛ рдЬрд┐рд╕ рддрд░рд╣ рд╕реЗ import рдХрд░рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВя┐╜я┐╜
2:38
рдореИрдВ рдХрд╣реВрдБрдЧрд╛ styles рдореЗрдВ рд╕реЗ рдмрд╕ рдореБрдЭреЗ style.css styles.css import рдХрд░рдирд╛ рд╣я┐╜я┐╜
2:43
style.css рд╣реИ рдХреНрдпрд╛ рдореБрдЭреЗ рдмрд╕ рдпрд╣ import рдХрд░рдирд╛ рд╣реИ that's about it
2:48
рдореБрдЭреЗ рдЬрд╝рд╛рджрд╛ рдХреБрдЫ рдФрд░ рд▓рдВрдмреА рдЪреМрдбрд╝реА рдЪреАрдЬрд╝ рдирд╣реАрдВ рдХрд░рдиреА рд╣реИ рдореБрдЭреЗ рдмрд╕ рдпрд╣ import рдХрд░рдирд╛ рд╣я┐╜я┐╜
2:51
рддреЛ рдореИрдВрдиреЗ рдпрд╣рд╛рдБ рдкрд░ рдХреБрдЫ рддреЛ рдХрд░ рджреЛ рдХрд░ рджреЛ рдпрд╣ рд╕реНрдЯрд╛рдЗрд▓реНрд╕ рдФрд░ рд╕реНрдЯрд╛рдЗрд▓реНрд╕ рдХреЗ рдмрд╛рдж рд╕реНрдЯрд╛рдЗрд▓ рдФрд░ рд╕реАрдПрд╕рд╕ рдареАрдХ рд╣реИ рд╕реНрдЯрд╛рдЗрд▓ рдФрд░ рд╕реАрдПрд╕рд╕ рдпрд╣рд╛я┐╜я┐╜
2:58
рдПрдХ error рджреЗрдЦрдиреЗ рдХреЛ рдорд┐рд▓ рд░рд╣рд╛ рд╣реИ global CSS cannot be imported from files other than your custom app
3:04
рддреЛ рдПрдХ error рдореБрдЭреЗ рджреЗрдЦрдиреЗ рдХреЛ рдорд┐рд▓ рдЧрдпрд╛ рдФрд░ рдпрд╣ error рдореБрдЭрд╕реЗ рдХреНрдпрд╛ рдХрд╣ рд░рд╣рд╛ рд╣реИ рдпрд╣ рдХрд╣ рд░рд╣рд╛ рд╣реИ рдпрд╛рд░ рджреЗрдЦреЛ next.js рд╡рд╛рд▓реЗ рдореБрдЭрд╕реЗ рдХреНрдпрд╛ рдХрд╣ рд░рд╣реЗ рд╣реИ рджреЗрдЦя┐╜я┐╜
3:10
рдХрд╣ рд░рд╣рд╛ рд╣реИ рдпрд╛рд░ рджреЗрдЦреЛ рднрд╛рдИ рдРрд╕рд╛ рд╣реИ рдирд╛ рдХрд┐ рдЖрдк рдирд╛ CSS modules use рдХрд░ рд▓я┐╜я┐╜
3:14
рдЕрдЧрд░ global styles рдпреВрдЬрд╝ рдХрд░рдирд╛ рдЪрд╛рддреЗ рд╣реЛ рдЖрдк, рдЕрдЧрд░ рдЖрдк рдХреБрдЫ рдРрд╕рд╛ рдЪрд╛рддреЗ рд╣реЛ рдХрд┐ рдЖрдк global styles рдпреВрдЬрд╝ рдХрд░реЛ
3:18
рддрдм рдЖрдк рдХреБрдЫ рдЗрд╕ рддрд░рд╣ рд╕реЗ рдпреВрдЬрд╝ рдХрд░ рд╕рдХрддреЗ рд╣реЛ, рдпрд╣рд╛рдБ рдкрд░, app underscore app.js рдХреЗ рдЕрдВрджрд░
3:24
рдпрд╣рд╛рдБ рдЬреЛ рднреА import рдХрд░реЛрдЧреЗ, рд╡реЛ global style sheet рдЖрдкрдХреА рдмрди рдЬрд╛рдПрдЧреА, рдареАрдХ рд╣реИ, рд╡реЛ рдЖрдкрдХреА global style sheet рдмрди рдЬрд╛рдПрдЧреА рдФрд░ рд╡реЛ рд╣рд░ page рдХреЗ рд╕рд╛рде рдлрд┐рд░ рдЖрдкрдХреЗ import рд╣реБрдЖ рдХрд░реЗрдЧя┐╜я┐╜
3:32
рд▓реЗрдХрд┐рди рдореИрдВ рдХрд╣ рд░рд╣рд╛ рд╣реВрдБ рдирд╣реАрдВ рдпрд╛рд░ рдореИрдВ рдЪрд╛рд╣рддрд╛ рд╣реВрдБ рдХрд┐ style.css рдмрд╕ рдореЗрдВ index.js page рдкрд░ рдЖ рдЬрд╛я┐╜я┐╜
3:36
рдореИрдВ рдХреНрдпрд╛ рдХрд░реВрдБ рддреЛ рдЕрдЧрд░ рдЖрдк рд▓реЛрдЧ рдЪрд╛рд╣рддреЗ рд╣реЛ рдХрд┐ рдЗрд╕ рддрд░рд╣ рд╕реЗ styles рдХреЛ add рдХрд░ рд▓я┐╜я┐╜
3:40
рддреЛ рдЖрдк рдирд╣реАрдВ рдХрд░ рд╕рдХрддреЗ, node modules рд╕реЗ рд▓реЗрдХрд┐рди рдЖрдк рд▓реЛрдЧ styles рдХреЛ add рдХрд░ рд╕рдХрддреЗ рд╣реЛ
3:45
рдЕрдм рдЖрдк рдореЗрдВ рд╕реЗ рдХреЗ рд▓реЛрдЧ confused рд╣реЛ рдЬрд╛рдУ, рдХреНрдпрд╛ node modules рдореЗрдВ рд╕реЗ рдХреНрдпреЛрдВ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ, рдпрд╣рд╛рдБ рд╕реЗ рдХреНрдпреЛрдВ рдирд╣реАрдВ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ
3:49
рдпрд╣рд╛рдБ рдкрд░ рджреЗрдЦреЛ, importing a CSS file from node modules is permitted
3:53
рдареАрдХ рд╣реИ, рддреЛ рдпрд╣ рдмрд╛рдд рдпрд╛рдж рд░рдЦрдирд╛, рдХрднреА рднреА рдЖрдкрдиреЗ рдХреЛрдИ рдРрд╕рд╛ package install рдХрд┐рдпрд╛ рд╣реЛ рдЬреЛ рдХрд┐ рдЖрдк рд▓реЛрдЧреЛрдВ рдХреЛ CSS рджреЗрддрд╛ рд╣я┐╜я┐╜
3:57
рдЬреИрд╕реЗ рдХрд┐ рдмрд╛рд▓реЛ bootstrap рдЖрдкрдиреЗ install рдХрд┐рдпрд╛ рд╣реЛ рдФрд░ рдЙрд╕рдХреА CSS рдЖрдкрдХреЛ import рдХрд░рдиреА рд╣я┐╜я┐╜
4:01
рд╕рд┐рд░реНрдл рдПрдХ component рдореЗрдВ рдЖрдк рдХрд░ рд╕рдХрддреЗ рд╣реЛ рдЙрд╕рдХреЗ рдЕрд▓рд╛рд╡рд╛ рдЖрдк рд▓реЛрдЧ рдЕрдЧрд░ CSS рд▓рд┐рдЦ рд░рд╣реЗ рд╣я┐╜я┐╜
4:06
рддреЛ рдХрд╣рд╛ рдпреЗ рдЬрд╛рддрд╛ рд╣реИ рдХрд┐ рдЗрд╕ рддрд░рд╣ рд╕реЗ рдордд рд▓рд┐рдЦреЛ рдЖрдк рд╡реЛ рдЬреЛ CSS рд╣я┐╜я┐╜
4:10
CSS modules use I hope import underscore app dot app dot JS save app dot JS
4:23
рджреЗрддрд╛ рд╣реВрдБ рдЕрдм рдЖрдкрдиреЗ рд╕рднреА рд▓реЛрдЧ рдХрд╣реЛрдЧреЗ рдХрд┐ рдпрд╛рд░ рдпрд╣ app dot JS рдХреНрдпрд╛ рд╣реИ рдЗрд╕рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рд╣рдо рд▓реЛрдЧ рдЖрдЧреЗ рдбрд┐рдЯреЗрд▓ рдореЗрдВ рдмрд╛рдд рдХрд░реЗрдВрдЧя┐╜я┐╜
4:28
рд▓реЗрдХрд┐рди рдЕрднреА рдХреЗ рд▓рд┐рдП рдЖрдк рдХреБрдЫ рдРрд╕рд╛ рд╕рдорд╛рдЭ рд▓реЛ рдХрд┐ рдпрд╣рд╛рдБ рд╕реЗ рд╣реА рдЖрдкрдХя┐╜я┐╜
4:32
рдХреЛрдИ рднреА page рдЕрдЧрд░ рдЖрдк рд▓реЛрдб рдХрд░реЛрдЧреЗ next.js app рдХрд╛ рддреЛ рд╡реЛ рдпрд╣рд╛рдБ рд╕реЗ рд╣я┐╜я┐╜
4:36
рд▓реЛрдб рд╣реЛрддрд╛ рд╣реИ рдареАрдХ рд╣реИ рдпрд╛рдирд┐ рдХрд┐ рдЕрдЧрд░ рдореИрдВ рдпрд╣рд╛рдБ рдкрд░ рд▓рд┐рдЦ рджреВ console.log
4:40
рдФрд░ рдореИрдВ рдпрд╣рд╛рдБ рдкрд░ рд▓рд┐рдЦ рджреВрдВрдЧрд╛ рдЖрдИ рдПрдо рдЕрдВрдбрд░ рд╕реНрдХреЛрд░ рдЖрдк рдбреЙрдЯ рдЬрд╕ рдареАрдХ рд╣реИ рдорд╛рди рд▓реЛ рдореИрдВ рдпрд╣ рд▓рд┐рдЦ рджреЗрддрд╛ рд╣реВрдВ рддреЛ рдЕрдЧрд░ рдореИя┐╜я┐╜
4:47
рдПрдбреЛрдЯ рдиреВрдЭреЗ рд╕рд░реНрд╡рд░ рдбрд┐рд╕реНрдЯрд╛рд░реНрдЯ рдХрд░рдирд╛ рдкрдбрд╝реЗрдЧрд╛ рдХрд┐ рдирд╣реАрдВ рдпрд╣ рдХрдВрд╕реЛрд▓ рд▓реЙрдХ рдХрд╛ рдореИрд╕реЗрдЬ рджреЗрдЦрдиреЗ рдХреЗ рд▓рд┐рдП рд▓реЗрдХрд┐рди рдЖрдк рд▓реЛрдЧ рджреЗрдЦ рд╕рдХрддя┐╜я┐╜
4:53
рдЖ рд░рд╣рд╛ рд╣реИ iamapp.js рдФрд░ рдпреЗ css file рднреА import рд╣реЛ рдЧрдпрд╛ рдЬрдм рдореИрдВ about рдореЗрдВ рдЪрд╛рд╣реВрдБрдЧрд╛ рддреЛ рднреА рдореБрдЭреЗ red рджрд┐рдЦ рд░рд╣рд╛ рд╣реИ background рдФрд░ iamapp.js рдлрд┐рд░ рд╕реЗ рджрд┐рдЦ рд░рд╣рд╛ рд╣реИ рдареАрдХ рд╣реИ рдореИрдВ back рдХрд░реВрдБрдЧрд╛ рдФрд░ рдпреЗ рдмрд╣реБрдд рдШрдЯрд┐рдпрд╛ рджрд┐рдЦ рд░рд╣рд╛ рд╣реИ рдореБрдЭреЗ рдорд╛рд▓реВрдо рд╣реИ but I just wanted to show you рдХрд┐ рдпреЗ рдХреИрд╕реЗ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ рд╣рдордиреЗ рджреЗрдЦрд╛ рдерд╛ рдХрд┐ links рдХреА рд╕рд╛рд╣рд┐рддрд╛ рд╕реЗ рд╣рдо рд▓реЛя┐╜я┐╜
5:23
рд░рд┐рд▓реЛрдб рдХрд░реВрдБ рдФрд░ рдореИрдВ clear рдХрд░ рджреВрдБ рдЕрдм рдореИрдВ navigate рдХрд░ рд░рд╣рд╛ рд╣реВрдБ about рдореЗрдВ рддреЛ рдЖрдк рджреЗрдЦреЛ рд╕рд┐рд░реНя┐╜я┐╜
5:27
рдЗрддрдирд╛ data load рдХрд┐рдпрд╛ рдЧрдпрд╛ рд╕рд┐рд░реНрдл рдЗрддрдирд╛ data load рдХрд┐рдпрд╛ рдЧрдпрд╛ рдЗрд╕ data рдХрд╛ size рдХреНрдпрд╛ рдерд╛ рдЕя┐╜я┐╜
5:32
рджреЛрд╕реНрддреЛ 13 bytes рджреЛрд╕реНрддреЛ 13 bytes рдмрд╕ рдФрд░ 3 kilobytes 3.8 kilobytes рдареАрдХ рд╣реИ рддреЛ рдЕрд░рд╛рдЙрдВя┐╜я┐╜
5:38
рдЪрд╛рд░ рдХрд┐рд▓реЛ рдмрд╛рдЗрдЯреНрд╕ рдореЗрдВ рдХрд╣ рд╕рдХрддрд╛ рд╣реВрдБ рдХрд┐ рдЖрдпрд╛ рдбреЗрдЯрд╛ рдореЗрд░рд╛ рдЬреЛ рдХреА рдЖрдЙрд╕рдо рд╣реИ рдпрд╛рд░ рдЬрдбрд╝рд╛ рд╕реЛрдЪреЛ рдЬрдм рдореИрдВ рдЗрд╕рдХреЛ рдкреВрд░я┐╜я┐╜
5:43
рд░рд┐рд▓реЛрдб рдХрд░рддрд╛ рд╣реИ рдЕрдЧрд░ рдЕрдм рд╡реЛрдЯ рдХрдВрдкреЛрдиреЗрдВрдЯ рдХреЛ рдХрд┐рддрдирд╛ рд╕рд╛рд░рд╛ рдбреЗрдЯрд╛ рдЖрддрд╛ рдЖрдк рдЦреБрдж рд╣реА рджреЗрдЦреЛ рдпрд╛рд░ рдлреЛрд░реНрдЯреА рд╕реЗрд╡рди рдХрд┐рд▓я┐╜я┐╜
5:48
рдмрд╛рдЗрдЯреНрд╕ рддреЛ рдЕрдХреЗрд▓рд╛ рдпрд╣ рд╡рд╛рд▓рд╛ рд╣реИ рдареАрдХ рд╣реИ рдФрд░ рдХрд╣рд╛рдВ рдЖрдкрдХрд╛ рдЪрд╛рд░ рдХрд┐рд▓реЛ рдмрд╛рдЗрдЯреНрд╕ рдореЗрдВ рдХрд╛рдо рд╣реЛ рд░рд╣рд╛ рд╣реИ рддреЛ рд╣реИ рдирд╛ рдлрд╛рд╕реНя┐╜я┐╜
5:53
рдЬреИрд╕реЗ рдЗрд╕реАрд▓рд┐рдП рдиреЗрдХреНрд╕ рдЬреИрд╕реЗ рдХреЛ рдЗрд╕реНрддреЗрдорд╛рд▓ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ рдиреЗрдХреНрд╕ рдЬреИрд╕реЗ рдХреЗ рдЕрдВрджрд░ рд▓рд┐рдВрдХ рдХрдВрдкреЛрдиреЗрдВрдЯ рдЗрд╕реАрд▓рд┐рдП рд╣реЛрддя┐╜я┐╜
5:58
confusing css use beginners css use module concept natural
6:50
pages рд╣реИ рдЙрд╕рдХреЗ рдЕрдВрджрд░ load рд╣реЛ рддреЛ рдЖрдк рд▓реЛрдЧ рдХреНрдпрд╛ рдХрд░реЛрдЧреЗ рдХрд┐ рдпрд╣рд╛рдВ рдкрд░ рдбрд╛рд▓реЛрдЧреЗ underscore app.js рдореЗя┐╜я┐╜
6:56
рдЕрдм рдпреЗ file рдХреНрдпрд╛ рд╣реЛрддреА рд╣реИ рдХреНрдпреЛрдВ рд╣реЛрддреА рд╣реИ рдХреИрд╕реЗ рд╣реЛрддреА рд╣реИ рдЙрд╕рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдмрд╛рдд рдЖрдЧреЗ рд╣реЛрдЧреА рдмрдЯ рдЖрдк рд▓реЛрдЧ рдпрд╣рд╛рдВ рдкрд░ рдбрд╛рд▓реЛрдЧреЗ рдореИрдВ рдПрдХ console log рдХрд╛ message рдпрд╣рд╛рдВ рдкрд░ comment out рдХрд░ рджреВрдБрдЧя┐╜я┐╜
7:02
рдЗрд╕рдХреЗ рдмрд╛рдж рд╣рдо рдХреНрдпрд╛ рдХрд░реЗрдВрдЧреЗ рдХрд┐ index.js рдХреЗ рдЕрдВрджрд░ рдХреЛрдИ рднреА module рдЕрдЧрд░ рд╣рдордиреЗ import рдХрд░рд╛ рд╣я┐╜я┐╜
7:09
рддреЛ рд╡реЛ index.js рдХреЗ рдЕрдВрджрд░ рд╣реА use рд╣реЛрдЧрд╛ рдареАрдХ рд╣реИ рддреЛ рд╣рдо рдХреНрдпрд╛ рдХрд░реЗрдВрдЧреЗ рдХрд┐ .module.css рдореЗрдВ end рдХрд░реЗрдВрдЧреЗ рдЕрдкрдиреА css file рдХя┐╜я┐╜
7:15
рдФрд░ рдпрд╣рд╛рдБ рдкрд░ styles рдореЗрдВ рдбрд╛рд▓ рджреЗрдВрдЧреЗ рдФрд░ рдЗрд╕рдХреЛ рдХреБрдЫ рдЗрд╕ рддрд░рд╣ рд╕реЗ use рдХрд░реЗрдВрдЧреЗ рд╕рдмрд╕реЗ рдкрд╣рд▓реЗ import styles рдХрд░рдХреЗ рдРрд╕реЗ рдХрд░ рд▓реЗрдВрдЧя┐╜я┐╜
7:20
рдФрд░ рдпреЗ рдХрд░рдиреЗ рдХреЗ рдмрд╛рдж рд╣рдо рд▓реЛрдЧ class name is equal to рдЗрд╕ рддрд░рд╣ рд╕реЗ use рдХрд░ рд╕рдХрддреЗ рд╣реИя┐╜я┐╜
7:24
рдареАрдХ рд╣реИ, I hope рдХрд┐ рдпреЗ рдЪреАрдЬ рднреА рдЖрдкрдХреЛ рд╕рдордЭ рдореЗрдВ рдЖ рдЧрдИ рд╣реИ, рддреЛ рдХрднреА рднреА component
7:28
level CSS рд▓рд┐рдЦрдирд╛ рд╣реИ рддреЛ CSS module рдХреА рд╕рд╛рдЗрдЯрд░ рд╕реЗ рд▓рд┐рдЦреЗрдВрдЧреЗ, рдФрд░ рдХрднреА рдня┐╜я┐╜
7:32
рд╣рдо рд▓реЛрдЧреЛрдВ рдХреЛ global CSS рд▓рд┐рдЦрдирд╛ рд╣реИ рддреЛ рд╣рдо рдпрд╣рд╛рдБ рд╕реЗ рдХрд░реЗрдВрдЧреЗ рдареАрдХ рд╣реИ рдХрд╣рд╛рдБ рд╕реЗ рдХрд░реЗрдВрдЧреЗ underscore app.js рд╕реЗ рдХрд░реЗрдВрдЧреЗ рдареАрдХ рд╣я┐╜я┐╜
7:37
рдпрд╣рд╛рдБ рдкрд░ add рдХрд░реЗрдВрдЧреЗ global CSS рдХреЛ рдмрдбрд╝ рдЕрдЧрд░ рдЖрдк рд▓реЛрдЧ tailwind CSS рдпреВрдЬрд╝ рдХрд░реЛрдЧя┐╜я┐╜
7:41
рдЬреЛ рдХреА рдореИрдВ mostly рдХрд░рддрд╛ рд╣реВрдБ рддреЛ рдЙрд╕рдХрд╛ configuration рдЕрд▓рдЧ рд╣реЛрддрд╛ рд╣реИ рд╡реЛ рднреА рд╣рдо рдЖрдЧреЗ рджреЗрдЦреЗрдВрдЧреЗ рдЖрдиреЗ рд╡рд╛рд▓реЗ videos рдореЗя┐╜я┐╜
7:45
рд▓реЗрдХрд┐рди pure CSS рдХрд┐рд╕ рддрд░рд╣ рд▓рд┐рдЦрдиреА рд╣реИ I hope рдХрд┐ рдЖрдк рд▓реЛрдЧреЛрдВ рд╕рдордЭ рдореЗрдВ рдЖ рдЧрдпрд╛ рд╣реЛрдЧя┐╜я┐╜
7:49
global рдпрд╣рд╛рдБ рдкрд░ рдбрд╛рд▓ рджреЗрдирд╛ file simply рд╡реЛ рд╕рд╛рд░реЗ pages рдореЗрдВ include рд╣реЛ рдЬрд╛рдПрдЧреА рдФрд░ local рдХреЗ рд▓рд┐рдП рдХреБрдЫ рдЗрд╕ рддрд░рд╣ рд╕реЗ рдЖрдкрдХреЛ рдХрд░рдирд╛ рд╣реЛрдЧя┐╜я┐╜
7:55
modules рдмрдирд╛рдиреЗ рдкрдбрд╝реЗрдВрдЧреЗ рдФрд░ class names рдХреЛ рдЗрд╕ рддрд░рд╣ рд╕реЗ use рдХрд░рдирд╛ рдкрдбрд╝реЗрдЧрд╛ I hope that you guys are enjoying this course
8:00
and you understood what I told you in this video I hope that you guys have also accessed this playlist
8:04
you can click here and bookmark it and click here and save the playlist
8:09
that's all for now in this video thank you so much guys for watching this video
8:13
and I will see you next time рдХрд░рддреЗ рд╣реИя┐╜я┐╜