CSS Full Course with a project | Zero to Hero | English Tutorial

🔴 In this special video, I will discuss everything you need to know about CSS to become a full-stack developer. It is a full CSS course. 🛑 Wish to become a Full-stack web developer? Check out this playlist: https://youtube.com/playlist?list=PLgH5QX0i9K3q6qCMHo8x5OzW9g2qDFfct ⭐️ Video Contents ⭐️ ⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼ 🏅Part-1: CSS Fundamental ⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼ ⌨️ (00:00:00) Special Message 👉 Introduction to CSS ⌨️ (00:02:34) Course Plan ⌨️ (00:03:40) What is CSS? Why CSS? ⌨️ (00:04:18) Extension1: live server extension ⌨️ (00:06:00) CSS Rules Syntax ⌨️ (00:07:51) Inline CSS ⌨️ (00:12:00) Internal CSS ⌨️ (00:15:43) External CSS 👉 Selectors and Combinators ⌨️ (00:21:40) Selector ⌨️ (00:23:10) Element selectors ⌨️ (00:25:02) Extension2: Color Highlight ⌨️ (00:26:15) Grouping selectors ⌨️ (00:27:50) Nested selectors ⌨️ (00:32:28) Universal selectors ⌨️ (00:35:30) ID selectors ⌨️ (00:40:00) class selectors ⌨️ (00:45:07) Extension3: HTML to CSS autocompletion ⌨️ (00:47:47) Attribute selectors ⌨️ (00:53:18) Pseudo class & Pseudo element selectors ⌨️ (01:07:30) Descendant selectors ⌨️ (01:09:35) Child selectors ⌨️ (01:12:40) Adjacent & General siblings selectors 👉 Typography ⌨️ (01:14:20) font ⌨️ (01:21:38) Google font ⌨️ (01:26:44) color ⌨️ (01:33:20) text ⌨️ (01:41:46) font awesome icon 👉 Box Model ⌨️ (01:46:55) box model ⌨️ (01:50:55) padding ⌨️ (01:54:53) border ⌨️ (01:57:45) margin ⌨️ (02:00:14) box-sizing ⌨️ (02:08:12) inline vs inline-block vs block element ⌨️ (02:17:19) width vs max-width ⌨️ (02:21:55) opacity ⌨️ (02:24:00) overflow ⌨️ (02:29:09) background ⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼ 🏅 Part-2: Advanced CSS ⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼ ⌨️ (02:37:28) variables ⌨️ (02:44:38) filter ⌨️ (02:46:10) Shadows & design a card 👉 Layout Design ⌨️ (02:58:12) float ⌨️ (03:13:20) position - static ⌨️ (03:18:48) position - relative ⌨️ (03:20:03) position - fixed ⌨️ (03:21:35) position - absolute ⌨️ (03:25:40) design a fixed navbar ⌨️ (03:28:35) z-index ⌨️ (03:32:30) flex layout ⌨️ (03:55:06) Task1: centre element ⌨️ (03:58:30) Reusing CSS class ⌨️ (04:00:33) single flex item ⌨️ (04:04:38) Task2: centre the navbar menu ⌨️ (04:06:42) Task3: centre the menu items ⌨️ (04:10:13) Task4: centre items in a row ⌨️ (04:16:27) Extension4: CSS Flexbox cheatsheet ⌨️ (04:18:06) grid layout 👉 Responsive web design ⌨️ (04:44:20) Responsive web design ⌨️ (05:19:40) design circle using border-radius 👉 Animation, Transition, Transform ⌨️ (05:22:42) What is Transition? ⌨️ (05:26:20) transition ⌨️ (05:32:20) Task6: add transition when hovering ⌨️ (05:34:28) transform ⌨️ (05:39:24) Task7: scale when hovering ⌨️ (05:47:09) Animation ⌨️ (05:52:39) Task8: circle the dive 👉 CSS Architecture BEM - Block, Element, Modifier ⌨️ (06:06:08) why do we need BEM Architecture? ⌨️ (06:07:42) Specificity calculation ⌨️ (06:22:35) BEM Architecture ⌨️ (06:38:08) Block ⌨️ (06:40:40) Element ⌨️ (06:44:23) Task9: Element naming ⌨️ (06:47:20) Modifier ⌨️ (06:52:39) Task10: BEM exercise ⌨️ (06:56:08) Extension5: BEM Helper ⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼ 🏅 Part-3: Project ⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼ ⌨️ (06:59:05) Blog Project ⌨️ (09:54:55) Outro 🔴 Subscribe for more videos: https://www.youtube.com/channel/UCEXwc6mNh7Lakj6lX-7a2Mg ✅ website: https://www.studywithanis.com ✅ Facebook: https://www.facebook.com/anisul2010s ✅ Facebook page: https://www.facebook.com/studywithanis/ ✅ LinkedIn: https://www.linkedin.com/in/anisul2020/ ✅ GitHub: https://github.com/anisul-Islam 🛑 Web development? Checkout following playlists : 👉 Bangla complete full-stack web development playlist: https://youtube.com/playlist?list=PLgH5QX0i9K3p06YY1fyReA2UK8mh_zsiY 🛑 Programming languages? Check out the following playlists: 👉 C programming: https://youtube.com/playlist?list=PLgH5QX0i9K3pCMBZcul1fta6UivHDbXvz 👉 C++ : https://youtube.com/playlist?list=PLgH5QX0i9K3q0ZKeXtF--CZ0PdH1sSbYL 👉 Python: https://youtube.com/playlist?list=PLgH5QX0i9K3rz5XqMsTk41_j15_6682BN 👉 Java: https://youtube.com/playlist?list=PLgH5QX0i9K3oAZUB2QXR-dZac0c9HNyRa 🛑 Android development? Check out the following playlists: 👉 Android development series: https://youtube.com/playlist?list=PLgH5QX0i9K3p9xzYLFGdfYliIRBLVDRV5 🛑 CSE Students? Checkout following playlists : 👉 Discrete Math Series: https://youtube.com/playlist?list=PLgH5QX0i9K3rYy9DVhk28m8enSo8xxiZ3 👉 Theory of Computation (TOC): https://www.youtube.com/playlist?list=PLgH5QX0i9K3qw5pu16QgnKNj91Rnjoyd0 👉 Compiler: https://www.youtube.com/playlist?list=PLgH5QX0i9K3oWTwTgILA7v9oysoDgkJDg 👉 AI (English): https://www.youtube.com/playlist?list=PLgH5QX0i9K3rRVV7oeML93OVAxqQ-CvzV 🛑 Replying to your comments: https://www.youtube.com/playlist?list=PLgH5QX0i9K3rOy_3R7lYlN92BggSpbWTY #anisul_islam #web_development #bangla_web_development #css3 #css_anisul_islam #css_bangla_tutorial #css #bem #animation