constGenius
constGenius
  • Видео 195
  • Просмотров 84 150
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 ...
Просмотров: 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

Комментарии

  • @johnsuper4754
    @johnsuper4754 2 дня назад

    Is clone website me song play hote hai ?

  • @pijushsaha2644
    @pijushsaha2644 3 дня назад

    Hello Sir I have a error on it ..Plz Fixx It

  • @atsejulian8875
    @atsejulian8875 4 дня назад

    can you provide the npm install list ?

    • @constGenius
      @constGenius 2 дня назад

      liveblocks radix jspdf lucide-react uuid fabric clix class-variance-authority

    • @atsejulian8875
      @atsejulian8875 День назад

      @@constGenius thank you

  • @supunprasad9482
    @supunprasad9482 9 дней назад

    very helpfull for me, thank you

  • @naylord5
    @naylord5 10 дней назад

    🔥🔥🔥

  • @MYNKS18
    @MYNKS18 10 дней назад

    Amzing content! Thanks constgenius!

  • @wasimshariff9701
    @wasimshariff9701 10 дней назад

    Bring full next js course...

  • @10xFrontend
    @10xFrontend 10 дней назад

    Cool

  • @hitesh2293
    @hitesh2293 14 дней назад

    Hey can you integrate navvigation in this. It would be of great help

  • @abhishekraghunath95
    @abhishekraghunath95 14 дней назад

    Hey bro, one question, at 16:39 whats the use of transform when we already add top 50%?

    • @constGenius
      @constGenius 11 дней назад

      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.

    • @abhishekraghunath95
      @abhishekraghunath95 10 дней назад

      @@constGenius ab samjha, thanks so much man

  • @xainzonghou
    @xainzonghou 16 дней назад

    Thinks❤

  • @0xzales
    @0xzales 18 дней назад

    Thank you so much

  • @ajaysagar6621
    @ajaysagar6621 20 дней назад

    Can u please make this responsive for mobile also ???? Much needed that bro

  • @Abinav777
    @Abinav777 24 дня назад

    super bro

  • @ambreenfatima8563
    @ambreenfatima8563 26 дней назад

    Can you tell me how you are adding global css content from readme file

  • @user-jx4zj6ds7h
    @user-jx4zj6ds7h 29 дней назад

    Thank you. You've taught me a lot.

    • @constGenius
      @constGenius 21 день назад

      Glad to hear that! Welcome 😊

  • @vedantgadewar8126
    @vedantgadewar8126 Месяц назад

    Fantastic video sir , all things you explain very well , carry on sir I am with you ... Thank you❤

  • @AakashSingh-ge6nj
    @AakashSingh-ge6nj Месяц назад

    Bro can i start this project in now? I hope i will not get any error.

    • @constGenius
      @constGenius Месяц назад

      Yes, You can start and will not get any error

  • @abdurrashid690
    @abdurrashid690 Месяц назад

    Nice

  • @piyush0mandloi
    @piyush0mandloi Месяц назад

    Thank you sir ❤💯

  • @piyush0mandloi
    @piyush0mandloi Месяц назад

    Thank you sir.

  • @arjunsinghrajawat6733
    @arjunsinghrajawat6733 Месяц назад

    this video is very helpful for beginners like me

    • @constGenius
      @constGenius Месяц назад

      Glad it was helpful! Thank you 😊

  • @VikasMishra-yx2zs
    @VikasMishra-yx2zs Месяц назад

    Thanks for the demo. Everything is working fine but only onhover the text is not visible when the sidebar is in collapsed state

    • @constGenius
      @constGenius Месяц назад

      Welcome, You have missed something in the css, So the text is not visible when sidebar is collapsed

  • @JacobMulli
    @JacobMulli Месяц назад

    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

    • @constGenius
      @constGenius Месяц назад

      Thank You 😊 You have to put @ts-ignore about maath like this // @ts-ignore import * as random from "maath/random/dist/maath-random.esm";

    • @JacobMulli
      @JacobMulli Месяц назад

      Thanks brother, you have helped@@constGenius

    • @constGenius
      @constGenius Месяц назад

      Welcome 😊

  • @dafsadfjsadfsakdf435
    @dafsadfjsadfsakdf435 Месяц назад

    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?

    • @constGenius
      @constGenius Месяц назад

      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

    • @dafsadfjsadfsakdf435
      @dafsadfjsadfsakdf435 Месяц назад

      @@constGenius I guess bootstrap css is the reason. What do you think?

    • @constGenius
      @constGenius Месяц назад

      Yes, it can be

  • @sankalpkadam8391
    @sankalpkadam8391 Месяц назад

    pdf send

    • @constGenius
      @constGenius Месяц назад

      If you want code, so its link is in the description

  • @moinali9874
    @moinali9874 Месяц назад

    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

  • @piyush0mandloi
    @piyush0mandloi 2 месяца назад

    thankyou sir 🥰🥰

  • @sahilbutala6911
    @sahilbutala6911 2 месяца назад

    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

    • @constGenius
      @constGenius 2 месяца назад

      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.

  • @ajaysagar6621
    @ajaysagar6621 2 месяца назад

    Very helpful video brother

  • @saurabhraostoicalsaurabh
    @saurabhraostoicalsaurabh 2 месяца назад

    superb

  • @MYNKS18
    @MYNKS18 2 месяца назад

    Amazing 🔥

  • @ritwikghosh7813
    @ritwikghosh7813 2 месяца назад

    ❤thanks

  • @piyush0mandloi
    @piyush0mandloi 2 месяца назад

    Thanks Sir

  • @sahilbutala6911
    @sahilbutala6911 2 месяца назад

    Sachi me bro explain mast karta hai tu 💫 Thoda aur animation ke video aa sakte he thoda aur dynamic animation

    • @constGenius
      @constGenius 2 месяца назад

      Thank You 😊 Yes I will be working on them in future.

  • @varunsannapureddy6782
    @varunsannapureddy6782 2 месяца назад

    very good project bro. It would help us if you add some functionality like adding maps , weather , hotels etc

    • @constGenius
      @constGenius 2 месяца назад

      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!

  • @saltech23
    @saltech23 2 месяца назад

    Is it full stack website

  • @sahilbutala6911
    @sahilbutala6911 2 месяца назад

    Best channel really the way you are explaining is too good💫 broo really instead only put background music like others doo..

    • @constGenius
      @constGenius 2 месяца назад

      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! 🙏💫

  • @ParusStyleCorner
    @ParusStyleCorner 2 месяца назад

    Very helpful n easy to follow tutorial. Thank you for making such videos 👍

  • @MYNKS18
    @MYNKS18 2 месяца назад

    Best project for hands on, thank you constgenius sir❤

  • @user-yq4qv8zj3z
    @user-yq4qv8zj3z 2 месяца назад

    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?

    • @constGenius
      @constGenius 2 месяца назад

      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

    • @user-yq4qv8zj3z
      @user-yq4qv8zj3z 2 месяца назад

      Thanks it works now but the day is showing Friday still. @@constGenius

    • @user-yq4qv8zj3z
      @user-yq4qv8zj3z 2 месяца назад

      @@constGenius Thank you it worked... but still I'm not getting the day updated I mean it still shows Friday.

    • @constGenius
      @constGenius 2 месяца назад

      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}`;

  • @urmilashirole2001
    @urmilashirole2001 2 месяца назад

    How to destructure this movie keyword in moviecard file

    • @constGenius
      @constGenius 2 месяца назад

      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)."

    • @urmilashirole2001
      @urmilashirole2001 2 месяца назад

      Thank you so much

    • @constGenius
      @constGenius 2 месяца назад

      Welcome 😊

  • @santoshdas5433
    @santoshdas5433 2 месяца назад

    nice explain bhaiya

  • @gamerzchoices
    @gamerzchoices 2 месяца назад

    I wish it had authentication feature

    • @constGenius
      @constGenius 2 месяца назад

      Yes, in future will work on it.

  • @saurabhraostoicalsaurabh
    @saurabhraostoicalsaurabh 2 месяца назад

    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 😅😅 ?

    • @constGenius
      @constGenius 2 месяца назад

      Welcome 😊 Yes, Discord Server Link Here: discord.gg/9wEzreg8

  • @piyush0mandloi
    @piyush0mandloi 2 месяца назад

    Thanks Sir For this awesome content . I learn lot . thanks

    • @constGenius
      @constGenius 2 месяца назад

      Glad to hear that 😊

  • @Yash-qb2lp
    @Yash-qb2lp 2 месяца назад

    Spotify clone MEAN me hai kya

    • @constGenius
      @constGenius 2 месяца назад

      Its only UI of Spotify Clone

  • @vishaljadav4037
    @vishaljadav4037 2 месяца назад

    I need help of you

    • @constGenius
      @constGenius 2 месяца назад

      Yes, I am here for helping you

  • @vishaljadav4037
    @vishaljadav4037 2 месяца назад

    Hi

  • @bhardwajyash9000
    @bhardwajyash9000 2 месяца назад

    Sir problem in button Because not set in top Only set in mid

    • @constGenius
      @constGenius 2 месяца назад

      You have written some property in css that is giving you that result. See and correct it