Responsive Personal Portfolio Website using HTML CSS & Javascript

Поделиться
HTML-код
  • Опубликовано: 17 апр 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.

Комментарии • 287

  • @aggarwa1
    @aggarwa1 Год назад +6

    amazing design ...big like to your work

  • @WebDevASMR
    @WebDevASMR Год назад +20

    Beautiful work, I love the animations 🔥

  • @user-vz4hu2nk8d
    @user-vz4hu2nk8d Год назад +59

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

    • @ritikkumarsah7034
      @ritikkumarsah7034 5 месяцев назад +1

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

  • @vivianmingaud7942
    @vivianmingaud7942 Год назад +2

    Very Nice work and good teaching also !

  • @Richa_sharma_209
    @Richa_sharma_209 10 месяцев назад +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.

  • @nehap2-6
    @nehap2-6 7 месяцев назад +2

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

  • @samadsarkar1590
    @samadsarkar1590 Год назад +1

    Amazing work

  • @WebLearningInstitute
    @WebLearningInstitute Год назад

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

  • @deboraino.6672
    @deboraino.6672 Год назад +1

    Amazing 🎉

  • @jas-mw4fo
    @jas-mw4fo 10 месяцев назад

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

  • @maxscheel6083
    @maxscheel6083 11 месяцев назад

    Super cool! Thanks for sharing!

  • @atikadewi1118
    @atikadewi1118 Год назад +1

    Thanks for portfolio responsive, I like it

  • @AiGyT
    @AiGyT Год назад

    Awesome ❤

  • @ganeshgupta9692
    @ganeshgupta9692 Год назад +1

    Very amazing brother ❤

  • @jasonSage94
    @jasonSage94 Год назад

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

  • @SagarKumar-tj6wc
    @SagarKumar-tj6wc Год назад

    Amazing Very beautiful

  • @kirwakelvinkering3122
    @kirwakelvinkering3122 7 месяцев назад +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.

  • @ProgrammingSolutionsTeam
    @ProgrammingSolutionsTeam Год назад

    Nice Design 👍 😎

  • @freecodebd8654
    @freecodebd8654 Год назад +1

    Amazing work🥰🥰🥰🥰

  • @Compli1212
    @Compli1212 Год назад

    Aesthetic and awesome 😳😳noice bro.

  • @aakashyadav3351
    @aakashyadav3351 11 месяцев назад

    Thanks for the images❤

  • @abrahamsecoe87
    @abrahamsecoe87 11 месяцев назад +1

    New subscriber here. Amazing Job thanks !!

  • @fabienbedogue527
    @fabienbedogue527 7 месяцев назад +1

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

  • @stivomoses8882
    @stivomoses8882 3 месяца назад

    Amazingly styled...

  • @nyxpua
    @nyxpua Год назад +1

    Awesome!

  • @rodriguezlopezgael4878
    @rodriguezlopezgael4878 9 месяцев назад +1

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

  • @Thedrscooby
    @Thedrscooby 11 месяцев назад

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

  • @vujadinovicc
    @vujadinovicc Год назад

    Nice bro ❤

  • @BG-xu8be
    @BG-xu8be 8 месяцев назад +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 4 месяца назад

      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.

  • @sixtron
    @sixtron 8 месяцев назад

    J'adore trop bien fait

  • @intezarkhan889
    @intezarkhan889 Год назад

    Good 👍

  • @icarokiilermelo
    @icarokiilermelo Год назад

    What a beatiful work, Hi from Brazil

  • @user-wt1nw4dx7y
    @user-wt1nw4dx7y 8 месяцев назад

    amazing

  • @rallfsilva6626
    @rallfsilva6626 Год назад

    perfect 🔥

  • @ishandinuka590
    @ishandinuka590 Год назад

    Great 👊

  • @tejpalsinghsidhu
    @tejpalsinghsidhu 10 месяцев назад

    Brilliant!

  • @mr.editor7445
    @mr.editor7445 9 месяцев назад

    Beautiful site ever.

  • @user-pr2di8xc2y
    @user-pr2di8xc2y 9 месяцев назад

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

  • @Motivation_Libr4ry
    @Motivation_Libr4ry Год назад +1

    Bro bahut acha he 🔥💯

  • @anibible_47jf
    @anibible_47jf 5 месяцев назад

    cool really helpful

  • @spanel8561
    @spanel8561 Год назад

    Thank you very much brother

  • @DecodeReels
    @DecodeReels Год назад +1

    Love from India 🇮🇳

  • @ChristianWarrior1
    @ChristianWarrior1 7 месяцев назад +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?

  • @Vaulco
    @Vaulco 9 месяцев назад

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

  • @bluecatbd
    @bluecatbd Год назад +9

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

    • @user-vo9lx8pk1z
      @user-vo9lx8pk1z 9 месяцев назад +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 9 месяцев назад

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

    • @devikapericherla2714
      @devikapericherla2714 6 месяцев назад

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

  • @AndroidNewsBase
    @AndroidNewsBase 9 месяцев назад

    You are best

  • @muhammadrobysyafalah5784
    @muhammadrobysyafalah5784 Год назад +2

    this website is so perfectly, awesome.

    • @Developer8631
      @Developer8631 4 месяца назад

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

  • @eroosyyy
    @eroosyyy Год назад +1

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

    • @agent97560
      @agent97560 10 месяцев назад

      your website name?

  • @trungvo7907
    @trungvo7907 9 месяцев назад

    good

  • @carlosnunez1130
    @carlosnunez1130 9 месяцев назад +1

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

  • @CryptoZeidun
    @CryptoZeidun Год назад +10

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

  • @vedic.108
    @vedic.108 6 месяцев назад

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

    • @ritikkumarsah7034
      @ritikkumarsah7034 5 месяцев назад

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

    • @Developer8631
      @Developer8631 4 месяца назад

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

    • @ritikkumarsah7034
      @ritikkumarsah7034 4 месяца назад

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

  • @Niku1299
    @Niku1299 11 месяцев назад +1

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

    • @ritikkumarsah7034
      @ritikkumarsah7034 5 месяцев назад

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

  • @goutham7111
    @goutham7111 9 месяцев назад

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

    • @Developer8631
      @Developer8631 4 месяца назад

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

    • @sourcex-yl5kk
      @sourcex-yl5kk 9 дней назад

      yea, it ll be very helpful bro

  • @SaGaWisdom
    @SaGaWisdom 10 месяцев назад +1

    love u from Pakistan dear sir

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

    Amazing!!!!

  • @ariele305
    @ariele305 Год назад

    Very beautiful, hello from Brazil

  • @user-md6um6oh6s
    @user-md6um6oh6s 8 месяцев назад

    Am making one using this tutorial

  • @user-tm2zo3yk9i
    @user-tm2zo3yk9i Год назад

    So beautiful❤

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

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

  • @ecebal1957
    @ecebal1957 11 месяцев назад

    I liked it very much and it was great. 💝

    • @Developer8631
      @Developer8631 4 месяца назад

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

  • @user-kh4ty7tg6y
    @user-kh4ty7tg6y 9 месяцев назад

    kmalllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll broooooooooooooooooooooooo

  • @NameSalou
    @NameSalou 6 месяцев назад

    it is a good job bro

  • @mastermindarc
    @mastermindarc Год назад

    Awesome Dude

  • @m.anandh401
    @m.anandh401 4 месяца назад

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

    • @Developer8631
      @Developer8631 4 месяца назад

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

  • @AymanRhzili
    @AymanRhzili 11 месяцев назад +1

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

  • @manojjaryal
    @manojjaryal 4 месяца назад

    Amazing ❤

    • @nareshg196
      @nareshg196 3 месяца назад

      bro do you have the code

  • @srii8530
    @srii8530 Год назад

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

    • @codehal
      @codehal  Год назад +1

      Awesome, keep going on 🔥

    • @agent97560
      @agent97560 10 месяцев назад

      your website name?

    • @BarbieBeat101
      @BarbieBeat101 8 месяцев назад

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

    • @BarbieBeat101
      @BarbieBeat101 8 месяцев назад

      What are the dimensions your used for images bruh?

    • @rezafauzanadhima
      @rezafauzanadhima 7 месяцев назад

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

  • @Ashok_Choudhary777
    @Ashok_Choudhary777 13 дней назад +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

  • @user-un6zi3wv9s
    @user-un6zi3wv9s 7 месяцев назад +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. 😊

  • @abdulkareemsabdul3546
    @abdulkareemsabdul3546 5 месяцев назад +1

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

    • @abdulkareemsabdul3546
      @abdulkareemsabdul3546 5 месяцев назад

      And again pls any community for web developers....so we can interact

  • @whytegamer01
    @whytegamer01 Год назад +102

    I wish you could talk in your videos

    • @christdolphin69
      @christdolphin69 9 месяцев назад +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 8 месяцев назад +1

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

    • @sixtron
      @sixtron 8 месяцев назад

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

  • @stormgodd
    @stormgodd 6 месяцев назад

    Thanks a lott Man ✌✌

  • @kindz3456
    @kindz3456 Год назад +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 Год назад +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 Год назад

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

  • @chhappri1648
    @chhappri1648 Год назад

    ❤❤❤❤

  • @moses1252
    @moses1252 5 месяцев назад

    thanks a ton.

  • @justjie1008
    @justjie1008 Год назад

    What color scheme is that? I really like it!

  • @swastiksingh7458
    @swastiksingh7458 10 месяцев назад

    Tell about the backend part also!

  • @dayanmoreira25
    @dayanmoreira25 Год назад

    awesome !!

  • @ObaidullahArab-wb8tj
    @ObaidullahArab-wb8tj Год назад

    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

    • @agent97560
      @agent97560 10 месяцев назад

      your website name?

  • @SomtyUba
    @SomtyUba Год назад

    wow

  • @ganeshgupta9692
    @ganeshgupta9692 Год назад +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

  • @sugaslate14
    @sugaslate14 10 месяцев назад +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 10 месяцев назад +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 9 месяцев назад

      Hello dude , Can u solve this?

    • @emanuelazevedo5904
      @emanuelazevedo5904 8 месяцев назад

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

  • @AXborotfoydali
    @AXborotfoydali 5 месяцев назад

    Thanks

  • @nbaspy6508
    @nbaspy6508 8 месяцев назад

    How do I buy a domain for it a actually domain name instead of 127.8.1 or something like that

  • @sidykeita2107
    @sidykeita2107 10 месяцев назад

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

  • @ahmedzakan9829
    @ahmedzakan9829 6 месяцев назад

    thanks

  • @crusal8091
    @crusal8091 9 месяцев назад

    How did you generate the Photo?

  • @sarath_s7492
    @sarath_s7492 10 месяцев назад +1

    hey bro, where're you from?
    I'm also a front-end developer and for only that reason I'm unable to find a job. people here only need back-end or full-stack dev's. and I'm from Kerala.
    can you suggest me some tips to get settled easily..

  • @vikasbhagat6911
    @vikasbhagat6911 3 месяца назад

    Amazing design but project section needs to be there

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

    🤩

  • @Billionaire-Odyssey
    @Billionaire-Odyssey 6 месяцев назад

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

  • @mahmoodyou6841
    @mahmoodyou6841 6 месяцев назад

    😍😍😍

  • @spotshot8867
    @spotshot8867 10 месяцев назад

    i really appreciate it brother

    • @agent97560
      @agent97560 10 месяцев назад

      your website name?

  • @abdulsametaybaz3321
    @abdulsametaybaz3321 Год назад +4

    is there back-end side ?

  • @Ferrari622
    @Ferrari622 6 месяцев назад

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

  • @m_____5290
    @m_____5290 7 месяцев назад +1

    Hello, at this time 1:43:08 - my code is the same as yours- but the animation doesn’t appear in order- the img animation appears the same time as the rest of them- even though I’ve ordered them correctly - please can you help me- im on a deadline 😮

  • @bulls_zapxx7132
    @bulls_zapxx7132 Год назад +8

    How do you choose color palettes for your website?

    • @swallowedinthesea11
      @swallowedinthesea11 9 месяцев назад +1

      There are websites that list new and popular color palettes.

  • @bugabagi1164
    @bugabagi1164 8 месяцев назад

    What's the tittle of backsound? I Like them especially at 16.00 - 20.00 minutes

  • @indrojitkr6896
    @indrojitkr6896 Год назад

    i want to learn this..