Hey everyone, I hope you're having a great day. Since this video is getting a lot of views , I wanted to share my latest portfolio videos which have line by line explanation of the code. Unfortunately, this video has no sound due to copyright issues. I recommend you to check out these two videos: ua-cam.com/video/uTPO6fKtBvM/v-deo.html ua-cam.com/video/GnFH9Eg-OuM/v-deo.html
All the bugs you may face and solutions: 1 - Image is not on the right but on the bottom ---- solution -----> extract the image from the "home-content" div. 2 - Text animation not working ---- solution ----> delete the "steps (14)" part from the css code. 3 - The text wraps when you shrink the page and animation seems bad --- solution -----> add "white-space: nowrap;" to ".text-animation" style. 4 - Other divs change place in order to fit the nowrapped text ---- solution ----> add min width to "home-content" div.
Do you know what was deleted at 44:15? Everything on my site looks good until I view it using one of the phones using inspect. My home, services, and contact me look fine but my testimonials and education pages are not centered and need to be scrolled to left and right.
What was deleted at 44:15? I think whatever was changed is preventing my website from properly being shown on phones (my timeline and testimonials page is not centered and some is off the screen and I'm not able to scroll to the side. Anyone know what needs to be changed?
@@yatharthgautam4117 I asked ChatGPT to fix it up a little but never got it to look exactly like the one in the video. U should prob make a backup of what u have and then tell GPT what the problem is and keep testing it from there giving it prompts. U can ask it to customize it in different ways but make sure you’re saving your progress when u like something or have made an improvement.
Im glad you liked it. This is an old video of mine, my last 30+ videos have explanations of every line of code. I recommend you to check them out, here is a similar one to this portfolio website with explanations: ua-cam.com/video/uTPO6fKtBvM/v-deo.html
@@HowtoWebDev pls can you answer for this pls pls pls What was deleted at 44:15? I think whatever was changed is preventing my website from properly being shown on phones (my timeline and testimonials page is not centered and some is off the screen and I'm not able to scroll to the side. Anyone know what needs to be changed?
Brother, the headings and paragraphs in the education option are coming in one line, all four are coming straight in one line, two are not going to the opposite side, please tell me the solution, thank you.
Anyone else's service and education page not coming along correctly? services page not taking the blue background color nor correct size or animations and education page just kinda overall way off. thanks
For some reason, the home image isn't bordering as a circle. It's an oval. I've double and triple checked my code to see if it matches and cannot for the life of me figure out what is happening. Anyone have any idea?
For me personally, I won't follow exactly as it is but change something as per my own liking. Since I know without giving proper credit will be plagiarizing. Therefore, I only follow the video as per guide and the placement, the color selection, the text format and images would be my own personal. Or perhaps, you could add on a category for credit purpose if you wish to follow exactly.
@@oladelejoseph7334 recoding it is not a hard work cuz ofcourse if you searched for this that means you dont know how to do this and tell me are you that much disciplined to focus for an hour? and recoding it while understanding everyhting? youll just code faster and not undeftsand it so by asking source code it is a smart mode you can learn much better that way
Do I need to install some package beforehand? Because I am half way through the video and the website is not turning out how it should. The colors, the glowing effect, the sizing, and the animations are simply not working.
Same here, trying to get this to work, but the text-animation is just not showing. It cuts right after 'I´m a' -_- Don´t know what to change, checked it 7 times now.
@@thalion9847 I'd like to update that the problems I was facing was due to syntax errors on my side. After reviewing, exploring, trying and testing, I was able to fix all the errors that I faced. Even the bugs that were born after tweaking code to fit my need. So I would suggest you to do the same. Grind till you identify the problem.
@@vaibhavsatish413 It´s only the 'text-animation' part that´s not running. I checked it again, after you said you got it. It´s not even showing the first 'content' text. No typing at all. Could you post your css and html part from the text-animation?
Add this to your code ... in section education : add ... after > div class timeline-items. and the style code is : .line { position: absolute; left: 50.2%; height: 1000px; width: 8px; display: flex; align-items: center; justify-content: center; transform: translateX(-50%); background-color: var(--main-color); } And it will show up.
I have a problem :: when I make my portfolio and add background image and a picture in it... It not showing in my mobile. I also add mobile responsive properties.... If anybody knows please help me 😭
it's probably not scaling correctly or it's probably not as responsive as you think. You need to test it extensively. Without seeing your code I can't help completely.
@@PrettyGazi I would probably guess scaling. Its possible that his max-width or whatever is pushing his image off screen on mobile. That's why he should continue to test
Its ok i got the solution for not scrolling, i have added only overflow in html instead i had to add overflow-x 😅, by the way thank you this video is helping me alot........ ❤❤❤❤❤❤
Add this to your code ... in section education : add ... after > div class timeline-items. and the style code is : .line { position: absolute; left: 50.2%; height: 1000px; width: 8px; display: flex; align-items: center; justify-content: center; transform: translateX(-50%); background-color: var(--main-color); } And it will show up.
I have a lot of videos with explanations especially the last 30+ videos, you can check them out. If you are specifically looking for a portfolio website video I recommend you to watch these two videos: ua-cam.com/video/uTPO6fKtBvM/v-deo.html ua-cam.com/video/GnFH9Eg-OuM/v-deo.html
why did you wrote window.onscroll? i dont see the use case here. i mean the mobile view navigation works completely fine without this function. so im a little bit confused why you have wrote it. and on this video-- ua-cam.com/video/GnFH9Eg-OuM/v-deo.html you had not wrote this funciton.
The window.onscroll function is used to determine which section is displayed in the viewport currently, so that the corresponding link in the navbar can get the underline effect (Such as, when you are displaying the Home section, 'home' tab in the navbar gets a underline effect). Check out the if statement, you can see that the tab you are currently viewing gets the 'active' class, basically indicating that you are currently in that section. Looks like the video in the link doesn't have that feature, so that's why it doesn't have that function. It has nothing to do with the navigation of the website, its just to create the underline for the current tab.
@@HowtoWebDev i dont know maybe i didnt do the same way you did, but using that code has no effect on my browser, it doesnt gets underline no matter how much i scroll
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'); }) } }) } here is the code
Hey everyone, I hope you're having a great day. Since this video is getting a lot of views , I wanted to share my latest portfolio videos which have line by line explanation of the code. Unfortunately, this video has no sound due to copyright issues. I recommend you to check out these two videos: ua-cam.com/video/uTPO6fKtBvM/v-deo.html
ua-cam.com/video/GnFH9Eg-OuM/v-deo.html
Incredible portfolio 🔥🔥
All the bugs you may face and solutions:
1 - Image is not on the right but on the bottom ---- solution -----> extract the image from the "home-content" div.
2 - Text animation not working ---- solution ----> delete the "steps (14)" part from the css code.
3 - The text wraps when you shrink the page and animation seems bad --- solution -----> add "white-space: nowrap;" to ".text-animation" style.
4 - Other divs change place in order to fit the nowrapped text ---- solution ----> add min width to "home-content" div.
my background color is not black but I'm done, it's only the color what must I do?
@@imms25 I didn't understand you :|
@@yazilimcixyz it can't helped, he's main problem is that he can't express is feeling nicely 😴 that's why we can't help him😶
Do you know what was deleted at 44:15? Everything on my site looks good until I view it using one of the phones using inspect. My home, services, and contact me look fine but my testimonials and education pages are not centered and need to be scrolled to left and right.
como extraio a imagem da div?
What was deleted at 44:15? I think whatever was changed is preventing my website from properly being shown on phones (my timeline and testimonials page is not centered and some is off the screen and I'm not able to scroll to the side. Anyone know what needs to be changed?
Hey, did you get the right thing? I am also unable to see my website on phone properly. Can you share the correct source code?
@@yatharthgautam4117 I asked ChatGPT to fix it up a little but never got it to look exactly like the one in the video. U should prob make a backup of what u have and then tell GPT what the problem is and keep testing it from there giving it prompts. U can ask it to customize it in different ways but make sure you’re saving your progress when u like something or have made an improvement.
@@killercam27_2 Poor programming, lock in! Start asking chaat gpt questions and really understanding! You got this
Can you contact me plz... This is my first ever project and I'm struggling at 33:00 somewhere... Instagram would be good to go with
any solution? .. same problem
This is awesome
This looks amazing! Would love a tutorial where you verbally explain each step of the process!
Im glad you liked it. This is an old video of mine, my last 30+ videos have explanations of every line of code. I recommend you to check them out, here is a similar one to this portfolio website with explanations: ua-cam.com/video/uTPO6fKtBvM/v-deo.html
@@HowtoWebDev pls can you answer for this pls pls pls
What was deleted at 44:15? I think whatever was changed is preventing my website from properly being shown on phones (my timeline and testimonials page is not centered and some is off the screen and I'm not able to scroll to the side. Anyone know what needs to be changed?
on min 6:24 it didn't change anything, and I have did the Ctrl+S button. Please help me out
Same prob here... Did u find out?
Amazing Portfolio😎🤯
18:22 keyframe doesn't work😢
wow its an amazing tutorial
ap kaha k ho
@@ghullamnabi-h3h Pakistan
this is amazing damn
Wonderful profile photo and name =D
And, that portfolio its amazing of course!!!!!!
I tried to make the menu bar like this but it isn't working
Any help?
Do u have github for the source code
u have that?
thanks a lot!! You nailed it
Glad you liked it!
Could you please provide me with the source code of this?
hi, have you got the source code?
@@faizalahamed1945 what about you? 😂
@@unexplainablefish52 what about you ???
@@Radhe091 nope
@@Radhe091 didn't get it
Brother, the headings and paragraphs in the education option are coming in one line, all four are coming straight in one line, two are not going to the opposite side, please tell me the solution, thank you.
close div perfectly acording to video clip
Anyone else's service and education page not coming along correctly? services page not taking the blue background color nor correct size or animations and education page just kinda overall way off. thanks
mine education page is not coming along correctly.
@@ican7373hi, I’m facing the same issue. Did you manage to fix it?
check the css of calc() , the minus sign allocation makes all the difference
For some reason, the home image isn't bordering as a circle. It's an oval. I've double and triple checked my code to see if it matches and cannot for the life of me figure out what is happening. Anyone have any idea?
Nevermind. Just realized the image used was pre-cropped to a square shape. Fixed
Can we use this as our personal portfolio and deploy it without giving any credit for free?
For me personally, I won't follow exactly as it is but change something as per my own liking. Since I know without giving proper credit will be plagiarizing. Therefore, I only follow the video as per guide and the placement, the color selection, the text format and images would be my own personal.
Or perhaps, you could add on a category for credit purpose if you wish to follow exactly.
If You Make It On Your Own No Credits Needed
where i can download the source?
instead of getting the source why dont u just follow?
@@qxrzzz I don't have a PC
It's good but make the video a bit engaging somehow, by adding sound effects or your own voice
I recommend you to watch these two videos:
ua-cam.com/video/GnFH9Eg-OuM/v-deo.html
ua-cam.com/video/uTPO6fKtBvM/v-deo.html
Could you provide with the source code of this please...!!❤
osm portfolio
Great work ❤
You have it in some Github repository
Awesome work & awesome portfolio 👍
You have source code of this video !??
If you have please share..!! i need
@@mansisaloniaa2580 yes
@@ArmaanKhan-xs3ub Bro can you send me the source code of this portfolio please!
Text animation is not working properly, I watched many more time but something is wrong can you please help me
My hire button and send message one in the contact section not glowing on hover
My screen is not scrolling in education section, why? And how to fix it ? Please reply... 😭
can u pls upload the source code link, its awesome
why dont you want to do the hard work by recoding it
say no to source code!!!!!!!!!!!!!
@@oladelejoseph7334 recoding it is not a hard work cuz ofcourse if you searched for this that means you dont know how to do this and tell me are you that much disciplined to focus for an hour? and recoding it while understanding everyhting? youll just code faster and not undeftsand it so by asking source code it is a smart mode you can learn much better that way
no
What's difference between hire and contact button?
how do I make the css animation type and backspace ??
Why is the text animation not working?😭😭
in my case I was having a similar error. Make sure you write the correct code and DISABLE the darkmodus plugin on ur browser
And for me the problem is with services because right '0' left '0'
footer section not work
scroll not work ?
Scrollbar not working , cannot scroll through the site
in your CSS code in
html {
font-size: 60%;
/* overflow: hidden; Delete this line */
}
@@josemoro4418 thank you broo
@@killerkarangaming08hi bro can you share source code kindly?
There is a problem in footer width
bruh, best design but your writing styles... I understand, this video is for beginners, but please, develop the habit of writing code correctly.
box- icon not working in javascript
Me too , did you resolve?
@@real.dolpin yes
@@ferryboybeats8884 How?
Do I need to install some package beforehand? Because I am half way through the video and the website is not turning out how it should. The colors, the glowing effect, the sizing, and the animations are simply not working.
Same here, trying to get this to work, but the text-animation is just not showing. It cuts right after 'I´m a' -_- Don´t know what to change, checked it 7 times now.
@@thalion9847 I'd like to update that the problems I was facing was due to syntax errors on my side. After reviewing, exploring, trying and testing, I was able to fix all the errors that I faced. Even the bugs that were born after tweaking code to fit my need.
So I would suggest you to do the same. Grind till you identify the problem.
@@vaibhavsatish413 It´s only the 'text-animation' part that´s not running. I checked it again, after you said you got it. It´s not even showing the first 'content' text. No typing at all. Could you post your css and html part from the text-animation?
@@thalion9847you foubd a fix ?
@@thalion9847 yes same
your web site is awesome but screen play is very poor and fast going i cant understand
change speed
this is so awesome can i kindly get the source code
My timeline isn't showing on alternate sides. It's being displayed on the left only.
me too
Same, were you able to fix it?
@@SNgh6177 Same, were you able to fix it?
Add this to your code ...
in section education : add ... after > div class timeline-items.
and the style code is :
.line {
position: absolute;
left: 50.2%;
height: 1000px;
width: 8px;
display: flex;
align-items: center;
justify-content: center;
transform: translateX(-50%);
background-color: var(--main-color);
}
And it will show up.
@shantgarabetian6464 tysm dudee
.text-animation span {
display: inline-block;
position: relative;
}
added inline-block cus the words were cut off as its typing...
Thanks for watching...❤🎉❤
Honestly I have taken 2 days to complete this video and make a website together. Share me how many hours took?
TYSM you earned a sub :)
wow
I finished the video but the image isnt on the right side, how do i fix it, i watched and coded everything
I am facing the issue. Did you find the solution ? I guess it is due to flexbox but i am not able to find out the actual issue.
having the same issue
did you solve the problem?
Watch @ 7:48 - one closing tag is shifted upwards in front of the IMG. Had the same issue and then found this step which solved the IMG positioning :)
@@AexelNeb thank you so much, just checked now and it was a syntax error, fixed it and it worked!
@@michaeltkere6813 plz give me the sourse, i want to learn it
done everything but the text animation is not working in the about section
Yes, I'm trying but the text animation is not working
@@AngelDr08 check for spaces in the before section..if there remove it...its a syntax error
@@protyushghosh2080 i do not have any space left between and i checked it like 20 times everything should be fine and its not working any suggestions?
update the error was on html under
@keyframes typing{
10%,
15%,
30%,
35%,
50%,
55%,
70%,
75%,
90%,
95%{
width: 0;
}
5%,
20%,
25%,
40%,
45%,
60%,
65%,
80%,
85%{
width: calc(100% + 8px);
}
}
My profile pic is not infront of text🙁 What should I do?
Adjust the size and alignment and ratio
Github code?
I have a problem :: when I make my portfolio and add background image and a picture in it... It not showing in my mobile. I also add mobile responsive properties....
If anybody knows please help me 😭
it's probably not scaling correctly or it's probably not as responsive as you think. You need to test it extensively. Without seeing your code I can't help completely.
if you can see it on desktop but not your phone its prolly scaling or resolution issue bro
@@PrettyGazi I would probably guess scaling. Its possible that his max-width or whatever is pushing his image off screen on mobile. That's why he should continue to test
checkpoint 42:13
Text Animation is not working. Any Solutions?
Working
This woman is a Senior developer :o
No He is Not Women He is Just Making An Example Work
Can you please give Source Files also??
The design is good but this website would be hell to display on different viewports
Can you provide the source code for this portfolio?
Its ok i got the solution for not scrolling, i have added only overflow in html instead i had to add overflow-x 😅, by the way thank you this video is helping me alot........ ❤❤❤❤❤❤
When I hover on Image I didn't see any shadow there
yes mee too
can u give the scource code bro
7:52
#menu-icon not working, why ?.
same broo
Me too
Do you provide any free source code.?
Font family not. Working
I hv timeline in left side can anyone solve my error
I have the same problem
Same, were you able to fix it?
@@feli88111 Same, were you able to fix it?
Add this to your code ...
in section education : add ... after > div class timeline-items.
and the style code is :
.line {
position: absolute;
left: 50.2%;
height: 1000px;
width: 8px;
display: flex;
align-items: center;
justify-content: center;
transform: translateX(-50%);
background-color: var(--main-color);
}
And it will show up.
Bro if u are seeing this please tell me
My nth child odd even not working please🙏 help me
Cara gabungin style css sama index gimana bg soalnya aku baru buat tapi tidak bisa di gabungkan
Itu kalo kamu lihat di file index paling atas dibawah title bakal ada
Js not working
thanks boss
sir, would you share me the source code, pleaseee
the code is sold, sir@@FerryBoyAncapoy
thanks you
You have source code
@@Webdeveloper-ayan yes I have
@@himanshukumar8783Can you give it to me too...
How can I contact you
@@himanshukumar8783 i want resources code plzz send me
Source codeee please!!! I'm paying for it!
14:38 note to self(timestamp for this annoying code)
webkit-scrollbar is not working anyone know why??
Same
overflow: auto;
What about the menu icon for Responsive mode?@@potopoto341
my typing animation not working
mine to. have you solved it?
@@donpatron6998 its work broo
source code pls?
your github id?
14:06
The source code please
I think it's good but try speaking
Here is the similar one with line by line explanation of the code: ua-cam.com/video/uTPO6fKtBvM/v-deo.html
1 tutorial with voice pls 😢
I have a lot of videos with explanations especially the last 30+ videos, you can check them out. If you are specifically looking for a portfolio website video I recommend you to watch these two videos:
ua-cam.com/video/uTPO6fKtBvM/v-deo.html
ua-cam.com/video/GnFH9Eg-OuM/v-deo.html
@@HowtoWebDev thank you
can u drop a source code
Can you send me a normal-sized picture of the first girl.
because this link has a bigger picture
why did you wrote window.onscroll? i dont see the use case here. i mean the mobile view navigation works completely fine without this function. so im a little bit confused why you have wrote it. and on this video-- ua-cam.com/video/GnFH9Eg-OuM/v-deo.html you had not wrote this funciton.
The window.onscroll function is used to determine which section is displayed in the viewport currently, so that the corresponding link in the navbar can get the underline effect (Such as, when you are displaying the Home section, 'home' tab in the navbar gets a underline effect). Check out the if statement, you can see that the tab you are currently viewing gets the 'active' class, basically indicating that you are currently in that section. Looks like the video in the link doesn't have that feature, so that's why it doesn't have that function. It has nothing to do with the navigation of the website, its just to create the underline for the current tab.
@@HowtoWebDev i dont know maybe i didnt do the same way you did, but using that code has no effect on my browser, it doesnt gets underline no matter how much i scroll
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');
})
}
})
}
here is the code
@@junayedhassan8535 It works for me, but the menu onclick does not work, it only turns to x but does not show the menu items.
do you know solve it bro? we have same problem
I'll really appreciate your efforts 😊 and keep going further but could you can give the source code of it??🤔
lmao
45:15 still watching
❤
Source code
You can get the source code from my Buy Me a Coffee Page: buymeacoffee.com/howtoweb/e/295193
save point 14:18
Hi
🏁🎌🚩🚩🚩
Lutfen konus
ua-cam.com/video/uTPO6fKtBvM/v-deo.html
vashe
wow. with these no one has to buy shit.
Can you please give the source code
41:36
4:41
Can you plz drop source code plz
30:36
14:27
25:28