Build a Responsive Personal Portfolio Website Using HTML & CSS & JavaScript

In this video, you will learn how to build a responsive personal portfolio website using HTML, CSS and JavaScript. I hope you enjoy it.
🔔 Subscribe For More! ‪@HowtoWebDev‬
-------------------------------------------------------------------
Starter Code: github.com/How...
Related Videos: • Build a Responsive Per...
• Create Responsive Flex...
• Create Rock-Paper-Scis...
• Build a Complete Respo...
‪@HowtoWebDev‬
-------------------------------------------------------------------
#html #css #javascript #portfolio #personalportfolio #website #cssanimation #csseffect #webdesign #webdevelopment #howtowebdev #responsive #responsivedesign #webdeveloper #portfoliodesign #gradient #cssdesign
-------------------------------------------------------------------

[@mahakkaurchhabra1200]

I love your content. You should upload a css series explaining the mindset/flow with which we could be able to code these on our own after looking at a mock image.

[@HowtoWebDev]

Glad you find it helpful. For sure I'll make content like that in the future, I already have some videos where I break down a design and explain how to create the exact same one, and create it as well. You can check this one out: ruclips.net/video/gSPIX2r8Zsw/видео.html

[@jamesparker6447]

Fantastic, explanations, the pace, everything well done!!

[@word_to_express]

i used your starter template but still getting some issues can u give us the source code of this project

[@HarshSharma-jh8gk]

Just Loved It 👏👏

[@imnotsleepyo__o]

my side menu cant be clicked and theres no dropdowns T^T

[@Lifeuodatebbcc]

great

[@russwest5252]

i have an issue with h1 and the span inside. As my name is >4 letters it goes on another line or on top of the "Hi, It's". Same thing happens with my job title which is way longer

[@HowtoWebDev]

You can probably solve that problem by using text-wrap:nowrap, but I need to see the code to make sure. If you can share your 'home-content' part I'd be happy to help.

[@boystevenrb6543]

Can you makes a tutorial how to make a beautiful photo, like all the photos you use in most of ur projects?

[@KikoWorld-vh2jr]

In my case i can't made it responsive how to do it i watch you video many time else i failded to do this please reply ❤

[@RahulSharma-sz9ij]

My image is becoming oval and not circular, how to fix this?

[@SoliuBadmus-jd3ni]

The border-radius must be too big. Try decreasing the value.

[@shashivarun]

how did you add those social media icons i am a little bit confused

[@HowtoWebDev]

Those icons are coming from a open source icon pack called boxicons. The icons are already linked to the html file as a stylesheet inside the head section, so you just need to type in the class names for the icons-or search for them inside the boxicons website. For example: boxicons.com/ visit the website and type in the github icon, click on it and there will a pop-up on the right bottom. Click on 'font' section and there will a element with a class name, that is the icon itself. So whether if you copy and paste that inside the html, or just simply type that class name to a element, the icon is going to appear.

[@shashivarun]

@@HowtoWebDevThanks for the explanation, and a request is to provide the full repository rather than the starter code even though I typed the whole code , its better if you provide the full repo for others like me.

[@CR-bw9gr]

@@shashivarunbro can you share source code?

[@nhd_puff]

@@CR-bw9gr i did a copy paste you can tell me how i share it to you if you dont mind

[@arhamnaeem1916]

My scrollbar thing in the js script is not working properly.

[@maddog4129]

The smooth scroll is not working does anyone knows what's up?

[@imnotsleepyo__o]

I have to change one icon, I change it to mail icon, I just searched it online then add the link of it , but its oblong, its the only icon that is oblong T^T, pls if you know a link to a good email icon or the code for email icon, can you reply it here, thank you!

[@HowtoWebDev]

Sorry for the late response. Those icons are coming from a open source icon pack called boxicons as I mentioned earlier in the video. If you take a look inside the element inside the html file, you can see the stylesheet link to the boxicons. When you wanna change an icon just simply search for it in the boxicons website, click on the icon that you wanna use and there will a little window pop-up in the right bottom corner. Click on the 'font' section and copy-paste the element which is the icon itself. Here is the link to the website: boxicons.com

[@CenterOfChaos]

Thank you very much!!!

[@sweety-ns3po]

This is great 🎉 . But in mine the whole code is working except the @keyframe and webkit-scrollbar . I have written the exact same code but it's not working 😢😢 . Why ? Please help me

[@anasmohamed6428]

sth is missing with the repo

[@jijojacob988]

Can u please add the contact form submission method to ours/client email id ?

[@BhaskarGhosh-n5d]

Can i upload videos in project section

[@GooWalk-dv4ij]

bro can you give me a ready template i am not familiar with html or css or js

[@davarakondanagarjuna4454]

How to check dangerous Response

[@arvindgupta270]

can you please share background of image

[@Scaryy_Playz]

How can I get the source code?😊

[@khaled5483]

31:16