Responsive Personal Portfolio Website using HTML CSS & Javascript

Sdílet
Vložit
  • čas přidán 17. 04. 2023
  • Responsive Personal Portfolio Website using HTML CSS and Javascript, Responsive Personal Portfolio Website HTML CSS and Javascript, Responsive Personal Portfolio Website, Responsive Portfolio Website HTML CSS Javascript, Responsive Portfolio Website HTML CSS
    Click For More: / @codehal
    Website:
    codehalweb.com/
    -------------------------------------------------------------------
    Get Source Code from here and support me ❤
    www.buymeacoffee.com/codehalY...
    Get Source Code by PayPal
    ko-fi.com/s/24e8b0c553
    🔔 Subscribe Now!
    / @codehal
    Related Videos:
    1. Build a Complete Responsive Personal Portfolio Website using HTML CSS Javascript
    • Build a Complete Respo...
    2. Build a Complete Responsive Personal Portfolio Website using HTML CSS Javascript | Dark/Light Mode
    • Build a Complete Respo...
    3. How To Create A Personal Portfolio Website Using HTML and CSS Only | Step By Step Website Tutorial
    • How To Create A Person...
    4. Animated Portfolio Website Template in HTML CSS & JS | Personal Website with Text Typing Animation
    • Animated Portfolio Web...
    5. Animated Portfolio Website Template in HTML CSS and JS | Personal Website with Dark Light Mode
    • Animated Portfolio Web...
    6. Personal Portfolio Website using HTML & CSS
    • Personal Portfolio Web...
    Download Image & Start Project From Scratch:
    drive.google.com/file/d/1BCJp...
    Icons:
    boxicons.com/
    Image Sources:
    unsplash.com/
    Codehal
    -------------------------------------------------------------------
    #css #cssanimation #csseffect #codehal
    -------------------------------------------------------------------
    Disclaimer video is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use.

Komentáře • 303

  • @mayhrem
    @mayhrem Před rokem +59

    Amazing work! I really love your coding style and how you separate everything. The responsive website works amazing.

    • @ritikkumarsah7034
      @ritikkumarsah7034 Před 7 měsíci +1

      Social media icon not showing now after 4 month later how can i fix it .please tell

  • @aggarwa1
    @aggarwa1 Před rokem +8

    amazing design ...big like to your work

  • @WebDevASMR
    @WebDevASMR Před rokem +22

    Beautiful work, I love the animations 🔥

  • @vivianmingaud7942
    @vivianmingaud7942 Před rokem +2

    Very Nice work and good teaching also !

  • @WebLearningInstitute
    @WebLearningInstitute Před rokem

    amazing really good work thanks for sharing this project video and i am waiting for your next interesting porject videos

  • @Richa_sharma_209
    @Richa_sharma_209 Před rokem +7

    I am seeing the tutorial just for practice..and it really helped me a lot
    But I will make my own portfolio one day without seeing any tutorial.

  • @maxscheel6083
    @maxscheel6083 Před rokem

    Super cool! Thanks for sharing!

  • @nehap2-6
    @nehap2-6 Před 10 měsíci +2

    Your work is amazing! I really like the way you have explained it to us.
    Thank you!

  • @BG-xu8be
    @BG-xu8be Před 11 měsíci +18

    It is kind of refreshing to see clean code like this nowadays, without the horror of divitis, classitis, tailwindiseases and framework overkills. And very beautiful and elegant too! Of course your css code could be a little more efficient (there are some unnecessary repetitions, which I suppose you do so to make it more understandable to beginners). I would also have used more css variables and apply to them the media-queries, to reduce the css code. But on the whole an awesome work, bravo!

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

      Dude thank you. I haven't finished this one yet but i will now because of this comment. I get so tired of trying to watch tutorials and every one of them requires you to go through the process of installing libraries or frameworks or some random IDE that i'm 1000% not going to use. More tutorial guys should be aware that we aren't here to be talked at we are here to learn. Its no wonder web design across the board is so bland and awful looking everybody just wants to copy code and paste code now for some reason.

  • @atikadewi1118
    @atikadewi1118 Před rokem +1

    Thanks for portfolio responsive, I like it

  • @Compli1212
    @Compli1212 Před rokem

    Aesthetic and awesome 😳😳noice bro.

  • @samadsarkar1590
    @samadsarkar1590 Před rokem +1

    Amazing work

  • @jas-mw4fo
    @jas-mw4fo Před rokem

    This is amazing 🔥🔥🔥. It's in another level.

  • @SagarKumar-tj6wc
    @SagarKumar-tj6wc Před rokem

    Amazing Very beautiful

  • @fabienbedogue527
    @fabienbedogue527 Před 10 měsíci +1

    If all coding classes could be easy to follow as this one. Great Job

  • @ganeshgupta9692
    @ganeshgupta9692 Před rokem +1

    Very amazing brother ❤

  • @deboraino.6672
    @deboraino.6672 Před rokem +1

    Amazing 🎉

  • @AiGyT
    @AiGyT Před rokem

    Awesome ❤

  • @jasonSage94
    @jasonSage94 Před rokem

    Thx 🔥🔥🔥🔥.
    I practice my skills in your channel.

  • @ProgrammingSolutionsTeam

    Nice Design 👍 😎

  • @Thedrscooby
    @Thedrscooby Před rokem

    This is booooooooooombastic excellento dynomite with a side of chili red hot peppers....Amazing stuf!!

  • @kirwakelvinkering3122
    @kirwakelvinkering3122 Před 9 měsíci +4

    I learned bootrap for 1 month and after that Tailwind css came in , from that day i swore to learn pure css for my projects , amd now am at peace 😂 thanks bro.

  • @abrahamsecoe87
    @abrahamsecoe87 Před rokem +1

    New subscriber here. Amazing Job thanks !!

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

    Amazingly styled...

  • @icarokiilermelo
    @icarokiilermelo Před rokem

    What a beatiful work, Hi from Brazil

  • @ishandinuka590
    @ishandinuka590 Před rokem

    Great 👊

  • @freecodebd8654
    @freecodebd8654 Před rokem +1

    Amazing work🥰🥰🥰🥰

  • @aakashyadav3351
    @aakashyadav3351 Před rokem

    Thanks for the images❤

  • @nyxpua
    @nyxpua Před rokem +1

    Awesome!

  • @eroosyyy
    @eroosyyy Před rokem +1

    thanks bro, with this video has reference I made a wonderful website

  • @Motivation_Libr4ry
    @Motivation_Libr4ry Před rokem +1

    Bro bahut acha he 🔥💯

  • @bluecatbd
    @bluecatbd Před rokem +10

    I made my portfolio by seeing this tutorial. same to same.😍😍🥰

    • @user-vo9lx8pk1z
      @user-vo9lx8pk1z Před rokem +1

      Can you tell me the way you put your photo?(The dimensions and if you made it like the video with photoshop)

    • @houghtonabhi
      @houghtonabhi Před rokem

      is there any problem you have faced in this? and how much time does it take to complete this Project?

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

      From Java script I am not able to sync my portfolio.. Pls do help

  • @CryptoZeidun
    @CryptoZeidun Před rokem +10

    it's so satisfying when I'm watching it ! Great Job ! Keep it like that :D

  • @user-pr2di8xc2y
    @user-pr2di8xc2y Před 11 měsíci

    bon bon mon chef j'aime votre site c'est super super, j'aimerai apprendre aussi ça avec

  • @rodriguezlopezgael4878
    @rodriguezlopezgael4878 Před 11 měsíci +1

    Excellent video, thank you so much. I could use your template and upload it to the internet with a hosting service?

  • @vedic.108
    @vedic.108 Před 8 měsíci

    Attractive, simple and better than other websites. This simplicity is very good.🚩

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

      Social media icon not showing now after 4 month later how can i fix it .please tell

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

      plz can you give the souce code of this protfolio website🙂

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

      @@Developer8631 i have, but not show thw social media icon and home image

  • @intezarkhan889
    @intezarkhan889 Před rokem

    Good 👍

  • @muhammadrobysyafalah5784

    this website is so perfectly, awesome.

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

      plz can you give the souce code of this protfolio website🙂

  • @vujadinovicc
    @vujadinovicc Před rokem

    Nice bro ❤

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

    Gracias gracias mezcle las ideas de este video con el otro portafolio morado me estas salvando mucho un día antes del examen que es mañana gracias❤

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

    cool really helpful

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

    J'adore trop bien fait

  • @spanel8561
    @spanel8561 Před rokem

    Thank you very much brother

  • @ecebal1957
    @ecebal1957 Před rokem

    I liked it very much and it was great. 💝

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

      plz can you give the souce code of this protfolio website🙂

  • @tejpalsinghsidhu
    @tejpalsinghsidhu Před rokem

    Brilliant!

  • @Niku1299
    @Niku1299 Před rokem +1

    Amazing Sir 😊. I'll give it 5/5.

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

      Social media icon not showing now after 4 month later how can i fix it .please tell

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

    Awesome work. Tried and get best results. Thank you so much

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

      plz can you give the souce code of this protfolio website🙂

    • @sourcex-yl5kk
      @sourcex-yl5kk Před 2 měsíci

      yea, it ll be very helpful bro

  • @mr.editor7445
    @mr.editor7445 Před 11 měsíci

    Beautiful site ever.

  • @m.anandh401
    @m.anandh401 Před 7 měsíci

    Thank you so much sir, i can use this website design as my personal portfolio ❤

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

      plz can you give the souce code of this protfolio website🙂

  • @user-wt1nw4dx7y
    @user-wt1nw4dx7y Před 10 měsíci

    amazing

  • @mastermindarc
    @mastermindarc Před rokem

    Awesome Dude

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

    I'm from Indonesia, I find it cool !!! Nice bro

  • @DecodeReels
    @DecodeReels Před rokem +1

    Love from India 🇮🇳

  • @user-kh4ty7tg6y
    @user-kh4ty7tg6y Před 11 měsíci

    kmalllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll broooooooooooooooooooooooo

  • @user-un6zi3wv9s
    @user-un6zi3wv9s Před 9 měsíci +2

    I've finished doing it, according to the steps in this video. Thank you codehal. I want to use it on my own hosting, hopefully it's allowed. Now I have a good portfolio.
    Thank you, sir. 😊

  • @ariele305
    @ariele305 Před rokem

    Very beautiful, hello from Brazil

  • @rallfsilva6626
    @rallfsilva6626 Před rokem

    perfect 🔥

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

    Amazing!!!!

  • @whytegamer01
    @whytegamer01 Před rokem +101

    I wish you could talk in your videos

    • @christdolphin69
      @christdolphin69 Před 11 měsíci +18

      Then we might find out he’s actually some Indian named Rajiv rather than a cool American dude named “jacob Aiden skyler iii”

    • @minecraftguy8652
      @minecraftguy8652 Před 11 měsíci +1

      ​@@christdolphin69the name of the channel suggests he's Indian "Codehal", it's like Taj Mahal or sth indian

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

      Hi, ou est le code PHP pour recevoir les mails de la page contact. Je suis novice

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

      😂

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

      😂😂

  • @Vaulco
    @Vaulco Před rokem

    video stopped at 12, I wrote this comment as a reminder. Great vid btw!!!!

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

    Amazing ❤

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

    Amazing!!!!!!!!!!!!!

  • @srii8530
    @srii8530 Před rokem

    I made my portfolio by seeing ur videos tq🎉🎉🎉

    • @codehal
      @codehal  Před rokem +1

      Awesome, keep going on 🔥

    • @agent97560
      @agent97560 Před rokem

      your website name?

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

      @@codehal Bro... what's the dimensions of the images used in the home page?

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

      What are the dimensions your used for images bruh?

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

      @@codehal hello codehal 👋
      may i clone it and host the design on internet for my personal portfolio website?
      Thank You,
      Best Regards

  • @SaGaWisdom
    @SaGaWisdom Před rokem +1

    love u from Pakistan dear sir

  • @chhappri1648
    @chhappri1648 Před rokem

    ❤❤❤❤

  • @ObaidullahArab-wb8tj
    @ObaidullahArab-wb8tj Před rokem

    Hello sir
    Today is Ian so happy all my class mat are so depress and told me how you can create .
    I very thang to you to create that Web site all my friends very respect me.
    Thang you very much
    Sencerly sir obaidullah form afghanistan

  • @ChristianWarrior1
    @ChristianWarrior1 Před 10 měsíci +2

    If i put a different sentence at .text-animate in html what should i change in css so that the cursor stops at the last letter?

  • @abdulkareemsabdul3546
    @abdulkareemsabdul3546 Před 7 měsíci +1

    Ya the best developer I've seen in my life.....
    Pls how about hosting the developed website?

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

    Very beautiful

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

    You are best

  • @SomtyUba
    @SomtyUba Před rokem

    wow

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

    good

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

    it is a good job bro

  • @user-md6um6oh6s
    @user-md6um6oh6s Před 11 měsíci

    Am making one using this tutorial

  • @ganeshgupta9692
    @ganeshgupta9692 Před rokem +3

    🥵🤤🤤The more times you see the less it is, you have made it very well , one day I will also make it like this, now I am still learning

  • @dayanmoreira25
    @dayanmoreira25 Před rokem

    awesome !!

  • @kindz3456
    @kindz3456 Před rokem +1

    Thanks Bhaiya , But bhaiya a general question comes in my mind , how to develop thinking of , how to design the website , i dont want to copy someone but i am also not able to develop my designing skills , i got confused what will be the layout of my website , please bhaiya tell me how these creative ideas comes in your mind to create masterpiece like website

    • @wiz8058
      @wiz8058 Před rokem +4

      creatives are someones work. coding is someones work. Mostly they purchase the design which comes in images sand they code it into a working website.
      you copy and use it. just woerk along because working along makes you good at it. if you decide to stay off then you can't learn anything.

    • @Raju-cc8tm
      @Raju-cc8tm Před rokem

      Brother apko pehle copy hi krna hoga then after u will become a web designer..isi mai pehle copy krta hu phir bina dekhe then apna ek banata hu😅😊

  • @sidykeita2107
    @sidykeita2107 Před rokem

    frome france, it's wonderful what you've done.

  • @justjie1008
    @justjie1008 Před rokem

    What color scheme is that? I really like it!

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

    🤩

  • @sugaslate14
    @sugaslate14 Před rokem +6

    I’m curious, what’s the size of your background image, I notice when recharging screen size, the background image doesn’t change relative to the screen size so the fading opacity container doesn’t work properly unless it’s full screen

    • @anthonyfadel7353
      @anthonyfadel7353 Před rokem +1

      hello if you mean that the background color is overlapping the image and the image is not changing relative to the screen at under 991px in the inspect view, i am having the same issue, did you solve it? also in full screen without inspect, it is working correctly.

    • @ramazanagamaliyev7395
      @ramazanagamaliyev7395 Před rokem

      Hello dude , Can u solve this?

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

      @@ramazanagamaliyev7395 Of course he defined that image as a background-image, size: cover, background-repeat: no-reapet and also position: right

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

    I love your vs code customisation! Which theme and font type do you use?

  • @Ashok_Choudhary777
    @Ashok_Choudhary777 Před 2 měsíci +1

    **** USEFUL TIMESTAMPS ***
    1. Sticky Header - 1:06:26
    2. Navbar Active on scroll effect - 1:08:45
    3. Toggle icon navbar - 1:16:03
    4. Animation on load & scroll - 1:35:11
    5. Footer animation - 1:57:05

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

    😍😍😍

  • @bulls_zapxx7132
    @bulls_zapxx7132 Před rokem +8

    How do you choose color palettes for your website?

  • @santiagocordova4776
    @santiagocordova4776 Před rokem +3

    Excellent video! Btw what vscode theme do you have?

  • @AymanRhzili
    @AymanRhzili Před rokem +1

    where I get the message if he contacts me :) ? - amazing work, thank you 💓🔥

  • @david318DR
    @david318DR Před rokem +2

    Thanks a lot! Very complete for those of us who are starting. Truly amazing. Just one question, what size should the images be?

    • @drlee5296
      @drlee5296 Před rokem +3

      The home page image should be 1080x1920 I'm not sure about the other one.

    • @swallowedinthesea11
      @swallowedinthesea11 Před rokem +2

      The sizes should be reasonable as in if you make a div container 200px by 350px to hold an image, then I would resize that image to 230px by 380px or something similar.
      Don't resize it in CSS because the file size will remain the same as the original.
      1. I make a 400px by 250px div container.
      2. I download an image of Belle Delphine and it's 1920px by 1080px.
      3. I resize the image using a program to 420px by 270px.
      Resizing the proper way is pretty important especially when you plan to use images for phones because of the data and bandwidth.

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

      my skill section is not working flex is not applying

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

    Thanks

  • @twoplustwoequals5733
    @twoplustwoequals5733 Před rokem

    nice follow up, next episode = how to look like that guy

  • @spotshot8867
    @spotshot8867 Před rokem

    i really appreciate it brother

  • @Billionaire-Odyssey
    @Billionaire-Odyssey Před 8 měsíci +1

    Amazing work bro need help with the image as I can't use my own image as the bg on home page

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

    Thanks a lott Man ✌✌

  • @carlosnunez1130
    @carlosnunez1130 Před rokem +1

    Hola, me podrias decir que tema estas utilizando gracias :D

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

    Thank you, very helpful. I would like to use it as my portfolio page.
    Moreover, I've used scss.

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

    thanks a ton.

  • @swastiksingh7458
    @swastiksingh7458 Před rokem

    Tell about the backend part also!

  • @abdulsametaybaz3321
    @abdulsametaybaz3321 Před rokem +4

    is there back-end side ?

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

    Amazing design but project section needs to be there

  • @rishavyadav3914
    @rishavyadav3914 Před rokem

    awesome brother.............. Can you please tell me how to become a front end developer like u......what is the roadmap

    • @codehal
      @codehal  Před rokem +13

      For starters, it's enough to learn basic html css, then slowly learn js too, after you feel you understand enough, you can see your needs and the companies that need them, you can start studying some frameworks that are in great demand, or many for some people prefer vanilla css and js. then you can learn some of the other aspects needed by the frontend, which can be adjusted according to your needs. But I suggest before starting it all, it's better to strengthen learning programming algorithms, because it will greatly impact learning the frontend or backend.
      And the most important thing is to always try and keep practicing, believe me the results will look amazing if done consistently.
      Keep going bro, you can do it! 💚

    • @patidarji09
      @patidarji09 Před rokem

      @@codehal Bro thankyou and love you and i am going to learn ReactJS is it good ❤

    • @FavourDuke-qk9hf
      @FavourDuke-qk9hf Před 11 měsíci

      ​@@codehal
      Pls help out 😢😢😢😢