Code Malayalam
Code Malayalam
  • 154
  • 779 436
#8 HTML Layout | table | flex | grid | div | span | Code Malayalam
💝 Support: codemalayalam@upi
This video explain how component are layout in HTML. It explains how span div table flex and grid to layout html components.
00:00 Intro
00:14 Block and inline layout
3:06 Layout with Table
4:51 Layout with CSS Style
Code Malayalam Telegram: telegram.me/codemalayalam
GitHub: github.com/code-malayalam/react-tutorial
Website: codemalayalam.in
Email: pingme@codemalayalam.in
Переглядів: 71

Відео

#7 Responsive Img | srcset | picture | Code Malayalam13:29#7 Responsive Img | srcset | picture | Code Malayalam
#7 Responsive Img | srcset | picture | Code Malayalam
Переглядів 35021 день тому
💝 Support: codemalayalam@upi This video is about how to use img tag to load image efficiently in different device. This video also discuses picture tag. Github: github.com/code-malayalam/html-tuto/tree/chapter-7 Code Malayalam Telegram: telegram.me/codemalayalam GitHub: github.com/code-malayalam/react-tutorial Website: codemalayalam.in Email: pingme@codemalayalam.in
#6 HTML img Tags | Image | Code Malayalam9:58#6 HTML img Tags | Image | Code Malayalam
#6 HTML img Tags | Image | Code Malayalam
Переглядів 4534 місяці тому
💝 Support: codemalayalam@upi This is chapter 6 of HTML tutorial. The video explains basic concept of image tag. Github: github.com/code-malayalam/html-tuto/tree/chapter-6 0:00 Intro 1:01 src attribute 2:06 Types of images 3:27 Aspect ratio 7:13 Responsive Image 7:46 alt attribute GitHub: github.com/code-malayalam/html-tuto/tree/chapter-5 Code Malayalam Telegram: telegram.me/codemalayalam GitHub...
#5 HTML Table Tags | Code Malayalam | tr | td | th | thead | tfoot | caption10:46#5 HTML Table Tags | Code Malayalam | tr | td | th | thead | tfoot | caption
#5 HTML Table Tags | Code Malayalam | tr | td | th | thead | tfoot | caption
Переглядів 3954 місяці тому
#5 HTML Table Tags | Code Malayalam | tr | td | th | thead | tfoot | caption
#4 HTML Anchor Tags | a tag | Hyperlink | Code Malayalam9:14#4 HTML Anchor Tags | a tag | Hyperlink | Code Malayalam
#4 HTML Anchor Tags | a tag | Hyperlink | Code Malayalam
Переглядів 3605 місяців тому
#4 HTML Anchor Tags | a tag | Hyperlink | Code Malayalam
#3 HTML List Tags | Code Malayalam | ol | ul | dl | li | dt | dd5:02#3 HTML List Tags | Code Malayalam | ol | ul | dl | li | dt | dd
#3 HTML List Tags | Code Malayalam | ol | ul | dl | li | dt | dd
Переглядів 3425 місяців тому
#3 HTML List Tags | Code Malayalam | ol | ul | dl | li | dt | dd
#2 HTML Basic Tags | Box Model | Tags | h1..h6 | div | style | p | link | class | id | css15:17#2 HTML Basic Tags | Box Model | Tags | h1..h6 | div | style | p | link | class | id | css
#2 HTML Basic Tags | Box Model | Tags | h1..h6 | div | style | p | link | class | id | css
Переглядів 5035 місяців тому
#2 HTML Basic Tags | Box Model | Tags | h1..h6 | div | style | p | link | class | id | css
#1 HTML | Introduction | Code Malayalam | How to write HTML | Browser Features | Local Dev Env15:54#1 HTML | Introduction | Code Malayalam | How to write HTML | Browser Features | Local Dev Env
#1 HTML | Introduction | Code Malayalam | How to write HTML | Browser Features | Local Dev Env
Переглядів 8625 місяців тому
#1 HTML | Introduction | Code Malayalam | How to write HTML | Browser Features | Local Dev Env
How is Web Development? | Code Malayalam | HTTP | HTML | Server and Client Side Rendering | CSS | JS19:57How is Web Development? | Code Malayalam | HTTP | HTML | Server and Client Side Rendering | CSS | JS
How is Web Development? | Code Malayalam | HTTP | HTML | Server and Client Side Rendering | CSS | JS
Переглядів 1,3 тис.6 місяців тому
How is Web Development? | Code Malayalam | HTTP | HTML | Server and Client Side Rendering | CSS | JS
What is Web Development ? | Code Malayalam | Networking basics | Client | Server | Protocol | HTTP19:32What is Web Development ? | Code Malayalam | Networking basics | Client | Server | Protocol | HTTP
What is Web Development ? | Code Malayalam | Networking basics | Client | Server | Protocol | HTTP
Переглядів 1,6 тис.6 місяців тому
What is Web Development ? | Code Malayalam | Networking basics | Client | Server | Protocol | HTTP
#18 | CSS | Transition | Transform | Examples | Code Malayalam19:03#18 | CSS | Transition | Transform | Examples | Code Malayalam
#18 | CSS | Transition | Transform | Examples | Code Malayalam
Переглядів 6747 місяців тому
#18 | CSS | Transition | Transform | Examples | Code Malayalam
#17 | CSS | Variables | Custom Properties | Code Malayalam18:41#17 | CSS | Variables | Custom Properties | Code Malayalam
#17 | CSS | Variables | Custom Properties | Code Malayalam
Переглядів 4117 місяців тому
#17 | CSS | Variables | Custom Properties | Code Malayalam
#16 | CSS | Specificity | Code Malayalam17:10#16 | CSS | Specificity | Code Malayalam
#16 | CSS | Specificity | Code Malayalam
Переглядів 6458 місяців тому
#16 | CSS | Specificity | Code Malayalam
#15 | CSS | Media Queries | Code Malayalam24:26#15 | CSS | Media Queries | Code Malayalam
#15 | CSS | Media Queries | Code Malayalam
Переглядів 1,8 тис.8 місяців тому
#15 | CSS | Media Queries | Code Malayalam
#14 | CSS | z-index | stacking context | position examples | Code Malayalam18:38#14 | CSS | z-index | stacking context | position examples | Code Malayalam
#14 | CSS | z-index | stacking context | position examples | Code Malayalam
Переглядів 819Рік тому
#14 | CSS | z-index | stacking context | position examples | Code Malayalam
#13 | CSS | position | Static Relative | Fixed | Absolute | Sticky | z-index | Code Malayalam19:27#13 | CSS | position | Static Relative | Fixed | Absolute | Sticky | z-index | Code Malayalam
#13 | CSS | position | Static Relative | Fixed | Absolute | Sticky | z-index | Code Malayalam
Переглядів 1,7 тис.Рік тому
#13 | CSS | position | Static Relative | Fixed | Absolute | Sticky | z-index | Code Malayalam
#12 | CSS | grid | align and more | display | Code Malayalam10:35#12 | CSS | grid | align and more | display | Code Malayalam
#12 | CSS | grid | align and more | display | Code Malayalam
Переглядів 1,3 тис.Рік тому
#12 | CSS | grid | align and more | display | Code Malayalam
#11 | CSS | grid | display | Code Malayalam26:11#11 | CSS | grid | display | Code Malayalam
#11 | CSS | grid | display | Code Malayalam
Переглядів 4,5 тис.Рік тому
#11 | CSS | grid | display | Code Malayalam
#10 | CSS | flex | display | Code Malayalam26:32#10 | CSS | flex | display | Code Malayalam
#10 | CSS | flex | display | Code Malayalam
Переглядів 3,3 тис.Рік тому
#10 | CSS | flex | display | Code Malayalam
#9 | CSS | display | block | inline | inline-block | table17:00#9 | CSS | display | block | inline | inline-block | table
#9 | CSS | display | block | inline | inline-block | table
Переглядів 1,9 тис.Рік тому
#9 | CSS | display | block | inline | inline-block | table
#8 | CSS | float | Margin Collapse | Malayalam18:58#8 | CSS | float | Margin Collapse | Malayalam
#8 | CSS | float | Margin Collapse | Malayalam
Переглядів 1,5 тис.Рік тому
#8 | CSS | float | Margin Collapse | Malayalam
#7 | CSS | width and height | min max | box-sizing | overflow | Malayalam15:45#7 | CSS | width and height | min max | box-sizing | overflow | Malayalam
#7 | CSS | width and height | min max | box-sizing | overflow | Malayalam
Переглядів 1,5 тис.Рік тому
#7 | CSS | width and height | min max | box-sizing | overflow | Malayalam
#6 | CSS | color | background-color | background-image | Layers | Malayalam23:02#6 | CSS | color | background-color | background-image | Layers | Malayalam
#6 | CSS | color | background-color | background-image | Layers | Malayalam
Переглядів 1,4 тис.Рік тому
#6 | CSS | color | background-color | background-image | Layers | Malayalam
#5 | CSS | Font | Units | Inheritance | Malayalam Font | Code Malayalam26:12#5 | CSS | Font | Units | Inheritance | Malayalam Font | Code Malayalam
#5 | CSS | Font | Units | Inheritance | Malayalam Font | Code Malayalam
Переглядів 1,7 тис.Рік тому
#5 | CSS | Font | Units | Inheritance | Malayalam Font | Code Malayalam
#4 | CSS | Pseudo Selectors | Pseudo Elements | Code Malayalam19:10#4 | CSS | Pseudo Selectors | Pseudo Elements | Code Malayalam
#4 | CSS | Pseudo Selectors | Pseudo Elements | Code Malayalam
Переглядів 2,1 тис.Рік тому
#4 | CSS | Pseudo Selectors | Pseudo Elements | Code Malayalam
#3 | CSS | Selectors | Code Malayalam24:29#3 | CSS | Selectors | Code Malayalam
#3 | CSS | Selectors | Code Malayalam
Переглядів 2,9 тис.2 роки тому
#3 | CSS | Selectors | Code Malayalam
#2 | CSS | Box Model | Margin | Border | Padding | Outline | Code Malayalam11:32#2 | CSS | Box Model | Margin | Border | Padding | Outline | Code Malayalam
#2 | CSS | Box Model | Margin | Border | Padding | Outline | Code Malayalam
Переглядів 3,3 тис.2 роки тому
#2 | CSS | Box Model | Margin | Border | Padding | Outline | Code Malayalam
#1 | CSS Introduction | Code Malayalam13:10#1 | CSS Introduction | Code Malayalam
#1 | CSS Introduction | Code Malayalam
Переглядів 7 тис.2 роки тому
#1 | CSS Introduction | Code Malayalam
Avoiding Callback HELL with Promise and async/await | Code Malayalam29:41Avoiding Callback HELL with Promise and async/await | Code Malayalam
Avoiding Callback HELL with Promise and async/await | Code Malayalam
Переглядів 2,4 тис.2 роки тому
Avoiding Callback HELL with Promise and async/await | Code Malayalam
#9 | React Router 6 | Role based routing | Protected Routes | Code Malayalam20:31#9 | React Router 6 | Role based routing | Protected Routes | Code Malayalam
#9 | React Router 6 | Role based routing | Protected Routes | Code Malayalam
Переглядів 2 тис.2 роки тому
#9 | React Router 6 | Role based routing | Protected Routes | Code Malayalam

КОМЕНТАРІ

  • @ajay5023
    @ajay5023 День тому

    ❤

  • @32sreelakshmim34
    @32sreelakshmim34 2 дні тому

    Thank u for the video.

  • @World_football-
    @World_football- 7 днів тому

    You doing a great job❤

  • @ahd_rahees
    @ahd_rahees 7 днів тому

    Very informative and easy explanation . Thank you

  • @lrtuttu917
    @lrtuttu917 8 днів тому

    In TS I have created a simple library as class that has a constructor it will send xhr request, I bundled the TS library with web pack. When I instantiate the bundled class in multiple times all the instance works like last instance I've created do you have any soln for that???

    • @CodeMalayalam
      @CodeMalayalam 7 днів тому

      Sorry bro. Cant figureout with this comment. But from the comment it seems like a problem with the code than the bundler

  • @rijoe69
    @rijoe69 9 днів тому

    Nextjs tutorial ennu statt cheyum...?

    • @CodeMalayalam
      @CodeMalayalam 9 днів тому

      Wanted to start soon. Time crunch bro 😞. Have got 5-6 videos pending in html tutorial. After that will start nextjs tutorial.

    • @rijoe69
      @rijoe69 9 днів тому

      @CodeMalayalam thank you ♥️

  • @praveenna3737
    @praveenna3737 9 днів тому

    Nice presentation

  • @World_football-
    @World_football- 9 днів тому

    ❤

  • @World_football-
    @World_football- 9 днів тому

    ❤

  • @World_football-
    @World_football- 9 днів тому

    ❤

  • @World_football-
    @World_football- 9 днів тому

    ❤

  • @World_football-
    @World_football- 9 днів тому

    Thanks a lot ❤❤❤

  • @mohammedasif8260
    @mohammedasif8260 13 днів тому

    Good Explanation

  • @tonymartintony
    @tonymartintony 13 днів тому

    refObj.current.getBoundingClientRect().width give null and show error "TypeError: Cannot read properties of undefined (reading 'getBoundingClientRect')" How to solve this.

  • @tonymartintony
    @tonymartintony 13 днів тому

    Showing this error after seprate useLayoutEffect to seprate file on OutHooks.js "TypeError: Cannot read properties of undefined (reading 'getBoundingClientRect')"

  • @AhamedLubab
    @AhamedLubab 15 днів тому

    good brooo ...................

  • @krnbhs
    @krnbhs 15 днів тому

    I have been watching many of your videos. You really deserve many many more views and likes than this. Keep it up . All the best. Cheers.

  • @tonymartintony
    @tonymartintony 15 днів тому

    Thank for the video!!

  • @MSPHOTOGRAPHY-ep8by
    @MSPHOTOGRAPHY-ep8by 15 днів тому

    powli 🔥

  • @wefreecoders2893
    @wefreecoders2893 17 днів тому

    Very helpfull

  • @be_real_truth_matters
    @be_real_truth_matters 18 днів тому

    Loadash quick tutorial idumo, with most helpful utilities?

  • @be_real_truth_matters
    @be_real_truth_matters 18 днів тому

    Which design methodology do you recommend based on your experience?

    • @CodeMalayalam
      @CodeMalayalam 18 днів тому

      This seems to be a broad question. Not sure I got it correctly. Can u please cite few methodologies you are familiar with ?

    • @be_real_truth_matters
      @be_real_truth_matters 18 днів тому

      @CodeMalayalam I meant among that, those you had mentioned, desktop first / mobile first

    • @CodeMalayalam
      @CodeMalayalam 16 днів тому

      mobile first ആണ് ഇപ്പൊ എല്ലാവരും പറയുന്നത്. കാരണം മിക്കവാറും users mobile ആയിരിക്കും ഉപയോഗിക്കുന്നത്. പിന്നെ അതൊക്കെ നിങ്ങളുടെ users അനുസരിച്ചു തീരുമാനിക്കാം. എന്റെ firmൽ desktop first ആണ്. പണ്ടേ ഉള്ള framework ആണ് അതുകൊണ്ടു അത് തുടരുന്നു. എന്റെ അഭിപ്രായത്തിൽ രണ്ടും കണക്കാ. എന്തായാലും നമ്മൾ രണ്ടിലും test ചെയ്യും. പിന്നെ desktop first ആയാലെന്ത് mobile first ആയാലെന്ത്

  • @QTalksQuiz
    @QTalksQuiz 20 днів тому

    can you change your team into dark that is comfort

  • @SalmanulfarisP-e4k
    @SalmanulfarisP-e4k 20 днів тому

    ❤❤❤thanks broo

    • @CodeMalayalam
      @CodeMalayalam 20 днів тому

      Welcome bro

    • @SalmanulfarisP-e4k
      @SalmanulfarisP-e4k 20 днів тому

      @@CodeMalayalam ithu mathrall even loop async await yellam valare nalla reethiyil manasilayathu ippol anu full power 😍😍😍

    • @SalmanulfarisP-e4k
      @SalmanulfarisP-e4k 20 днів тому

      i was late ippol anu channel kanunnee

  • @shuhaibtu7857
    @shuhaibtu7857 21 день тому

    ❤

  • @Userkazt
    @Userkazt 21 день тому

    But we need multiple images, right?

  • @themaxpa
    @themaxpa 21 день тому

    New information,thanks

  • @MZ-xd2oo
    @MZ-xd2oo 22 дні тому

    Hii, window.print onn explain cheyyo, print a specific div. And more about it

    • @CodeMalayalam
      @CodeMalayalam 22 дні тому

      athu print cheyyan vendi print dialod open cheyyan ulla api aanu..

  • @MZ-xd2oo
    @MZ-xd2oo 22 дні тому

    Window.print onn explain cheyyo

    • @CodeMalayalam
      @CodeMalayalam 22 дні тому

      athu print cheyyan vendi print dialod open cheyyan ulla api aanu..

  • @tonymartintony
    @tonymartintony 22 дні тому

    very good tutorial, Thanks

  • @tonymartintony
    @tonymartintony 23 дні тому

    Thank you so much for this video

  • @tonymartintony
    @tonymartintony 23 дні тому

    Thanks for Video

  • @thoufeeknazeer3943
    @thoufeeknazeer3943 23 дні тому

    Thankz budyy Very use full video ❤

  • @SayaKp-z3q
    @SayaKp-z3q 24 дні тому

    Sir divney kurich video cheyamo detail ayyt ❤

    • @CodeMalayalam
      @CodeMalayalam 24 дні тому

      next video will explain a bit more on div and span

    • @SayaKp-z3q
      @SayaKp-z3q 23 дні тому

      @@CodeMalayalam thanks sir

  • @thoufeeknazeer3943
    @thoufeeknazeer3943 25 днів тому

    Bro subscribers kurvanenn Vech orikalum eee Chanel Drop cheyale Malayalathiil Ithe Pole Better Aytt padipikkunna Oru Chanel ahn Keep Going Broo I'll support Youu ❤🫂

    • @CodeMalayalam
      @CodeMalayalam 25 днів тому

      Thanks bro for the wonderful comment. No plans to drop. Will keep posting. Please stay tuned 😊

  • @SayedAlameen
    @SayedAlameen 26 днів тому

    hii, how can i contact you , linkdin ...?

  • @Justme-PJ321
    @Justme-PJ321 26 днів тому

    Helpful 🙏🏼

  • @tonymartintony
    @tonymartintony 26 днів тому

    Thank

  • @CodingHive-mi2jp
    @CodingHive-mi2jp 26 днів тому

    ❤❤

  • @SandraPS-gf2io
    @SandraPS-gf2io 27 днів тому

    Thankyou so muchh🥺💓🫶🫶

  • @avaaviyalvlogs8473
    @avaaviyalvlogs8473 28 днів тому

    താങ്കൾ node js series ചൈതിട്ടുണ്ടോ

  • @SandraPS-gf2io
    @SandraPS-gf2io Місяць тому

    Super🫶❤️

  • @SandraPS-gf2io
    @SandraPS-gf2io Місяць тому

    Thank you❤️

  • @tonymartintony
    @tonymartintony Місяць тому

    💖

  • @lansonelu2781
    @lansonelu2781 Місяць тому

    great

  • @sajuta5316
    @sajuta5316 Місяць тому

    very well explained!!

  • @arunstreaming
    @arunstreaming Місяць тому

    Made it very clear

  • @arunstreaming
    @arunstreaming Місяць тому

    I went through several tutorials explaining the spread operator, but this is the one which I found in its simplest and logical way of presenting the matter. You are directly injecting to the heart, so that the concept becomes so rigid. Salute you...

    • @CodeMalayalam
      @CodeMalayalam Місяць тому

      Thank you very much for this nice comment. !

  • @amalmohanan3713
    @amalmohanan3713 Місяць тому

    pythonum angne thanne alle...I mean heapil alle save cheyya...

    • @CodeMalayalam
      @CodeMalayalam Місяць тому

      ആയിരിക്കണം. python വല്യ പിടി ഇല്ല 🙂

  • @sivaprasadk.a.9031
    @sivaprasadk.a.9031 Місяць тому

    Very well explained.. Keep going.. ❤