CodeCrafter
CodeCrafter
  • 31
  • 142 583
Interactive Hover Effects: HTML, CSS & JS Tutotiral [2024]
Learn how to create interactive hover effects using HTML, CSS, and JavaScript, in this tutorial I’ll take you step by step through the process so you can apply these skills to your own web projects.- Basic HTML Structure - Styles and Animations with CSS - Interactivity with JavaScript
Source Code. - www.patreon.com/posts/96645063
#htmlcss #javascript
Переглядів: 127

Відео

Create an Interactive Portfolio with 3D Models | REACT & REACT THREE FIBER
Переглядів 2,2 тис.11 місяців тому
Create an Impressive 3D Web Portfolio. Step-by-Step Tutorial to Showcase Your Projects with Interactive Models using React and React Three Fiber. Source Code - www.patreon.com/posts/tutorial-website-89824766?Link& #reaction #portfoliowebsite
3D Portfolio Website Built with React and React Three Fiber
Переглядів 1,5 тис.Рік тому
Welcome to my immersive world of web design! In this video, I'm thrilled to unveil my latest creation a stunning portfolio website built using React JS and React Three Fiber. Source Code - www.patreon.com/posts/portfolio-react-83024057?Link& Buy me a coffee - www.buymeacoffee.com/wdhttpsp #reactjs #portfoliowebsite
Portfolio - React React Three Fiber
Переглядів 876Рік тому
Here you have a portfolio with 3D models created with React and React Three Fiber. Soon the tutorial, but if you want the code and the files, you can find them on my patreon. source code - www.patreon.com/posts/portfolio-react-83024057?Link& #react #portfolio
Portfolio Website - HTML CSS JAVASCRIPT
Переглядів 6 тис.Рік тому
In this videos i will create a responsive portfolio using 3D models with html css and javascript. Source Code - www.patreon.com/posts/portfolio-html-81860161?Link& assets - drive.google.com/drive/folders/1ooD6RJ0paqwIhCCPt7Ey2wR6mYda-emY?usp=share_link #javascript #website #portfoliowebsite
How to create React Three Fiber Website.
Переглядів 1,7 тис.Рік тому
Hello, in this video i will create a responsive website using React Three Fiber and JavaScript. I hope you enjoy. Code Source - www.patreon.com/posts/how-to-create-79265101?Link&
Responsive Portfolio Website Using HTML CSS
Переглядів 1,7 тис.Рік тому
Hello, in this video i will create a responsive one section portfolio using only HTML CSS. I hope you enjoy. Source Code - www.patreon.com/posts/responsive-using-78746923?Link& #responsivewebsite #portfoliowebsite #htmlcss
Html & Css Website with 3D Models
Переглядів 808Рік тому
How to create your own website with 3D Models using Html & Css. In this video i will create a header and a hero section with 3D Models using Html & Css, hope you enjoy. Source Code - www.patreon.com/posts/html-css-website-77292038?Link& #3dmodel #htmlcss
Create 3D Website with Spline Design and React
Переглядів 267Рік тому
In this video i will design a 3D website using Spline Design and React, create your own 3D website easily with this tool. Source Code - www.patreon.com/posts/create-3d-with-76968916?Link& #3ddesign #react #webdesign
Tutorial - Parallax Scrolling Website
Переглядів 333Рік тому
Learn how to create a parallax website using Html Css & JavaScript Source Code - www.patreon.com/posts/parallax-website-76586363?Link& #javascript #parallax
Tutorial 3D Nav Bar Html and Css
Переглядів 160Рік тому
In this video i will create a 3D Nav Bar with Html & Css. Source Code - www.patreon.com/posts/3d-nav-bar-html-76400206?Link& #css #navbar
Tutorial - Html & Css Button
Переглядів 126Рік тому
In this video i will create a button with Html & Css. Source Code - www.patreon.com/posts/html-css-button-76329441?Link& #html #button
Animated Section Three Js and React
Переглядів 979Рік тому
Learn how to create an animated section using Three Js and React. Code Source - www.patreon.com/posts/animated-section-76054581?Link& #threejs #react
CSS Animated Background
Переглядів 426Рік тому
In this video i will build a 3D cube and a plane with Css. Learn a simple way to CUSTOMIZE THE CURSOR WITH CSS. Code Source: www.patreon.com/posts/css-animated-75567532?Link& #css #animatedbackground
Top CSS Animated Background
Переглядів 304Рік тому
Animated Background with Pure CSS and Html. Use it for animate a website. source code: www.patreon.com/posts/animated-with-75326528?Link& #css #css3
How to create Heartbeat with Css
Переглядів 96Рік тому
How to create Heartbeat with Css
Responsive Website - Html & Css
Переглядів 297Рік тому
Responsive Website - Html & Css
Tutorial - Three Js Website
Переглядів 871Рік тому
Tutorial - Three Js Website
Three Js WebGL - Portfolio
Переглядів 675Рік тому
Three Js WebGL - Portfolio
Top Css & JavaScript Animation
Переглядів 364Рік тому
Top Css & JavaScript Animation
How To Create Animated CSS Cards
Переглядів 279Рік тому
How To Create Animated CSS Cards
TUTORIAL - Import Models React Three Fiber
Переглядів 4 тис.Рік тому
TUTORIAL - Import Models React Three Fiber
Tutorial - Custom Scrollbar
Переглядів 160Рік тому
Tutorial - Custom Scrollbar
Tutorial Animated Website - Three Js
Переглядів 1,6 тис.Рік тому
Tutorial Animated Website - Three Js
Tutorial CSS Button Effects
Переглядів 189Рік тому
Tutorial CSS Button Effects
TUTORIAL - create HERO section
Переглядів 1,6 тис.Рік тому
TUTORIAL - create HERO section
Background Html & Css
Переглядів 275Рік тому
Background Html & Css
Tutorial - Header Three Js
Переглядів 1,5 тис.Рік тому
Tutorial - Header Three Js
How to build THREE JS Background
Переглядів 8 тис.Рік тому
How to build THREE JS Background
Tutorial - Animated Background Three Js
Переглядів 105 тис.Рік тому
Tutorial - Animated Background Three Js

КОМЕНТАРІ

  • @amanrawat2177
    @amanrawat2177 9 днів тому

    Awesome 👍

  • @vaibhavtomar161
    @vaibhavtomar161 Місяць тому

    if you are teaching some needed programme, then why did you put the background music, you could have spoken and could have understand good, and your screen size is too short to watch this video, pls zoom further you make other video & translate also.

  • @fernandafortes3782
    @fernandafortes3782 7 місяців тому

    Hi, it is given a problem when I write the import part of “style.css” and also impor the images. It says Cannot import dependency

  • @elmenikmati
    @elmenikmati 7 місяців тому

    ¡Me encantó, nuevo suscriptor!☺

  • @jituraiyan
    @jituraiyan 7 місяців тому

    Thank you for the video. Is it a good practise to do the heavy calculation from inside JavaScript code? I think it loop through each vertices and even do it so many times per second which is so performance expensive when it run through CPU. But, instead if we can run it through GPU by writing GLSL code it would run on GPU and drastically improve the performance. Do you know any method to do it by GLSL instead?

  • @R3DDASCHANNEL
    @R3DDASCHANNEL 8 місяців тому

    thank you so much g, all this talking channels and they can't get you straight to the point btw i had to change some minor index.js into this instead in order to work: import "./style.css"; import ReactDOM from 'react-dom/client'; import { Canvas } from '@react-three/fiber'; import Experience from "./Experience"; const root = ReactDOM.createRoot(document.querySelector('#root')); root.render( <Canvas> <Experience /> </Canvas> );

  • @acupoftea12
    @acupoftea12 8 місяців тому

    Would you create a detail lecture or roadmap of creating 3d websites

    • @wd-https
      @wd-https 8 місяців тому

      I will create a tutorial soon, anyway you can take a look at my channel, there are some videos about it

  • @gregdmitriev2784
    @gregdmitriev2784 9 місяців тому

    Cool . Time code is missing.

  • @robertweide6624
    @robertweide6624 9 місяців тому

    i have problem on my send button its always disabled..it never enable to click

  • @szymonbaranowski8184
    @szymonbaranowski8184 11 місяців тому

    bundles are cancer if require something extrenal and cant load it with one line you do it wrong compailing anything is totally wrong

  • @Unknownuser-dy9vc
    @Unknownuser-dy9vc 11 місяців тому

    Can i copy this all web to make mine?

    • @wd-https
      @wd-https 11 місяців тому

      Of course

  • @user-vz8wz1pc6w
    @user-vz8wz1pc6w Рік тому

    the image is not coming when i import it through js

    • @wd-https
      @wd-https Рік тому

      Hello, that is because your code, make a review to your code

    • @user-vz8wz1pc6w
      @user-vz8wz1pc6w Рік тому

      i wrote exactly as in the video but it still not shows@@wd-https

    • @wd-https
      @wd-https Рік тому

      I checked the code and the code is ok, so there have to be something that you missing

  • @manasvikhatri381
    @manasvikhatri381 Рік тому

    is it responsive?

  • @games4us132
    @games4us132 Рік тому

    in Environment preset you don't need brackets just quotes is enough

  • @likhonpatowari9695
    @likhonpatowari9695 Рік тому

    thanks for the awesome video. That's why I shared your channel on FB programming community

    • @wd-https
      @wd-https Рік тому

      Awesome, thank you!

  • @ElenaBG3
    @ElenaBG3 Рік тому

    Intro music pls

  • @venateshbanagarcse3188
    @venateshbanagarcse3188 Рік тому

    😇👏👏

  • @tamerkhattab4013
    @tamerkhattab4013 Рік тому

    the image is really pixelated once its rendered on the site. how to fix that?

    • @wd-https
      @wd-https Рік тому

      Try to change the image

    • @tamerkhattab4013
      @tamerkhattab4013 Рік тому

      @@wd-https I used all of the images you put in the description. each is pixelated

    • @wd-https
      @wd-https Рік тому

      Download an image whit good resolution and try it, if it still shows pixels, check the code

  • @meenakshidesu1807
    @meenakshidesu1807 Рік тому

    Instead of hard typing, Is it possible to add a comment feature to the scene?

  • @e-things
    @e-things Рік тому

    Can you tell how I can load this 3d model faster without compromising it?

    • @wd-https
      @wd-https Рік тому

      I’m not sure that I understand ur question, if u use model-viewer, it’s the way that u see on the video, if u use three js or something else just let me know

    • @e-things
      @e-things Рік тому

      @@wd-https I only use whatever you shown in the video that much only!

    • @wd-https
      @wd-https Рік тому

      Then follow the steps, it’s the only way to load 3D models with model-viewer, anyway I will upload a new video with 3D models in a few days, if u want to wait, maybe it will helps you

  • @e-things
    @e-things Рік тому

    Hey buddy, Can you tell from where you downloaded glb models so i can download anothe r

    • @wd-https
      @wd-https Рік тому

      Hello E-things, from sketchfab, name of first model: cyberpunk Desk, name second model: robot playground

    • @e-things
      @e-things Рік тому

      @@wd-https bro it is paid models?

    • @wd-https
      @wd-https Рік тому

      Free models

  • @nox1069
    @nox1069 Рік тому

    where did you find the img? please

    • @wd-https
      @wd-https Рік тому

      Hello, I think pngtree com with the name purple lines

    • @nox1069
      @nox1069 Рік тому

      @@wd-https thanks but i don't think that i understand 😅😅 you don't have a drive with the asset something like that?

    • @wd-https
      @wd-https Рік тому

      I will upload the files, give me a couple of hours pls

    • @nox1069
      @nox1069 Рік тому

      @@wd-https ok thanks you very i have to do a portfolio for school and i want do something like that with multiple object like the deskt

    • @wd-https
      @wd-https Рік тому

      I will upload in a few day’s another one with 3D models created with react

  • @user-eo4mt1dv8o
    @user-eo4mt1dv8o Рік тому

    Awesome video. Good way to learn !!! Keep up the good work

  • @AlDaniProducciones
    @AlDaniProducciones Рік тому

    Thanks for the video

  • @sunsunaty3116
    @sunsunaty3116 Рік тому

    Awesome

  • @CosminPopescu-jj7jj
    @CosminPopescu-jj7jj Рік тому

    Huge thanks for the video, helped me a lot 👌

  • @user-di5lz1xl5u
    @user-di5lz1xl5u Рік тому

    Thanks for the video! Can’t wait to see what comes next

  • @alistardoru1718
    @alistardoru1718 Рік тому

    Nice channel man, you have my like

  • @daphanecanteros4207
    @daphanecanteros4207 Рік тому

    I want the image too. Can you provide the background images?

    • @wd-https
      @wd-https Рік тому

      You have the link in description

  • @yogeshdharya3857
    @yogeshdharya3857 Рік тому

    Just cool

  • @mauriciooyarzun1932
    @mauriciooyarzun1932 Рік тому

    🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥

  • @mauriciooyarzun1932
    @mauriciooyarzun1932 Рік тому

    🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥

  • @mauriciooyarzun1932
    @mauriciooyarzun1932 Рік тому

    🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥

  • @mauriciooyarzun1932
    @mauriciooyarzun1932 Рік тому

    🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥

  • @mauriciooyarzun1932
    @mauriciooyarzun1932 Рік тому

    🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥

  • @mauriciooyarzun1932
    @mauriciooyarzun1932 Рік тому

    🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥

  • @mauriciooyarzun1932
    @mauriciooyarzun1932 Рік тому

    🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥

  • @alistarbrenda9212
    @alistarbrenda9212 Рік тому

    😉

  • @tushalparekh9379
    @tushalparekh9379 Рік тому

    Awesome 👍

    • @wd-https
      @wd-https Рік тому

      Thank you Tushal 🙂

  • @tunahancaymaz443
    @tunahancaymaz443 Рік тому

    I need a background animation with continuous codes written in the background, please take a video

  • @hmlokman2005
    @hmlokman2005 Рік тому

    Color combination is not good

  • @markopolo2224
    @markopolo2224 Рік тому

    looks amazing but the camera movment is kinda glitchy

    • @wd-https
      @wd-https Рік тому

      True, that portfolio requires a performant pc

  • @stallonecobra6452
    @stallonecobra6452 Рік тому

    Muito bom!

  • @shalimarmehra1
    @shalimarmehra1 Рік тому

    I loved your videos personaly to be honest ! 👌👌

    • @wd-https
      @wd-https Рік тому

      That kind of comments helps me a lot, thank you mate 👊

  • @blake986
    @blake986 Рік тому

    😪 pr໐๓໐Ş๓

  • @slavaUkraineStayWithUkraine

    not working animation, do you have any idea? Code the same like in video.

    • @wd-https
      @wd-https Рік тому

      If your code is the same as the code in the video, it has to work, if it doesn't work it's because something is missing, check the code well until you find the error

    • @slavaUkraineStayWithUkraine
      @slavaUkraineStayWithUkraine Рік тому

      @@wd-https thanks! Does the Three.js version make sense?

    • @wd-https
      @wd-https Рік тому

      It shouldn't, in a few hours I'll upload the code, you'll find it on my patreon, I'll post the link

    • @wd-https
      @wd-https Рік тому

      You copy the code and then you do npm install and after npm run dev, I will let u know when I’ll upload the code

    • @slavaUkraineStayWithUkraine
      @slavaUkraineStayWithUkraine Рік тому

      @@wd-https Thank you so much! You are amazing!

  • @ronanlavorato9844
    @ronanlavorato9844 Рік тому

    open source please 😄

  • @SoyIvan1
    @SoyIvan1 Рік тому

    great job, you're doing good

  • @mieleinstein7530
    @mieleinstein7530 Рік тому

    Bro you are a genius

    • @wd-https
      @wd-https Рік тому

      Thank you mate!😌

    • @mieleinstein7530
      @mieleinstein7530 Рік тому

      @@wd-https please upload this on UA-cam i beg you

    • @wd-https
      @wd-https Рік тому

      You have the code on my patreon, it’s free to download

    • @mieleinstein7530
      @mieleinstein7530 Рік тому

      @@wd-https thank you so much

    • @wd-https
      @wd-https Рік тому

      @@mieleinstein7530 np bro

  • @getFrontend
    @getFrontend Рік тому

    Bro, where is demo link?