Animated PORTFOLIO Website Template In Html CSS And JS | Personal Website with Typing Animation

แชร์
ฝัง
  • เผยแพร่เมื่อ 27 พ.ค. 2022
  • Learn How to Create Animated PORTFOLIO Website Template In Html CSS And JS | Personal Website with Typing Animation | WebKitCoding
    ----------------------
    Don't forget to SUBSCRIBE this channel.
    ➣bit.ly/380HnsS
    Download Source Code :
    ✅bit.ly/3t1vL0a
    ----------------------
    Hope you might like these
    1) Animated Website With Responsive Design
    ➣ • Responsive Website Usi...
    2) Full Fitness Website With Responsive Design
    ➣ • Fully Responsive GYM F...
    3) Playlist - Html And CSS Tutorials
    ➣bit.ly/31MojsT
    4) Playlist - JavaScript Tutorials
    ➣bit.ly/2BHINrV
    ----------------------
    Images Credit :
    ➣pexels.com/
    -----------------------
    Connect with me :
    ➣insta : bit.ly/38N8WWo
    ➣fb page : bit.ly/3ybsTRK
    ➣tumblr : bit.ly/3vBiaOA
    ➣twitter : bit.ly/3kzWBHZ
    ----------------------
    Thanks for watching :) 💙webkitcoding
    Keywords -
    #webkitcoding #portfoliowebsite
    animated portfolio website template,how to make an animation portfolio,portfolio website templates,character animation portfolio,creative portfolio website, personal portfolio template website,animated website html css and js,portfolio website with html css and js, webkitcoding,portfolio website with typewritter animation,personal website with text typing effect

ความคิดเห็น • 159

  • @thuzdesign5697
    @thuzdesign5697 2 ปีที่แล้ว +31

    Cool bro 😎

  • @whitesky8013
    @whitesky8013 ปีที่แล้ว +1

    THANK YOUUU FINALLY IM DONEEE WITH THE DESIGN IN MY WEBSITE VERY HELPFULLL!!!!!1

  • @auser8688
    @auser8688 ปีที่แล้ว +1

    Excellent , more video tutorial, please ধন্যবাদ।

  • @mrprogrammer1891
    @mrprogrammer1891 ปีที่แล้ว

    This video was amazing thank a lot for this text animation Tutorial video

  • @Howmygamerun
    @Howmygamerun ปีที่แล้ว +1

    very clean, good job

  • @FutureeeBillionaireee
    @FutureeeBillionaireee ปีที่แล้ว

    Wow super cool. Love it :)

  • @nemuritori
    @nemuritori ปีที่แล้ว

    Bro I love you, thanks so much!

  • @codersuz5318
    @codersuz5318 ปีที่แล้ว +1

    It turned out great, thank you😍😍❤❤😘😘

  • @Washim_Akram.
    @Washim_Akram. ปีที่แล้ว +3

    Nice plugin😊

  • @Danu_Prastyo_059
    @Danu_Prastyo_059 ปีที่แล้ว

    thanks for your innovation dude

  • @gouravchouhan5616
    @gouravchouhan5616 11 หลายเดือนก่อน +1

    Great sir 👌

  • @jonathan3488
    @jonathan3488 ปีที่แล้ว

    Awesome design man

  • @Ravi-sl7ik
    @Ravi-sl7ik ปีที่แล้ว +1

    Superb 👌👌

  • @YakBoboboy2424
    @YakBoboboy2424 ปีที่แล้ว +3

    very impressive

  • @benjaminchukwu7298
    @benjaminchukwu7298 9 หลายเดือนก่อน +1

    thanks a lot

  • @Paulo280713
    @Paulo280713 ปีที่แล้ว +1

    awesome

  • @designer_AC
    @designer_AC ปีที่แล้ว +1

    Nice

  • @codewithdahir
    @codewithdahir หลายเดือนก่อน

    This is rare and topnotch, that is hardwork right there. keep going bro.

  • @bogdanstochian
    @bogdanstochian ปีที่แล้ว +1

    so inspiring

  • @jaromir_hodan
    @jaromir_hodan ปีที่แล้ว

    Well.. with the guy movement animation, you could make him move with he x/y coordinates of the mouse :D

  • @AfghanWebDeveloper
    @AfghanWebDeveloper ปีที่แล้ว

    Good Bro 😀😀😀

  • @Dhykaputra23
    @Dhykaputra23 ปีที่แล้ว

    thanks for sharing

  • @toxtamurodjorayev8337
    @toxtamurodjorayev8337 2 ปีที่แล้ว

    very nice

  • @garaxd
    @garaxd ปีที่แล้ว

    sangat keren

  • @CodeCreativeOfficial
    @CodeCreativeOfficial ปีที่แล้ว +1

    Cool video @WebKitCoding

  • @morgan_the-5th
    @morgan_the-5th ปีที่แล้ว +1

    Thanks bro 💞

  • @ThreeTreechaos
    @ThreeTreechaos 7 หลายเดือนก่อน +1

    bro why does mine don't work when the "home, skills, etc" is given to line horizontally and with space??

  • @amit6086
    @amit6086 2 ปีที่แล้ว

    Cool✌

    • @fahadagri3560
      @fahadagri3560 2 ปีที่แล้ว

      Hey bro the typing effect does not work for me... mind sending me your html and css (only for this part). Cheers!

  • @diegoplayer9646
    @diegoplayer9646 ปีที่แล้ว

    es responsi para celular?? se adapta a todo tipo de aplicacion

  • @Jonas-gm4my
    @Jonas-gm4my ปีที่แล้ว +10

    He starts coding animations at 12:10

  • @battlecampkhimmay2981
    @battlecampkhimmay2981 ปีที่แล้ว +2

    how to get that first link ? cloud ajax ?

  • @jesusneto1590
    @jesusneto1590 ปีที่แล้ว

    What is this template that you are using on VScode? And the website got very well design.

  • @NikosCGGICarried
    @NikosCGGICarried ปีที่แล้ว +1

    hey,what is the vscode theme?

  • @22bears
    @22bears ปีที่แล้ว

    Is there any version of this without the moving background ? Thanks

  • @blac-whit
    @blac-whit ปีที่แล้ว

    hey. where did you get that splash? thanks in advance

  • @nethulyasooriarachchi8625
    @nethulyasooriarachchi8625 ปีที่แล้ว +1

    The typing effect used to work but now not working! How to solve this issue?

  • @kalebesantos9480
    @kalebesantos9480 ปีที่แล้ว +2

    Where I download the images?

  • @ramazanataman1840
    @ramazanataman1840 8 หลายเดือนก่อน

    l love you code

  • @kushangshah-be7hn
    @kushangshah-be7hn ปีที่แล้ว

    what photo ratio you used?

  • @Strdk24
    @Strdk24 ปีที่แล้ว +1

    Bro I have one doubt
    How to fix style sheet web site

  • @whitesky8013
    @whitesky8013 ปีที่แล้ว +1

    bro how to make the home about like that clickable plslsss

  • @elenvibes3623
    @elenvibes3623 ปีที่แล้ว +3

    I have a problem in typeSpeed and so on; I have everything just like your but either doesn´t change the speed or doesn´t appear at all.
    Except grom that, it was amazing and easly to follow

    • @WebKitCoding
      @WebKitCoding  ปีที่แล้ว

      Make sure first, your type.js cdn link properly connected with active internet connection than refresh page and check out result, buddy. If also not done, let me know

    • @elenvibes3623
      @elenvibes3623 ปีที่แล้ว

      @@WebKitCoding Thanks! I did that again and work perfectly 🫶🏽

  • @shamieditz_official
    @shamieditz_official ปีที่แล้ว +1

    bro can i use your design for my website??

  • @gamester302
    @gamester302 ปีที่แล้ว +1

    Bro can I use your portfolio as my website design ❤️

  • @desmondsparrow3490
    @desmondsparrow3490 10 หลายเดือนก่อน +1

    amazing work. Please I cant access your source code

  • @shawknette
    @shawknette ปีที่แล้ว

    what size should the image be for the person?

  • @ilhamsa69
    @ilhamsa69 ปีที่แล้ว

    not working in my code, i don't know why! im so exicited 😢😢

  • @Angpao3649
    @Angpao3649 9 หลายเดือนก่อน +1

    Why I can't do i'm coder youtube why

  • @mohamedkassem8718
    @mohamedkassem8718 ปีที่แล้ว

    Please give me codes of thus website in video, I like this design very

  • @sn33ak
    @sn33ak ปีที่แล้ว +1

    Bro i try to create scrolling in the website to add sections (about,skills,blog) but i cant why ?

    • @WebKitCoding
      @WebKitCoding  ปีที่แล้ว +1

      For scrolling you'll have to add scroll behavior property and add value "smooth" Inside html or bady selector of css file

  • @blacky7273
    @blacky7273 ปีที่แล้ว

    Sir i am following you from so many days....i am unable to buy the subscription due to money issue , can you please share the drive link it will be very grateful to me.
    Very humbly requested sir

  • @VixooShorts
    @VixooShorts ปีที่แล้ว

    Comment on importe les icones ?

  • @mrsabvr46gaming35
    @mrsabvr46gaming35 ปีที่แล้ว

    thanks a lot brother may i use thz concept for my portfolio??

  • @lovi.santiago
    @lovi.santiago ปีที่แล้ว +1

    hi bro! what theme of vscode are you using??

  • @wpsadek
    @wpsadek ปีที่แล้ว +1

    This is only home page?

  • @thuzdesign5697
    @thuzdesign5697 2 ปีที่แล้ว

    😀😀

  • @Chris-ln1fd
    @Chris-ln1fd ปีที่แล้ว

    Hi, may i know what kind of laptop you coded on. Like a MacBook or a windows?

  • @umareditx5164
    @umareditx5164 ปีที่แล้ว

    why does my typewriter glitches when another loop starts

  • @Soorian_
    @Soorian_ 10 หลายเดือนก่อน +1

    How did you cutted your img without having a background,which app?

    • @KaaiRL
      @KaaiRL 9 หลายเดือนก่อน +1

      you can probably search it up on google and find a website for that

  • @user-yc2rv4hl8o
    @user-yc2rv4hl8o หลายเดือนก่อน

    Sir i am not able to create an footer section

  • @22bears
    @22bears ปีที่แล้ว +1

    I have one single question: my splash img is on top of my profile picture.... How can I fix that? Thanks, I subscribed. I'm learning a lot with your short tutorials. they're perfect. greetins from buenos aires

    • @Seegunz
      @Seegunz ปีที่แล้ว +1

      Z-index

    • @WebKitCoding
      @WebKitCoding  ปีที่แล้ว +2

      Correct

    • @kristinebuskum7392
      @kristinebuskum7392 ปีที่แล้ว

      I am not getting it to position as I want either

    • @22bears
      @22bears ปีที่แล้ว

      @@kristinebuskum7392 I’ve quit this project the moment I asked this (3 months ago) and decided to search another tutorial and found one called Responsive Portfolio Website HTML CSS and Javascript from CodingLab. That tutorial is 1 hour long and a few minutes more, but it was easy to follow and everything worked 👌🏻

  • @suriyaa6950
    @suriyaa6950 ปีที่แล้ว +2

    images link please bro

  • @purrfect_kitty_hub
    @purrfect_kitty_hub ปีที่แล้ว +1

    Hello there ,Link to socials not working (icons not displaying on navbar)...why?

    • @endoritos
      @endoritos ปีที่แล้ว +1

      also in div class links u have to add fa-brands instead of just fa.

  • @alibaci9780
    @alibaci9780 ปีที่แล้ว +1

    Downlode not working

  • @shivanshsingh2404
    @shivanshsingh2404 ปีที่แล้ว +4

    I'm "a" designer/coder/animator etc

    • @fynnkrausefootball
      @fynnkrausefootball 11 หลายเดือนก่อน

      "a Animator" is also incorrect English

    • @TT-yz7pz
      @TT-yz7pz 10 หลายเดือนก่อน

      @@fynnkrausefootball an

  • @im4uajnds
    @im4uajnds 2 ปีที่แล้ว

    can you give me the link.

  • @pivonski
    @pivonski ปีที่แล้ว +2

    what about copyrights about this code? do you post that to help people make also 1:1 with their "content" or its just sample and u don't anyone to "copy" that work?

    • @WebKitCoding
      @WebKitCoding  ปีที่แล้ว

      Yup it just as sample only for education purpose for every one, not to publish to any social platform without our permission.

    • @cdey3886
      @cdey3886 ปีที่แล้ว

      @@WebKitCoding why would anyone use this lol

  • @arthennaz7983
    @arthennaz7983 ปีที่แล้ว

    i wanna make my portfolio site , kindly guide which free domain should i use that is not just for 1 year so that clients can view my portfolio... or any alternative free method so that i just share url or link of my portfolio to clients?
    also i made three sample sites using local host how will i add these site in my portfolio?

    • @saifsajad1712
      @saifsajad1712 ปีที่แล้ว +1

      U could use infinityfree to host ur website
      Also u can link any other site in ur main one through coding it just like how in this video he add his insta , twitter , etc ..

    • @arthennaz7983
      @arthennaz7983 ปีที่แล้ว

      @@saifsajad1712 is infinityfree safe to use?

    • @therealarnob
      @therealarnob ปีที่แล้ว

      @@arthennaz7983 there will be no such problem. u can easily secure these domains using SSL certificates if you want

    • @saifsajad1712
      @saifsajad1712 ปีที่แล้ว

      @@arthennaz7983 idk to be honest i didn’t upload any important data on it + I’m an engineer and this is not my field to answer😅

  • @fahadagri3560
    @fahadagri3560 2 ปีที่แล้ว +1

    Why is my comment gone

  • @whitesky8013
    @whitesky8013 ปีที่แล้ว +1

    my i is not working grrr

  • @ammuchinnu3685
    @ammuchinnu3685 9 หลายเดือนก่อน

    Sir how did you create splash image on background

    • @WebKitCoding
      @WebKitCoding  8 หลายเดือนก่อน +1

      It's a png downloaded image not created to me

  • @vale_quijano7
    @vale_quijano7 ปีที่แล้ว +1

    Y porque pones a un vagabundo en el banner?

  • @bigboineo3211
    @bigboineo3211 ปีที่แล้ว

    it doesnt incluide js? i bought it

    • @WebKitCoding
      @WebKitCoding  ปีที่แล้ว

      I used inline js(see bottom side in html file ) for auto typing effect only.

  • @stefanoespoernomo87
    @stefanoespoernomo87 ปีที่แล้ว +1

    how to record video like that :(

    • @heydiby
      @heydiby ปีที่แล้ว +1

      If you are using Windows as your main OS, just press the Windows key and the G key at same time and you will be able to record all your interactions in your aplications and programs.

  • @mizoff6589
    @mizoff6589 ปีที่แล้ว

    Sir im an student i cant afford to buy it for images mostly i dont have any usdt card to pay can u please give me the images only via google drive link it was request sir ..Ill waiting

  • @baharuddinsk5196
    @baharuddinsk5196 8 หลายเดือนก่อน +1

    How can I make it responsive?

    • @WebKitCoding
      @WebKitCoding  8 หลายเดือนก่อน +2

      By using css "media screen" Property

  • @user-cw3sz2cw6t
    @user-cw3sz2cw6t ปีที่แล้ว

    Can I use this template without paying? Can I use it without copyright fees?

    • @rl6382
      @rl6382 ปีที่แล้ว

      Can I beat you up without going to jail?

  • @minibigode
    @minibigode ปีที่แล้ว

    is this portfolio responsive? mobile

  • @seletgabpjr470
    @seletgabpjr470 ปีที่แล้ว

    qui a touver les images s'il vout plai gratuitement

  • @islam_boukhari
    @islam_boukhari ปีที่แล้ว +2

    please dark mod

    • @WebKitCoding
      @WebKitCoding  ปีที่แล้ว +1

      I have recently uploaded please checkout on channel

    • @islam_boukhari
      @islam_boukhari ปีที่แล้ว

      @@WebKitCoding ok thanks

  • @xypers
    @xypers ปีที่แล้ว

    how can I download the images?

    • @WebKitCoding
      @WebKitCoding  ปีที่แล้ว

      Checkout description for source code link(here images also included)

    • @xypers
      @xypers ปีที่แล้ว

      @@WebKitCoding that is paid...

  • @nadarajangs4688
    @nadarajangs4688 ปีที่แล้ว

    Is this responsive?

    • @WebKitCoding
      @WebKitCoding  ปีที่แล้ว

      Sorry, only desktop version

  • @saidaberda911
    @saidaberda911 ปีที่แล้ว +2

    I'm English. RIP me.

    • @frishera
      @frishera ปีที่แล้ว

      O
      h shitttt Yu real Endklish?!

  • @acromos
    @acromos ปีที่แล้ว +1

    Then, i'm ChatGPT. 😎😃

    • @rl6382
      @rl6382 ปีที่แล้ว +1

      You’re foolish if you think chat GPT can create this 😂 chat gpt can create containers and children for those containers, and it can create objects and variables, which is extremely useful to actual developers who know how to leverage this. But to think chatgpt can do this is extremely silly and shows how little you actually understand and know development 😅 sorry to sound like a bad guy btw I am just kinda annoyed when people speak on things they don’t understand so much 😂 it’s like saying I own a circular saw so therefore I’m a home engineer and know how to make mansions now. Sounds silly right?
      (Btw I’m a HUGE CHATGPT fan and I use it everyday to write me code to speed up my productivity) I am just aware of its LIMITS as well (obviously it will grow more powerful but we are AWAYS away from what this guy did in the video) Cheers 🎉

    • @acromos
      @acromos ปีที่แล้ว

      It was a jok bro, i respect the human creativity. But now we must combine humains and AI.

    • @rl6382
      @rl6382 ปีที่แล้ว

      @@acromos Yes I agree

  • @JinGamingyt
    @JinGamingyt ปีที่แล้ว +1

    Is it responsive?

  • @looperw77
    @looperw77 ปีที่แล้ว +1

    Source Code not found!

    • @WebKitCoding
      @WebKitCoding  ปีที่แล้ว

      Please check video description

  • @SulkinWolsla
    @SulkinWolsla ปีที่แล้ว +3

    Not the best design.

  • @muhammadaliilxamov2632
    @muhammadaliilxamov2632 ปีที่แล้ว

    🥴🥴🥴🥴

  • @marcriofrio
    @marcriofrio ปีที่แล้ว +3

    Where do you code?

    • @nevan318
      @nevan318 ปีที่แล้ว

      Наверное это VS code

    • @anishbiswas1492
      @anishbiswas1492 ปีที่แล้ว +1

      Blackboard

    • @Red.Lucifer07
      @Red.Lucifer07 11 หลายเดือนก่อน +1

      @@anishbiswas1492 LOL!

  • @konstantinstrika2445
    @konstantinstrika2445 ปีที่แล้ว

    How to download html and css

  • @letadz8577
    @letadz8577 2 ปีที่แล้ว +1

    Source code link is not working :(

    • @WebKitCoding
      @WebKitCoding  2 ปีที่แล้ว +1

      Link is absolutely working buddy, try again once

    • @manolo_averias
      @manolo_averias 2 ปีที่แล้ว +1

      @@WebKitCoding y its working but its not free what a shame

    • @hananmohamed4558
      @hananmohamed4558 2 ปีที่แล้ว +1

      @@manolo_averias yes, what a shame

  • @pseudounknow5559
    @pseudounknow5559 ปีที่แล้ว +53

    Download link please ? Not the paid one lmao

    • @kwamenadadson
      @kwamenadadson ปีที่แล้ว +10

      🤣

    • @soulsilver1vortex
      @soulsilver1vortex ปีที่แล้ว +5

      🤣😂😆 This goofy

    • @alif__
      @alif__ ปีที่แล้ว +4

      Lmfaoo😹

    • @koslz
      @koslz ปีที่แล้ว +6

      @@soulsilver1vortex why u guys are laughing? Bro just wanted to download it 💀

    • @cdey3886
      @cdey3886 ปีที่แล้ว +7

      no one should pay for this lol

  • @hashirali6547
    @hashirali6547 ปีที่แล้ว +2

    Source Code?

    • @WebKitCoding
      @WebKitCoding  ปีที่แล้ว

      Already given in description

  • @code_with_knights0001
    @code_with_knights0001 ปีที่แล้ว +1

    Not responsive. 🙄

  • @0tiii
    @0tiii ปีที่แล้ว

    If you advertise yourself as a coder you do yourself a disservice doing it in plain HTML/CSS/JS. People don't hire that

    • @pentree986
      @pentree986 ปีที่แล้ว

      What should one do then?

    • @0tiii
      @0tiii ปีที่แล้ว

      @@pentree986 Learn a web framework like react / nextjs, vue, angular or whatever

    • @degeleagel420
      @degeleagel420 ปีที่แล้ว +8

      @@pentree986 Don't listen to that prick, you can get a lot of hirings doing either of those 3 from a LOT of clients or even companies.

    • @coding-with-bob
      @coding-with-bob ปีที่แล้ว

      lmao in 2020 i ve got a job as a fresher web dev using bootstrap. Fpt hired me as a front end dev just bcs my cv was a responsive website