How to make Responsive Portfolio Website using HTML, CSS & JavaScript | step by step |

[@amritagiri26]

Outstanding portfolio but aap aapni voice se videos banao and sath hi sath code explain bhi karo

[@HeresTheCode]

Thank you so much ..... many projects are coming soon with voice and explanation ..... just stay tuned with us .... 🥰

[@Cake_world5]

can u provide me the source code for this

[@yosayaan7013]

@@Cake_world5 Thats paid

[@RTech0223]

​@@HeresTheCode yes we need

[@Traveler_life_009]

Thank u

[@priyamurugesan9731]

I've completed my portfolio website by watching your video . thanks a lot ❤

[@naveen-manjappa]

A very nice looking site.

[@alamzaibamir2133]

awsome work... great job

[@HeresTheCode]

Thank you 😊

[@mohamedaminel2644]

Very nice and simple portfolio, thank you

[@pranavshepal1703]

helps a lot ❤

[@pushparajc6162]

Beautiful Portfolio Thank you for sharing 🤗💐

[@Rianyuda-vt3xh]

Nice video

[@HeresTheCode]

Thank you 😊

[@ankanakar8639]

nice awesome video ....

[@Adesh_shelar]

Nice video❤

[@HeresTheCode]

Thank you 😊

[@Chitta_rjn]

I think you have missed education section and download cv button Great work !! Well done 👍

[@HeresTheCode]

I know .... many videos are coming soon .... don't worry....

[@rchauhan0018]

Bro can your share me source code of these projects plz

[@Thriller-Story]

Thank you very much.Just Finished.

[@L1XISIM]

can u send me the template of yours?

[@pritinath4847]

ভালো লাগছে ❤🎉

[@meeshamairaj923]

At about 23:39, how is the page going on service and about pages? I'm clicking my button and it isnt😢

[@rohit_kurmi]

Same bro some functionality is not working like this video 😅

[@HeresTheCode]

8951724237 wp me

[@madhanarjun4767]

Nice video learned lot of new things keep do more projects ❤

[@HeresTheCode]

Of course dear .... just stay tuned with us .... ❤️

[@HeresTheCode]

8951724237 wp me

[@rrr9848]

Thank You Sir . . .🎉🎉

[@lubabamohammed1253]

Good job!

[@BayuWidayat]

thanks a lot

[@tayyabkhan1139]

you are one of the best bro remember me when your channel gets famous !!

[@HeresTheCode]

Of course bro ... ❤️

[@nikitakumari7448]

​@@HeresTheCode By clicking on download cv how actually the CV can be downloaded... please provide the code for the same

[@HeresTheCode]

@@nikitakumari7448 just add download word to your download tag .... that's it

[@rangasaik5125]

Super🥳

[@THUNDER000Roman]

Wow

[@kanikarapuvijayvaruntej8237]

Simple and attractive

[@ankanakar7958]

nice dear

[@ShobhanDebnath-h1c]

ভালো লাগলো ❤❤🎉🎉

[@we_atheletes]

Awesome

[@tarunkoduru8836]

awesome video

[@HeresTheCode]

Thanks!

[@MentalMarvels1]

Comp 1k 😄

[@HeresTheCode]

😊

[@HeresTheCode]

Check my insta story 🤪

[@bigtafmitch3907]

Followed your tutorial and my code don't show the navbar when it is full screen need help

[@saumyaparikh9404]

Just use semicolon in the line where you imported google fonts

[@amanrj111]

​@@saumyaparikh9404 bhai thoda help.kar do please....navbar ko jab small karte hai to 3dot pe click kar raha hu to wo click nhi ho pa Raha hai..kuch aa hi nhi Raha hai

[@TuikongAllan]

Awesome, could you explain as you code along?

[@HeresTheCode]

I'll explain our next upcoming videos

[@MohitSharma-ew2mm]

good

[@HeresTheCode]

Thanks dear ❤️

[@MohitSharma-ew2mm]

@@HeresTheCode just completed the project ,loved it , start speaking with it also , it will be a plus point

[@HeresTheCode]

Yes I know dear .... next video will come with voice over ..... stay tuned with @HeresTheCode ..... many exciting projects are coming ....

[@jzjzjzbz]

52:50

[@manasgouda3715]

.portfolio-layer a { } 👈explain this your code not working

[@ayushranka2141]

on 46:22 you written nemuIcon insted of menuIcon still code worked?

[@HeresTheCode]

Yes of course

[@c_64_shivadegauravanil27]

Thanks bro!

[@HeresTheCode]

Welcome

[@ubaidistan1394]

Hello Bro! Great Work! I'm facing issue in the height of page! there's too much space left after footer section! I'm stuck there! any way to solve hat issue?

[@poojabadasad1788]

Hey... When I make the page responsive I am not getting the navbars

[@HeresTheCode]

Did you apply javascript code ??? Re-watch again ... i think u did some mistake ...

[@HeresTheCode]

Or WhatsApp me 8951724237 I'll send you source code....

[@rchauhan0018]

Bro can you share me the source code of these projects plz.

[@Amanraj-ry7pe]

hello sir, 54 min pe navbar hai right side me click karne pe contact,portfolio...khul raha hai apka but mera click karne pe koi work hi nhi kar raha hai....agar aap help kar skte hai to please help me ....😞😞

[@HeresTheCode]

Anchor tag me href me #contact #portfolio dalo .... ho jayega

[@shreypandey4967]

​@@HeresTheCode nhi hora hai sir 😢

[@furkanucar3875]

a problem occured. For example, I'm in the portfolio section of the page, it doesn't show where I am in the navbar. let sections = document.querySelectorAll('section'); let navLinks = document.querySelectorAll('header nav a'); window.onscroll = () => { sections.forEach(sec =>{ let top = window.scrollY; let offset = sec.offsetTop - 150; let height = sec.offsetHeight; let id = sec.getAttribute('id'); if(top >= offset && top < offset + height) { navLinks.forEach.apply(links => { links.classList.remove('active'); document.querySelector('header nav a[href*=' + id + ']').classList.add('active'); }) } }) }

[@HeresTheCode]

let sections = document.querySelectorAll('section'); let navLinks = document.querySelectorAll('header nav a'); window.onscroll = () => { sections.forEach(sec => { let top = window.scrollY; let offset = sec.offsetTop - 150; let height = sec.offsetHeight; let id = sec.getAttribute('id'); if(top >= offset && top < offset + height) { navLinks.forEach(links => { links.classList.remove('active'); document.querySelector('header nav a[href*=' + id + ']').classList.add('active'); }); }; });

[@rajkumara3780]

Where did I get the font awesome heading link

[@HeresTheCode]

cdnjs.com/libraries/font-awesome

[@chaitanyashimpi6212]

Is it send email works

[@HeresTheCode]

Watch this : kzbin.info/www/bejne/jZqQind3mpWXetU

[@chekwubemagbo35]

I’ve gone through the same process with what u did in the video but my designs aren’t still the same as your ,the images placing are different,the text size are different as well and so much more. Pls what’s wrong

[@HeresTheCode]

8951724237 wp me

[@kodumurihemanthkumar6274]

Nice video and it helped a lot to learn new points. But i got an error like my home and about page pictures are not in a correct position

[@HeresTheCode]

Check your code again

[@kodumurihemanthkumar6274]

@@HeresTheCode Thanks for the wonderful video

[@HeresTheCode]

Welcome dear .... just stay tuned with us

[@syawalbagaskurnia5434]

what size photo do you use?

[@HeresTheCode]

Those images shared through drive link .... check video description

[@Tahirrazashaikh]

Hello my scroll reveal is not working. It is showing below error: Uncaught TypeError: undefined is not a function at Function.forEach () at script.js:24:23 at NodeList.forEach () at window.onscroll (script.js:17:11) please help me to solve this problem

[@Apoorva_dhotre]

Did you solve this error because I am also getting same error js code is not working

[@Tony_edits_]

Whick extensions you have installed?

[@HeresTheCode]

Html css and js all extensions

[@aswanthp1163]

Scroll Reveal and Typed Js is not working I think the cdn connection issue please help to fix

[@HeresTheCode]

8951724237 wp me

[@JustCodding1]

It would be good if you explain everything while you teach.

[@praveen6257]

Bro I stucked on photo what the image background size

[@HeresTheCode]

Those images shared through drive link .... check video description

[@chinmoynath3594]

can you make another video where u make it responsive my sending the data to the excel sheet and also expanding read more

[@abisekhdey3286]

In this code if someone sends message using the form then how can i get access of that message? Can u please explain or can u give any reference video?

[@HeresTheCode]

kzbin.info/www/bejne/jZqQind3mpWXetU

[@Game-Changer-Mindset]

Check spam folder

[@abhilashaarmstrong]

Portfolio h2 and portfolio layer styles are just not working....any solution?

[@HeresTheCode]

8951724237 whatsapp me .... I'll share u Source code

[@TamannaChoudhury-zb2kr]

Type js or scroll js is not working what should I do any solution😢

[@HeresTheCode]

8951724237 wp me

[@pol_aisha0507]

❤

[@devanshmahant1459]

Thank You

[@prashant-pw7mf]

👌👌👌👌👌👌👌👌

[@princekiran2411]

But social media logoes doesn't shown ...when I opend in live server

[@HeresTheCode]

Recheck your code

[@HeresTheCode]

Recheck your code

[@tarasaw3307]

hey can you make it a full stack website so that we'll get the emails or contacts from the user end

[@HeresTheCode]

I'll make another video for this

[@Aparichit-G]

bhaiya pls reply why my website is still not responsive...I had written the same code as you but I could not found the error.Itna door ane ke baad age nhi badh pa raha hu

[@HeresTheCode]

Brother many people did this project through my video .... check once again .... one single mistake can make errors ....

[@Yahussain12397]

hello sir boht boht ache bane par ye chrome sahe nhe open nhe hote microsoft edge pe sahe work kar rahe he ese q hota he code same he

[@HeresTheCode]

Microsoft edge don't support many times .... it's a worst browser..... use Google chrome or brave

[@Yahussain12397]

@@HeresTheCode sorry sir ap mere bat nhe samjee mene ye bola k microsoft edge pe sahe workkar rahe he but google chrome pe work sahe nhe kar rahe

[@rahimibadov2940]

('header nav a[href*=' + id + ']') hello have you changed this code or this is true?

[@HeresTheCode]

let sections = document.querySelectorAll('section'); let navLinks = document.querySelectorAll('header nav a'); window.onscroll = () => { sections.forEach(sec => { let top = window.scrollY; let offset = sec.offsetTop - 150; let height = sec.offsetHeight; let id = sec.getAttribute('id'); if(top >= offset && top < offset + height) { navLinks.forEach(links => { links.classList.remove('active'); document.querySelector('header nav a[href*=' + id + ']').classList.add('active'); }); }; });

[@rahimibadov2940]

@@HeresTheCode Thank you for replying. But the same codes don't work for me.

[@bigtafmitch3907]

@@rahimibadov2940 same here

[@shubhamrabadiya-r2l]

jsmain.js menuIcon not define error show

[@ChessLegend-q8u]

Any places i could contact you on? Need few changes would pay.

[@HeresTheCode]

WhatsApp: [phone] Send me what changes u want .... today I'm busy so tomorrow I'll do ....

[@ZJGreenScreen36]

😊 theme name please sir

[@HeresTheCode]

It's a portfolio site I designed it myself

[@sanjogpawar5294]

hii i am facing error in scrolling reveal and type js please help, its not working

[@HeresTheCode]

You have to put scroll reveal and typed js script file to html body section .... and after that you have to do javascript code carefully

[@sanjogpawar5294]

i have done like you did still get error @@HeresTheCode

[@HeresTheCode]

Check once again carefully ....

[@sanjogpawar5294]

solved , its js file path error, thanks for reply bro @@HeresTheCode

[@HeresTheCode]

Always here bro .... ❤️

[@amitdahiya7425]

Why my scroll reveal and typed js are not working , any specific resaons ?

[@HeresTheCode]

You have to add script file to html body first

[@amitdahiya7425]

Actually I did there was some issue in js code of scroll reveal (solved now )@@HeresTheCode

[@HeresTheCode]

Ok dear 🤗

[@amitdahiya7425]

Forgot to thank you for the video , Thank you so much I loved it & subscriber++ , one request ( I have seen many portfolios with github submission calendar can you add one in your next video )@@HeresTheCode

[@HeresTheCode]

Of course dear .... 🤗

[@aryanreddy9090]

Bro the logos of social media arent visible.. Can you help me fix that?

[@HeresTheCode]

8951724237 wp me

[@markotwane5032]

Nice work can i access the code on github?

[@HeresTheCode]

In the description source code link will be there

[@Faizan_Iqbal07]

❤

[@ZJGreenScreen36]

Theme name sir please

[@shubhamrabadiya-r2l]

menuIcon not define

[@AmanKumar-g3w1d]

i m not able to add social media icons

[@HeresTheCode]

You have to add fontawesome cdn file under the html head tag first

[@Lenar274-m3x]

how to make the contact me button work ? So that it sends me an email

[@HeresTheCode]

I'll make a new video for this

[@zaqiapriansyah3212]

i have a problem with this code, the element * is media query unexpected, and this code is red errors, how to fix this? * { margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; border: none; outline: none; scroll-behavior: smooth; font-family: 'Nunito', sans-serif; }

[@HeresTheCode]

Use semi-colon after you import google font

[@Tony_edits_]

style.css mein mera asterisk work nhi kr raha h 8:48

[@HeresTheCode]

U add only *

[@Tony_edits_]

​@@HeresTheCode * { iske andr ke property of value ke baad bhi } Aisa typ krne ke baad style.css ki jo file banai h usme 1 error aa raha h or asterisk * iske niche ~ ye wala sign

[@HeresTheCode]

Google font jo import kiya hai uske last me ; add karo

[@Anonymous-mk8lz]

@@HeresTheCode the same error I faced, thanks for helping

[@HeresTheCode]

8951724237 send me screenshot in wp

[@Apoorva_dhotre]

Java script code is not working sir what shall i do?

[@HeresTheCode]

8951724237 wp me

[@alvinsuperhits9325]

PLEASE GIVE US THE IMAGES WITH A GOOGLE DRIVE LINK!

[@HeresTheCode]

Check video description again ... I provided gdrive link ... thank you

[@RumaKar-pv3je]

❤❤

[@satyajitdash2002]

Sir css file nunito's result is not showing

[@ujjawalsinghtolia9206]

Me too same problem occured but my css file is not working nothing changed on live server only html file is working how?? I don't know the problem how it is going to.solve now

[@HeresTheCode]

Check your code again ... many people did this project through my video

[@HeresTheCode]

After import google font use semicolon (;)

[@satyajitdash2002]

Plz do something nd this portfolio is awesome nd plz give source code in my mail

[@HeresTheCode]

kzbin.info/www/bejne/rWrOh2OrjJaXo6s

[@HeresTheCode]

See this video description

[@Chizoba_Tech]

Hello, my navbar doesn’t collapse when clicked

[@HeresTheCode]

Recheck your code ...

[@sukamanchigopichand9600]

typed Js is not working....

[@HeresTheCode]

Check your code again .... and code carefully

[@RICHIE_2605]

I'M LOOKING FOR A JOB IN BANGALORE , SO CAN YOU HELP ME OUT

[@HeresTheCode]

I leaved Bangalore, currently focusing on my business... Don't have any connection right now... but if I do something for u thn I'll know u

[@RICHIE_2605]

Sureee sirrr!.plss let me know soon

[@Daily_04]

@Here's the code! ,I'd like to replicate your coding. I'm still a student, so I don't have sufficient funds to purchase one."

[@HeresTheCode]

If you do it urself through my video u will learn many things .... thank you 😊

[@Daily_04]

@@HeresTheCode I will diligently follow each of your tutorials, and I hope that in the future, I can become a great programmer like you."

[@HeresTheCode]

Of course dear 🤗

[@SudipHaldar-fz3py]

Sir explain the code

[@HeresTheCode]

Okay 👍

[@UNI.INFO132]

Tera koi bhi code ran nahin kar raha hai css ka

[@LemitaSenbeto]

haw to down loud this code

[@HeresTheCode]

Buy the source code : www.buymeacoffee.com/heresthecode/e/216623

[@ManojKumar-qe6rf]

Nice portfolio 👍👍 but source code is paid 😔😔

[@HeresTheCode]

Discount is still going on

[@sachinpoudel6342]

Make it by yourself

[@technicalrider6196]

Free chahiye ​@@HeresTheCode

[@ERICIGWE-os7vf]

Build if, isn't that why you're a developer That's if you're one Sha 🥲

[@cricketshorts6371]

Bhai aapka naam

[@HeresTheCode]

Shanu Debnath

[@cricketshorts6371]

@@HeresTheCode bhai real hai kya ya phir aise hi

[@HeresTheCode]

Kis chiz k bare me puch rehe ho ?

[@cricketshorts6371]

@@HeresTheCode nhi woh kya hai na linkedin per ek bande ne aapke jaisi website banai thi uska naam yaad nhi aaraha isliye mujhe laga AAP woh hi ho

[@HeresTheCode]

Okay ... this is my linkedin profile : www.linkedin.com/in/shanu-debnath-378236262?

[@arupde6320]

github link ??

[@HeresTheCode]

Download Source Code from here : 👉🏻 www.buymeacoffee.com/heresthecode/e/216623

[@seymak8584]

he says you not gonna get anything without paying :D

[@techgurugadgets8]

33:1

[@HeresTheCode]

???

[@mersal_king]

bro your make some mistakes in code

[@HeresTheCode]

No dear .... check once again .... many people already did this project from my video

[@오중균-y2n]

😢ở

[@YanTzy-u4x]

Your video is full of lies. I have followed it exactly but the results are different, it's a fraudulent video

[@HeresTheCode]

See comments.... many people did this project through my video ... you did mistake that's why your results are different ... don't try to be smart without knowing coding ...

[@Lenar274-m3x]

how to make the "contact me" button work, so that it send me an email

[@HeresTheCode]

I'll make a new video for that

[@오중균-y2n]

😢ở