How to Build Responsive Netflix Clone using HTML and CSS - Beginners Tutorial

Подписаться 8 тыс.

Просмотров 82 тыс.

50% 1

Today we are going to be building Netflix Clone using just HTML and CSS.
Do you want to improve your #html & #css skills? Then Watch this video and follow along with me where we build #netflix using just HTML & CSS. We will be using #flexbox in this project.
Hope You Guys Enjoyed the Video. Like Share Comment and Subscribe to my channel for more videos like these.
GET Images : drive.google.com/drive/folder...
GET Source Code :
gum.co/iDGOv
Timestamps :
00:00 Intro & Demo
02:11 Project Setup
04:23 Building Movies Section
12:58 Styling Movies Section
18:54 Building Banner
20:52 Styling Banner
28:45 Building Nav Bar
29:50 Styling Nav Bar
32:38 Adding JS
34:22 Final Demo & End
Watch Our Previous Videos :
➔ Responsive Netflix Clone using HTML and CSS - Beginners Tutorial
• How to Build Responsiv...
➔ Instagram Reels Clone using HTML & CSS - Beginners Tutorial
• How to Build Reels Clo...
➔ TikTok Clone With HTML and CSS - Beginners Tutorial
• How to Build TikTok Cl...
➔ Responsive Facebook Clone using HTML & CSS - Beginners Tutorial
• How to Build Responsiv...
➔ Gmail Clone using just HTML & CSS - For Complete Beginners
• How to Build Gmail Clo...
➔ LinkedIn Clone using just HTML & CSS - For Complete Beginners
• How to Build LinkedIn ...
➔ Google Clone with just HTML & CSS - For Complete Beginners
• How to Build Google Cl...
➔ Responsive RU-vid Clone using HTML & CSS - Beginners Tutorial | Part 1
• How to Build Responsiv...
➔ Responsive RU-vid Clone using HTML & CSS - Beginners Tutorial | Part 2
• How to Build Responsiv...
You can find me on:
📸 Instagram: / somanath_goudar
🌎 Website: somanath-goudar.github.io/por...
📝 LinkedIn: / somanath-goudar-063aa21ba
📂 GitHub: github.com/somanath-goudar
Credits:
Inspired from Clever Programmer
/ cleverprogrammer
Background Music Used:
First Light : • First Light - Atch (No...
Disclaimer : This video is meant only for improving your html and css skills and purely for education purpose not for any other intentions.

Опубликовано:

19 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 106

@jameelhadi9462 10 месяцев назад

You r best because you provided all things source code and images

@fridaee Год назад

you are so amazing, I just installed VSC with extremely little knowledge about it and could easily follow along! Great work!

@FutureCoders Год назад

Thank You!

@mauricioreguete466 16 дней назад

Obrigado por essa aula incrível...

@sirivelichannel0819 11 месяцев назад

Thanks a lot bro🎉🎉🎉🎉🎉🎉🎉 After a long time of search I got your video as a god gift for creating website. Once again thanks a lot bro❤❤❤

@FutureCoders 11 месяцев назад

Thank You

@Samaelh12 2 года назад

i love it. ty too much. grettings from México

@FutureCoders 2 года назад

Thank you very much!

@Harshitmahour 3 года назад

Brother i really like this. By your explanation this looks easy to me as a Html & Css beginner. ❤

@FutureCoders 3 года назад

I am glad to hear that! And glad it helped you. Thank you ❤️

@Harshitmahour 3 года назад

@@FutureCoders and i am also learning javascript from your tutorials. Short and to the point amazing!!!

@FutureCoders 3 года назад

@@Harshitmahour Thank you! It means a lot to me ❤️. Will be uploading tutorial on twitter clone today in the evening. Stay tuned 😉

@saitejavasamsetti1928 8 месяцев назад

send the code

@MMMMMM-kh2iy Год назад

you are amazing brother. Thank you so muchh !!!!!!!

@FutureCoders Год назад

You're welcome!

@Saiprasad22 9 месяцев назад

Just Amazing bro. Thanks a lot

@FutureCoders 8 месяцев назад

Most welcome 😊

@gabrielcouto4356 2 года назад

Fantastic, thank very much

@FutureCoders 2 года назад

Thank you too!

@oneeritrea 2 года назад

could you please suggest to me any video you make in the CSS grid? THANK YOU. KEEP THE GREAT WORK!!!!

@FutureCoders 2 года назад

Thank You! Sorry! Currently I don't have any videos on CSS Grid. There is an amazing channel of " Kevin Powell " ( Search on RU-vid ). He might have videos on Grid.

@StaticBlaster Год назад

I added your video to my computer tutorials playlist. I definitely will be building this project so that I can learn more about html, CSS and JavaScript. Tutorials are boring but learning in the form of building something like a responsive website or app is more of a valuable way to learn. Real world projects beat out boring tutorials.

@FutureCoders Год назад

Thank You So Much!

@StaticBlaster Год назад

@@FutureCoders You're welcome. :)

@oscarjonathangrancianososa5493 2 года назад

Eres un capo bro

@antusaha6278 Год назад

just finished my first web page,thanks man

@FutureCoders Год назад

Wow! Congratulations on your first web page. Keep going

@antusaha6278 Год назад

@@FutureCoders 😌❤️

@shaiksuraj6017 Год назад

I have done my internship on web development thankyou 💜

@sirishayatham1810 8 месяцев назад

How can I download images and videos to insert in code... Iam not getting it perfectly while I am downloading..

@luzPink01 Год назад

This is fire 🔥🔥🔥🔥🔥

@FutureCoders Год назад

Thank You

@ashfaqmohammed7558 2 года назад

your explanation really good , thank you

@playwithvayofficial 2 года назад

For 08:00 in, there is actually an emmet shortcut for selecting all class names at once and removing on Windows: Ctrl + Alt + Down Key Hope that helps! Great video once again :) This project was a great refresher for my CSS skills.

@FutureCoders 2 года назад

Good tip! Thank You!

@Pokemon_Toons Год назад

really perfect

@FutureCoders Год назад

Thank You! Hope you liked it

@_theshashwat_ 3 года назад

Nice ❤️❤️❤️

@FutureCoders 3 года назад

Thank you ❤️

@salehalshemali2419 Год назад

Nice Video nice explain

@FutureCoders Год назад

Thanks and welcome

@sharmilaojha4146 2 года назад

Tomorrow is my presentation..please reply asap sir

@khamismazrui701 4 месяца назад

will it be playing movies like netflix

@User74773 2 года назад

by the way how do you scroll horizontally through the movies? i cant find out what i use to scroll through them

@FutureCoders 2 года назад

hold shift to scroll horizontal

@thomaskuijv Год назад

how do I make the images (from the movies) link to another html page without resizing or removing the hover?

@nizamuddinkhan7408 Год назад

you can use anchor tag and place image inside it so it will act as a link to another html page.

@ishan1127 2 года назад

Brother can you tell us how to add scroll buttons(arrows) on left and right sides. So that we can navigate the movies.

@FutureCoders 2 года назад

You can use swiper for adding scroll arrows. Search for swiper they have an easy documentation.

@gamerspk5425 Год назад

How do I link to another html page when clicking on the series to go to a page of the clicked series itself ????????

@FutureCoders Год назад

For that to work. you need to specify an id for each series. so when you click on that series. you can navigate to that series page

@ciprianmoldovan Год назад

How can I link pages to the film images?

@FutureCoders Год назад

just wrap an achor tag around img tag

@ciprianmoldovan Год назад

@@FutureCoders it messes the image class

@FutureCoders Год назад

Try this.. This will work

@emmanuellakosyogbu966 2 года назад

Please the last phase where the script was introduced seems not to working , I want to know what I may be doing wrong

@FutureCoders 2 года назад

compare your script with mine. If still facing problem. Paste here your code which is inside script. Will take a look.

@h2ogilly138 2 года назад

were are the images

@35_pranotisarjoshi_2b6 11 месяцев назад

Sir image got so small after linking CSS .... Not even visible

@apej 2 года назад

I got a problem with the styling, the buttons length is almost like the whole page . Even tho i followed everthing carefully i still got this problem and when i move my mouse to the buttons there is no hovee or anything

@shreya3429 2 года назад

Even I am facing the same problem. Did you find some solution?

@magedabdulaziz3467 Год назад

check the classes again

@sprita8114 Год назад

the black navigation bar isnt working for me i followed and recopied the same code

@FutureCoders Год назад

console log something in js file when we trigger the scroll functionality

@shehryaransari8353 4 месяца назад

sir apny sarri images nhi dea hn jitne apny use kiyen hn isme sir please ap sarri images ka link send kr den please sir

@hefshineganeshkamble6364 10 месяцев назад

i code same as like u but u r output and my output will be different

@h2ogilly138 2 года назад

pls were are the images in the discribtion box

@FutureCoders 2 года назад

Just Added Them! Check Description box again

@h2ogilly138 2 года назад

@@FutureCoders thnx

@User74773 2 года назад

29:22

@sonaldeepkaur9063 2 года назад

Bro can we import our images??

@FutureCoders 2 года назад

Yes u can use your own images

@RAJ-xp9tp 9 месяцев назад

the display :flex not working .the images are still vertical

@kodiallen3 9 месяцев назад

same here

@kodiallen3 9 месяцев назад

I just figured it out! make sure in the selector you are using "posters" not "poster" i was just forgetting the "s" simple typo

@user-fd2jz6sg1o Год назад

how to make it responsive ?

@sunshinebernardo530 2 года назад

the gradient isn't working to me, i checked your coding and my coding a lot of times but it's still not working, can you pls help me?

@FutureCoders 2 года назад

check whether u have selected the correct element for the gradient. .banner--fadeBottom { margin-top: 145px; height: 7.4rem; background-image: linear-gradient(180deg, transparent, rgba(37, 37, 37, 0.61), #111); }

@arontapolcai2937 Год назад

try writing fadebottom in lower case. It helped me

@yasaratalay6137 2 года назад

Can you make it with boostrap 4 please :)

@FutureCoders 2 года назад

Yes! Will Do

@yasaratalay6137 2 года назад

@@FutureCoders I'm try to make with bootstrap 4 now :)

@sonaldeepkaur9063 2 года назад

My css is not connecting to HTML please help

@FutureCoders 2 года назад

Check if your css file is in same file as index.html file. Also check if you have spelled name of the css file correctly

@letranhieu1109 2 года назад

I can't scroll on posters

@FutureCoders 2 года назад

hold shift to scroll horizontal

@sharmilaojha4146 2 года назад

Sir am getting some problems..can you help me please 🥺🥺🥺..

@sharmilaojha4146 2 года назад

Please reply sir

@FutureCoders 2 года назад

What Problem You facing?

@its_shinde96k 2 года назад

Free chalta hai kya

@SoniInterio Год назад

How to public website like this?

@FutureCoders Год назад

You mean how to host the website?

@SoniInterio Год назад

@@FutureCoders yes

@FutureCoders Год назад

You can use github pages, netlify to host it for free

@gurupritsingh3991 Год назад

Hello Sir @FutureCoders The below property is not working. i mean after scroll bar is hidden, it is not moving. Please assist me with this .poster::-webkit-scrollbar{ display: none; } thanks

@FutureCoders Год назад

it should be applied to the row__posters which is the parent which contains all the posters

@albertambila9868 2 года назад

Hi I need your services

@GauravKumar-ue7nz 2 года назад

If you have Html Css works, I can do it fast and with quality for you.

@raginisachan9550 3 года назад

Bro this is only front end build back end too

@FutureCoders 3 года назад

Yes it's an HTML and CSS tutorial. Backend tutorial coming soon

@raginisachan9550 3 года назад

@dendyarwana5498 2 года назад

@@FutureCoders Hi sir, Yeah! can wait full clone netflix from zero to online and im done buy ur Source Code Good.. btw u have contact i can sharing.. i need input for make streaming website like netflix thanks sir