DesignTorch
DesignTorch
  • 197
  • 178 867
Best Web Projects for Students | HTML, CSS, jQuery
Welcome to *DesignTorch!*
I'll show you the best website projects for beginners or students to practice in this CZcams video. watch the full video to learn about your next creative web projects.
*Resources:*
✅ Project Links: codepen.io/designtorch2020
*Recommended Videos:*
▶️ czcams.com/video/GZh52Fh8o1o/video.html
▶️ czcams.com/video/Clc8XkOmF0w/video.html
▶️ czcams.com/video/Z2q9ErH2-bI/video.html
▶️ czcams.com/video/tSyYU0I9gYU/video.html
▶️ czcams.com/video/RI2lzaWDgF0/video.html
▶️ czcams.com/video/TzQ_6HhiTq4/video.html
Don't forget to like, comment, and subscribe to DesignTorch for more exciting coding tutorials, tips, and tricks.
Happy coding! 🚀
#css #webdevelopment #htmlcss #webproject #jquery #csshovereffect
zhlédnutí: 84

Video

Bootstrap Responsive Footer with Noise Effect9:57Bootstrap Responsive Footer with Noise Effect
Bootstrap Responsive Footer with Noise Effect
zhlédnutí 34Před měsícem
Welcome to *DesignTorch!* In this CZcams video, I'll show you how to add noisy effect with css then I will create a responsive footer using html and css. if you want to learn how to make a footer in css this tutorial is perfect for you. Ultimately, you will know how to design a responsive footer using bootstrap. *Resources:* ✅ Google Fonts: fonts.google.com/specimen/Hanken Grotesk ✅ Project Lin...
CSS Flight Card Animation | Card Hover Effects | CSS Tutorial10:24CSS Flight Card Animation | Card Hover Effects | CSS Tutorial
CSS Flight Card Animation | Card Hover Effects | CSS Tutorial
zhlédnutí 75Před měsícem
Welcome to *DesignTorch!* In this fun tutorial, I will show you how to create css cards with crazy flight animation for websites. so watch the tutorial and learn how to make css card hover animations or css card hover effect. *Resources:* ✅ Google Fonts: fonts.google.com/specimen/Montserrat ✅ Project Links: codepen.io/designtorch2020 *Recommended Videos:* ▶️ czcams.com/video/tSyYU0I9gYU/video.h...
Grid Gallery Animated | CSS Grid Gallery | CSS Animations10:20Grid Gallery Animated | CSS Grid Gallery | CSS Animations
Grid Gallery Animated | CSS Grid Gallery | CSS Animations
zhlédnutí 39Před měsícem
Welcome to *DesignTorch!* In this CZcams video, I'll show a responsive animated grid gallery. Then I will use css to create this responsive gallery. if you want to learn how to make css grid layout using Flexbox watch the full video and learn how to create a responsive grid gallery using css. Finally, I will add fade-in animation to the gallery, making it more interactive. so watch and create a...
Create Patterns Using CSS Gradient | Quick CSS Tips2:27Create Patterns Using CSS Gradient | Quick CSS Tips
Create Patterns Using CSS Gradient | Quick CSS Tips
zhlédnutí 11Před měsícem
Welcome to *DesignTorch!* In this CZcams video, I'll show you how to make patterns using css only, and you will learn how to use css linear gradient and radial gradient properties to create beautiful patterns. *Resources:* ✅ Google Fonts: fonts.google.com/specimen/Space Grotesk ✅ Project Links: codepen.io/designtorch2020 *Recommended Videos:* ▶️ czcams.com/video/GZh52Fh8o1o/video.html ▶️ czcams...
Glassmorphism Team Card Hover Effect | CSS Hover Effects7:32Glassmorphism Team Card Hover Effect | CSS Hover Effects
Glassmorphism Team Card Hover Effect | CSS Hover Effects
zhlédnutí 26Před měsícem
Welcome to *DesignTorch!* In this CZcams video, I'll show you how to create a glassmorphism effect using css and you will also learn how to develop cool-looking team cards with a glassmorphism effect using css. Ultimately, you will know how to create a glassmorphism effect in css for websites. *Resources:* ✅ Font Awesome: fontawesome.com ✅ Project Links: codepen.io/designtorch2020 *Recommended ...
CSS animated hover button with background animation | CSS hover animation effects4:59CSS animated hover button with background animation | CSS hover animation effects
CSS animated hover button with background animation | CSS hover animation effects
zhlédnutí 64Před měsícem
Welcome to *DesignTorch!* In this video, I will show you how to make css button animation for websites. also in this tutorial, you will learn how css animation works and how we can create wave animation using css animation. In this video, I have covered all the topics about css animated background and css animation play state property. After watching this video you will able to make an animated...
Creative Navbar Menu Animation | jQuery Projects10:22Creative Navbar Menu Animation | jQuery Projects
Creative Navbar Menu Animation | jQuery Projects
zhlédnutí 109Před měsícem
Welcome to *DesignTorch!* I will show you how to make jQuery navbar animation for websites in this video. You will learn how to create a social links menu using html5 css and jQuery. Learn the way to develop a navbar menu for a website. Watch now and level up your web development skills! *Resources:* ✅ Project Links: codepen.io/designtorch2020 *Recommended Videos:* ▶️ czcams.com/video/GZh52Fh8o...
Cool Toggle Switch jQuery5:47Cool Toggle Switch jQuery
Cool Toggle Switch jQuery
zhlédnutí 13Před měsícem
Welcome to *DesignTorch!* In this video, I will teach you how to make an animated toggle switch using css, and you will also learn how to use javascript to interact with toggle animation. watch the full video to learn how to create an on-off toggle switch using css and jQuery. *Resources:* ✅ Google Fonts: fonts.google.com/specimen/Inter ✅ Project Links: codepen.io/designtorch2020 *Recommended V...
Hacker Effect Using Javascript4:25Hacker Effect Using Javascript
Hacker Effect Using Javascript
zhlédnutí 24Před měsícem
Welcome to *DesignTorch!* In this CZcams video, I'll show you how to make a cool mousemove effect using javascript and you will also learn how to create hacker background effect using html and css. watch the full video and learn how to add mousemove effect to your website using javascript. *Resources:* ✅ Project Links: codepen.io/designtorch2020 *Recommended Videos:* ▶️ czcams.com/video/GZh52Fh...
Radar Animation Pure CSS | CSS Animations9:11Radar Animation Pure CSS | CSS Animations
Radar Animation Pure CSS | CSS Animations
zhlédnutí 248Před měsícem
Welcome to *DesignTorch!* In this CZcams video, Learn how to make css radar animation. create a radar animation using css. *Resources:* ✅ Project Links: codepen.io/designtorch2020 *Recommended Videos:* ▶️ czcams.com/video/Z2q9ErH2-bI/video.html ▶️ czcams.com/video/tSyYU0I9gYU/video.html ▶️ czcams.com/video/RI2lzaWDgF0/video.html ▶️ czcams.com/video/TzQ_6HhiTq4/video.html Don't forget to like, c...
Bouncy Button CSS | CSS Hover Effects | CSS Buttons5:21Bouncy Button CSS | CSS Hover Effects | CSS Buttons
Bouncy Button CSS | CSS Hover Effects | CSS Buttons
zhlédnutí 43Před měsícem
Welcome to *DesignTorch!* In this CZcams video, I will show you how to make a cool button hover effect using css only. Learn the basics of creating css bouncy button hover effect. how to add a button to the website. *Resources:* ✅ Google Fonts: www.fontshare.com/fonts/satoshi ✅ Project Links: codepen.io/designtorch2020 ✅ Icon Fonts: icons8.com/line-awesome *Recommended Videos:* ▶️ czcams.com/vi...
CSS & jQuery Accordion Carousel | Image Carousel Slider6:45CSS & jQuery Accordion Carousel | Image Carousel Slider
CSS & jQuery Accordion Carousel | Image Carousel Slider
zhlédnutí 68Před měsícem
Welcome to *DesignTorch!* In this CZcams video, I'll show you how to make a carousel using jQuery and you will also learn how to make an image accordion using css and jQuery. watch and learn how to create an image accordion hover effect in css and JavaScript. Learn how to make carousel slider using jquery. *Resources:* ✅ Project Links: codepen.io/designtorch2020 *Recommended Videos:* ▶️ czcams....
CSS Fun Card Hover Effect | CSS Hover Effects7:12CSS Fun Card Hover Effect | CSS Hover Effects
CSS Fun Card Hover Effect | CSS Hover Effects
zhlédnutí 76Před měsícem
Welcome to *DesignTorch!* I'll show you how to make a cool-looking card hover effect in this CZcams video. learn how to use the transform property to make a fun card hover effect. watch and learn the way of creating css hover effects for the website. *Resources:* ✅ Fonts: www.fontshare.com/fonts/satoshi ✅ Project Links: codepen.io/designtorch2020 ✅ Remix Icons: remixicon.com *Recommended Videos...
Top 5 Creative CSS Grid Layouts for Beginners 🔥4:50Top 5 Creative CSS Grid Layouts for Beginners 🔥
Top 5 Creative CSS Grid Layouts for Beginners 🔥
zhlédnutí 81Před měsícem
Welcome to *DesignTorch!* In this CZcams video, I'll show you the top 5 css responsive grid gallery layout for beginners. watch the full video and learn how to make responsive grids using html and css. *Resources:* ✅ Project Links: codepen.io/designtorch2020 *Recommended Videos:* ▶️ czcams.com/video/HisZzSfYY-M/video.html ▶️ czcams.com/video/Z2q9ErH2-bI/video.html ▶️ czcams.com/video/4nKZ2aFKmq...
Skeuomorphic Switch Using CSS | On Off Switch | CSS 3d Animated Switch9:55Skeuomorphic Switch Using CSS | On Off Switch | CSS 3d Animated Switch
Skeuomorphic Switch Using CSS | On Off Switch | CSS 3d Animated Switch
zhlédnutí 32Před měsícem
Skeuomorphic Switch Using CSS | On Off Switch | CSS 3d Animated Switch
New Looking Animated Social Media Links Hover Effect | CSS Hover Effects10:01New Looking Animated Social Media Links Hover Effect | CSS Hover Effects
New Looking Animated Social Media Links Hover Effect | CSS Hover Effects
zhlédnutí 31Před měsícem
New Looking Animated Social Media Links Hover Effect | CSS Hover Effects
Remove Image background using new AI tool | ✅100% Free2:02Remove Image background using new AI tool | ✅100% Free
Remove Image background using new AI tool | ✅100% Free
zhlédnutí 40Před měsícem
Remove Image background using new AI tool | ✅100% Free
Responsive Team Cards Section Using HTML & CSS10:15Responsive Team Cards Section Using HTML & CSS
Responsive Team Cards Section Using HTML & CSS
zhlédnutí 63Před 3 měsíci
Responsive Team Cards Section Using HTML & CSS
CSS Bento Grid Pricing Section | jQuery & CSS Responsive Pricing Card19:46CSS Bento Grid Pricing Section | jQuery & CSS Responsive Pricing Card
CSS Bento Grid Pricing Section | jQuery & CSS Responsive Pricing Card
zhlédnutí 174Před 4 měsíci
CSS Bento Grid Pricing Section | jQuery & CSS Responsive Pricing Card
CSS Magic: - jQuery Grid Drag & Drop ✨10:07CSS Magic: - jQuery Grid Drag & Drop ✨
CSS Magic: - jQuery Grid Drag & Drop ✨
zhlédnutí 153Před 4 měsíci
CSS Magic: - jQuery Grid Drag & Drop ✨
CSS Swatch Book Cards Hover Effect | jQuery & CSS Cards | Rotating Cards9:50CSS Swatch Book Cards Hover Effect | jQuery & CSS Cards | Rotating Cards
CSS Swatch Book Cards Hover Effect | jQuery & CSS Cards | Rotating Cards
zhlédnutí 106Před 4 měsíci
CSS Swatch Book Cards Hover Effect | jQuery & CSS Cards | Rotating Cards
Figma Website UI Design Tutorial | Logitech Website | Learn Figma10:47Figma Website UI Design Tutorial | Logitech Website | Learn Figma
Figma Website UI Design Tutorial | Logitech Website | Learn Figma
zhlédnutí 39Před 4 měsíci
Figma Website UI Design Tutorial | Logitech Website | Learn Figma
Create an Analog Clock using HTML, CSS, and JavaScript6:24Create an Analog Clock using HTML, CSS, and JavaScript
Create an Analog Clock using HTML, CSS, and JavaScript
zhlédnutí 126Před 5 měsíci
Create an Analog Clock using HTML, CSS, and JavaScript
Spotlight Effect CSS & jQuery5:54Spotlight Effect CSS & jQuery
Spotlight Effect CSS & jQuery
zhlédnutí 122Před 5 měsíci
Spotlight Effect CSS & jQuery
CSS Skeleton Loading Animation | Website Animations5:34CSS Skeleton Loading Animation | Website Animations
CSS Skeleton Loading Animation | Website Animations
zhlédnutí 61Před 5 měsíci
CSS Skeleton Loading Animation | Website Animations
CSS Loading Animation Tutorial | Step-by-Step Web Design Tutorial6:11CSS Loading Animation Tutorial | Step-by-Step Web Design Tutorial
CSS Loading Animation Tutorial | Step-by-Step Web Design Tutorial
zhlédnutí 88Před 5 měsíci
CSS Loading Animation Tutorial | Step-by-Step Web Design Tutorial
How to make CSS & jQuery Animated Menu | Hand Animation11:33How to make CSS & jQuery Animated Menu | Hand Animation
How to make CSS & jQuery Animated Menu | Hand Animation
zhlédnutí 166Před 5 měsíci
How to make CSS & jQuery Animated Menu | Hand Animation
Animated Marquee Text & Images | CSS Slide Animation8:45Animated Marquee Text & Images | CSS Slide Animation
Animated Marquee Text & Images | CSS Slide Animation
zhlédnutí 44Před 5 měsíci
Animated Marquee Text & Images | CSS Slide Animation
jQuery Water Ripple Effect | Ripple.js2:45jQuery Water Ripple Effect | Ripple.js
jQuery Water Ripple Effect | Ripple.js
zhlédnutí 325Před 5 měsíci
jQuery Water Ripple Effect | Ripple.js

Komentáře

  • @robertodepasamonte3434
    @robertodepasamonte3434 Před měsícem

    Excellent tutorial on creating CSS Grid Gallery using CSS grid. Thank you for sharing. Could you please put the source code on your Codepen, and provide a link.

  • @thehourseman
    @thehourseman Před měsícem

    I appreciate nice ❤

  • @Im_user1000
    @Im_user1000 Před měsícem

    I liked it. You could maybe open the file to show the progress at some moments.

    • @DesignTorch
      @DesignTorch Před měsícem

      Ok, I will. Thanks for your feedback.

  • @siyamul_islam
    @siyamul_islam Před měsícem

    that's manual process.. try dynamic span, depends on img height /Width😊

  • @RealIslamIslam-bg1pz
    @RealIslamIslam-bg1pz Před 2 měsíci

    Good keep doing ❤

  • @MJMLOY
    @MJMLOY Před 2 měsíci

    On the phone, there was a severe suspension from the design. What is the solution? I tried, but the problem was not solved

  • @CrazyPie
    @CrazyPie Před 2 měsíci

    Where can I change background?? Cuz when I tried that it doesn't work :/

    • @DesignTorch
      @DesignTorch Před 2 měsíci

      Which background?

    • @CrazyPie
      @CrazyPie Před 2 měsíci

      @@DesignTorch oops sorry my fault😅😅 had a mistake in code

  • @asifmohammad9963
    @asifmohammad9963 Před 3 měsíci

    projects download link not working

  • @madgepereira2891
    @madgepereira2891 Před 3 měsíci

    Beautiful image ❤

  • @zuhrilfahrizal7555
    @zuhrilfahrizal7555 Před 4 měsíci

    thanks for tutorial ❤

  • @alfredopearson7388
    @alfredopearson7388 Před 5 měsíci

    😠 Promo>SM

  • @weirdsoul8757
    @weirdsoul8757 Před 5 měsíci

    When I add more than 20images they do not get displayed in zoomed view when clicked.

    • @DesignTorch
      @DesignTorch Před 5 měsíci

      Check your code carefully may be you have made any mistake.

  • @user-ly1lg6lg1c
    @user-ly1lg6lg1c Před 5 měsíci

    how to add download button to this anyway video was good

    • @DesignTorch
      @DesignTorch Před 5 měsíci

      Soon, I am going to make a new grid gallery with a download button.

  • @Harri4dl
    @Harri4dl Před 5 měsíci

    love this! Is there a way to set the animation reverse? So it's scrolling when it's not in hover state, and static when it is in hover state?

    • @DesignTorch
      @DesignTorch Před 5 měsíci

      Thank you for your feedback, yes it is possible to by adding animation on the button inner without using the hover pseudo-class, and on hover remove the animation.

  • @sewdevs
    @sewdevs Před 5 měsíci

    👍

  • @Mcoder2023
    @Mcoder2023 Před 5 měsíci

    Good job

  • @Mcoder2023
    @Mcoder2023 Před 5 měsíci

    These days css is cool tool

  • @Snap-Tutorials
    @Snap-Tutorials Před 5 měsíci

    Great bro just keep coding....

  • @felipemellao5775
    @felipemellao5775 Před 5 měsíci

    Hello my friend. What´s the difference between this selector search-input::placeholder and this selector search-input[placeholder] ?

    • @DesignTorch
      @DesignTorch Před 5 měsíci

      In summary, search-input::placeholder is used for styling the placeholder text inside an element, while search-input[placeholder] is used for styling the input element itself if it has a placeholder attribute.

    • @felipemellao5775
      @felipemellao5775 Před 5 měsíci

      @@DesignTorch Wonder! Another topic about CSS that I learned! Thank you very much friend! :D

  • @saisarath
    @saisarath Před 5 měsíci

    this is click b@it. cuz in this whole video they didnt should figma

    • @StannArax
      @StannArax Před 5 měsíci

      Dude you got it wrong. He made same thing with HTML/CSS. I also clicked for learn how to export Figma project as HTML/CSS cuz there is some ways but I still can't find the way.

    • @DesignTorch
      @DesignTorch Před 5 měsíci

      Friend, In this video I have only taught how to create a Figma project using HTML and CSS, it is not the same tutorial as you are saying, but in the future, I will make a video on this topic soon.

  • @michasosnowski5918
    @michasosnowski5918 Před 6 měsíci

    Thanks. You helped me :)

  • @bloodyprince
    @bloodyprince Před 6 měsíci

    ty bro

  • @GrandpaDeveloper
    @GrandpaDeveloper Před 7 měsíci

    I really admire your animations, your work is really incredible!!

  • @jinnmont3023
    @jinnmont3023 Před 7 měsíci

    I made a mistake. Now I love you.

  • @aliciapete868
    @aliciapete868 Před 8 měsíci

    Can you create and sell this page for me?

  • @carolinag8613
    @carolinag8613 Před 8 měsíci

    Thank you for your videos, I've watched several, and each one is better than the last. Especially because there are hardly any videos as great as yours about JQuery!

    • @DesignTorch
      @DesignTorch Před 8 měsíci

      Thanks, dear for your appreciation.

  • @haduytinhfplhn5536
    @haduytinhfplhn5536 Před 8 měsíci

    thank you very much

  • @xalgraz7039
    @xalgraz7039 Před 9 měsíci

    nice vid man

  • @waifulover3578
    @waifulover3578 Před 9 měsíci

    nice/...

  • @muhmmadawd3206
    @muhmmadawd3206 Před 9 měsíci

    keep going man 💪💪

  • @user-qx1xu1dy6o
    @user-qx1xu1dy6o Před 9 měsíci

    appreciated 💕

  • @indracode7
    @indracode7 Před 9 měsíci

    Keep it up 👍

  • @harleycoder
    @harleycoder Před 10 měsíci

    This is gorgeous but - How can I add captions? I really need captions!!!!!!

    • @DesignTorch
      @DesignTorch Před 10 měsíci

      If you'd like to add a caption, you can check out my other grid gallery video.

  •  Před 11 měsíci

    Nice work. Can you please add fancy (or other advance) gallery?

    • @DesignTorch
      @DesignTorch Před 10 měsíci

      Can you please explain that to me?

  • @anteracademy
    @anteracademy Před 11 měsíci

    I love you very much ❤❤❤❤❤❤❤❤❤❤

  • @MrOlivom
    @MrOlivom Před rokem

    Thanks!

  • @4cx61
    @4cx61 Před rokem

    THANK YOU VERY MUCH U SAVED ME

  • @peterdekyssky7458
    @peterdekyssky7458 Před rokem

    like is this lightbox options even working ? everything looks fine but when i click on img is bigger than screen and any options in js doesnt work even your stop scroling doesnt work for me

    • @DesignTorch
      @DesignTorch Před 11 měsíci

      Please recheck your code I am sure you are missing something.

    • @michalsvata
      @michalsvata Před 5 měsíci

      I have the same problem, but when I downloaded the finished project to check, it worked. But when I applied this code to my site it doesn't work, I'm sure I have a bug somewhere in the code but I can't find it, I've been trying to fix it for about an hour now :D

  • @SnipCraftLeft
    @SnipCraftLeft Před rokem

    awesome vid tysm!! B]

  • @debarjo
    @debarjo Před rokem

    Wow!! This is so helpful!!! Thank you DesignTorch!

  • @user-co3uj3fz5b
    @user-co3uj3fz5b Před rokem

    Thanks a lot for this. though I have 1 issue, i think its just me but hovering on the image is not smooth, ill customize the hover part. but any tips why that happened will be really appreciated.

  • @VaibhavPareek
    @VaibhavPareek Před rokem

    Awesome

  • @humancomputerinteraction6110
    @humancomputerinteraction6110 Před rokem

  • @himanidadem
    @himanidadem Před rokem

    Thanks alot. It was super useful.

  • @rashaalias8206
    @rashaalias8206 Před rokem

    👍

  • @SahabatMuslimin2023
    @SahabatMuslimin2023 Před rokem

    Halo semua

  • @e-vuelondon
    @e-vuelondon Před rokem

    Is it possible to add this type off css to elementor?

    • @DesignTorch
      @DesignTorch Před rokem

      Yes, It is possible. and soon I will also upload a video on WordPress.

  • @deepblack1903
    @deepblack1903 Před rokem

    Components of the photo appeared on the top of the round box, how can I fix it?

  • @soniabilal3562
    @soniabilal3562 Před rokem

    It's exciting and informative. Thank you for this fantastic video😇😇

  • @saleysouley4503
    @saleysouley4503 Před rokem

    thanks, it was so helpful