Create an Awesome Full Screen Navigation with Pure HTML & CSS
Embark on a web design journey with this HTML CSS tutorial on creating a full-screen, split-column navigation that smoothly slides down. Learn how to create a modern and stylish full-page navigation menu, from creating a full-page grid layout to adding vibrant background images. Explore the power of the ':has()' pseudo-class selector, and discover how to elegantly expand and shrink columns on mouseover.
In this tutorial, we'll cover the essentials, including building a full-page navigation menu with HTML and CSS, creating a full-screen layout, and incorporating animations for a captivating user interface. Subscribe for more exciting tutorials and let's elevate our web design game together!
Live Demo: https://codepen.io/optimisticweb/pen/...
Chapters
-----------------------------------------------------
00:00 Intro
00:32 HTML markup for the full-screen navigation
00:59 CSS for the full-page navigation
02:17 Animate the navigation
02:43 Expand column on hover
Subscribe and never miss a beat
-----------------------------------------------------
🔔 Subscribe for more videos like this: https://www.youtube.com/@OptimisticWe...
Learn at your own pace
-----------------------------------------------------
Learn HTML - • Learn HTML to Build Modern Websites
Learn CSS - • Level Up Your CSS Skills
Learn JavaScript - • JavaScript
Connect, share, and grow
-----------------------------------------------------
YouTube: / @optimisticweb
X (Twitter): / optimisticweb
Instagram: / optimisticweb
Facebook: / optimisticweb
CodePen: https://codepen.io/optimisticweb
#css #navigation #webdesign #cssmagic #uxdesign #cssnavigation #csstutorial #html #cssforbeginners #webdevtutorial #learncss #optimisticweb
On this page of the site you can watch the video online Create an Awesome Full Screen Navigation with Pure HTML & CSS with a duration of hours minute second in good quality, which was uploaded by the user Optimistic Web 25 January 2024, share the link with friends and acquaintances, this video has already been watched 4,531 times on youtube and it was liked by 236 viewers. Enjoy your viewing!
