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

You May Also Like