How To Make Netflix Website Clone Using HTML And CSS

แชร์
ฝัง
  • เผยแพร่เมื่อ 16 ธ.ค. 2022
  • Learn How To Make Netflix Website Clone Using HTML And CSS
    ❤️ SUBSCRIBE: goo.gl/tTFmPb
    This this video you will learn to create Netflix landing page clone using HTML and CSS. This website design will be completely responsive for laptop and mobile devices.
    Download Image: drive.google.com/file/d/1rjxW...
    #htmlandcss #website #websitedesign
    -----------------------------------------
    Suggested Course:
    ❤️ Complete website Using HTML and CSS
    ✔️ 8 Complete website step by step
    ✔️ Source Code Download
    ✔️ 76 Lectures, 12 Hours Video
    ✔️ Course Completion certificate
    👉 easytutorialspro.com/go/course/
    -------------------------------------
    Recommended Videos:
    Learn Complete HTML and CSS from basics:
    ► • HTML And CSS Tutorial ...
    Make A Complete Website for college using HTML & CSS:
    ► • How To Make A College ...
    How to make a Business website step by step:
    ► • How To Make Website Us...
    How to make personal resume website step by step:
    ► • How To Make A Website ...
    How to make fitness website design using HTML CSS:
    ► • How To Make A Website ...
    How to make an Ecommerce Website Design:
    ► • How To Make eCommerce ...
    How to make a Job Portal website design with HTML & CSS:
    ► • How To Make Website Us...
    How to make travel website design with HTML CSS Bootstrap:
    ► • How To Make A Website ...
    -------------------------------------
    Affordable web hosting (coupon- EASYTUTORIALS)
    👉 easytutorialspro.com/hosting/
    My recommended tools and tutorials
    👉 easytutorialspro.com/
    -------------------------------------
    ◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
    Join Channel Membership:
    ► / @greatstackdev
    -------------------------------------
    Images Credit:
    www.netflix.com/in/
    -------------------------------------
    Like - Follow & Subscribe us:
    ◼️ TH-cam: goo.gl/tTFmPb
    ◼️ Facebook: goo.gl/qv7tEQ
    ◼️ Twitter: / itsavinashkr
    ◼️ Instagram: / iamavinashkr

ความคิดเห็น • 286

  • @theotheluo6546
    @theotheluo6546 ปีที่แล้ว +14

    This is one of the best tutorial channels in youtube. Concepts are explained in a way that is easy to understand. Keep up the good work sir.

  • @amydd8506
    @amydd8506 ปีที่แล้ว +43

    I m working your every project from begining step by step and then craeting my own with what I ve learned by your material. Thank you so much !!! I m learning a lot step by step !! God bless you !!! Thank you for sharing all of this with us ❣🙏

    • @GreatStackDev
      @GreatStackDev  ปีที่แล้ว +5

      Thank amy, we will be making more projects like this

    • @marcoantoniovalencia8694
      @marcoantoniovalencia8694 ปีที่แล้ว +1

      @@GreatStackDev Your videos are great, but it would be great if you implemented BEM methodology for the CSS to have a clearer code

  • @jhashashwatkumar
    @jhashashwatkumar ปีที่แล้ว +127

    Yesterday I have done this project without any tutorials. What a coincidence..❤️

  • @aadrikasingh5004
    @aadrikasingh5004 ปีที่แล้ว +6

    Literally for the first time I was able to follow a tutorial and complete it till the very end. Thankyou!!!

    • @ritikamundhra4
      @ritikamundhra4 10 หลายเดือนก่อน

      Heyy I have a request to make. Can you reply?

  • @learnonline7651
    @learnonline7651 10 หลายเดือนก่อน +3

    you are a great teacher for us .. May Allah gives you a long live .. love from Bangladesh💖💖💖

  • @Proudly_indiann
    @Proudly_indiann ปีที่แล้ว

    thank you for providing such good content in a simpler way...

  • @RohanDas-qz6bj
    @RohanDas-qz6bj ปีที่แล้ว +1

    Thank You For this beautiful Netflix clone project.

  • @shreelekham.k.9141
    @shreelekham.k.9141 7 หลายเดือนก่อน

    I completed this project, thank you so much sir😊

  • @user-gv8jn6de2r
    @user-gv8jn6de2r ปีที่แล้ว

    Thank you! I'm learning a lot

  • @spideygaming5103
    @spideygaming5103 ปีที่แล้ว

    Thank you so much ❤ i have learnt a lot from this tutorial

  • @tatashyam
    @tatashyam ปีที่แล้ว +1

    Wonderful explanation Thank you Easy Tutorials. Step by step explanation is very good. I am practicing this layout now.

  • @dhanya30
    @dhanya30 ปีที่แล้ว +1

    Really..this project is awesome...💯

  • @yeshwanth2910
    @yeshwanth2910 ปีที่แล้ว

    Nice video and great explanation.......Thanks dude!

  • @CodewithAbdullahNahian
    @CodewithAbdullahNahian ปีที่แล้ว

    I truly love your channel. Keep doing the best work.

  • @Brogrammer2929
    @Brogrammer2929 ปีที่แล้ว

    wonderfull presentation .can understand very easily

  • @ayushayush4608
    @ayushayush4608 ปีที่แล้ว

    Amazing brother and thank you🎉❤

  • @Nanashi-rq7lk
    @Nanashi-rq7lk 10 หลายเดือนก่อน

    Perfect Tutorial. Thanks

  • @kelle_li
    @kelle_li ปีที่แล้ว +5

    This is an incredible tutorial/clone video, I learnt a great deal from it thank you. Just curious how did you get the background image and other images? I want to try and clone the UK version which has a 'Who's Watching?' screen with the personal profile icons, how can I get them? Thanks.

    • @abdulrehman-kk3jo
      @abdulrehman-kk3jo 3 หลายเดือนก่อน

      use inspect element or something

  • @CherryMakesGameplays
    @CherryMakesGameplays 23 วันที่ผ่านมา

    Tried many tutorials but only yours worked for me

  • @T7771k
    @T7771k ปีที่แล้ว +7

    Thank you so much I had made that in my code editior step by step I had saw a website as your clone website very perfect in big-screen and small-screen also.Very clean tutorials. Keep it up

  • @mikenance4713
    @mikenance4713 7 หลายเดือนก่อน +1

    When you begin to clone a website , how do you go about finding the appropriate CSS dimensions , sizes, padding, color, etc... is it somewhere we can look that up on the original website?

  • @HaiTran-su8ow
    @HaiTran-su8ow ปีที่แล้ว

    Big fan of you from Vietnam😍

  • @rorschach2892
    @rorschach2892 10 หลายเดือนก่อน

    Thank you for this, you make frontend easier for beginners, hugs from Brazil

  • @sethukarasisethu6491
    @sethukarasisethu6491 ปีที่แล้ว

    You deserve this👑 !!!

  • @imposter1069
    @imposter1069 ปีที่แล้ว

    Thank youuu soo much 😍

  • @pakhawaj_omkar
    @pakhawaj_omkar ปีที่แล้ว

    Amazing Tutorial Thank You Sir

  • @pienodisentimento5187
    @pienodisentimento5187 หลายเดือนก่อน +1

    Thank you so much! Best tutorial and a time saver.

    • @GreatStackDev
      @GreatStackDev  หลายเดือนก่อน

      Glad you liked it. Thanks for your comment. 😊

  • @asadshaikh7281
    @asadshaikh7281 ปีที่แล้ว

    You are my favorite bro..thank you so much

  • @Gato.Samurai
    @Gato.Samurai ปีที่แล้ว +2

    You´re the best my brother. Thank you ❤

  • @CodeCreativeOfficial
    @CodeCreativeOfficial ปีที่แล้ว

    Looks dope!

  • @youtubersreaction5731
    @youtubersreaction5731 ปีที่แล้ว +1

    Thank you so much

  • @harishsundaram6579
    @harishsundaram6579 5 หลายเดือนก่อน +1

    Thankyou so much sir....

  • @user-cg7es3ec7n
    @user-cg7es3ec7n 11 หลายเดือนก่อน +2

    Bro I love your tutorial but where is the part where you saved HTML and CSS file? Anyways great tutorial and well done for your hard work

  • @KameshE-rj6fg
    @KameshE-rj6fg ปีที่แล้ว

    Thank you so much sir!!!!

  • @learnwithnagma
    @learnwithnagma 4 หลายเดือนก่อน

    Thank you so much 😊.

  • @parvdeepsingh13
    @parvdeepsingh13 11 หลายเดือนก่อน

    Hello, I am facing little difficulties in the footer section so I can get a github repo link so that I can cross check.

  • @Supriya-bi3fk
    @Supriya-bi3fk 3 หลายเดือนก่อน

    Thanks sir iam very helpful 🎉

  • @karthikkarthi9893
    @karthikkarthi9893 3 หลายเดือนก่อน

    Sir I can easily understand your coding 😊

  • @MilanSisara-id8vv
    @MilanSisara-id8vv 9 หลายเดือนก่อน

    Lots of Love From Gujarat🥰🥰🥰🥰🥰

  • @vikramdp505
    @vikramdp505 9 หลายเดือนก่อน +1

    thankyou man!!!!!!

  • @akramaici6499
    @akramaici6499 10 หลายเดือนก่อน

    i have question when we use css media we dont use break-points for différentes sizes

  • @mathiasonyebuchi4163
    @mathiasonyebuchi4163 9 หลายเดือนก่อน

    Sir I have a question but before my question I have to say this tutorial was very helpful for me as an upcoming web developer, so my questions is my email bar in the bearded content doesn’t stay in Ig’s right position when I switch to other display like smaller devices in the content I don’t really
    Know what’s wrong 😊

  • @ShubhamSharma-ne8rp
    @ShubhamSharma-ne8rp ปีที่แล้ว

    thank you i learn alot from this video.....

  • @drexex0f
    @drexex0f 2 หลายเดือนก่อน +2

    these Frontend developer thinks cloning means only the UI portion. the main thing is that more than UI backend is more complex and cool about these big applications like netflix amazon

  • @Tmaks_zw
    @Tmaks_zw ปีที่แล้ว

    The first channel i felt like the like and subscribe button are not enough

  • @shreyaagrawal9689
    @shreyaagrawal9689 10 หลายเดือนก่อน

    how had you edited the background image of 2, 3, 4 slides down the first page??

  • @gandamraviteja7019
    @gandamraviteja7019 3 หลายเดือนก่อน

    Amazing work hats off to you
    Even paid courses will not give this much knowledge and explanations
    Thank you so much for this course

    • @sahilgumber7
      @sahilgumber7 3 หลายเดือนก่อน +1

      Bhai agr tera perfectly responsive h toh ek br code share krde please

    • @gandamraviteja7019
      @gandamraviteja7019 3 หลายเดือนก่อน

      @@sahilgumber7 sure I will share my github link here

  • @muneesh143
    @muneesh143 6 หลายเดือนก่อน

    this video are so helpful ho boomup🤩🤩🤩🤩

  • @nishantpandey1042
    @nishantpandey1042 5 หลายเดือนก่อน

    Thanks You🎉

  • @divya.n1697
    @divya.n1697 5 หลายเดือนก่อน

    This is really great - Had one question- how to modify code where the radio button is pressed again and contents should collapse and hide ( on original site this feature was visible). But couldn't get through to that. Can you help ?

  • @vamsivignesh2727
    @vamsivignesh2727 ปีที่แล้ว +2

    Brother can you make the same concept videos by using react js.
    I learned so many things from your video on how to use visual studio code properly.
    Please make a plan to make a video on react js. It's very helpful for my future interviews thank you, brother......

    • @duttachandan8372
      @duttachandan8372 10 หลายเดือนก่อน

      Follow the same instructions but there is a catch you will have to use JSX instead of HTML code, and the other part is for the repeated part try creating API, so that way u don't need to repeat your code again and again.

  • @oshegbecomedies
    @oshegbecomedies 10 หลายเดือนก่อน +1

    Sir, thank you so much for this amazing tutorial. I don’t know how find the icon on sign in navigation, pls help...

  • @youremotions5910
    @youremotions5910 ปีที่แล้ว

    thanks for this please create full website clone

  • @justiceokoroafor
    @justiceokoroafor ปีที่แล้ว

    Good evening,I really love your work so far. Thanks for sharing all you have do e so far. Please, while adding google fonts on my weppage, when I refresh the page the texts shakes, and it happens on icons too

    • @GreatStackDev
      @GreatStackDev  ปีที่แล้ว

      I think you are using VS code liver server, Please check the webpage without live server

  • @abhisaragarwal9084
    @abhisaragarwal9084 ปีที่แล้ว +2

    The tutorial was a great one but i used check box as input type so that the accordion content can be hidden again after clicking on cross

    • @sripriyansvbsbtskanchibhat9152
      @sripriyansvbsbtskanchibhat9152 ปีที่แล้ว

      please share how you have done it

    • @honeyjakundiya
      @honeyjakundiya ปีที่แล้ว +3

      @@sripriyansvbsbtskanchibhat9152 just replace "radio" with "checkbox".
      -------HTML--------
      (Change for all 6 ids)
      -------CSS--------
      input[type="checkbox"]
      .accordion input[type="checkbox"]:checked + label + .content
      .accordion input[type="checkbox"]:checked + label::after

  • @princearya4208
    @princearya4208 ปีที่แล้ว +1

    can you make sign in signup usable and the video homescreen interface for netflix in part -2

  • @perverturga1574
    @perverturga1574 9 หลายเดือนก่อน

    thank you

  • @santoshthakurgamin
    @santoshthakurgamin ปีที่แล้ว

    Humble request to make it full series!

  • @matrixnft
    @matrixnft ปีที่แล้ว +1

    Done Thank you❤

  • @bhanukamlay8209
    @bhanukamlay8209 10 หลายเดือนก่อน

    From which website you took that tv trasparent image

  • @user-zg9sz6hh4n
    @user-zg9sz6hh4n 7 หลายเดือนก่อน

    Best ❤

  • @gurdeepmetai970
    @gurdeepmetai970 ปีที่แล้ว

    Can you please help me with how Netflix is placed away from starting point and the sing-in button is placed away from the ending point equally and how other content is starting from exact bottom of Netflix logo not from the screen starting point?

    • @SAM-tw4wd
      @SAM-tw4wd ปีที่แล้ว

      Bhai un sb ko phele se ek container me krdia hoga aur us container ko margin dedia hoga sides se mene to ese hi kra tha apne project me

  • @fifaworldcupwatch
    @fifaworldcupwatch 9 หลายเดือนก่อน

    Your voice is so smooth and your language is easy to understand. Take love form Bangladesh

  • @wardahaibe7691
    @wardahaibe7691 9 หลายเดือนก่อน

    thnks alot

  • @itz.swapnill22
    @itz.swapnill22 ปีที่แล้ว

    Please make a video about how to create website like CBR, ScreenRant.

  • @sapnabhatt6892
    @sapnabhatt6892 ปีที่แล้ว

    nice😊

  • @praneshwar9992
    @praneshwar9992 5 หลายเดือนก่อน

    very useful

  • @Kratos0223
    @Kratos0223 10 หลายเดือนก่อน

    Thank you so much. Really good video.

    • @GreatStackDev
      @GreatStackDev  10 หลายเดือนก่อน

      Glad it was helpful!

  • @orien1116
    @orien1116 5 หลายเดือนก่อน

    sir you provided checked option for faq but if we want to click again there is no unchecked option??

  • @Ikram0259
    @Ikram0259 9 หลายเดือนก่อน

    I have a question, where did you get the pictures and what about copyright? Because I need some Netflix show posters but I can’t find any without copyright 😭

  • @santoshthakurgamin
    @santoshthakurgamin ปีที่แล้ว +1

    Sir continue this series make it full stack website how to make that monitor video moving.

  • @retromusichall7517
    @retromusichall7517 9 หลายเดือนก่อน

    GRACIAS por tan buen tutorial,como podria conseguir el codigo fuente,saludos desde mexico.

  • @user-od9ej1rx8q
    @user-od9ej1rx8q 9 หลายเดือนก่อน

    im stucked at mobile responsive header the h1 text is not showing at extact position

  • @muhammadbinbazz
    @muhammadbinbazz ปีที่แล้ว

    Guide Me Please Sir, the web preview is just showing the style.css Commands why pls

  • @focusreflect8223
    @focusreflect8223 2 หลายเดือนก่อน

    Guys can someone help me... I know html and css but when i start doing a project i get suck in bringing the text in the center.. even after using justify-context and align-items..🙏

  • @jhashashwatkumar
    @jhashashwatkumar ปีที่แล้ว

    Please make a tutorial for Disney+ Hotstar clone 👍

  • @papasmurf3202
    @papasmurf3202 ปีที่แล้ว

    Hello..do one for fetching animes...

  • @mosesnjoroge5639
    @mosesnjoroge5639 ปีที่แล้ว +1

    can you in future consider having a split screen?

  • @Zed_xakker
    @Zed_xakker ปีที่แล้ว

    verry guud❤

  • @mona07552
    @mona07552 10 หลายเดือนก่อน

    At 33:42 when i'm giving max- height 0 it is hiding the content. but it is still taking its space there (plz help me with this) 🙏🙏

  • @dabezt1379
    @dabezt1379 ปีที่แล้ว +1

    nice tutorial,,but why use button instead of select option,,

  • @SOKHAN
    @SOKHAN ปีที่แล้ว

    How to use the code for Blogger templates .?

  • @anwaremehemai9495
    @anwaremehemai9495 ปีที่แล้ว +1

    thanks

  • @HafsaAkhter-dh9vc
    @HafsaAkhter-dh9vc ปีที่แล้ว

    very helpful video

  • @mdms4549
    @mdms4549 ปีที่แล้ว

    Very Awesome

  • @PavanPcLab
    @PavanPcLab 7 หลายเดือนก่อน

    thanks for the download link man i watch many video but no one is giving the link of image i am watching this video after 11 ,12 months and there is some changes in the original website and it is obvious and as a new person it is difficult with some changes and difficult to download the images

  • @johntbouli3189
    @johntbouli3189 ปีที่แล้ว +1

    how do have hr elements dividing the sections of the page without coding the hr element in the html

    • @GreatStackDev
      @GreatStackDev  ปีที่แล้ว +1

      you are talking about dividing like at before footer section. that is made using CSS
      border-top: 6px solid #333;

  • @duttachandan8372
    @duttachandan8372 10 หลายเดือนก่อน

    Could you please tell me how to put a video in the background of a png image, like in here netflix website has this feature in there tv images they are playing a video in the background of there image, so how to achieve this??
    Please reply, as I making netflix clone for my project

    • @ritikamundhra4
      @ritikamundhra4 10 หลายเดือนก่อน

      Hey can you reply me? Did you made the project?

    • @duttachandan8372
      @duttachandan8372 10 หลายเดือนก่อน

      Yes i did, and what do you mean by how can you reply me??

  • @Abhinaw_singh3549
    @Abhinaw_singh3549 ปีที่แล้ว +3

    bro you have told us how to open faq questions but not told how to close it?

  • @skswaggaming4397
    @skswaggaming4397 7 หลายเดือนก่อน

    Why the image is not showing in my webpage that url is not working why

  • @nikhilkonaparthi
    @nikhilkonaparthi 3 หลายเดือนก่อน

    its working in visual studio but unable to publish this code in github...It was showing like its a dangerous site

  • @user-sd5gw6bj5o
    @user-sd5gw6bj5o 6 หลายเดือนก่อน +2

    i am having trouble pls help me
    no proper back ground image fix

    • @AdarshKumar-vt7wc
      @AdarshKumar-vt7wc 11 วันที่ผ่านมา

      background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
      url("images/header-image.png"); //use this line instead

  • @archanabelal6958
    @archanabelal6958 9 หลายเดือนก่อน

    Iam facing difficulty in faq section. When i click on the question it is not displaying answer. What may be the reason?

  • @Adarshbhau737
    @Adarshbhau737 หลายเดือนก่อน

    Sir i am writing background image in linear gradient doesn't work

  • @NiviudPu
    @NiviudPu 2 หลายเดือนก่อน

    My font didn't change into white color ? What should i do ?

  • @tanyagupta1941
    @tanyagupta1941 3 หลายเดือนก่อน

    Anyone please help me, as I am not able to add background images..it's not showing after multiple try

  • @aforangular3759
    @aforangular3759 ปีที่แล้ว

    Great sir

    • @GreatStackDev
      @GreatStackDev  ปีที่แล้ว

      thank you, Glad you like this website design tutorial

  • @Asif_jafri
    @Asif_jafri ปีที่แล้ว

    How can do responsive for at this project.

  • @thecoolone1333
    @thecoolone1333 ปีที่แล้ว +1

    Thanks easy tutorials channel because of you i was able to understand css concepts more clearly and had also learn new ones

    • @GreatStackDev
      @GreatStackDev  ปีที่แล้ว +1

      Glad to hear that

    • @thecoolone1333
      @thecoolone1333 ปีที่แล้ว

      Hey @@GreatStackDev make the code available of the projects you will be making in the future

  • @inspireddoctor6336
    @inspireddoctor6336 ปีที่แล้ว

    Good day, please my .accordion input type isn’t working .