- Видео 18
- Просмотров 2 370
Techify Studio
Индия
Добавлен 24 апр 2023
Day 1 of Making Hero Sections | Practice HTML CSS javaScript | Simple Hero Section #htmlcss
🎥 Hi There, RUclips Community! 🎉
In this video, I have created a Simple Hero Section Design using Vanilla HTML & CSS (No JavaScript for now 🚫). The design is simple yet sleek, inspired by the Figma Community 🎨.
✅ No Copyright Images: All assets are downloaded from Pexels 📸
💻 What You'll Learn:
- Step-by-step coding of a Hero Section with a modern layout 💡
- Heading-Subheading-Button format 🖋️
- Flexbox layout using eye-catching images 🎭
- Media Queries to make the layout responsive 📱
📦 Assets & Source Code:
Clone the repo by entering this in your terminal: git clone github.com/frizzflicks/l2
Find the source code and assets here: github.com/frizzflicks/l2
This tutorial is perfect for begin...
In this video, I have created a Simple Hero Section Design using Vanilla HTML & CSS (No JavaScript for now 🚫). The design is simple yet sleek, inspired by the Figma Community 🎨.
✅ No Copyright Images: All assets are downloaded from Pexels 📸
💻 What You'll Learn:
- Step-by-step coding of a Hero Section with a modern layout 💡
- Heading-Subheading-Button format 🖋️
- Flexbox layout using eye-catching images 🎭
- Media Queries to make the layout responsive 📱
📦 Assets & Source Code:
Clone the repo by entering this in your terminal: git clone github.com/frizzflicks/l2
Find the source code and assets here: github.com/frizzflicks/l2
This tutorial is perfect for begin...
Просмотров: 61
Видео
✨ Add Show-on-Scroll Animation to Your Website | HTML, CSS & JS Tutorial | step-by-step 🚀
Просмотров 24714 дней назад
"Bring your website to life with stunning show-on-scroll animations! 🌟 In this tutorial, I'll guide you step-by-step on how to create a dynamic scrolling effect using HTML, CSS, and JavaScript. Learn how to make your content appear smoothly as users scroll down. Perfect for adding that extra magic touch to your projects! 🎉 📚 What you'll learn: ✅ Setting up your HTML & CSS structure ✅ Writing Ja...
Portfolio Website Part 3 | Modern Portfolio Website Stunning Services Cards Design #interactivecards
Просмотров 7821 день назад
🚀 Modern Portfolio Website: Stunning Services Cards Section 🎨✨ This tutorial showcases how to create a sleek Services Section using HTML & CSS -perfect for portfolios and business websites! 🌟 🎥 Watch Part 1: ruclips.net/video/VucypZx_NtM/видео.html 🔥 Key Design Highlights: - 🕒 0:00 - Introduction - 🛠️ 0:37 - Writing HTML - 🎨 2:43 - Writing CSS - 🖼️ 3:57 - Designing Cards - ✨ 6:53 - Adding Hover...
📜 Dynamic Scroll Effects | CSS Gradient Effects | Animated Web Backgrounds #html #css #javascript 🚀
Просмотров 22521 день назад
🌟 Dynamic Scrolling Effect with Stunning Gradient Background 🌟 JavaScript Scroll Effects Animated Web Backgrounds In this tutorial, we'll create a mesmerizing scroll animation effect using HTML, CSS, and JavaScript. Watch as the gradient background and reveal mask interact to reveal the bold "MISSISSIPPI" text in style. Plus, enjoy the glowing text shadow effect that activates when you reach th...
Portfolio Website Part 2 | About Section using HTML & CSS
Просмотров 77Месяц назад
In this tutorial, you'll learn how to create a sleek and modern "about me" section for your portfolio website using html and CSS. we’ll guide you step-by-step through building a professional two-column layout with custom fonts, interactive hover effects, and responsive design. by the end, you'll have an eye-catching section to showcase your profile with style and elegance. perfect for web devel...
Portfolio Website Part 1 | Hero Section using HTML, CSS and JS
Просмотров 143Месяц назад
This is a modern portfolio website featuring a responsive design. It includes a hero section with a full-page background image and a prominent navigation bar. The navigation bar is styled flexibly and adjusts to screen sizes, offering a toggle menu for smaller devices. The page's hero section showcases a centered profile card with a circular image, a bold name in tomato color, and a short descr...
Flexbox Cards using JavaScript & CSS | Cool Hover Effects | Tutorial | #hovereffect
Просмотров 192Месяц назад
In this tutorial, we’ll create an amazing interactive card layout using HTML, CSS, and JavaScript! 🌟 You'll learn how to: ✅ Use Flexbox for a responsive layout. ✅ Add hover effects to make your cards dynamic and engaging. ✅ Implement JavaScript to create interactive animations and transitions. ✅ Style your cards with filters, transitions, and custom fonts for a modern UI. Follow along as we div...
SweetAlert2 | Replace Traditional JavaScript Alerts | Easy For Beginners #sweetalert2
Просмотров 128Месяц назад
In this video, you'll learn how to integrate SweetAlert2 into your web applications with practical examples and creative use cases. We demonstrate how to Replace Traditional JavaScript Alerts, confirmations, and prompts with beautiful, customizable, and modern modal popups. Here's what you'll see: Using SweetAlert2 for success messages when forms are submitted. Adding interactive confirmation m...
CSS Button Effects Animation Design | Beginner-Friendly Tutorial | #webdev #html #css
Просмотров 143Месяц назад
Ready to make your buttons stand out? In this video, we explore 10 unique button designs created with just HTML and CSS. From simple outlines to advanced hover animations, this tutorial covers everything you need to craft beautiful, interactive buttons for your projects. 📌 Chapters: 0:00 - Introduction 0:30 - Setting up HTML structure 1:33 - Writing basic CSS 2:38 - Designing an outline button ...
Build a Beautiful and Responsive Hero Section From Scratch | HTML & CSS #webdevelopment #html #css
Просмотров 125Месяц назад
"Want to Build a Beautiful and Responsive Hero Section From Scratch? In this tutorial, we'll guide you through the entire process step-by-step! 🚀" You'll learn: How to set up a clean HTML structure. Writing modern CSS to style your page beautifully. Adding hover effects and responsive design. Tips to make your hero section stand out! This video is perfect for beginners and those looking to poli...
Create an Animated & Responsive Navigation Bar with HTML, CSS, & JavaScript! #navbar #codinglife
Просмотров 4016 месяцев назад
🌟 Create an Animated & Responsive Navigation Bar with HTML, CSS, & JavaScript! 🚀 Ready to level up your web development skills? In this step-by-step tutorial, you'll learn how to build a stunning, responsive navigation bar complete with smooth animations and an interactive hamburger menu! 🖥️✨ Perfect for beginners and anyone looking to add a professional touch to their projects. 🔎 What You'll L...
HTML & CSS Stunning Responsive Login Page | Step-by-Step Tutorial for Beginner | for Beginners
Просмотров 2826 месяцев назад
Welcome to our web development tutorial! 🎉 In this video, you'll learn how to design a modern and responsive login page using HTML and CSS. Perfect for beginners or anyone looking to sharpen their front-end development skills! 🔹 What You’ll Learn: How to build the HTML structure for a login page 🖋️ Adding CSS styles for a sleek, professional design 🎨 Using Google Fonts like Roboto and Montserra...
Add 3D-Rotation Effects to cards | HTML & CSS Only
Просмотров 436 месяцев назад
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...
Animate On Scroll using javaScript | HTML, CSS, and javaScript
Просмотров 717 месяцев назад
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...
Responsive Navigation Bar | HTML, CSS, and JavaScript
Просмотров 707 месяцев назад
Responsive Navigation Bar | HTML, CSS, and JavaScript
My First Logo Designed using Inkscape! (Part-2)
Просмотров 217 месяцев назад
My First Logo Designed using Inkscape! (Part-2)
My First Logo Designed using Inkscape! (Part-1)
Просмотров 237 месяцев назад
My First Logo Designed using Inkscape! (Part-1)
Thankyou for such good content
Glad you enjoy it!
Keep going
Link to code and assets: github.com/frizzflicks/infinite-car
Thumbnails day by day are becoming great 👍🏻
@@_itskaurbtw thanks 😊
Code Repo: github.com/frizzflicks/portfolio-3
Keep bringing new content 😊
@@Btsblackpink_armylink sure!
Incredible 😊
@@_itskaurbtw thankyou 😁
Keep making videos 📸
@@_itskaurbtw i will😁!
code: github.com/frizzflicks/scroll-animation
Thankyou for sharing such informative video
😁😊
github repo: github.com/frizzflicks/Portfolio-2
Keep going 😊
Sure 😊
Link to repo: github.com/frizzflicks/portfolio
link to code and assets: github.com/frizzflicks/Cards
Thankyou for video
Most welcome
Detailed 😊
I try
Intro was really good ❤
Thanks a lot!
Informative video
Thx!!
include at the end of body <script src="cdn.jsdelivr.net/npm/sweetalert2@11"></script>
link to docs: sweetalert2.github.io/
nice vid my guy!
Glad you enjoyed
Keep going.
Link to Code Repo: github.com/frizzflicks/Buttons
Neishiiiii 😂😂
Nice editing nd music sir 🎉🎉❤😂😂 m a big fan
Thanks 😅
Lol it is still not working dude
Link to repo: github.com/frizzflicks/Landing-Page_Hero
Thankyou for video
Most welcome
Hoi
Nice video
Thanks
Hoi
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!
Otey
(If link is not working, find on my channel) ruclips.net/video/21pBQFAT8Z8/видео.html Link to code-along
Lol
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