Build a Complete Responsive Personal Portfolio Website using HTML CSS JavaScript
HTML-код
- Опубликовано: 12 сен 2024
- Welcome to this comprehensive step-by-step tutorial on creating your own stunning personal portfolio website from scratch using HTML, CSS, and JavaScript. Whether you're a beginner looking to start your web development journey or an experienced developer wanting to enhance your skills, this video is perfect for you!
🔗 Links and Resources 🔗
You can download portfolio. Click this link drive.google.c...
Resources: drive.google.c...
Subscribe to our channel for more web development tutorials: / @syntaxstudiotv
👁️🗨️ About This Tutorial 👁️🗨️
In this tutorial, we'll guide you through the entire process of creating a professional and responsive personal portfolio website. You'll learn how to build the structure, style it with CSS, add interactivity with JavaScript, and make it look great on all devices. We'll also cover deployment options so you can showcase your work to the world!
🔔 Stay Updated! 🔔
Don't forget to subscribe to our channel and turn on notifications for more exciting web development tutorials. We regularly release new content to help you master web development and stay updated with the latest trends.
📢 Connect with Us 📢
Follow us on social media:
Follow us on social media:
- Facebook: web.facebook.c...
- WhatsApp: www.whatsapp.c...
- Website: www.syntax-studio.com
🙏 Thank you for watching! 🙏
Your support means the world to us. If you found this tutorial helpful, please like, share, and leave a comment with your thoughts or any questions you may have. We're here to assist you on your journey to creating a standout personal portfolio website!
#HTML #CSS #JavaScript #WebDevelopment #PortfolioWebsite #Tutorial #Coding #WebDesign #ResponsiveDesign
The link is not working
at 23.15 min there come extra div inside home section. there is skipping in the video
the video repeated in the middle and from there im lost and cant figure out what actually changed, very sad , i was sitting like 5 hrs on it
Take your time, you will make it
You can download portfolio. Click this link drive.google.com/file/d/1rCBwq7Hz2DSfppeXQn4v3MK4VSGA2Cu8/view?usp=sharing
@@SyntaxStudioTv it shows that the file is in owners trash
@@SyntaxStudioTv it's showing in your trash can you remove it from trash i am working on it and need the source code plz
@@hirarehman2189 drive.google.com/file/d/1Gs7ldaAOQG_OcmdxKh047nLZ7zKtKu3Z/view?usp=sharing
So beautiful. Love the styling 🔥
I would have loved it if the font of the video was bolder. I'm finding it difficult to code along with you 🥺, and I love this template 😩
what a silly mistake i did nd because of it i stucked in code for 2 hours then decided to go back and code once again step by step from where i did mistake then i found my mistake cubic-bezier(1,0,0,5,1) instead of cubic-bezier(1,0,0.5,1) . Thankfully i completed this project.
thanks to you i found my mistake as well 😆
i was stuck on it for an 1hr...thank u soo mmuch
Thank you so much i found my error after giving 2 hrs to find this 🥹
unkowingly you have helped me too...Thank you so much
heyy excuse me can you please provide me the source code i am stuck at section 2 of professional skills
is this responsive website those u have coded? Please Reply , i really love this website
Nice website | Amazing UI | Good Work
Thank You bro
follow this WhatsApp Channel whatsapp.com/channel/0029Va6SE2X4inogoG4U053h
Bro pls share your Source code?
Bro source code send kare
Bro in 38:00 you cut the video where in cubic besizer(1,1,0,5,1) you cut the video and chnaged to (1,1,0.5,1) without telling us why bro? I lost more than 1 hour trying to fix this error because i am a beginner
check this - ruclips.net/video/Md7pEE3nxzg/видео.htmlsi=tJhMidABWeYPbVKw
My favorite part of this video is i can make this portfolio via listening to the music
Have you completed this? Please help me with sorce code.
@@ujjwalpathak4400 what help..? ask
follow this WhatsApp Channel whatsapp.com/channel/0029Va6SE2X4inogoG4U053h
@@SyntaxStudioTv I have tried a lot to join this channel by following the link but I am not able to join your whatsapp group js script source is also not working it is updated to 16
can you plz tell me where is the code for inserting the image that is displayed on the first page. Plese give the time of video as i satrted making and on the starting only the image is displayed in the video but in my it isn't . i did not find the code too so pls tell me
I want all the images that are used in this project...you have just provided 2 images.....i want project section images please
Dear Developer, i have noticed that your code change automatically without showing. In simple terms you change the small code off the camera and that is not shown in camera. Why you do that? Thats not expected 😢
my web site is coming soon. you can downland the source code 😊
follow this WhatsApp Channel whatsapp.com/channel/0029Va6SE2X4inogoG4U053h
Bro,file is in owner's trash it seems...can you give the code to download?
Hey bro
I'm getting error in technical bar section.
Bar animation is not showing pls help
same problem 🙁🙁
same problem bro
Yes , even he also show it twice, I think I wasted my time by following him
hey i completed all .@@snowphoenix2550
i completed my portfolio website succesfully
source code link not working
i am not able to do the background image step. Could you help?
Same did u get resolved
@@saurabhgautam4265 same
@@saurabhgautam4265 same
The typing animation is nit working for me and I'm doing everything correctly 😢
Okay so I did the whole thing, but there's so much that just doens't work. Having the source code available would really help me analyse what I'm doing wrong..
follow this WhatsApp Channel whatsapp.com/channel/0029Va6SE2X4inogoG4U053h
@@SyntaxStudioTv I had joined the channel, where can i find the source code?
Bro i didn't get the progress lines for the technical skill section ?
how you put this images in home section and where you get this image format ?
follow this WhatsApp Channel whatsapp.com/channel/0029Va6SE2X4inogoG4U053h
Give the ScaleX value as(1)
But only appears on black it doesn't show progress on the next color @@211bhadrinarayanan2
@ 7:41 / 1:40:58 without any img tag and without any img layout and style in css your image is shown and your background image is only color. Can you explain it.
yah i have the same question
follow this WhatsApp Channel whatsapp.com/channel/0029Va6SE2X4inogoG4U053h
I did not find anything@@SyntaxStudioTv
Ur background image is edited? U edit it?
Thank you for the video, how did you make your background image with your photo isnide? I would like to switch the image to my own profile picture please thanks boss!
follow this WhatsApp Channel whatsapp.com/channel/0029Va6SE2X4inogoG4U053h
Thank you bro 😊
How will I get to know about creating background image after following on whatsapp?
You can download portfolio. Click this link drive.google.com/file/d/1rCBwq7Hz2DSfppeXQn4v3MK4VSGA2Cu8/view?usp=sharing
Not working Bro @@SyntaxStudioTv
Hi. In the Technical Skills section content is not showing on the progress bar which is in percentage my code is perfect and everything is working perfectly but the content that is in percentage not showing. please guide me.
Same issue did u get it
I got the same issue any solutions?
Bhai ye jo aapne Backgroun lagaya hai ye smejh me nhi aaya please explain me for my help
You can download portfolio. Click this link drive.google.com/file/d/1rCBwq7Hz2DSfppeXQn4v3MK4VSGA2Cu8/view?usp=sharing
Unavailable aa rha h portfolio@@SyntaxStudioTv
@@SyntaxStudioTv pls help portfolio unavailable show ho raha h
Bro it is unavailable pls help@@SyntaxStudioTv
Download portfolio not working
What software tool are you using for developing?
Autotyping not working
Replace typed with Typed and Strings with strings
Can you send the drive link which the code is present. The drive link which you have kept is not working.
Hi, your Last Projet section, the three images you are using, how did you delimit their size? I cant see where youve done it in the CSS file.
Did you simply insert the right size pictures or did you resize them inside the code?
Bro you can do any of that
Chek this - drive.google.com/file/d/1G35YXwadgjO4fY700lV7tZhT7vQ0Ug-v/view?usp=sharing
@@SyntaxStudioTv ali baba
Hi bro i am not able swap the strings in text class inside the span tag please help
add event listener function() to the DOM content so that it will work.
Great! I completed the project and enhanced it with my needs. Thank you very much!
source code de sakte ho ????
my web site is coming soon. you can downlord the source code 😊
bro when is your website coming?
@@SyntaxStudioTv
Where can download the source code @@SyntaxStudioTv
Hey Bro please you can share the source code
1:40:37 i like your web bro and its very good to see that
Thanks for telling this web
follow this WhatsApp Channel whatsapp.com/channel/0029Va6SE2X4inogoG4U053h
The progress line thing is not giving me output , help
did you fix it? im having the same problem, the percent doesnt show up
check this : ruclips.net/video/Md7pEE3nxzg/видео.htmlsi=Luz49eVz-lEf1000
Hello, you are doing a good job.
I was unable to download the portfolio from the link in the description, it says that it is in your trash directory
Great work brother
I also tried it.
❤ with love to U........
Thank you so much 😀
@@SyntaxStudioTv bro im unable to link css to html,
what to do ?
@@sandeepsandy6655 in html type link and then src stylescheet and then the name of style sheet or style.css. when you enter ! in html and enter you can see there is a line link there is the line and place here your style sheet name
Hi @ Jay bro Can you please share code with me?
How do you edit this background
holy crap I was stuck on the Typed part for a minute and realized I needed "Typed" not "typed". It started working when I Capped the T. Chaptalization is key in JavaScript lol So if anyone is having issues with their JavaScripts not working be sure the capitalization is correct. 1 word not capped will break the whole code. Just a tip to those who are saying their Scripts aren't working.
My Code:
var typed = new Typed(".text", {
strings: ["Freelancer", "Web Developer", "Frontend Developer"],
typeSpeed: 100,
backSpeed: 100,
backDelay: 1000,
loop: true,
});
did you completed
@@bhaveshgupta2311 Yup.
@@bhaveshgupta2311 The only difference, of course, is I used different Images on mine. Other than that everything else is identical.
@@EricOnline92 can you share the source code pls?
@EricOnline92 Can you pls provide the source code?
bro i have one doubt while creating portfolio i cant run the code while i start running the code its showing like aboutblank.what is the solution bro
Can you share the source code please ?
you want a source code?
yes i need@@Vargas_p0
YES @@Vargas_p0
Yes I also want @@Vargas_p0
@@pratikwalunj2944 you have instagram ?
Hi brother,What is the difference between a web developer and a web designer?If i want to be mainly a web developer,What should be priorities?Please answer.
designers only handle the front end of a website whereas a developer handles the backend if you know both then you are considered a full stack developer
follow this WhatsApp Channel whatsapp.com/channel/0029Va6SE2X4inogoG4U053h
Sensational.
Can you make the source code available?
you want a source code?
@@Vargas_p0 Yes
can i have it?@@Vargas_p0
Please source code
@@thestoryvault-xplease give me the source code 🥺
May I ask why are you using image for background?
Plz remove the background sound
My progress bar is not showing any result when im applying . progress-line .html span{
Width
}
follow this WhatsApp Channel whatsapp.com/channel/0029Va6SE2X4inogoG4U053h
bro, in cubic bezier, kindly change 0,5 to 0.5.
bro please provide source code bro
my web site is coming soon. you can downland the source code 😊
follow this WhatsApp Channel whatsapp.com/channel/0029Va6SE2X4inogoG4U053h
What happened bro ?? Why the link isn't working ?? 😞
Please provide source code
you want a source code?
send please@@Vargas_p0
@@Vargas_p0yes
What is the beginning in the css style, I can't see it before 18 lines
follow this WhatsApp Channel whatsapp.com/channel/0029Va6SE2X4inogoG4U053h
Wtf, where did your photo suddenly appear even though it's not in your code😢
I'm also thinking about this😂
Ye bhai kii wallpaper photo h jisse inhone url ke through bss fetch krii h naa kii iskaq code likhaa h
Toh code app dedo
check this link - ruclips.net/video/MNHuIIDW5bE/видео.html
dicopas sama kawan saya mr
rill mr
Thank you bro 😊
follow this WhatsApp Channel whatsapp.com/channel/0029Va6SE2X4inogoG4U053h
Please, the portfolio link is not working, could you send another link? Thanks!
Link is not accessible why why why ? i want this portfolio plz help me by giving the source code
please give us responsive code
Yes its not responsive 😢
Thank you so much!😍
Great job, Plz provide source code
follow this WhatsApp Channel whatsapp.com/channel/0029Va6SE2X4inogoG4U053h
sir it's not available in ur whats app chanel too@@SyntaxStudioTv
Sir please tell me how to open the png file when I trying to open it open ms Word, and how to place my photo inside that circle
you dont talk on the video which is ok... i can understand why you dont wanaa share source code(github or w/e) for free but no assets or or figma desgin or even a live demo we can watch .... bruh no hate the website is great and everything but whats the point of uploading it on youtube if your not willing to share anything ? if its about getting complements you can just share it on any social media or a community discord you will gets tons of praise.. but this is a compelete waste i was attracted by the image of the project at first but forgot everything about it after finding nothing.
check this link - ruclips.net/video/MNHuIIDW5bE/видео.html
I too agree with you what you said is right, in this video we learn code but time is wasted by doing all these stuff becoz now a days many nocode tools are available instead of this
❤@@Hhyxzz
@@SyntaxStudioTv brother
The device responsiveness too wasn't shared….
It's a waste for beginners
Sir i want source code? Where is this?
follow this WhatsApp Channel whatsapp.com/channel/0029Va6SE2X4inogoG4U053h
Yow love your portfolio. And where can I find similar pictures. It would be a great help. Thanks!!
How to appear to add walpaper in css line 50
Please could you share ur valuable information
Please
he use background with hi pic attached@@LogicvthNaik
follow this WhatsApp Channel whatsapp.com/channel/0029Va6SE2X4inogoG4U053h
Chek this - drive.google.com/file/d/1G35YXwadgjO4fY700lV7tZhT7vQ0Ug-v/view?usp=sharing
How to get one such photo for yourself as you are using?
follow this WhatsApp Channel whatsapp.com/channel/0029Va6SE2X4inogoG4U053h
do it responsive please....🙏
follow this WhatsApp Channel whatsapp.com/channel/0029Va6SE2X4inogoG4U053h
Nice video, Sir please can I have your code only for the education propose?
The animation os not working for me on time 1:01:13
follow this WhatsApp Channel whatsapp.com/channel/0029Va6SE2X4inogoG4U053h
U know how to fix it
hi please where did you see this image send the link
The background profile is not same on my project plz provide the source code either you can suggest how can i complete my project like this.
What is the possibility of rotating the git link?
follow this WhatsApp Channel whatsapp.com/channel/0029Va6SE2X4inogoG4U053h
Where's the part that you did the responsiveness of the website?
bro can you please provide me code link brother when i clicked link on video description it is showing not found
Can you upload a video to make this website responsive for different screen size like for mobile phone
follow this WhatsApp Channel whatsapp.com/channel/0029Va6SE2X4inogoG4U053h
Mera professional skills wala full portion technical skills k niche aa rha h right side mai nhi aara h mene video m 2 baar dekh liya code bhi pura shi h fir b nhi aara please help me
Hello that's great thank you ,can you please convert into responsive using js.
follow this WhatsApp Channel whatsapp.com/channel/0029Va6SE2X4inogoG4U053h
Brother apne portfolio main Kon se pictures add kar rake hai link de de
Could you please share this code in git and share link???
follow this WhatsApp Channel whatsapp.com/channel/0029Va6SE2X4inogoG4U053h
The link isn't opening
@@SyntaxStudioTv j’ai suivit la chaîne mais rien n’apparais c’est normal
how can i add my photo in this website,plz give me some suggestions
But how how did we make responsive for another devices ?
It's showing the files have been deleted.
55:06 is that a bug? Cuz my progress bars dosent show on the webiste.. :/
ruclips.net/video/Md7pEE3nxzg/видео.htmlsi=R70_Mes5Q-aXlhDn check this bro
Please the code isn't working for me if i can get the source code it will mean a great help to me
when ever u are typing u blur it when you are now done you unblur it, it makes no sense
Can you please give tutorial of that editing of your main photo which is in website
At 6:51 how to add background and image and what does background:url("Purple\Illustrated\Mountain\Desktop\wallpaper\wallpaper.png")no-repeat; mean?
What is purple,Illustrated,Mountain mean and no-repeat?
Please answer.
It's path
thank you create your video😀😀❣❣❣❣❣❣❣❣❣❣❣❣❣❣❣❣❣❣❣❣❣🥰🥰🥰🥰🥰🥰🥰😍😍😍😍😍😍
can someone please provide me css of this,,,as I have so many confusion
I am unable to place my picture in place of yours please help
will it run in phone?
follow this WhatsApp Channel whatsapp.com/channel/0029Va6SE2X4inogoG4U053h
someone please help me my professional sill section is not given the required space..
bro this website is mobile responsive or not ???
Bro home page ku about page ku apadi alignment proper panrathu
Source code pls brother nd dont send WhatsApp link i already follow yur link , cant get source code there😢
follow this WhatsApp Channel whatsapp.com/channel/0029Va6SE2X4inogoG4U053h
I am having problem in professional skill section. After doing display: flex also it is not coming in curve shape
same problem bhai i there any solution to solve this problem.
Thank you ❤ for such nice website
How you add the profile picture
source code bro
Bro files are not supporting
bro please share the source code, its not opening
How to make portfolio link for unploading in LinkedIn
How did you made that image with the background shadow can you please make a vedio actually i am searching for that image from one week please help me out its really important for me and im having a competition at my college for best portfolio website please reply me asap🙏🙏 actually i also reffered your Google drive link but its with your image can you tell me how to make that circle shape background shadow images with my pictures
this image designs by canva bro. you can any image use this web site 😇
follow this WhatsApp Channel whatsapp.com/channel/0029Va6SE2X4inogoG4U053h
Actually the link of that whatsapp channel is not working
Can you please make a vedio on that image please
Bro please provide a source code some part of the did not understandable
follow this WhatsApp Channel whatsapp.com/channel/0029Va6SE2X4inogoG4U053h
Link is dead
bro that main.js is not working
means that the transition for the profession is not working like writing and then undoing it
ruclips.net/video/MNHuIIDW5bE/видео.htmlsi=BLz6HxQ176F4kDOp Check this link bro
can you provide the source code here for more help
Bro wonderful 😮
follow this WhatsApp Channel whatsapp.com/channel/0029Va6SE2X4inogoG4U053h