- Видео 195
- Просмотров 84 150
constGenius
Добавлен 17 июл 2023
Welcome to our web development channel! We offer high-quality tutorials and guides on various aspects of web development. From front-end technologies like HTML, CSS, and JavaScript (NextJS, React) to back-end frameworks and tools like Node.js, Express, and databases - we cover it all! Whether you're a beginner or an experienced developer looking to expand your skills, our content is designed to help you build modern and engaging web applications. Subscribe now to stay up-to-date with our latest web development tutorials and join our community of passionate learners. Let's code and create amazing web experiences together!
Progress Bar in Next.js 14 | Top Loader in Next.js 14
🚀 Ready to level up your web development skills with Next.js 14? Dive into this step-by-step tutorial and learn how to implement a sleek progress bar or top loader in your Next.js projects!
🔥 In this tutorial, you'll discover:
• Setting up Next.js 14 project with progress bar
• Implementing a customizable top loader for seamless user experience
• Styling the progress bar using CSS for a polished look
• Enhancing your Next.js apps with dynamic loading indicators
Whether you're a beginner or seasoned developer, this guide will walk you through creating a modern progress bar or top loader that enhances user interactions and adds polish to your Next.js applications.
🎉 Get ready to boost your coding ...
🔥 In this tutorial, you'll discover:
• Setting up Next.js 14 project with progress bar
• Implementing a customizable top loader for seamless user experience
• Styling the progress bar using CSS for a polished look
• Enhancing your Next.js apps with dynamic loading indicators
Whether you're a beginner or seasoned developer, this guide will walk you through creating a modern progress bar or top loader that enhances user interactions and adds polish to your Next.js applications.
🎉 Get ready to boost your coding ...
Просмотров: 66
Видео
Build and Deploy Modern Animated Portfolio Website | Next.js 14, Framer Motion, Tailwind CSS
Просмотров 7902 месяца назад
🚀 Welcome to the ultimate coding journey! Are you ready to elevate your web development skills and create a jaw-dropping portfolio website? 🎨 Look no further! In this step-by-step tutorial, we're diving deep into the world of modern web development with Next.js 14, Framer Motion, Tailwind CSS, and TypeScript. 📚 Materials/References: ⭐️ Github Code Repo (Give it a Star)⭐️: github.com/constgenius...
Build and Deploy a Fully Responsive Travel Website | Modern UI/UX Website | Next.js 14, Tailwind CSS
Просмотров 8352 месяца назад
🌍 Welcome to an exciting coding adventure where we'll be crafting a stunning travel website using cutting-edge technologies! 🚀 Join us in this step-by-step tutorial where we'll dive deep into building a fully responsive and visually captivating travel platform from scratch, powered by Next.js 14, Tailwind CSS, and TypeScript. 📚 Materials/References: ⭐️ Github Code Repo (Give it a Star)⭐️: githu...
Build and Deploy Figma Clone | First Video of Figma Clone in Hindi
Просмотров 8612 месяца назад
🎨 Ready to unleash your creativity and dive into the world of web development? Look no further! In this step-by-step tutorial, we'll guide you through building and deploying your very own Figma clone using Next.js 14, Tailwind CSS, and powerful tools like Liveblocks and Fabric.js. ⭐️Code Repo (Give it a Star)⭐️: github.com/constgenius/FigmaClone 🔥 In this tutorial, you'll learn: • Setting up th...
Responsive Side Navigation Bar Using HTML CSS and JavaScript | Dashboard Sidebar Menu
Просмотров 3302 месяца назад
Ready to level up your web development skills and craft a sleek, responsive side navigation bar with HTML, CSS, and JavaScript? Look no further! In this comprehensive tutorial, we'll walk you through the process of building a stunning dashboard sidebar menu from scratch. ⭐️Code Repo (Give it a Star)⭐️: github.com/constgenius/SidebarMenu 🔥 Throughout this tutorial, you'll master: • Setting up th...
Quiz App Using JavaScript | Build Quiz App using HTML CSS & Javascript
Просмотров 1633 месяца назад
🧠 Are you prepared to embark on an exhilarating journey into the world of web development by creating your very own Quiz App using HTML, CSS, and JavaScript? Look no further! In this step-by-step tutorial, we'll walk you through the process of crafting an engaging and interactive quiz application from scratch. ⭐️Code Repo (Give it a Star)⭐️: github.com/constgenius/QuizApp 🔥 Throughout this tuto...
News Website using only HTML, CSS and Javascript | Javascript Project
Просмотров 1,1 тыс.3 месяца назад
📰 Welcome to an exciting coding journey where we'll transform your web development skills into a cutting-edge News Website using HTML, CSS, and JavaScript! 🚀 In this step-by-step tutorial, we'll guide you through the process of creating a dynamic and responsive news platform from scratch. ⭐️Code Repo (Give it a Star)⭐️: github.com/constgenius/NewsWebsite 🌐 In this tutorial, you'll master the fo...
Build a Todo List App using HTML CSS & JavaScript | JavaScript for Beginners Tutorial
Просмотров 4834 месяца назад
🚀 Dive into the exciting world of web development with our step-by-step tutorial on building a Todo List App using HTML, CSS, and JavaScript! 🌐💻 ⭐️Code Repo (Give it a Star)⭐️: github.com/constgenius/TodoList Images Folder 📷: drive.google.com/drive/folders/1kD82v3DnwZbvE054q9fuIk6hV87wYnLF?usp=sharing 📋 In this beginner-friendly tutorial, you'll master the essentials of web development as we gu...
Movie Seat Booking App | Movie Ticket Booking UI using HTML CSS JavaScript | HTML CSS JS Project
Просмотров 1,7 тыс.4 месяца назад
🎬 Get ready to embark on a coding adventure as we bring you a step-by-step tutorial on creating a sleek Movie Seat Booking App! 🎟️🍿 In this comprehensive guide, we'll dive into the world of web development using HTML, CSS, and JavaScript to craft a stunning Movie Ticket Booking UI from scratch. ⭐️Code Repo (Give it a Star)⭐️: github.com/constgenius/MovieSeatBookingUI 🔧 Here's what you'll master...
Animated Accordion Component in ReactJS and Tailwind CSS
Просмотров 2594 месяца назад
🚀 Ready to level up your ReactJS and Tailwind CSS skills? Dive into the world of web development with this step-by-step tutorial on building an Animated Accordion Component that will elevate your projects to the next level! ⭐️Code Repo (Give it a Star)⭐️: github.com/constgenius/AccordionComponentReact 🎥 In this tutorial, we'll cover: • Setting up a React project with ease • Crafting a sleek and...
Advanced Weather App using JavaScript and Weather API | Weather App Using HTML CSS JavaScript
Просмотров 3614 месяца назад
🌦️ Ready to elevate your web development skills with an Advanced Weather App project? 🌐🔍 Join us on this coding adventure as we guide you through the process of creating a powerful Weather App using HTML, CSS, and JavaScript, coupled with a dynamic Weather API. ⭐️Code Repo (Give it a Star)⭐️: github.com/constgenius/WeatherApp Images Folder 📷: drive.google.com/drive/folders/14hVypyLGWs3EneBUYM5W...
Toast Notification Service purely in ReactJS and TailwindCSS | Build Toast Notification Service
Просмотров 2484 месяца назад
🚀 Welcome to an exhilarating coding adventure where we'll dive into the realm of web development! 🌐✨ In this step-by-step tutorial, we're about to embark on the journey of creating a sleek Toast Notification Service using the powerful combination of ReactJS and TailwindCSS. ⭐️Code Repo (Give it a Star)⭐️: github.com/constgenius/ToastNotificationReact ⭐️Telegram Channel Link: t.me/constgenius Th...
Happy New Year Animation Effect using HTML CSS JavaScript with Source Code | Happy New Year 2024
Просмотров 3164 месяца назад
🎉✨ Welcome to the ultimate coding celebration to kick off the New Year! 🌟 Get ready to add a burst of joy to your web development skills with our "Happy New Year Animation Effect" tutorial using HTML, CSS, and JavaScript, complete with source code for Happy New Year 2024! 🎆 🧑🏻💻 Source Code 🔗 Telegram Channel Link: t.me/constgenius 🔗 In this step-by-step guide, we'll take you through: • Setting...
Navbar Dropdown Menu in React from scratch | Custom Dropdown Menu in React and Tailwind CSS
Просмотров 6844 месяца назад
🚀 Ready to elevate your React and Tailwind CSS skills? Dive into the world of web development with our step-by-step tutorial on creating a Navbar Dropdown Menu in React from scratch! 🌐✨ ⭐️Code Repo (Give it a Star)⭐️: github.com/constgenius/NavbarDropdownMenu 🔥 In this tutorial, we'll guide you through the following key steps: • Setting up a React project with the perfect structure • Building a...
Advanced Dropdown Menu Using HTML CSS JavaScript | How to Make a Dropdown Menu From Scratch
Просмотров 4074 месяца назад
Advanced Dropdown Menu Using HTML CSS JavaScript | How to Make a Dropdown Menu From Scratch
Switch Component with React and Tailwind CSS | Custom Switch Component in ReactJS
Просмотров 2324 месяца назад
Switch Component with React and Tailwind CSS | Custom Switch Component in ReactJS
Heart Shape and Heart Beat Animation using Pure CSS | Vibrating Heart Shape using CSS
Просмотров 1905 месяцев назад
Heart Shape and Heart Beat Animation using Pure CSS | Vibrating Heart Shape using CSS
Animated Icon Button in React and Tailwind CSS | Social Media Icon Button Hover Effect
Просмотров 7775 месяцев назад
Animated Icon Button in React and Tailwind CSS | Social Media Icon Button Hover Effect
Interactive Hexagon Grid using HTML CSS JavaScript | JavaScript Effects
Просмотров 7785 месяцев назад
Interactive Hexagon Grid using HTML CSS JavaScript | JavaScript Effects
Build a Retractable Sidebar Component purely in ReactJS and Tailwind CSS | React Sidebar Navigation
Просмотров 7 тыс.5 месяцев назад
Build a Retractable Sidebar Component purely in ReactJS and Tailwind CSS | React Sidebar Navigation
Playing Cards Hover Effect Using HTML CSS | Playing Cards Animation
Просмотров 5945 месяцев назад
Playing Cards Hover Effect Using HTML CSS | Playing Cards Animation
Modal Component purely in ReactJS and TailwindCSS | Build a Modal Component
Просмотров 4405 месяцев назад
Modal Component purely in ReactJS and TailwindCSS | Build a Modal Component
GTA 6 3D Card Hover Effect | Grand Theft Auto VI 3D Card
Просмотров 2835 месяцев назад
GTA 6 3D Card Hover Effect | Grand Theft Auto VI 3D Card
Happy Birthday Animation Using HTML CSS JavaScript | Build and Deploy, Share Link with your friend
Просмотров 1 тыс.5 месяцев назад
Happy Birthday Animation Using HTML CSS JavaScript | Build and Deploy, Share Link with your friend
Top 5 Best Websites of 2023 | Top 5 websites Everyone should visit | Mind Blowing Web design
Просмотров 1115 месяцев назад
Top 5 Best Websites of 2023 | Top 5 websites Everyone should visit | Mind Blowing Web design
Cool Confetti Effect using HTML CSS JavaScript | Add Confetti to your website with JavaScript
Просмотров 8405 месяцев назад
Cool Confetti Effect using HTML CSS JavaScript | Add Confetti to your website with JavaScript
Motion Picture Animation Effects Using HTML CSS | Valorant Motion Picture Animation
Просмотров 4325 месяцев назад
Motion Picture Animation Effects Using HTML CSS | Valorant Motion Picture Animation
How to Build a Multi Step Form with React and TypeScript with Custom Hook | Multistep Form
Просмотров 7545 месяцев назад
How to Build a Multi Step Form with React and TypeScript with Custom Hook | Multistep Form
Text Typing Animation Using HTML CSS JavaScript | Auto Typing Effect on Website
Просмотров 2755 месяцев назад
Text Typing Animation Using HTML CSS JavaScript | Auto Typing Effect on Website
CSS 3D Card Hover Effect | Subway Surfers 3D Cards
Просмотров 2,9 тыс.5 месяцев назад
CSS 3D Card Hover Effect | Subway Surfers 3D Cards
Is clone website me song play hote hai ?
Hello Sir I have a error on it ..Plz Fixx It
Yes what is the error?
can you provide the npm install list ?
liveblocks radix jspdf lucide-react uuid fabric clix class-variance-authority
@@constGenius thank you
very helpfull for me, thank you
You are welcome!
🔥🔥🔥
😊 😊
Amzing content! Thanks constgenius!
Welcome 😊
Bring full next js course...
Okay will soon
Cool
Thank you 😊
Hey can you integrate navvigation in this. It would be of great help
Hey bro, one question, at 16:39 whats the use of transform when we already add top 50%?
top: 50% moves the top edge of the child element down to the middle of the parent. transform: translateY(-50%) then shifts the child element upward by half of its own height, effectively centering it vertically within the parent container.
@@constGenius ab samjha, thanks so much man
Thinks❤
Welcome 😊
Thank you so much
Welcome 😊
Can u please make this responsive for mobile also ???? Much needed that bro
Code it yourself xd
super bro
Thank You 😊
Can you tell me how you are adding global css content from readme file
Thank you. You've taught me a lot.
Glad to hear that! Welcome 😊
Fantastic video sir , all things you explain very well , carry on sir I am with you ... Thank you❤
Welcome 😊
Bro can i start this project in now? I hope i will not get any error.
Yes, You can start and will not get any error
Nice
Thanks 😊
Thank you sir ❤💯
Welcome 😊
Thank you sir.
Welcome 😊
this video is very helpful for beginners like me
Glad it was helpful! Thank you 😊
Thanks for the demo. Everything is working fine but only onhover the text is not visible when the sidebar is in collapsed state
Welcome, You have missed something in the css, So the text is not visible when sidebar is collapsed
superb job however am getting this error whilw deploying kindlt help; Linting and checking validity of types ... Failed to compile. ./components/main/StarCanvas.tsx:6:25 Type error: Could not find a declaration file for module 'maath/random/dist/maath-random.esm'. '/vercel/path0/node_modules/maath/random/dist/maath-random.esm.js' implicitly has an 'any' type. Try `npm i --save-dev @types/maath` if it exists or add a new declaration (.d.ts) file containing `declare module 'maath/random/dist/maath-random.esm';` 4 | // @ts-ignore 5 | import { Points, PointMaterial, Preload } from "@react-three/drei"; > 6 | import * as random from "maath/random/dist/maath-random.esm"; | ^ 7 | 8 | const StarBackground = (props: any) => { 9 | const ref: any = useRef(); Error: Command "npm run build" exited with 1
Thank You 😊 You have to put @ts-ignore about maath like this // @ts-ignore import * as random from "maath/random/dist/maath-random.esm";
Thanks brother, you have helped@@constGenius
Welcome 😊
hey, when i add @tailwind base; @tailwind components; @tailwind utilities; in index.css in current project it starts classes with the navigation bar, navigation bar is completely disappeared how can I fix it?
Your styles there should be something in styles you should correct it and it will be visible. Or some Tailwind CSS styles should have override your current styles so do check it
@@constGenius I guess bootstrap css is the reason. What do you think?
Yes, it can be
pdf send
If you want code, so its link is in the description
i think its good but your just writting html in it please make some functional app or some dynamic and also do clean coding bt the way great work
Noted
thankyou sir 🥰🥰
Welcome 😊
Nice bro just looking like professional web✨✨✨ Bro ak qution tha... Me bsc me hu aur 2-3 pahele ak Devin Ai software engineer Aya hai to job milna easy nahi hoga na fir me ye karke kya Karu bro so much confusion...tell me
Thank You 🙏😊 If you have any plans to do Msc. its another thing. But if you want to be software engineer you should be the best and you should give your best and you will get a job.
Very helpful video brother
Thank you 😊
superb
Thank you 😊
Amazing 🔥
Thanks 😊
❤thanks
Welcome 😊
Thanks Sir
Welcome 😊
Sachi me bro explain mast karta hai tu 💫 Thoda aur animation ke video aa sakte he thoda aur dynamic animation
Thank You 😊 Yes I will be working on them in future.
very good project bro. It would help us if you add some functionality like adding maps , weather , hotels etc
Thank you for your feedback! I'm glad you found the project helpful. I appreciate your suggestion about adding more functionality like maps, weather forecasts, and hotel recommendations. Adding these features would definitely improve the project and make it even more valuable for users like you. I'll definitely consider your ideas and work on incorporating them into future updates. Stay tuned for more enhancements! If you have any other suggestions or features you'd like to see, feel free to let me know. Your input is highly appreciated!
Is it full stack website
No
Best channel really the way you are explaining is too good💫 broo really instead only put background music like others doo..
Thank you so much for your kind words! I'm glad you're enjoying the content and finding value in the way I explain things. Your support and feedback means a lot to me! Thanks for being a part of the channel! 🌟 and Thanks again for your encouragement! 🙏💫
Very helpful n easy to follow tutorial. Thank you for making such videos 👍
My pleasure 😊
Best project for hands on, thank you constgenius sir❤
Thank you 😊
Thank you for the amazing project but unfortunately for me while clicking on cities to show the name and temp of the cities it goes to black screen, what could be the reason?
Welcome You are facing this problem as in if you have set the app.style.opacity = "0"; while in start of making this project Or You have to put your key in this place fetch(`api.weatherapi.com/v1/current.json?key=PutYourKeyHere&q=${cityInput}`) So that your app can work
Thanks it works now but the day is showing Friday still. @@constGenius
@@constGenius Thank you it worked... but still I'm not getting the day updated I mean it still shows Friday.
Check this in your script.js and the dayofTheweek function that it is giving the right day of the week dateOuput.innerHTML = `${dayofTheWeek(d, m, y)} ${d}/${m}/${y}`;
How to destructure this movie keyword in moviecard file
const MovieCard = ({ movie: { imdbID, Year, Poster, Title, Type } }) => { Here, the MovieCard component is a functional component that takes an object as a parameter. This object is then destructured in the parameter list. Specifically, it's destructuring a property named movie from the props object passed to the MovieCard component. Inside the movie object, there are properties like imdbID, Year, Poster, Title, and Type. These properties are further destructured and assigned directly to variables with the same names. Or in Simple 1. "We are expecting an object called movie as a prop." 2. "Inside that movie object, there are properties like imdbID, Year, Poster, Title, and Type." 3. "We want to directly extract these properties and assign them to variables with the same names (imdbID, Year, Poster, Title, Type)."
Thank you so much
Welcome 😊
nice explain bhaiya
Thank You 😊
I wish it had authentication feature
Yes, in future will work on it.
Awesome things thanks for these it helped a lot to learn thing, btw do you have discord server or any way we can connect with you, also do you also teach 😅😅 ?
Welcome 😊 Yes, Discord Server Link Here: discord.gg/9wEzreg8
Thanks Sir For this awesome content . I learn lot . thanks
Glad to hear that 😊
Spotify clone MEAN me hai kya
Its only UI of Spotify Clone
I need help of you
Yes, I am here for helping you
Hi
Hello
Sir problem in button Because not set in top Only set in mid
You have written some property in css that is giving you that result. See and correct it