Responsive Landing Page Using HTML & CSS & JavaScript | Step By Step Web Design Tutorial

Responsive Landing Page Using HTML & CSS & JavaScript | Step By Step Web Design Tutorial (2021)

In today's video, we're going to build this awesome landing page with this beautiful design using only HTML and CSS, we're also gonna use vanilla Javascript to create light mode and dark mode switching option on the landing page, we're going to take the theme toggle to the next level by creating an awesome overlay animation around the theme switch. Not only that, we're also going to see how we can make this landing page completely responsive on any device, so it stays responsive no matter what the size of the device is. Now all of this leads to a really fun project that covers a bunch of css technologies ( variables, flexbox, grid... ), and also a lot of Javascript concepts ( arrow functions, cloneNode, appendChild ... )

Now if you find this video valuable, please make sure to leave a like, and subscribe to the channel, this is the best way you can support me to make more videos like this.
Also, click on the bell icon to turn on notifications. This way you'll be notified the moment new videos are uploaded.

👇 Timestamps:
0:00 - Intro
0:48 - Setup
1:33 - Navbar
15:21 - Showcase Area
22:59 - Styling The Toggle Button
26:43 - Light/Dark Theme Toggle Effect
44:55 - Responsiveness
56:06 - Outro

[darthlinox]

Perfeito, aula simples, direta e extremamente muito bem explicada, melhor aula na plataforma YT. Parabéns ao professor!!!!

[cyanofreeze]

This guy is really doing an excellent job in uploading quality content related to coding....Love you up the good work!!

[laguiacr]

I don't use to comment, but your job is really, reallly great! I will donate. No matter how much I give you, it will never be enough to pay all your amazing knowledge, but something from anyone of us will help to keep your work

[hackerprime]

Much love from Jamaica. This is really eye catching.

[momakplayz]

Hey coder, if you dont mind how old are you for having this amazing talent. I am really impressed with this video.

[thabosiphiwemngoma]

This was an amazing video eyy. Tons of CSS nuggets thrown in there. Keep up the good content man. I just hit the subscribe button for you. Sharp

[CodingFire]

The UI the UI bro this is so beautiful! 😊. Mind BLASTING! 🌟

[junipernd]

dude I just love you channel, a new sub, keep it up!

[AjayKumar-lvep]

thanks man you saved my time God bless you. And keep doing that. love you

[xXJuniorNguyenXx]

Detail, easy to understand. The best video for beginner

[Ummvlog]

This was one of the best tutorials! You did great at breaking everything down.

[ShivamMishra-noss]

bro your content and teaching skills always help me to grow. Thank you for your efforts and videos♥♥♥

[ovieolori]

I had to stop watching midway to drop a comment. You are incredibly good at this and you definitely up there as one of the best.

[sriram-znic]

When a video uploaded in true codeer I am like this 💨🏎️

[ranmilowodaini]

This video is awesome, I learn alot from it. Thank you are truly a "True Coder"

[makaithedev]

Wow the dark mode animation effect is awesome.

[Satisfiyworldmicrojob]

Bro everyone only shows the video of user dashboard with html and css. But no one shows how to create an admin panel. You can create a fully responsive microjob website admin panel as well as user panel. A lot can be learned from one video. Made part by part. Thanks for watching all your videos, I have become your fan myself. 💘💘💘💘

[bosscoding]

nice video I like that you are turning into cool modern works

[momakplayz]

Loved it, liked and subscribed! I love the talent you have, please teach JavaScript too.

[Buriza]

Thank you for this easy-to-understand and very well-explained video, I subscribed right away ^^, more videos like this brother!