🔥 Create a Portfolio Website Using HTML & CSS & JavaScript | Light & Dark Theme
HTML-код
- Опубликовано: 2 июн 2024
- Learn how to create a responsive portfolio website from scratch.
⭐️ Zyro : zyro.com/special/truecoder
- Discount code : TRUECODER
-- Web Design Tutorial --
Today, we got a special tutorial, we're going to learn how to create a complete personal portfolio website from scratch, we're going to be using HTML, and modern CSS techniques such as CSS grid, flexbox, pseudo selectors, keyframes and more. We're also going to use JavaScript to add some some stunning animations to the website and make it interactive.
The website will have a ton of features : the filter animation, testimonials slider, sticky navbar animation, modals ....
Not only that, our website will have both dark and light themes, that we can switch between theme using a toggle button in the navbar. And finally by the end of this video, we're going to see how we can make this website completely responsive on any device, so it stays responsive no matter what the size of the device is.
💚 Get template
buymeacoffee.com/true_coder/e...
💚 Get template by Paypal
ko-fi.com/s/7919d49761
👍 Now if you find this video valuable, please make sure to leave a like, and subscribe to the channel, this is the best way you can support me to make more videos like this.
🛎 Also, click on the bell icon to turn on notifications. This way you'll be notified the moment new videos are uploaded.
💖 Please feel free to support my channel. Your donation will motivate me and push me to keep making more of these tutorials.
- Paypal : paypal.me/truecoder
- Buy me a coffee : www.buymeacoffee.com/true_coder
📁 Assets
Icons: iconscout.com/unicons
Fonts: fonts.google.com/
Mixitup: www.kunkalabs.com/mixitup/
ScrollReveal: scrollrevealjs.org/
Swiper: swiperjs.com/
GitHub: github.com/sefyudem
💻 Start project from scratch (Images and files used in this tutorial)
bit.ly/37fzGhQ
🚫 DON'T CLICK THIS : bit.ly/2SuCfW3
✉️ For Business inquiries : truecoder.business@gmail.com
⏱ Timestamps:
0:00 - Intro
05:56 - Zyro
7:11 - Project Setup
7:36 - Navbar
21:43 - Showcase area
33:55 - ScrollReveal Animation
35:36 - About section
45:22 - Skills Section
1:04:20 - Services section
1:15:28 - Portfolio section
1:30:16 - Modal & Image Slider
1:42:10 - Testimonials section
1:55:50 - Contact section
2:06:02 - Newsletter section
2:10:06 - Footer section
2:13:22 - Active Navbar Links
2:20:20 - Light/Dark Theme
2:32:18 - Making the website responsive
Make sure to Subscribe & drop a Like 👍. It really makes a huge difference !
Эхшчбтчт чв
you are very stingy, the source code is you pay for it
Bro I have a problem with my portfolio slider, Can you help me please? 🙏
Do it without music it distracts a lot ((( your English is very good, ppl come to learn, to think, to improve their skills to the channels like yours👍
Hey, I love and appreciate your hardwork. Man it's so hard to copy word by word from this project and make my own project and I'm wondering how hard it would have been for you especially when you had figure everything out on your own. Thank you so much for this tutorial.
I'm learning a lot with this video, tks so much!
dude you made SO MUCH progress since 2020
I have made my portfolio using your previous video which you uploaded 9 months ago. And here you dropped another one. Thanks for the amazing content.
Thank you! I’m glad you liked it
Thais is a very educative video, i must say that you are so intelligent, and i look forward to more videos
Thanks for this man!
Nice work bro
Good luck akhi. Rak nadi ❤️❤️
Great job! Love it.
Thank you
this is exactly what i needed (as a student) thx a lot ((need to hire a photograph tho))
I'm learning something new with this tutorial, thank you very much.
Most welcome!
dude ur template save a lot of time thanks for that and the tutorial is super good loved it keep it up man. Big Respect .
Glad to hear that! Thank you
Wow this is fire! Mind taking this to a next level by fetching the backend data abd deploying it? Would be cool if you did!
Bro is amazing, true coding videos, no pun intended.
Actually tutorial friendly without waisting a second.
Thank you mate! Glad you enjoyed it 🙏
thanks man
Cool 👌
Great job dude keep up
Thanks 😊
wonder full work i will use your video for my first website ever
😀😀
Happy to hear that !
What a professional. Great video
Thank you !
it's just a screen recording bruh
Bro I really like your tutorials I feel like you put tons of work for making these..., please keep doing it ;)
Thank you. more to come !
@@TrueCoder will there be a voice explanation type tho? I also love the current type of video but it's better if you actually explain it in words.
yeah, the coming tutorials that I'm working on will have voice explanation
Thank you for the video it has helped me learn alot keep the good work God Bless Your work.👍👍
Glad to help
I was looking at the functionality of your build at the beginning of your video. The site looks really cool. When you started playing music during the actual development of the site, it through me off. I was hoping you’d give a deep dive in your thought process as you built the site and explain the process of html structure, css rules, JavaScript programming and all the CDN’s or helper apps. I want to learn a lot from you but playing music in the background doesn’t help me learn your process. That element is missing in the learning process.
You've said it all
Me too 😔
Exactly, that's where I dropped off
Hey Bro, great video. Very nicely done, thank you! I have a problem with the js code for the skills block. It's giving me this error...
Uncaught TypeError: Cannot read properties of null (reading 'getBoundingClientRect'):
What to do in this case?
Thank you very much, I wish you all the best
Thank you too for watching
Thank you very much for this work, I just spent 6 hours creating this portfolio. I have learned a lot of tips and tricks. I just bought you a coffee 🤩
Glad to hear that ! Also thank you for your support
awesome
just awesome thanks bro
Want more html css project, please bro
Will upload soon
woooooooo😍😍
Hey, I'm stuck on a Modal & Image slider, precisely on zoom-icons when we click them and get different images, with class showImage. I'm really just stuck, I'm getting an undefined message when I click on zoom-icon in the console and only the first picture is showing up on click for every project. If someone can help I would really appreciate it!!!
Thanks a lot for the video, i'm learning a lot with you.
And i wanna to become a JS and JAVA developer.
I choose this tutorial to create my portfolio and i'm making some changes
Best of luck!
I'd like to ask. I'm not very good at design, and if I copy someone's design in my portfolio am I violating copyright?
did you create this design or did you get the figma ready?
Really good Video!
Lot of new things to learn from this channel!
Thank you sir♥❤❤❤
I had one question, how do you calculate the padding and margin values?
If possible, can you make a tutorial for that, it'll be really helpful!
Once again, Thank you very much!!
Thank you !
I just mess around with padding and margin values, and I prefer to use the rem unit in that
@@TrueCoder and the box-sizing takes care of everything😂
Thankyou so much for replying!!
Love your videos!!
Thank you my brooooo you learn me so many things so thank you very much
sorry for my english i'm french soooo THANKKKKK 🙌🙏
Thank you 🙏
Great job, thanks for sharing. May I ask how did you get the screenshots from your website pages that are used in the video cover?
Thank you! search for "Screenshot" in the inspector
Really good video!!
and donwload? jaja
Bro, I liked your portfolio design. Did you first design the website in Figma or another software and after that you will code this? I mean to say how did you approach the designing part of any website? as I don't able create a good UI design
Thank you !
I always go to Dribbble or something similar to get inspired, as soon as I got sime thoughts and ideas about the website design I will start coding.
Sometimes I use figma, sometimes I don’t
Sir, I have learned web design. I want to learn more. What I will do next will be good for my future. Please tell me Sir In between the MEAN stack and MERN stack
Learn them both, then see which one you prefer. MEAN is good for large scale application, while MEARN is good for faster development of smaller applications
Nice one! Have you maybe considered using TailwindCSS? It saves A LOT of time
yes, I will start using it more
😍😍😍😍
Hi True Coder this video is really helpful and thanks a lot for creating such an amazing tutorial. Got one problem though. After adding
modal_overlay.addEventListener("click", () => {
prt_section.classList.remove("open");
document.body.classList.remove("stopScrolling");
});
its remove "Open" class from prt_section even when I click in the image or the navigation button in the image slider. Can anyone please explain why is this happening?
After changing a bit I got it working.
const slider_wrap = document.querySelector(".slider-wrap");
zoom_icons.forEach((icn) =>
icn.addEventListener("click", (event) => {
prt_section.classList.add("open");
document.body.classList.add("stopScrolling");
event.stopPropagation(); // Prevent the click event from bubbling up
})
);
modal_overlay.addEventListener("click", () => {
prt_section.classList.remove("open");
document.body.classList.remove("stopScrolling");
});
slider_wrap.addEventListener("click", (event) => {
event.stopPropagation(); // Prevent the click event from bubbling up
});
Please make video on user profile page like Facebook but more attractive like your all projects
dude i have an idea but i need help so if you can help can we discuss?
great job can you explant where can i get (or make ) image like you have thanks
I made them
@@TrueCoder bro is the code in your github open source?
can i used for comercial use and not publishing the modified code,
thanks for responding
If I purchase the template, will I get all the source code? Thanks! And great job!
Yes
Hey there, any update with the Safari bug fix on the dark mode and percentage fixes ?
Hey, sorry for the late reply. I've figured it out. In 2:18:47 it seems like the at() method doesn't work perfectly in Safari, that's why it's making an error, and therefore the whole JavaScript code is not working. Just make sure to change line 190 to this : let currSectionID = passedSections[passedSections.length - 1].id; This is another way to get the last element of an array
Also make sure to add "-webkit-backdrop-filter" below each "backdrop-filter" property, so that you get the blur effect on Safari as well.
@@TrueCoder Worked like a charm, thank you!
amazing bro! thank you
Thanks 🙏
Sat wach mghribi ?
كاين ألعشير ههههه
A sweet one…
🥵
Hello, is this responsive design for mobile also?
Yes
Hey Brother which vs code font u r using can please tell me ?
I'm using the dark one pro theme
@@TrueCoder No no not the theme..i wants the font..please check vscode font settings and tell me
it's either "Menlo" or "Monaco"
Is there a way to contact you? Need assistance with uploading this to my site - will pay. Let me know,
Thanks!
I dont know why, but prev btn and next btn, not showing the image when clicked ...
1:40:37
I'm experiencing the same problem 😢
Have you fixed yours?
hello it's a very good video congratulations,
How can I access the photos?
Thank you 🙏
There is a link in the description of a github repositary where you can find all the images and files that I have used
Any framework use in this project ?
No, just vanilla javascript
bro with react please !!
🤙🤙🤙
Hello brother wach nta mghribi ?
So tell me oh will you believe?
Neffex forever 😎🤝
can you make it using bootstrap and jquery?
there will be another tutorial coming using these tools
Can i know the name of your VS code theme?
Atom one dark theme
sir counter.dataset.target is not working
please help me ..........
Solution mila ki nahi??
const skill_progress = document.querySelectorAll(".counter span");
use querySelectorAll instead of querySelector
is your code free to use ? thx for your answer
can u give me the source please
can you actually send a message through a form ?
no this is just the front end
@@TrueCoder How can i make them functional?
Please do a Portfolio Using ReactJs
I"m lazy, i just use css grid place-items: center, to center everything lol
I also made css files for each section and reusable code so that i can find the styling and put them all under styles folder. Scrolling up and down trying to find old styles gave me a headache.
Explain while coding bro pls
i think you from morroco
Mghribi ?
😂😂✌️
Naadi
Thanks 🙏
give me source code pleap
marocain bro😂😂👀
Can I have the source code for free?
Guys I have 15 days and zero knowledge do u think I ll be able to by watching this only?
💞 ᴘʀᴏᴍᴏsᴍ
I just bought it! You should have a twitter account so people can @ or tag you when they buy it.
Thank you, I appreciate that 💚 Also thanks for the advice. I’ll create an account soon
Liked this video but the content could be more helpful if you could explain the code to the viewer.
Thank you !
Yeah I started doing that in my recent videos
it's just a screen recording, wasted my time!!
thank you very much for teaching us and sharing what you know with us
You're welcome !
*Edit* Such a shame that this guide when followed has more then one area that doesn't behave as yours does. Code or design behaves differently.
dude you made SO MUCH progress since 2020