CSS FlexBox course for beginners in Hindi Language with examples.

What you will learn

Students who struggle with CSS float should take this course as FlexBox replaces the use of floats completely.

Secondly those who find it difficult to arrange layouts on a webpage should take this course.

All those who are curious to learn about FlexBox in Hindi language should take this up.

Why take this course?

ЁЯЪА рдХреМрд╢рд▓ рдкрд╛рдПрдВ: CSS FlexBox рд╕рд╣рд╛рд░реЗ рдмрдЧреАрдЪреЗ рдбрд┐рдЬрд┐рдЯрд▓ рд╡реЗрдм рдкреГрд╖реНрдарднреВрдорд┐рдХрд╛ рддреИрдпрд╛рд░ рдХрд░реЗрдВ ЁЯМР

рдХреЛрд░реНрд╕ рдХрд╛ рдирд╛рдо: рд╣рд┐рдВрджреА рдореЗрдВ рд╕реНрддрд╛рд░реНрдЯрд░реНрд╕ рдХреЗ рд▓рд┐рдП CSS FlexBox – рдкрд╣рд▓реЗ рдкрд╛рда рд╕рд╛рдЭреЗ рд╡рд┐рд╢реНрд▓реЗрд╖рдг рдФрд░ рдЙрджрд╛рд╣рд░рдгреЛрдВ рд╕Ahi

ЁЯУЪ рдХреБрд░рд╕ рдХреА рдЬрд┐рдореНрдореЗрджрд╛рд░реНрде:

  • рдпрджрд┐ рдЖрдк HTML рдФрд░ CSS рдХреЗ рдмреИрд╕ рд╕рд╛рд╣реЗрдд рдЕрд▓рдЧ рд╣реИрдВ, рддреЛ FlexBox рдХреЛ рд╢рд┐рдХреНрд╖рд╛ рд╕реЗ рдирд┐рдХрд▓ рд╕рдХрддреЗ рд╣реИрдВ.
  • FlexBox рдПрдХ рд╡рд┐рднрд┐рдиреНрди рдмрдЧреАрдЪрд╛рдБ рдЬрдбрд╝рдХрд░ рд╡реЗрдмрдкреГрд╖реНрда рдпреЛрдЧрджрд╛рди рд╣реИред
  • рд▓реЗрдЦрди рдПрдХ рд╡реЗрдм рджреЗрд╢рдВрдд рдореЗрдВ рд╕рдореНрдорд╛рдиреНрдп рдкрд░рд┐рд╡рд░реНрддрди рд╣реЛрддреА рд╣реИ, рдФрд░ рдЗрд╕рдХреЗ рд▓рд┐рдП UI/UX рдбрд┐рдЬрд┐рдЯрд▓ рдбрд┐рдЬрд╝рд╛рдЗрди рдореЗрдВ рдмрд╣реБрдд рд╕рдВрдХрд▓реНрдкрдирдХ рд╣реЛрддрд╛ рд╣реИред
  • рдмрд╛рдпрдВ рджреВрд░ рдЯреАрдХрд╛ рдХрд╛ рдкреНрд░рд╡рдг рдЕрдзрд┐рдХ рд╢рд┐рдХреНрд╖рд╛ рдХреЗ рд▓рд┐рдП рдЖрдЬрд╝рд╛рдж рд╣реЛ рдЪреБрдХреЗ рд╣реИрдВ. рдЗрд╕ рд╢рд┐рдХреНрд╖рд╛ рдореЗрдВ рдЖрдк float рдЯреАрдХрд╛рдУрдВ рдХреЗ рдмрдЬрд╛рдп рд╡реИрдХрд▓реНрдкрд┐рдХ CSS3 рд╕рдВрдЧрдд рдХрд╛ рдЕрдзреНрдпрдпрди рдХрд░реЗрдВрдЧреЗ.
  • FlexBox рдбрд┐рдЬрд┐рдЯрд▓ рдбрд┐рдЬрд╝рд╛рдЗрди рдореЗрдВ float рдЯреАрдХрд╛рдУрдВ рдХреЛ рдЖрдзрд╛рд░рд┐рдд рдкреИрд░рд╛рд╡рдг рд╣реИ, рдФрд░ рдпрд╣ рдЖрдкрдХреЗ рд▓рд┐рдП рднрд╛рд░реА рдЙрджрд╛рд╣рд░рдгреЛрдВ рд╕рд╛рд╣реЗрдЧреА рд╕рд╣реА рд╕рдордЭрд╛ рдЬрд╛рдПрдЧрд╛.

рдХреЛрд░реНрд╕ рдХреА рдзрд╛рд░рдгрд╛:

  1. FlexBox рдХрд╛ рдЖрд░реНрдЯрд┐рдлрд╝реИрд╕: FlexBox рдХреЗ рдмреИрд╕ рд╕рд╛рд╣реЗрдд, рд╡реНрдпрдВрдЬрди, рдФрд░ рдЗрд╕рдХреЗ рдкреНрд░рд╛рд░реЛрдк рдЪрдХреНрд░.
  2. FlexBox рдХреЗ рдкреНрд░рдореБрдЦ рдЧрддрд┐рд╡рд┐рдзрд┐: рд╢рд┐рд░реНрдг, рдиреАрддрд┐, рдФрд░ Flex Container рдХреЗ рджрд╛рд╣рд┐рд▓ред
  3. FlexBox рд╕рдВрд░рдЪрдирд╛рдПрдБ рдЬрд╛рдВрдЪреА рдкреНрд░рдХреНрд░рд┐рдпрд╛: Flex Items рдХреА рд╡рд┐рднреЗрдб, рд░рд╛рд╕рд╛рдпрдиika, рдЙрддреНрд╕рд╛рд╣ рдХреЛ рдирд┐рд░реНрдзрд╛рд░рд┐рдд рдХрд░рдирд╛ред
  4. рдЖрджрддрдордп рдЪреБрди ave items: align-items, justify-content, рдФрд░ align-self рдХреЗ рдЙрдкрдпреБрдХреНрдд рдХрд░реЗрдВред
  5. FlexBox рдХрд╛ рдЙрдкрдпреЛрдЧ: рд╡рд┐рднрд┐рдиреНрди рдмрдЧреАрдЪрд╛рдБ рдбрд┐рдЬрд┐рдЯрд▓ рдбрд┐рдЬрд╝рд╛рдЗрди рдореЗрдВ рдлреБрдЪрд▓рд╛рдПрдВред
  6. рд░рд╕рд╛рдпрдирд┐рдХ рдЪрд┐рддреНрд░реЗрдВ: рдЕрдиреБрднреВрд╕рд╣реА рдЙрджрд╛рд╣рд░рдгреЛрдВ рджрд░реНрд╢рд╛рд╡рд▓ рдХрд┐ FlexBox рдХреИрд╕реЗ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИред
  7. Best Practices: FlexBox рдХрд╛ рдЙрдкрдпреБрдХреНрдд рдХрд░рдирд╛ рдПрдХ рд╡рд┐рд╢реНрд╡рд╕реБрд▓ рдЖрдкрддреНрдп рд░рдЦрдиреЗ рдХреА рд░рд╛┘ЗреЗрдВрдЧреЗред

рдХреМрд╢рд▓ рдкреНрд░рджрд╛рди рдХрд┐рдП рдЬрд╛рдиреЗ рд╡рд╛рд▓реЗ:

  • рдирдП FlexBox рд╕реБрд░рдХреНрд╖рд┐рдд: рдЖрдк рдЕрдм рднреА рдпреЛрдЬрдирд╛рдПрдВ рдХреЗ рд╕рд╛рде-рд╕рд╛рде рдкреНрд░рджрд╛рди рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред
  • UI/UX рдбрд┐рдЬрд╝рд╛рдЗрдирд░╪▓: рдЖрдкрдХреЛ рдЕрдм-рдмреЛрд░ рдЙрдкрдпреБрдХреНрдд рд╣реЛрдиреЗ рд╡рд╛рд▓реА UI рдХрдордкреНрдпреВрдЯрд░ рд╕реНрдерд╛рдкрдирд╛рдПрдВ рд╕рд╛рдЭреА рдХрд░рдиреЗ рдореЗрдВ рдорджрдж рдХрд░ рд╕рдХрддрд╛ рд╣реИред
  • Web рдбрд┐рдЬрд╝рд╛рдЗрдирд░рдЬ: FlexBox рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдЕрдкрдиреЗ рд╡реЗрдм рдкреГрд╖реНрда рдХреА рдореБрджреНрд░рдд рдФрд░ responsive design рдЖрдХрд░реНрд╖рд┐рдд рдХрд░реЗрдВред

ЁЯЫая╕П “рд▓рд╛рдн рд╕реБрд╢реЛрдзрдирд╛”: рдпрд╣ рдХреЛрд░реНрд╕ рдЖрдкрдХреЛ FlexBox рдХреЗ рдмрдЧреАрдЪреЗ рдбрд┐рдЬрд┐рдЯрд▓ рд╡реЗрдм рдкреГрд╖реНрдарднреВрдорд┐рдХрд╛ рдХреЛ рдЙрджрд╛рд╣рд░рдг рднрд░рдХреЗ рд╕рд┐рдЦрд╛ рдЬрдпреЗрдЧрд╛ рдФрд░ CSS рдХреБрд░рд╕реЛрдВ рдореЗрдВ FlexBox рдХрд╛ рдзрд╛рд░рдг рд░рдЦрдиреЗ рдХреЗ рд▓рд┐рдП рдЖрд╢реНрдЪрд░реНрдп рдЕрджреНрднреБрдд рдмрдирд╛рдПрдЧрд╛ред


Get Instant Notification of New Courses on our Telegram channel.


ЁЯСйтАНЁЯПл рдЗрд╕ рдХреЛрд░реНрд╕ рдореЗрдВ Abhilash Pillai рдЖрдкрдХреЛ рдЧреБрд╡рд╛рд╣ рджреА рдЬрд╛рдПрдЧреА – рдЬреЛ рдпрд╣ рдирдИ-рдирдП FlexBox рддреИрдпрд╛рд░ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдмреМрдЪрд╛ рдХрд░реЗрдЧрд╛ рдФрд░ рдЖрдкрдХреЛ рдкреНрд░рддрд┐рд▓рд┐рдкреА рд╕рдордЭрд╛рдПрдВ рдЧрдП рдЙрджрд╛рд╣рд░рдгреЛрдВ рд╕реЗ рдЖрд╡рд╢реНрдпрдХ рд╕рд╣рд╛рд░рддрдордХ рд╣реЛрдиреЗ рдХреЗ рд▓рд┐рдП рд╕рдВр╕грдЪрдирд╛рдПрдВ рд╕рд╛рд╣рднрд╛рдУ рд╣реИред

рдЬрд┐рдЬреНрдЮрд╛рд╕реБрдо рдХрд░реЗрдВ: рдЖрдкрдХреЛ рдЕрдм-рдмреЛрд░ FlexBox рдХреЗ рдмрдЧреАрдЪреЗ рдХреИрд╕реЗ рдмрдирд╛рдПрдВ, рдЙрд╕реЗ рдХреИрд╕реЗ рддреИрдпрд╛рд░ рдХрд┐рдпрд╛ рдЬaye, рдФрд░ рдЗрд╕рдХреЗ рдЕрдиреБрдкреНрд░рдпреЛрдЧ рдХреИрд╕реЗ рд╡рд┐рдХрд▓реНрдк рдзрд╛рд░рдг рдХреАрдВ рд╕рдордЭрд╛рдПрдВ рдФрд░ рдЖрдкрдХреЛ рдЗрд╕ рддрд░рд╣ рдкрд╛рдПрдВ рдХрд┐ FlexBox рдЖрдкрдХреЗ рд╡реЗрдм рдкреНрд░реЛрдЬреЗрдХреНрдЯ рдХреЛ рдЕрдиреЗрдХ рднреБрдЧрддрди рдЖрдордирдд рдХреЗ рд╕рд╛рде рдЙрдкрдпреБрдХреНрдд рд╣реЛ рд╕рдХрддрд╛ рд╣реИред

рдЯрд┐рдкреНрдкрдгреА: рдЗрд╕ рдХреЛрд░реНрд╕ рдореЗрдВ, рд╡реЗ рдЖрдкрдХреЛ CSS Flexible Box Layout рдирд┐рд░реНрдзрд╛рд░рд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдирдИ-рдирдП рддрд░реАрдХреЗ рд╕рд┐рдЦрд╛рдПрдВрдЧреЗ, рдЬреИрд╕реЗ рдХрд┐ display: flex; рдФрд░ ES6+ рдХреЗ рдирдИ-рдирдП features рдХрд╛ рдЙрдкрдпреЛрдЧ. рдЗрд╕рд╕рд▓реЗ рдЖрдкрдХреЛ рдЖрдВрддреНрд░рд┐рдЦ рдРрд╡реЗрдВ рдХреЗ рдордж╪п рдХреЗ рдмрд╣реБрдд рд╣реЛ рдЬрд╛рдиреЗ рд╡рд╛рд▓реЗ рд╣реЛрдВреЗ рдЪрд╛рд╣реЗ, рдпрд╛ рдлрд░реНрдо рднреВрдорд┐рдХрд╛ рдХреА рдЖрдзрд╛рд░рд┐рдд рдЙрдкрдХрд░рдгреЛрдВ рдХрд╛ рднреА рд╕реБрд░рдХреНрд╖рд┐рдд рд╣реЛред

рдпрд╣ рд╕рдм рд╡рд╛рд▓реЗ: рдЗрд╕рдХреЗ рдЕрдиреБрд╕рд╛рд░ Abhilash Pillai рдЖрдкрдХреЛ FlexBox рдХреЗ рдмрдЧреАрдЪреЗ рдХреИрд╕реЗ рднреБрдЧрддрд╛ рд╣реИ, рдЙрд╕рдХреЗ рдЪрд┐рддреНрд░рди, рд░реВрдкрдЧрдд рдХреИрд╕реЗ рджрд░реНрд╢рд╛рд╡рд▓ рдХрд░рддрд╛ рд╣реИ, рдФрд░ рдпрд╣ рдЖрдкрдХреЛ CSS рдХреБрд░рд╕реЛрдВ рдореЗрдВ FlexBox рдХрд╛ рдзрд╛рд░рдг рд░рдЦрдиреЗ рдХреЗ рд▓рд┐рдП рдЖрд╢реНрдЪрд░реНрдп рдЕрджреНрднреБрдд рдмрдирд╛ рдЬрд╣рд╛рдВ рдЖрдк рд╕реНрд╡рдЪрд╛рди рдФрд░ рдЧреБрд╡рд╛рд╣ рдкреВрд░реА рд╕рдордЭрд╛рдПрдВред

рдЬрд┐рдЬреНрдЮрд╛рд╕реЗрдВ: “FlexBox with Abhilash Pillai” – рдпрд╣ рдЖрдкрдХреЛ рдЕрдиреБрднреВрд╕рд╣реА рддреИрдпрд╛рд░ рдХрд░рдиреЗ рд╡рд╛рд▓реА FlexBox рд╕реЗ рд╕рдмрд╕реЗ рдЬреНрдЮрд╛рдирджрд┐рдЦрд╛рд╡реА рд╣реЛрдЧреА рдФрд░ рдЖрдкрдХреЛ рдЗрд╕ рдирдП рдЯреЗрдХреНрдиреЛрд▓реЛрдЬреА рдХреЗ рд╕рд╛рде-рд╕рд╛рде UI/UX рдбрд┐рдЬрд╝рд╛рдЗрди рдХреА рдЪрдордХрджрд╛рд░ рд╕реБрдзрд╛ рдкрд╛рдПрдВрдЧреЗред

рд╕реНрд╡рддрдВрддреНрд░ рдЙрдкрдпреЛрдЧ: рдЗрд╕ рдХреЛрд░реНрд╕ рдХреЛ рднреМрддрд┐рдХ рдЖрдХрд╛уГ│рдХрд╖рд╛ рдФрд░ рд╕рдорд╛рдиреНрдп рдЕрдзрд┐рдХрд╛рд░реЛрдВ рдХреЗ рдЕрдиреБрд╕рд╛рд░ рд╕рднреА рдЬрд╛рддрд┐рдУрдВ рдореЗрдВ рд╕рдмрд╕реЗ рдкрд╣рд▓реЗ рдЙрдкрдпреЛрдЧ рдХреАрдЬрд┐рдП рдЧрдП рд╣реИред рдЗрд╕рдХреЗ рдЕрдиреБрд╕рд╛рд░ Abhilash Pillai рдЖрдкрдХреЛ рд╢реНрд░реЗрдгрд┐рдпреЛрдВ рдХреЗ рдмрд╣реБрдд рд╣реЛ рд╡рд┐рднрд┐рдиреНрди рдЙрддреНрд╕рд╛рд╣ рдФрд░ рджреИрдирд┐рдХ рдЧрд╡рд╛рд╣реАрдВ рд╕реБрдзрд╛ рдкрд╛рдПрдВрдЧреЗред

рдЖрдк рдЕрдм-рдмреЛрд░ FlexBox рдХреЗ рдмрдЧреАрдЪреЗ рдХреИрд╕реЗ рддреИрдпрд╛рд░ рдХрд░рддреЗ рд╣реИрдВ, рдЙрд╕рдХреЗ рдХреИрд╕реЗ рдЖрд░рдореНрдн рд╣реЛрдиреЗ рд╡рд╛рд▓рд╛ рд╣реИ, рдФрд░ рдпрд╣ рдЖрдкрдХреЛ FlexBox рдХреЗ рдЗрд╕ рддрд░реАрдХреЗ рдХреЛ рдЕрдкрдиреЗ рд╡реЗрдм рдкреНрд░реЛрдЬреЗрдХреНрдЯ рдореЗрдВ рд╢рд╛рдорд┐рд▓ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╕рд╣рд╛рдпрдХрд╛ рднреВрдорд┐рдХрд╛ рдмрдирд╛рдиреЗ рдореЗрдВ рдорджрдж рдХреАрдЧреАред Abhilash Pillai рдЖрдкрдХреЛ рдЗрд╕ рддреНрдпреЛрдЧ рдХреЗ рд╕рд╛рде-рд╕рд╛рде FlexBox рдХреЗ рд╡рд┐рднрд┐рдиреНрди рд╕рдореБрджрд╛рдп рдХреЗ рдЦрд┐рд▓рд╛рдбрд╝реА рдЕрдиреБрд╕рд╛рд░ рдЪреБрдирд╛рдП рдЬрд╛рддрд╛ рд╣реИред

рд╣рд┐рдиреНрджреА
language