- 14
- 1 512
Techify Studio
India
เข้าร่วมเมื่อ 24 เม.ย. 2023
Portfolio Website Part 2 | About Section using HTML & CSS
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 developers and designers looking to enhance their skills or create a standout portfolio!
timestamps:
0:00 - intro
0:45 - HTML Structure
3:38 - Adding CSS
16:23 - Adding responsiveness
timestamps:
0:00 - intro
0:45 - HTML Structure
3:38 - Adding CSS
16:23 - Adding responsiveness
มุมมอง: 49
วีดีโอ
Portfolio Website Part 1 | Hero Section using HTML, CSS and JS
มุมมอง 8514 ชั่วโมงที่ผ่านมา
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
มุมมอง 10316 ชั่วโมงที่ผ่านมา
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 | Say Goodbye to Boring Alerts | Easy For Beginners #webdevelopment #sweetalert
มุมมอง 12016 ชั่วโมงที่ผ่านมา
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
มุมมอง 13014 วันที่ผ่านมา
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 ...
Hero Section | landing page | HTML & CSS | #webdevelopment #website #html
มุมมอง 11014 วันที่ผ่านมา
"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...
Animated Responsive Hamburger Navbar | Responsive Navbar | CSS Hover Effects | #HTML #CSS #js
มุมมอง 3845 หลายเดือนก่อน
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 CSS Animations. Perfect for beginners and those looking to enhance their web development skills! HTML, CSS & JavaScript Animated Responsive Hamburger Navbar! Chapters: 00:00 - Introd...
Create a Login Page Layout with HTML & CSS - Step by Step
มุมมอง 2815 หลายเดือนก่อน
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
มุมมอง 425 หลายเดือนก่อน
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
มุมมอง 686 หลายเดือนก่อน
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
มุมมอง 696 หลายเดือนก่อน
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)
มุมมอง 206 หลายเดือนก่อน
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 TH-cam. 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)
มุมมอง 236 หลายเดือนก่อน
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 TH-cam. If you find it interesting, do like and share this video and if you are new to this channel, subscribe for updates!
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
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) th-cam.com/video/21pBQFAT8Z8/w-d-xo.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