Create a Split Landing Page With HTML, CSS & JS 

Without you new years won't be right. Thanks.

Great tut, dude :) Another option is to use Grid & Flexbox, if anyone is interested: .grid-container { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 100vh; } .left, .right { display: flex; justify-content: center; align-items: center; }

Everytime i learn something new from your tutorials does help me a lot... I wish you Happy New Year 2018.

Most excellent tut. Loving the amount of really talented coders on YT that give really well put together tuts that help noobies understand 100%

I really appreciate that you don't cut out those little spelling mistakes, so we can also see a bit of your debugging process! And it also makes me feel better when I spend 30 minutes or more looking for a single character mistake ahah

Hey, just stopping by to say thanks for the quality content that you create Brad, you got me into web development, and I love it ! One thing that I'd like to note for this particular video, which worked pretty well for me, is that, instead of using "position:absolute" and to center all the "items" in the split one by one using precentages, I'd suggest to use "display: flex, flex-direction: column; justify-content: center, align-items: center", and that way, no matter how big the browser window is, they remain at the CENTER of their container (in this case, the split) :D Found it more useful that way, while I was making a split landing page where I had a title, button(link) and a logo underneath, so I had to use a lot of positioning while using absolute, and with display:flex, is way easier ! Keep up the good work, cheers !

Good video to begin the new year. Simple yet involving all the essentials.

From learning through your channel i just made this page on my own using flexbox . Thank you.

This is what i expected, thank you so much brad

Awesome work! Just looked for something like this!

I will make my Patreon donation to you soon . Im grateful for your tutorials. Great teacher you are!

Amazing How fluid you code, hope to reach that level soon! Congratulations!

this is sweet. I used your client panel app from udemy and extended that in to a full functional app for myself. Will take this and add this add the landing page and use some angular transitions also. Thanks a ton. Working on another app and using the mean stack but this is a great idea for a landing page as soon as I finish I'll post a link.

The best web development teacher i have ever seen.

Brad this was the first project I ever did that used JS. I loved this Tutorial so much I got both your JS and Angular Udemy course and I hope to finish the JS course this week. Thanks from a CodeNewb.

Thank you for all the great informative videos Brad!

Thank you so much Brad! You really inspire me to become a web-developer. Greetings from Guatemala :)

I have learned a lot from this video. Thanks Brad.

Great stuff as always, Brad. Love the idea. To anyone following this, consider using a click event, rather than the hover pseudo-class, for mobile devices with smaller screens.

Happy New Year Brad.Thanks for this

Thank you for these amazing videos, Traversy Media. Keep it up! Forever grateful!

Really cool front end code! I'm going to add on to this to see how far I can go with it and share.

18:10 you can select the text using select all (CTRL + A)

Very nice design and idea. Tried it on an Ipad mini - if you tab on the button the field moves and there is no way to get it back to work but refresh. Just something to keep in mind for those that want to use this idea for themselves. Love your work, Brad, btw.

For all of you wondering why he used JS instead of just using :hover in order to resize the divs when hovering over one of them, That's because :hover doesn't allow you to change other elements, unless that element that you want to change comes after in the HTML. So you could make it work for the first div in the HTML, and change the other div that comes after it, but not the other way around. Which means it would only work for one div, either "split right" or "split left", whichever comes first in the HTML. Therefore the only solution is to use JS and play with the classes like he did.

Thanks, Brad!! You are the man!!

thank you ...your tutorial really helping me solve my problem

simple and professional, i like that :D

really love your tutorials Thanks a lot

very nice tuturial...i hope someday i could be someone like you

love the design

Great stuff Brad ;) Happy to learning from you !!! Keep it up ,man ;)

Cant wait to get to your level

WOW! So much goodies in here ...thank you! Your CSS Kung Fu sure delivers a heck-of-a-punch - ouch, ouch... !

Thank you for the video and Happy New Year!

This is awesome, but how would you add content into the left without it blowing out the code???

thanks for this tutorial .. i've uploaded it on my github page .. i'm only using vim but also with light-server npm package to refresh the browser every time I save

Looks awesome.

You are the best youtuber!!!

Dear Brad, thanks for the video. One suggestion! It could be better if the output on the browser can be seen on the right side while typing the code. So that we can see the result instantly what each line of CSS is doing. Please do it.

Thank you dear Colleague for this tutorial. And i wish you happy new year 2018. Greetings from Istanbul.

Thank you so much traversy media

Thank u Brad great video

Thanks for the video and spreading knowledge :)

spectacular tutorial

This was amazing!

Thanks a lot, Brad. You are my hero. How about a ".htaccess tutorial" ?

Nice work.

perfect.. thanks..

Great tut

Brad do you ever use a CSS Reset/Normalize? Thank you for another great tutorial!

on small screens i made them top and bottom so they will not cover each other, anyways really helpfull video and happy new year!

You are great man.. 😀

ERROR: Parsing error: The keyword 'const' is reserved const left = document.querySelector('.left');

didn't know you can do things like the 4:10 stuff with visual code, fuck I need to watch more of this stuff. Probably a much stronger tool than Sublime.

Thank you

Could you make a JS stepper form tutorial?

Brad, would you recommend the Normalize.css for media queries now? Or another way to not manually enter device sizes on the css code?

Thank u for this awesome video and happy new year .can u make full stack wep app with vuejs , express and mongodb

Thank you so much

Good Stuff man!

Awesome :) Thanks!

Always you are awesome sir!

How do you get the color box to appear next to your css code? I use the pigment package but i prefer the the color box next to your code instead of the background highlighting.

Awesome!

Hey traversy just wondering did u add on more pages or was that the finishing product

Thanks for the videos. The source code linked on this page is missing a couple lines to link the js and CSS files to the HTML file in case you wanted to update it.

thx, Brad!

Great video..I am not able to understand how adding z-index fades the other section. Could you please explain that?

Traversy Media will you ever do a tutorial on css with the difecault items like range number checkbox and radio inputs etc

AWESOME 👍👍

Awesome! :)

Hey, Brad! I followed your tutorial and made this: arisweedler.github.io/traversy-tutorials/split-landing-page/ It's contents are kinda an inside joke with my friends, but I wanted to share it with you anyway. Your creativity in CSS is always very inspiring, and I appreciate the high quality content. Thanks again, you're the man!

Please help me understand. I have a custom.js file which is all in a jQuery code. Can i add vanilla JavaScript to my custom jQuery code? Or should i create new js file and inklude it at the bottom of my html page? thanx!

When I use your code and run, the animation works. But after closing the page, if I re-run it again, there is no animation while hovering the mouse.

AWSOME man

Can you do a tutorial on Canvas element??? Please! :)

so im coding in notepad++ and for some reason my javascript not working in the css folder at all and i cant understand the why, non of the var or any refference to my jscript folder is rendering in my css page, they dont even high light like it does here, only thing lit up in my js file was the const and the mouseleave and mouse enter refferences, everything else are not highlight besides those, im nose bleed here

Is it ok if i use it for Sign In and Sign Up?

i don't know what happen but i cant access my img folder within css background: url() center center no-repeat but when i try to use https image it's show up ...ps : im just started learning things

How would you add some navbar to this? Are you willing to share with us? Thanks

Greetings from Siberia! Thank u so much for the video! My style.css and main.js files aren't loading on VS Code liveserver. I use Google Chrome and when in Console-Network, these files are blocked (Status: blocked: other) These resources are local and Chrome isn't allowed to load them. What might be the reason?

Hi, how about the mobile devices we don't have hover for mobile devices right. is there an alternative for that?

Is it possible to make something like this work of word press?

Thank u so much.....):

Noticed on mobile when click a button on one side you can't click the button on the other side making the user having to refresh the page if they clicked the wrong button?

does anyone have any advice on how i can turn them vertically so one is on top and one at the bottom, when the screen size gets too small?

Good tutorial! But for my doesn't work with ie11. With the other browser no problem. Help my please

Brad I would like to know what is your point about WebAssembly ? How It can be used in webapps and if it can be really worth for a webdeveloper to learn it. Thanks Greatings from your best Brazilian fan Vinicius

You could have done the whole thing a lot easier and with less code by just using flexbox and flexible width for the containers, then override the percentages on hover. You don't even need JavaScript for this.

please respond why i am getting ESlint error even i can use left in js because it says reserve etc i have copied your same code but it still says same :(

first to view first to comment. Thank u Brad for The Video

HI, does this page work in phone , tab or anything without cursor. if do how so????Please help

I have a basic question. What do you think about visual studio code? It looks pretty good, i might try it :)

document.querySelector in the js file is returning null value . what should i do?

is there any way i could use a dragging option in run time

how to add esversion: 6 in visual code...jsHint gives me the error at const and => (arrow function) help me please

Sr. can i use this as a nav bar. BTW Happy New Year!

Can you re-encode horizontally for mobile view.

Maybe you have a start template for html/css/js on Github?