How to design a Responsive Template for eLearning Website using HTML CSS & JS | Part 1 | Geekboots

In this video I'll design the header and banner part of a eLearning website template using HTML, CSS and JavaScript. Here, you'll mainly learn to create a nav with underline effect and a animated search bar.

Live Preview
https://web-graphiz.github.io/educourse/

Professional vector art at https://webgraphiz.com/vector-art

Menu with underline effect - Shorts
https://youtu.be/ZRfUDarGWqw

Animated search bar - Shorts
https://youtu.be/nXLivmroOQA

Follow Us On:
Instagram: https://www.instagram.com/geekboots/
Twitter: https://twitter.com/geekboots/
Pinterest: https://pinterest.com/geekboots
Telegram: https://t.me/GeekbootsOfficial

Chapters
00:00 - Introduction
00:50 - Header Structure in HTML
01:38 - Initial CSS Declarations
02:17 - Header Decoration in CSS
03:23 - Main Menu Underline Effect
04:04 - Icon Menu Design
05:34 - Banner Structure in HTML
06:12 - Banner Decoration in CSS
07:04 - Animated Search Bar
11:54 - Final Result



#csstutorial #css #webdesign #templatedesign #elearning #htmltutorial