Creating an Animated & Responsive Movie Website Landing Page | HTML, CSS & javaScript, Carousel

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

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

50% 1

In this exciting video, I'll show you how to create a cinematic marvel - an animated and responsive movie website landing page. Join me as I dive into the world of HTML, CSS, and JavaScript to craft a visually stunning and interactive web experience for movie enthusiasts.
Throughout the video, I'll guide you step-by-step through the coding process, demonstrating how to bring the landing page to life with captivating animations and seamless responsiveness. From eye-catching movie posters carousel to dynamic hover effects, video modal and smooth transitions, you'll learn how to create a movie website that leaves a lasting impression on your audience.
Whether you're a beginner or an experienced developer, this tutorial offers valuable insights and practical examples to help you elevate your frontend design skills. Unleash your creativity and immerse yourself in the art of crafting an animated and responsive movie website landing page.
🆙 Subscribe Now!
/ @dstudiotechnology
💚 Get the source code here:
1. www.buymeacoffee.com/dstudiot...
💙 Get the source code by PayPal:
2. ko-fi.com/s/452d2cf914
📢 Project Difficulty (1 - 5 Stars):
⭐️⭐️⭐️
⚡️ Key features:
- responsive website landing page
- responsive landing page html css javascript
- image carousel animation
- video modal
- background image animation
- content text animation
- modern movie genre
- glassy blur effect
🕒 Timecodes:
0:00 - Intro
1:50 - Setting up Project Environment
2:18 - HTML Coding (Header, Banner, Carousel, Modal)
07:35 - CSS Coding
30:20 - javaScript Coding
🎈 Images used in the video:
drive.google.com/drive/folder...
🔗 Links used in the video:
Google fonts: fonts.google.com/specimen/Pop...
Material Design: materializecss.com/getting-st...
Fontawesome: fontawesome.com/v4/
jQuery: releases.jquery.com/
👉 Related Videos:
React.js Project:
⚡️React.js | Crafting the Ultimate Cinema Movie Website with React.js
• 🚀 Master the Art of Re...
⚡️React.js | Building a Dynamic & Responsive Personal Profile Website using React.js
• ⚡️React Portfolio Webs...
🔥 React.js App | Creating a Dynamic Sports Car Website using React.js
Part 1: • 🔥 Master the Art of Re...
Complete Responsive Website:
1. Building an Animated & Responsive Fashion Ecommerce Website with HTML, CSS, and JavaScript
• Fashion Ecommerce Eleg...
2. Crafting an Animated & Responsive Restaurant Ecommerce Website | HTML, CSS, JavaScript & Bootstrap
• Dynamic Restaurant Web...
3. Crafting an Arts Museum Ecommerce Responsive Website using HTML, CSS, JavaScript and Bootstrap
• Artful Museum Ecommerc...
4. Building a Wedding Agency Animated & Responsive Website with HTML, CSS, JavaScript, and Bootstrap
• Elegant Wedding Websit...
✅ Creative and Responsive Website Landing Page:
• Responsive Website Lan...
DStudio Technology
-----------------------------------------------------------------------------------------------------------------------
#webdesign #css #html #javascript
-----------------------------------------------------------------------------------------------------------------------
Disclaimer: video is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favour of fair use.

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

29 июн 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@funboy2154 День назад

Thanks Bro just now I am learning css your video helps me to learn more and more

@DStudioTechnology 8 часов назад

It's my pleasure

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

You have the best tutorials ever! Easy to understand and even more to follow. Now I'm addicted to all your projects 😆 Thanks for your amazing work 👍

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

Thank you so much for your kind words! I'm thrilled to hear that you're enjoying my tutorials and finding them easy to follow. It's wonderful to know that my projects have sparked your interest and enthusiasm. Your support means a lot to me! Keep up the great work and happy crafting! 👍😊

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

Wow! 😊

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

vera level bro 🥰

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

heavy ❤

@mutofytech6193 2 месяца назад

This amazing ❤

@lvovich_biz 2 месяца назад

It is great🎉

@janiosouza759 Месяц назад

Acabou de ganhar mais um escrito no canal.🇧🇷🇧🇷🇧🇷

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

Hi everyone, I put the image source in the description, you could download them if you like to code along~ Images used in the video: drive.google.com/drive/folders/1acLszq2fWG4icbcFJ9lRH4qxaLdeOkSl?usp=sharing

@SmartIncomeHQ Месяц назад

Sir can this website be approved by adsense ? if so Can u make a tutorial on how to link the website to adsense and be able to place ad break on the movies.... I'll be waiting for your reply sir..

@easywebsolution7044 3 месяца назад

Great Carousel Slider. I tried and it work fine. Thanks.

@DStudioTechnology 3 месяца назад

Great to hear!

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

Wow nice project. Thanks a lot.

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

Glad you like it!

@SasiKumar-be1yq 3 месяца назад

Nice and wonderful tutorial ❣️💫

@DStudioTechnology 3 месяца назад

Thank you! Cheers!

@ai-bloggers 2 месяца назад

Thank you very much. Very cool!

@DStudioTechnology 2 месяца назад

Glad you liked it!

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

Nice tutorial, would've love if it's complete.

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

Hey Bro, thanks for the support, you could check the complete movie web built by React.js here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-0mdjgQdQF1k.html

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

Amazing!!! Thanks!!

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

Glad you like it!

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

I think if you slowed this down it would be easier for me to follow along. I liked the project though. Good job!

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

fabulous bro

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

Thanks 🤗

@user-ec4wf3ms2z 9 месяцев назад

oh man thank you this is what i was looking for 😍

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

Glad you like it~

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

very nice bro!!👍👍👍👍👍

@DStudioTechnology 6 месяцев назад

Thank you! Cheers!

@Algoritimo-vg4sq 7 месяцев назад

Fantastic

@DStudioTechnology 7 месяцев назад

Thanks

@carlosarielhuampoplatero5914 3 месяца назад

Excellent tutorial, you are a genius brow... I followed all the steps and there is nowhere to get lost, excellent... but sorry you didn't include the responsive one, could you help me, please try to do it my way but I can't do it, please help me.

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

Super 😊

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

Thank you! Cheers!

@classicdrumpercussion1608 2 месяца назад

very beautiful

@DStudioTechnology 2 месяца назад

Thank you! Cheers!

@Lets_Yokoso 3 месяца назад

bro can you plz tell me what you did in last those classes you gave each content what are those for and how do i use forEach() function

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

I've just purchased your code, nice work! Is it possible to play a different video trailer for each movie?

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

Thanks for your support bro! Yes, there is way to do trailer for each movie, you need to prepare five trailer videos, and map the video data in html and javascript like how we map the movie description data in the content part, for example, giving each trailer video a class name that matches the movie name..., In the future videos, I will incur more advanced javaScript mapping functions to illustrate this, so keep watching and happy coding!

@henr2000 14 дней назад

great tutorial, I have a question is there any way you can use and embed video from youtube with ?

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

pls be continued this projects i really love this

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

Hi Bro, I did finalis the complete project but using React.js, because there are too many data mapping in the project. Check this out: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-0mdjgQdQF1k.html

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

Also, thanks a lot for the support~

@ogechiochonogor7078 5 месяцев назад

hi, i have an issue. when i introduce carousel to my code it displaces the positioning of the nav bar and search bar and i dont know why nor how to resolve it

@aliftawfiquealif Месяц назад

same bro

@aliftawfiquealif Месяц назад

Dude do this . search-bar input{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; color: #ffffff; background: transparent; border: 1px solid rgba(255,255,255,0.5); outline: none; border-radius: 4px; padding: 0 10px 0 45px !important;

@user-ys1ec1dc9g 29 дней назад

what is the title in javascript for? where is to elemet for title in html?

@ellenenriquez7282 3 месяца назад

Hi, How to edit or change the "watch trailer" videos for each movies? Btw i like your project!

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

how can i get dropdown header menu in this template please help me in that?

@mikhaildolgov 2 месяца назад

More )

@user-td7ks3rh7b 3 месяца назад

i have ever seen that like project on you tube yet. this is very informative project of landing page and i enjoyed the project,i have finished overall done in all project but i have some issue in this project actually movie name not matched with carousel anyone help me how could we fix that

@shadyhumourtv2503 7 месяцев назад

Im having trouble in doing exactly what you've just did. Once i put in the images to create fhe carousel on the right, it doesn't show at all but every other thing works...pls help.

@user-td7ks3rh7b 3 месяца назад

.banner .carousel-box{ position: relative; min-width: 950px; display: flex; justify-content: center; align-items: center;

@surge0613 Месяц назад

for some reason the other banners dont apear on mine blur square its wierd, i should go to sleep and see that tomorrow its 4 in the morning for me

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

I can't find the Asset

@jjjjj... 2 месяца назад

whats this scrolling effect type?

@user-fu9un9wb5x 8 месяцев назад

Do you know why jquery and cdnjs don't work?

@hellotehre 5 месяцев назад

same

@michaelpatrick777 3 месяца назад

It's cause the link expired

@frankysuper699 28 дней назад

do you have any new link ?

@Sir_Ojimaojo 2 месяца назад

I really appreciate... I am trying to clone it please can I get a link to videos in the asset used in the code i.e star.mp4

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

how to get your last copy paste js code

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

Plz make the same project using react and tailwind

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

Thanks for feedback, will try in the future project

@ghulamahmadabdillahroyan1867 14 дней назад

i have issue,when i code why home and search symbol didnt appear,i code same like u

@AbdO-qf2sk 9 месяцев назад

Bro please Why, when I click on the image, the background does not change? I think I wrote the codes by mistake. I did not understand their explanation. Is there a solution?

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

Hey bro, please double check if there are any potential typo in the code, for example, there could be missing period in the QuerySelector, or to see if the class name in the javaScript matches those in the html file~

@aniswatukhairani3729 6 месяцев назад

my carousel box position is below the movie info. how to make it in the rigt?

@devbyveritech 5 месяцев назад

Use .banner{ display: flex; justify-content: space-between; } it'll do the work

@Petrushev1000 Месяц назад

When scrolling through the slider and reaching Ariel's picture, the left column is lost. class active

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

Why don't the movies play?

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

we need audio explanation , step by step !

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

Sure bro, I realised that, so my recent videos are all with audio, check this out: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-0mdjgQdQF1k.html

@batuGF 6 месяцев назад

Wordpress kurulum istiyorum olmuyor help

@funvideosintelugu2775 5 месяцев назад

I want movies website with admin panel

@BatalhaDiRAP 3 месяца назад

Dude do you don't have the responsive part about this jobs ??

@user-jf9hc8ut5i 10 месяцев назад

bro where did you find cdn js link??

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

You mean the Carousel? here it is: materializecss.com/getting-started.html

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

How much you want to create one for me bro?

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

Hey Bro How do I convert Templates html to be a website ?

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

Hey bro! Converting HTML templates to a website generally involves: Organize Files: Arrange your HTML, CSS, JS, and media files. Link CSS/JS: Connect CSS/JS files to HTML using and . Adjust Paths: Update image paths in HTML/CSS. Add Pages: Duplicate and rename HTML for different pages. Navigation: Update links for menus. Forms: Set up a backend for form handling. Testing: Check site on different browsers. Responsive: Use media queries for different devices. Hosting: Get domain, web hosting, upload files. This is a basic overview. Depending on your template and requirements, additional steps might be needed. Good luck, and have fun creating your website! 😊🌐

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

Movie to movie my background image is not changing only black background is displayed and other text image paragraph is also not displayed how to fix this problem plzz help😢

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

Please double check if you have included your script.js file in your index.html

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

Okay everything is fine but it's is not responsive how to make it responsive plzz help🥺

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

Hey mate, good to know you have solved the problem, you could try @media (max-width: 600px) {}, to set up the responsive design, and adjust paddings and flex direction to make it look good on mobile~~

@user-jj9se4fo9o 10 месяцев назад

bro give a @media for all devices ,i have update how to give sepeate trailer for each movie

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

Hey bro, glad you did it, also check out ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-mlQbYMrhul0.html, it is about animated video bg~

@anshitasharma6415 7 месяцев назад

can u tell me how u give separate trailer for each movie

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

please my contents are not changing but the background is

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

Hey bro, pls double check if there are any typos

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

I want this template . How can I get it ?

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

Hi bro, source code links are in the description

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

Please try to create more landing page tutorial using html, css and js only.

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

Hey bro, thanks for the feedback, please check out more landing pages with html, css and js at: ru-vid.com/group/PLnICNFdxWbz6fo0vPGQl6bTNVmJbkZgM1

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

I writing code like u but it does not work .why?😢

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

Hey bro, Double check, if the script.js file has been included at the end of html, also see if there are any potential typos, or missing period in the queryselectors.

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

Oh sir,I found a mistake in the img title.THANK U SO MUCH.❤

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

No Responsive? Sir

@jihaskb2009 2 месяца назад

Can you please do a website using html and css only which is not responsive. I am currently in a need of that . Pleaseeeeeeee 🙂🙂🙂🙂

@harshitapanwar 27 дней назад

Sir actually I am facing a lot of issues. My background images doesn't change and also the video is not visible when i click watch button I also dm you on your Instagram id please help me

@NP-gz2jc 8 месяцев назад

Hi, I'm facing a problem in content and carousel box size and spacing between them... can you please help I even messaged in your Instagram account. I shared screenshots. please help😥😥this part 20:40

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

Hey bro, I didn't receive any message at my ins account. If you encounter issues of sizing, it's probably because the web page looks different on different size of screen. easy way is to adjust padding and margins to make it look properly.

@NP-gz2jc 8 месяцев назад

@@DStudioTechnology thank you. I will adjust padding and margins. Thanks again for this wonderful tutorial.