- 8
- 855
FrizzFlicks
India
Registrace 24. 04. 2023
Build Animated Responsive Hamburger Navbar with HTML, CSS & JavaScript
In this tutorial, you'll learn how to create a beautiful and responsive navigation bar using HTML, CSS, and JavaScript. Follow along as we go through the entire process, from setting up the file structure to adding animations. Perfect for beginners and those looking to enhance their web development skills!
Chapters:
00:00 - Introduction
00:24 - Creating file structure
00:25 - Installing Live Server
01:24 - Objectives
01:51 - Writing HTML
03:11 - Writing CSS
04:18 - Finding a cool font (Google Fonts)
06:31 - Adding basic hover effects to buttons
07:46 - Finding a background
11:02 - Adding blur in the backdrop
11:23 - Adding more hover effects
13:30 - Adding responsiveness and hamburger
14:44 - Adding JS for responsiveness and interactivity for hamburger icon
15:41 - Adding animations
22:00 - Final touches
If you find this video helpful, please like, comment, and subscribe for more tutorials!
Chapters:
00:00 - Introduction
00:24 - Creating file structure
00:25 - Installing Live Server
01:24 - Objectives
01:51 - Writing HTML
03:11 - Writing CSS
04:18 - Finding a cool font (Google Fonts)
06:31 - Adding basic hover effects to buttons
07:46 - Finding a background
11:02 - Adding blur in the backdrop
11:23 - Adding more hover effects
13:30 - Adding responsiveness and hamburger
14:44 - Adding JS for responsiveness and interactivity for hamburger icon
15:41 - Adding animations
22:00 - Final touches
If you find this video helpful, please like, comment, and subscribe for more tutorials!
zhlédnutí: 351
Video
Create a Login Page Layout with HTML & CSS - Step by Step
zhlédnutí 261Před 2 měsíci
Welcome to our latest web development tutorial! In this video, we’ll guide you through the process of creating an eye-catching login page using HTML and CSS. We’ll cover everything from the initial HTML setup to advanced styling techniques. 🔹 What You’ll Learn: - Building the HTML structure for a login page - Applying CSS for modern, stylish design - Incorporating Google Fonts for enhanced typo...
Add 3D-Rotation Effects
zhlédnutí 39Před 2 měsíci
Welcome to our in-depth tutorial on creating a stylish card layout using CSS variables, flexbox, and grid! In this video, you’ll learn how to design a responsive and interactive card layout that you can use in your projects. We’ll cover everything from setting up the HTML structure to adding advanced CSS effects. Timestamps: Intro: 0:00 Get an overview of what we'll be building in this tutorial...
Adding Show on Scroll On any page using Javascript and CSS
zhlédnutí 65Před 2 měsíci
In this video, we’ll create a animated responsive hero section from scratch! We’ll use HTML, CSS, and the Intersection Observer API to bring the hero section to life with stunning animations and a responsive design. 🔹 What We’ll Cover: Setting up the project with HTML and CSS Using Coolors for color palette creation Adding a beautiful background image from Pexels Implementing Intersection Obser...
Create a Modern Responsive Navbar with HTML, CSS, and JavaScript
zhlédnutí 66Před 2 měsíci
Welcome to my web development tutorial! In this video, I'll show you how to create a sleek, responsive navigation bar using HTML, CSS, and JavaScript. Whether you're a beginner or looking to polish your skills, this step-by-step guide will help you build a navbar that adapts beautifully to different screen sizes. What You'll Learn: - Structuring your navbar with semantic HTML - Styling your nav...
My First Logo Designed using Inkscape! (Part-2)
zhlédnutí 17Před 2 měsíci
This video was made with Clipchamp. It is an open-source software for seamless experience in video-editing offered by Microsoft. I am pleased to bring this stupid video as a starter of my graphics designer and web-development career on CZcams. If you find it interesting, do like and share this video and if you are new to this channel, subscribe for updates!
My First Logo Designed using Inkscape! (Part-1)
zhlédnutí 18Před 2 měsíci
This video was made with Clipchamp. It is an open-source software for seamless experience in video-editing offered by Microsoft. I am pleased to bring this stupid video as a starter of my graphics designer and web-development career on CZcams. If you find it interesting, do like and share this video and if you are new to this channel, subscribe for updates!
you sign language?
@@ShivamKumar-rz7uv not really 😁😁
Amazing 🎉
Thank-you your comment motivates me!
Nice 👍
github.com/frizzflicks/Navbar-2 link to code repository!
Valuable content 😊😊😊😊...Thank you bro...
My first comment which it is too good! Thanks a lot 🙏❤️
Link to Repo: github.com/frizzflicks/login Link to codepen: codepen.io/Taranveer-Singh/pen/ZEdEJBL?editors=1100
github.com/frizzflicks/cards-1 Link to code repo!
(If link is not working, find on my channel) czcams.com/video/21pBQFAT8Z8/video.html Link to code-along
Find another similar example at github.com/frizzflicks/hero-section-1 It also contains the font used! It is deployed at frizzflicks.github.io/hero-section-1/
github.com/frizzflicks/navbar Code repo
www.google.com/url?sa=t&source=web&rct=j&opi=89978449&url=befonts.com/deacon-font-family.html&ved=2ahUKEwjy08nQkIOHAxVXRmwGHY9-BawQFnoECBUQAQ&usg=AOvVaw37QlFnE_CJhd3-6Fmvgk9h this is the link for fonts. Coolors: coolors.co Pexels: www.pexels.com Intersection Observer API Docs: developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API Google Fonts - Poppins: fonts.google.com/specimen/Poppins