How To Make A Portfolio Website Using HTML CSS JS | Complete Responsive Website Design
Vložit
- čas přidán 11. 07. 2024
- Learn How To Make A Portfolio Website Using HTML CSS JavaScript | Complete Responsive Website Design | Make Personal portfolio website
❤️ Get Source Code: greatstack.dev/go/portfolio
👉 Upload website online: • How To Upload Your Web...
In this video we will create a personal portfolio website design step by step using HTML CSS and JavaScript. You can use this website to make your online resume or CV. In this website design we will add name, designation of the user. Then we will display the image, skills, work experience and education details. We will also add the list of services and work portfolio on this website. In the footer of this website we will add contact info and contact form. Your can receive the contact form data on your google sheets.
This website design will be completely responsive for all screen devices like mobile phones. We will this complete website design step by step using HTML CSS and JavaScript.
#PortfolioWebsite #HTMLWebsite #WebsiteDesign
Download Image: greatstack.dev/assets/portfol...
HTML And CSS for beginners:
• Complete HTML & CSS Co...
CSS Grid Layout tutorial:
• How To Create A CSS Gr...
Form to Google Sheets GitHub:
github.com/jamiewilson/form-t...
Steps to build your own portfolio website:
00:00 Portfolio Website Overview
04:10 Creating HTML And CSS file
08:18 Make Header section of website
18:55 Make About section of website
42:12 Create services section of the website
54:09 Create portfolio section of the website
01:09:40 Make contact section of the website
01:28:37 Make the website responsive
01:46:00 Add website scroll on menu click
01:47:53 Send contact form data on Google sheets
-----------------------------------------
Suggested Course:
❤️ Complete website Using HTML and CSS
✔️ 8 Complete website step by step
✔️ Source Code Download
✔️ 76 Lectures, 12 Hours Video
✔️ Course Completion certificate
👉 greatstack.dev/go/html-css-co...
-------------------------------------
Recommended Videos:
Learn Complete HTML and CSS from basics:
► • HTML And CSS Tutorial ...
Make A Complete Website for college using HTML & CSS:
► • How To Make A College ...
How to make a Business website step by step:
► • How To Make Website Us...
How to make personal resume website step by step:
► • How To Make A Website ...
How to make fitness website design using HTML CSS:
► • How To Make A Website ...
How to make an Ecommerce Website Design:
► • How To Make eCommerce ...
How to make a Job Portal website design with HTML & CSS:
► • How To Make Website Us...
How to make travel website design with HTML CSS Bootstrap:
► • How To Make A Website ...
-------------------------------------
Affordable web hosting (coupon- GREATSTACK)
👉 greatstack.dev/go/hostinger
My recommended projects and tutorials
👉 greatstack.dev
-------------------------------------
◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:
► / @greatstackdev
-------------------------------------
Images Credit:
www.pexels.com/
-------------------------------------
Like - Follow & Subscribe us:
◼️ CZcams: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr
◼️ Instagram: / iamavinashkr
Dude is better than 99% of my professors, instead of wasting 20 years explaining history of each function, he simply shows us how to make a website
Yeah he is really good, I love his tutorials
Yo got me smile with this and i dont know why in collage they dont teach this way
Do you know why we use active-tab and active-link?
🤣🤣🤣🤣🤣
Dude if you made then can you please share the source code it would be really helpful
Such a fantastic project. I have to be honest with you, I have been checking out on most your tutorials and I must confess that you are the only person so far on CZcams with such commitment, dedication and real tutorials. The reason I said so is because, you never hide anything that would be beneficial to people to yourself or for any business agenda. So, for that I'm really grateful and I encourage you to keep it up. Such a great development skills.
Dude if you made then can you please share the source code it would be really helpful
pls someone tell me how i can make the effect at 0:19 he didnt show it in the tutorial!!!
@@noons186 that is a cool effect! You went through the whole tutorial and he didn't show it? I'm just starting the portfolio section.
I concur with my learned friends, who didn't only recommend your efforts but also appreciate your time and patience, I spent all most a hrs, watching this project, and how simply your project catch my intention, you are such a great instructor, educator, the process on how you arrived on each step was splendid and understandable for us the novice, have watched so many CZcams tutorial, but I seem to pick out anything from it, bt your project has open my eyes on the process and step, how to build a website, and how to place those function, you are marvelous, and I wish you could make a complete Modern website with functionality, as this is just a portfolios
Thanks for your efforts instructor.
How do i share this portfolio website like transfer from laptop to other devices
Website making is made easy with this video tutorial. It's more than just making a resume. In spite of this, you cover the most important CSS techniques. As an example, making the carousel, displaying details according to your preferences in the about me section, and using transitions and transform styles to create an aesthetically pleasing effect. Last but not least, we learned about displaying a message after submitting the form.
One request I have is that if you could provide a tutorial for the music website or a video website like Netflix, so I can learn how to manage multiple videos. Another thing I want to learn is how to upload documents directly from files.
Extremely well done tutorial! This has been an incredibly hands-on way for me to learn HTML and CSS compared to just reading documentation explaining what each function does. Highly recommend for someone new to HTML and CSS.
Idk why java script code is not working could you please help me
which section isn't working ?@@sejalpanchal4181
greetings friend, seriously you are a crack, I am from Colombia and I do not understand much English, in fact only basic but I managed to understand your explanation, your videos are of incredible quality and I hope you continue uploading more content because I have really learned a lot with you Greetings from your good sub from Colombia
Hello!
The following comment Is for people that are having problem with the script code at (36:50)
So, one of the problem that you may be facing, Is the following,
The "Experience/Education" tab are not showing up when you click them, even though
you're 95% sure that you wrote the code right, It is very frustrating, right?
Then, there is the solution:
1st Step: Verify each line of code "line by line"!
2nd Step: Open Chrome Dev Tools, if you did find an error code, then go to the line where the interpretor says the error is.
However if you didn't, then I think that the 3rd and last step will 100% help you.
3rd Step: Verify the tags that are within the "About Section", specifically
the "tab-titles", why?
Because, you may have forgot to put the CLOSING TAGS.
I know it may sounds silly, but this typo was the one that I encountered.
Hope it helps!
thanks! step 2 helped, i put getElementbyId instead of getElementById
@@aakashkolli2350 No problem
Thanks man, I didn't know that you could use Chrome's Dev tools for error checking!
@@aakashkolli2350 noo not working when i use this all the tabs SKILS EXPER AND EDUCATION collide with each other
still not rectify the error please help
This is such an amazing video. You thoroughly gave me a free ticket to building my portfolio with your guide and easy to comprehend video. With my knowledge of web development, I was quick to grasp this and make one myself.
For the first time ever i have watched a video tutorial from the beginning to the end without skipping even a second. Easy tutorials is actually the way to go. I started my web development track and after learning the basics of HTML and Css, understanding this tutorial was as easy. I will now try and replicate the same site with Bootstrap for responsiveness. Thank you Easy Tutrials
the js part isnt working... please how did u do your own?
@@estherajayi3147 having same problem here
@@estherajayi3147 Mine too didn't work and instead that as home work to actually go and work on my JavaScript code. Currently am working on JavaScript
when you figure it out kindly let me know please
ima facing problem at 1:01:48 unable to get the gradient color on the image do help
I love your videos. You are saving lives from somewhere in Nigeria. Keep teaching us more of Web development especially js.
for beginners, at grid-column-template section if your "grid-gap" is obsolete, u can try only "gap" in this video sample "grid-gap: 40px" u can try "gap: 40px"
Dude if you made then can you please share the source code it would be really helpful
bro did u get the source code?@@arunyadav7467
I usually don't comment, but this got me. I'm yet to complete the vedio but this stuff is really great, far more better than what we learn in class. Thank you
Thank you very much! I enjoyed building this website with you so much, I finished it in one day. And I learned so well that I noticed you forgot to add "background-attachment: fixed;" to the #header in the CSS. Which was one of the most important design for me.
#header {
...
background-attachment: fixed;
}
Thanks buddy was searching for it
@@AbhinavKumar-xo5ji Like my comment so it will go up for others.
Thankyou so much yr I was searching for it.
Hey can u help me my function onclick are not working
pls someone tell me how i can make the effect at 0:19 he didnt show it in the tutorial!!!
"Thank you so much! Your video was incredibly helpful in teaching me the basics of HTML and CSS, and as a result, I was able to create my own website. I appreciate your guidance and am grateful for the knowledge you shared. Thank you again!"❤
Bhai code de sakte ho kya ??
Can you give code brother
You've won my subscription, sir. Many many thanks to you from someone that is doing a Frankenstein of self-education and just learning about HTML-ccs-js.
Seriously,
Thanks.
Dude if you made then can you please share the source code it would be really helpful
pls someone tell me how i can make the effect at 0:19 he didnt show it in the tutorial!!!
Thanks for this informative way of designing a website. I can't appreciate you less. You are really a blessing in my learning html and css.
I'm at first degree at university in design web
love this awesome work
Great Tutorial.. Well paced and easy to understand. Thanks for this.
I dont even know how to start thanking you .
At first I player your video , I thought you are like the another boring unclear guys, but I've just finished portfolio today 😊.
Thanks really. You are teaching alot
Hi please I'm having trouble with th the js part for the about,can u put me through
@@akindeseyi9493 same here
You're really amazing. This is the best of all videos that i have been watching on creating a portfolio. This is my first time of watching a tutorial of long duration without skipping. You're really amazing.
Thank u for such an amazing video. I learned a lot , u are my life saver I lost my job , and I needed to build my own website this was exactly what I needed , I just need to buy the domain and make it public, again thank u so much.
Excellently tutorial. Very well presented and easy to follow along with - not too fast like a lot of videos- really well explained too.
Dude if you made then can you please share the source code it would be really helpful
pls someone tell me how i can make the effect at 0:19 he didnt show it in the tutorial!!!
@@arunyadav7467bhai Mila kya code . please!!!
Hi sir, thank you so much for these videos. I followed your tutorial to create the college webpage and had so much fun. I'm now starting to get more comfortable with coding. Thanks, your tutorials are well explained and easy to understand, yet they provide perfect instructions to build modern but beginner-friendly webpages! Keep it up, thank you
can you help me please share this code for me its my honest request for you
pls someone tell me how i can make the effect at 0:19 he didnt show it in the tutorial!!!
@@noons186 use background-attachment:fixed inside header section and it should work
@@deviceyt3288 hi do you have source code?
The only way to learn HTML, CSS, and JavaScript; Thank you for this video
Really appreciate your work bro🙏🏻👍🏻 it help me to growth my coding skills as a beginner developer🔥 Thanks for making this video buddy👍🏻 keep sharing videos like this😎
Thank you for this, brother! I'm following your tutorial doing some minor tweaks for an assignment and I must say you make it easier to understand.
Dude if you made then can you please share the source code it would be really helpful
pls someone tell me how i can make the effect at 0:19 he didnt show it in the tutorial!!!
@@noons186 hey did you figure it out? I think you have to apply the sticky effect z
Hello everyone! Stop asking for source code and start from scrath. That's how you will learn. That being said, if you're too lazy to type and create this portfolio by following his tutorials, at least become a member of his channel. Read the description of the tutorial and stop begging for source code.
Totally agree. I did it myself from start to finish. How about you? Did you have any issues along the way?
@@concertakapanol1174 I'm having issues with the JavaScript code my functions aren't working how did you fix urz??
Excellently tutorial. Very well presented and easy to follow along with - not too fast like a lot of videos- really well explained too.❤❤❤❤❤❤
This the best video I watched to complete my portfolio.....Thanks a lot
Thank you so much for sharing your knowledge and time with us sir. This so helpful and detailed. I love how you presented it.
Thanks for all the inspiration brother! With these guides I have started making some websites for people! It's been a really good practice and can't thank you enough!
ima facing problem at 1:01:48 unable to get the gradient color on the image do help
@@techyboycharan450 yes, do you have discord I will send you the code?
Dude if you made then can you please share the source code it would be really helpful
@@mrt8bit692 hi i have discord can you share the source code? I am a beginner and my assignment is due tonight
Hi sir Thank you for such amazing portfolio and tutorial. I made my own by following your tutorial. now I have a Portfolio that I can Proudly present to my potential employer.
Thank you so much for this tutorial sir and i really love how u explain everything u code, your better than to 99% of my professors, you simply showed us and explain how to make a website
Dude if you made then can you please share the source code it would be really helpful
@@arunyadav7467Mila bhai code tumhre?
This was an excellent video and well explained throughout the process. I look forward to viewing other videos on your site.
Thank you, I will suggest you to watch this multi page website design tutorial too: czcams.com/video/oYRda7UtuhA/video.html
Such a nice tutorial 👨🏫📓 and great project and I'm watching this video after 1 year of unloading
Thank you so much for this I've learned a lot from this video
This is an excellent video! Thank you so much! Although one problem I had was the "responsiveness" of the website, where the CSS code in the "@media" was meddling with the original website structure, so I had to put "max-device-width" instead of "max-width" to fix it, I hope if anyone else had that problem, this offers some help, but other than that thanks again, this video really helped me understanding and improve my knowledge of HTML and CSS, and successfully helped me to create my own website
@Josiah-John Green
Hey, I’m glad you were able to create your website. Quick question: do you know how he was able to generate his logo? Is there an app that can form one’s name logo?
I had an issue with the portfolio image not rendering the size of the image itself and instead it got compressed underneath the name intro. Do you know of any fixes for this?
I am beyond thankful for this comment because I have been trying to debug this issue for the last hour and a half lmao
Hi Avinash, thanks a million for this awesome portfolio tutorial. As usual, I loved your work. I appreciate your kindness brother.
Thanks to you. Glad you like this portfolio website design tutorial
@@GreatStackDev Where we find Source Code??
@@shibam_2002 Please go through the description 😇
@@MonkeyKing.143 its paid code please available as free off a cost
@@GreatStackDev pls someone tell me how i can make the effect at 0:19 he didnt show it in the tutorial!!!
I'm really impressed with the way you teach. Hats off to you.
I thought I would never understand HTML and CSS, WELL DONE
Great Video, Really helpful, learned a lot of new things. Can you make a video focusing on image resizing/positioning, espically while trying to make the website responsive?
Dude if you made then can you please share the source code it would be really helpful
did you figure this out?
You got a subscriber bro.. i appriciate your work❤❤❤❤❤❤❤❤
Thank you so much Manpreet
This is the best tutorial I've ever seen on CZcams so far. Thank you so much
Thank you so much. Your tutorial has helped a lot. Currently building my portfolio to get a job.
It's a great explanation brother... I have a small doubt which is can you please share the details of image used? Like what is the aspect ratio and what is the exact pixels used, so that we can use our own images. It'd be great.. Thanks in advance
he provided link below for images go and check image details there
Can you do this in Bootstrap 5? Just to get an idea of how we can use bootstrap classes to design the same
It will be very good for us.
Thumbs high👍. This is one of the best tutorials ever.
wow!!! thaanks!! i am so happy to complete this. i have learned a lot as a beginner 😍
40:02 here i am getting an error . after clicking on skills button it showing opentab is not defined.
I'm the same issue did u fix yours??
Really great tutorial , followed it through, I guess u missed the part of making the scroll behaviour where the website scrolls over the background image. Nonetheless, learned a lot, keep up the amazing work.
yeah i think he missed that too.. sad :(
Thank you so much. Your are so good at explaining things and I also like your flow of programming.
This is incredibly valuable, thank you very much bro!
Finally designed this beautiful portfolio website sir thank you so much sir for making such an amazing portfolio website and posting it on youtube I really got to learn many things from this website thanks a lot once again
You are most welcome
@@GreatStackDev
hey, can I use this same portfolio as mine?
like I create portfolio with the same code with my details and submit it in company?
yes Harsh, you can use it
the only limitation on the work is that
the Navigation bar should have be fixed on top the website throughout the scroll-behavior
regardless, thank you Sir!
i really appreciate.
Thank you so much for providing a valuable tutorial for beginners
This class very useful in beginners so thank you so much 👍
Contact form didn't work. I solved it as follow: if you are using excel in another language, then you have to adjust the Google Apps Script. I had to change " sheetName = 'Sheet1'" to sheetName = 'Tabellenblatt1'. OTHERWISE IT WILL NOT WORK
ich küsse doch dein herz
Day 1 --- 30:00
Day 2 --- 01:06
Day 5 --- completed:)
ima facing problem at 1:01:48 unable to get the gradient color on the image do help
@samialvi4226 Js part is not working
@@riturajkumar9587 The active skills right?
didn't work for me too
The given code doesn't work always!
Don't just be stuck at one place sometimes its okay to move on.
@@samialvi4226 now it works bro I find my mistake
@@riturajkumar9587 please can you share your answer
Felt very glad after watching this tutorial completely i too created my portfolio website in this type got many useful tricks and points of web development thanks a lot it really boosted my confidence !!!
This is such a excellent video, Thanks you so much ,really lots of things learned through this entire video, just completed the full portfolio website. It's look nice
45:33 "Grid-gap" doesnt work anymore, what are the alternatives for the same function?
Try gap
didnt work either
What u have done bro?
👉 Get Source Code: www.buymeacoffee.com/easytutorials/e/110476
Make portfolio website in React JS: czcams.com/video/4ag1LsgIUc0/video.html
Hey bro. Thank you so much for the knowledge. I do have a minor setback, I tried to do what you did, my end results are way different than yours. There is big space on the page in service and contact section.
Amazing course with great web dev concepts covered
It was the best tutorial!! I created my first portfolio website from this tutorial..
Thank you for this video..
The side menu remains visible on mobile, in the right side 200px.
To fix it, at this to javascript:
function openMenu() {
sidemenu.classList.add("show_menu");
sidemenu.classList.remove("hide_menu");
}
function closeMenu() {
sidemenu.classList.add("hide_menu");
sidemenu.classList.remove("show_menu");
}
and add this to style.css:
.show_menu {
display: block;
margin-right: 200px;
}
.hide_menu {
display: none;
}
thanks a lot bro
Hey I'm not getting where to add this code can uh help me
Why aren't you allowing the source code visible to all ? Are you sharing your knowledge for money ? It's just disgusting that if any child wants to access the source code and has no money resources for himself will have to type simultaneously with the video. I don't like this.
1st time on CZcams
I really impressed by this video
Awesome and very easy to follow
Thankyou so much Avinash Great videos, I learned complete front end developer skills from you. Very helpful for the one who really want to learn the skill :)
Bless to have such teachers like u sir
Thanks a lot!! Iwill learn this in the end of year to preapare finding a job in the next year!!!!!
Wow I just want to say GRACIAS THANK YOU SO MUCH 😊... Love how easy is to understand the way of the Force, sorry the way of the HTML CSS and JS ☺. Gracias again 🥹
Thank you so much brother. You got my heart brother......I'm so much happy with your simplification and understanding language
Thank you so much. This tutorial was really interesting and effective
One of the most brilliant website design tutorial.
Thanks u very much brother, keep strong and healthly. GOD BLESS U
Thank you so very much for providing such an incredibly instructive video! I gained a wealth of knowledge from it, and as a result, my website has reached a state of perfection. I express my sincere gratitude for your valuable contribution. Thank you!
no words to express my satisfaction, your way of teaching is just awesome, understanding each and every line code
sach me bahut acha banaya hai aapne ye video ,channel ke naam suit v karta hai easy tutorials, sab kuch bahut easily bataya hai aapne ,bahut kuch sikhne ko mila 👏
following you...was very great . stumbled on your page after my meta course on coursera , oh I needed thtis!.Danke Schon from Germany
thank you, this is easy and very explanatory.
Just mind blowing video. Amazingly explained.
I just came across this channel while i was researching about we development and i gotta say you definately gained a sub..much love brotha! ❤️
Thanks a lot for this portfolio project. Learnt a lot from this.
thank you so much i completed this project just two days and without any distrubtion and mistake i really appreeciate to you sir
It's amazing. Thank you very much for your time and efforts.
best portfolio tutorial on youtube, really well done
Absolutely The Best tutorial for beginners !! ❤🎉
Great work! Really learned a lot from your video and it helped me make my own website.
This video has helped me built my own personal portfolio. You explain everything so clearly. I also really like the style of this website. Thank you so much!
Bhai code de sakte ho eska .pls bhai .
Thank you so much sir I learn a lot from this video and made my personal portfolio Website ❤
Very well taught 👏👏👏
thanks for making video on porfolio ..its very useful😊😊😊🤗
Bro Thankyou soo much. I create own my Portfoilo using this video. Thank You
Great Video! Thank you so much for charing.
This have been so helpful. Thank you very much
Thank you so much sir ❤, I've completed same project with the help of this video, again thank you 🎉❤
Thank You So Much for such a detailed video!!!
Great video! Took me about 2 weeks, but now I have a responsive website that I will be putting together with AWS S3 for my static website! Happy 2024 everyone!
can you help me for making this website i stuck on javas for effect.
@@ruturajfulpagare307use sublime text and its messing things up
@@ruturajfulpagare307 It worked for me. I don't mind helping or discussing your issue.
One of the best portfolio websites I've ever seen on internet
Bro am noob, just have lil knowledge on html, css, js but you teach me how to create a website completely, i manage to follow and type your code in 4days, good job, you're the best. Thanks. Message sent successfully😉
bhai source code mil skta h?
this is the best ever tutorial I ever had!! about javascript is just awesome!! 😍🔥🔥 thanks Sir 🤞🙌
Thank you for this video man, It helps a lot.