Responsive Personal Portfolio Website Using HTML CSS And JavaScript | Dark/Light Mode
HTML-код
- Опубликовано: 2 июн 2024
- Responsive Personal Portfolio Website Using HTML CSS And JavaScript | Dark/Light Mode
🔔 Subscribe Now!
/ @bedimcode
☕️ Invitation to BuyMeACoffee
www.buymeacoffee.com/invite/b...
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
❤ Get source code
www.buymeacoffee.com/bedimcod...
💙 Get source code by PayPal
ko-fi.com/s/263d6ed77a
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
👨💻 Develop the project from scratch
github.com/bedimcode/responsi...
👆 Download (files + images)
- Click on the GitHub link
- Click the green button (code)
- Click Download ZIP
🔗 Resources
Icons: iconscout.com/unicons
Fonts: fonts.google.com/
JS Functions: github.com/bedimcode/responsi...
Swiper: swiperjs.com/ (Check recent update)
Remove the background: www.remove.bg/
HSL color: www.w3schools.com/colors/colo...
Blob Generator: www.blobmaker.app/
📧 Send emails (Not sponsored)
Follow the documentation to send emails through the form, you can choose any of these services.
www.emailjs.com/
getform.io/
⌚ Timestamps
0:00 Intro
5:52 Project Setup
7:46 Variables Css
12:16 Reset HTML & Reusable CSS
14:09 Layout
14:33 Header & Nav Menu
26:12 Home
35:47 Buttons
38:16 About
43:15 Skills
59:04 Qualification
1:12:29 Services
1:26:42 Portfolio
1:38:07 Project In Mind
1:41:42 Testimonial
1:49:40 Contactme
1:56:40 Footer
2:02:21 Scroll Sections Active Link
2:03:47 Change Background Header
2:04:38 Scroll Up
2:07:42 Dark/Light Theme
2:11:56 Scroll Bar
2:14:07 Media Queries
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
📸 Images
www.pexels.com/es-es/@marcelo...
📬 Any questions about the project send a DM to Facebook (Bedimcode)
⌚ I answer at 6:00 PM (Perú time)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
☕️ Support me
www.buymeacoffee.com/bedimcode
ko-fi.com/bedimcode
👍 Thanks for watching!
Support me with a like + A Subscription! ❤
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
🎵 Music
This video has no music, (due to copyright).
Choose your favorite music and enjoy the video, greetings.
#responsiveportfolio #portfoliowebsite #bedimcode
✔️ Description English
Folks, the video had a copyright claim on the music, that's why I removed it. But insert music from RUclips Library every 5 minutes of the video. If you don't like it, you can put on your favorite music and enjoy the video, greetings and successes.
✔️- Descripción Español
Amigos, el video tenía una reclamación de derechos de autor sobre la música, por eso lo removí. Pero inserte música de la Biblioteca de RUclips cada 5 minutos del video. Si no te gusta, puedes poner tu música favorita y disfrutar del video, saludos y éxitos
En la parte final de las @mediaqueries la resolucion no se adapta bien a 1024px
Hello, I want to buy the design, but paypal is prohibited in my country, is there any other payment method? My country of residence Turkey
Source code link
@Bedimcode
This exact website is being sold at Fiverr and I think the one who's selling it is not you
@@swamy8553 It is open source, everyone does what they want with their resources.
I wish this was with voice and with little explanation because I am not as good as rest of the people in this comment section.
This tutorial showed me the value of tidiness... the way HTML elements are structured, the way classes are used and having CSS comments in each section help us find the code we want very easily. Not only that, awesome Javascript tutorials and media queries, keep up the good work sir! (btw nice songs :3 )
The structure and tidiness was top notch, to be honest
@@stevenmologe5697 can you please tell me how to run this after downloading from github
i got exhausted😫😫😭😭
I never knew adding icons is that easy. You made the job as easy as a piece of cake. From A to Z, the video is so well organized. Much appreciation! You deserve more attention my brother.
Thank's my friend regards.
I discovered a whole new world with you guys! Love your channel, I just implemented my portfolio page following your tutorials, and learnt a LOT! Gracias por compartir vuestra conociencia!
Thank's my friend regards
Absolutely flawless!
This project was like a great book that once you start reading it, you won't put it down. I have tried many long project videos on RUclips but never reached to the end of even one.
I watched every second of your project and coded along. Took me a couple of days but it was worth it. At the end, I created my own portfolio site. Nothing is missing from the video and all worked well at the end. I learnt a lot and thank you for sharing the amazing and simple resources such as, Unicons and Swiper along the way. The cherry on top was your organizational skills. A beautiful and responsive single page website.
Thank you Bedimcode!
I am glad that the project was useful, thanks for the support friend, greetings and success.
Hi, can you show me your project code because I found css code error and i can't find it. If you send your GitHub link it's help me lot 🙏
Hey bro, could you share the codes with me? I don't have much free time to type everything.
Thank you so much for the tutorial 💟I LOVE how it looks, how everything is organized, and learned bunch of new cool stuff
Wow, the centralized definition of this style definitely simplifies the operation, learn it!
This is one of the best tutorial that I found on youtube regarding responsive web desing. Here is my pro tip: you are defining font size for both mobile and desktop screen. What you can do is just increase base font size from 16px to 20px or something for desktop and rem will reflect the changes correctly. Cheers!
Thanks for your words friend, about increasing the font I understood perfectly, greetings
hey, can you please share your github link for this portfolio project!.. I'm facing some problem in home section! Thanks!!
please give me the source
@@Bedimcode Please give me some codes
@@GauravSingh-nc9jw v
i didn't know about the css code that you did on the root section before .. this video was informative. thankyou
The root css code is very important. Greetings
The root code was about some colors in hsl and some margin font size z index but you can Watch bedimcode old portfolio videos the root code is in easy form you will understand
Can someone send me the complete code plz!.... Yes I am doing bt it tooks so much time but I have to submit my portfolio tomorrow... So help me out... Thanks
Yes indeed! Variables in CSS is very useful. Makes is much easier to make changes when you need to as well.
this was a great way for me to better my CSS skills and finally work on my portfolio, thank you, I subscribed to the channel and I just hope to be able to help others someday.
Neat, simple yet complex and completely different from what everyone else is doing
Wow! Te he encontrado buscando cosas de nav, responsive nav y sin duda, es uno de los mejores vídeos que he visto de cómo explicas [sin hablar 🤣] y lo claro que es tu código. Estoy seguro que me va ayudar mucho para aprender. Recalco lo que dicen algunos en los comentarios, la forma como inicias el CSS es muy bueno. Felicidades y espero que sigas subiendo cosas así, un abrazo fuerte. 👏🙋🏻♂️
PD. Me quedo por aquí ✌🤸🏽♂️
Gracias amigo por las palabras y por el apoyo, saludos.
videos like this actually show how much you love your work and what you do. I'm so grateful to have a guide like you. :)
I appreciate your support, regards.
After years , it still valuable... This tutorial is gold😊
Great work mate! Your efforts will always be appreciated 🙌👏
Just finished the video after 2 weeks. I'm just a begginer learning to code and it helped me a lot to practice and see how things work. Thank you very much! ❤
Please I use fontawesome instead of SVGfor mine.
How do I get that blob. SVG in fontawesome??
Very good work, but it needs a couple of tweaks in the media queries section. It doesn't look good on several resolutions. Maybe you could use Sass variables for the screen sizes?
Thank you for this. I just purchased it to support you guys
Excellent design, here goes my pro tip: Never use percentages as a way to indicate your skills levels. What is 100% knowledge in JavaScript for you and for the recruiter? Its a tricky way and can go against you.
Just put everything you know without any bars and then in the real interview you can go deeper.
Yes friend, I had thought about it, and thanks for the advice, I will take it into account, greetings
I agree
What if you specify on the page that you're including that percentage section just for show?
@@Bedimcodegive me a cod
@@user-lm8ii7uw4t use the latest version of swiper css bundle file and swiper js bundle file, the wiper files provided inside the scratch asset folder are outdated.
I just want to say thank you so much for this video. Finally i made my first responsive portfolio, thanks to you. I already a big fan.
Good, and thanks for the support friend, greetings
Sin decir una sola palabra, explicas todo perfectamente!!
Amazin work!
You've just got a sub!
very helpful and very professionally this project is executed.👌👌👌👌
To be honest, this is the best tutorial that i ever seen for learn as a newbie front end dev... Thank u so much for make complete tutorial ...🙏🙏
Thanks for the support, regards.
The dark mode colors are so nice, the hsl color concept is awesome
Thanks friend, it's good that you loved the HSL color mode, greetings.
One of the best tutorials on RUclips, I will do this assessment because it is very easy to understand your work. He is methodical and even if someone is not an expert he can understand everything. I don't see only one script, the function with listener to icon menu for auto scrolling page. Where is ??
This is a great course for me. I have learned so many things in this course. This is the best course ever. Specially thanks to you for giving us such an extra ordinary course. Specially HTML and CSS sections you covered the whole section.
Thanks for the support friend, greetings.
Extremely helpful and very easy to understand. Thank you for this great tutorial 👍
It's a pleasure friend, greetings
Wow, I would recommend this best for practical web designing.
Thanks friend, greeting
hey can you please provide the source code... I am stuck and getting errors
@@ankitdutta5240 same bro
it took me 2 weeks to watch it with attention, glad to saw this
Thanks a lot, extremely helpful and very easy to understand.
Great video, keep making awesome stuff like this. It will make you stand out from other channels.
Thank's my friend regards
Shit, I just found my ultimate therapy. Straight to business.
what u mean
The way you did your CSS looks so pretty and makes mine look like garbage lmfao, you've taught me how to make it presentable and understandable for other people, love it. Thank you!
Thanks friend, we all started like this, and with time we learn good practices, greetings.
amazing work!! i love your creative things.
To make the Portfolio section work, it needs the "swiper-container" class to be replaced with "swiper" and to move the bullets you need to replace ".swiper-container-horizontal > .swiper-pagination-bullets" with ".swiper-horizontal > .swiper-pagination-bullets"
Thank you!!! I didn't understand what the problem was!
@@bianca_emi Please give me some codes
Please give me some codes
Omg THANK YOU, I was about to go totally crazy 💜
@@plamka37 v
amazing content you definitely deserved more attention
It's a pleasure friend, greetings
I am gonna suggest this to all my cse friends to watch, and share through social media
Love your work, heartful thanks
Thanks to you friend, for the support, greetings
Man, god bless you, this is gonna be helpfull my entire life
It is a pleasure friend, greetings
@@Bedimcode hey can you Kindly permit me to use it as my portfolio personally please!!!
Im a new babe in the world of programming.
It's your one of the best and beautiful design you have done so far and there is lots of beautiful part of learning new things...👍 I really appreciate your efforts you always give...
It is a pleasure to help, and thanks for the comment friend, greetings.
This is so amazing. a must watch for all.... thumbs up
Thanks, Buddy, You saved my tons of hours...... Basically, I have no such knowledge of HTML CSS, I am completely on Mobile App Development. But I needed a portfolio badly....and your complete project saved my time and patience.....
I hope you serve a lot of friend, greetings
Fantastic tutorial Bedimcode, it took me whole four days to finish. Um abraço aqui do Brasil!
Congratulations friend, thanks to you for the support, also greetings and a hug.
please give me the source
I just followed this video from beginning to end and coded along with it. It took me about a week because I spent a lot of time fixing code I messed up, which was almost always a typo mistake I made somewhere. I'm really happy with this video. I learned a lot. Great video and I will definitely be buying Bedmicode a coffee or two.
Thank you very much, successes.
Me too, it took me a week, very stressful with typos but the result is worth it!
@@pyaethein1699 how did you fix the typo issue pls ?
@@maxlamenax no no I meant there were typos in my codes while following along the tutorials, make sure u check every single line of code carefully if not it won't work of course
@@pyaethein1699 bv
I 'm literally impressed.... wow THANK YOU~~
OMG! great video thanks you so much🔥🔥❤️👍🙏
I made this code for setting up the percentage for the skills.
const skills = document.querySelectorAll('.skills__name')
for (const skill of skills.values()) {
const percentage = skill.nextElementSibling.textContent
const skillBar = skill.parentElement.nextElementSibling.firstElementChild
skillBar.style.width = percentage
}
Hello, dear creator! I just started learning Web Dev and wanted a nice portfolio to showcase my projects and look here i am, i just found according to me one of the best tutorial or walk-through on RUclips. Thank you so very much for your guidance. Love from India ❤
Thank's my friend regards
hey bro, if you have the source code kindly share, my css breaks, some css rules are missing in the video
Hello nro
I really wondered by CSS, infact I used it for my portfolio building looks very 👍👍 great.
Amazing video, work partner 👏
perfeito! absolutamente perfeito, aprendi muito!
First comment, beautiful website it teaches many concepts 😀
Thank's my friend regards.
@@Bedimcode your welcome 😀
I thought i know how to use css to make some beautiful page but your video blow me. I learnt some much through this video and I improved my developer skills as well. Thanks you very much for your hard work.
It is a pleasure friend, thanks for the support, greetings.
Thank you for this, great video. Earned a subscriber.
You keep doing amazing designs brother ...your videos have really helped me a lot , keep up the good and amazing work ...Also remain blessed brother 🤜🏾🤛🏾
Thanks friend for the words friend, greetings
I think she's a girl, usually girls design better than guys lol
Took me 3 days to complete the project, and in the process learned a ton. The CSS section is just amazing !!!!!!!!!!!!!
Great friend, greetings
@@Bedimcode do you have a course for the pattern you use in the css ? I really love how clean you code your CSS.. thanks.. if you have any please attach the link..
hey man, any chance you could share the project? i'd be mighty grateful if you could...i am making quite a lot of mistakes.
you have pdf file figured out? - mine is outputting a blank file.
please give me the source
Thanks a lot, i learned a lot and got a idea to tune it to my interest from your way of navigation in this video.
Thank you so much for this, I was inspired to make my personal portfolio.
Wow!!!
I made it !! I can't believe that I can make such a beautiful and soo customizable website !!
Thanks buddy !! , I learnt a lot through this single video and I will recommend it to my friends !
How well you finished it, and I appreciate your recommendations, greetings
can you please email me html and css file. I am stuck in middle and can't find a solution..
Email: yash84302@gmail.com
@@neerajchauhan4602 have you got ?
Obrigado por compartilhar teu conhecimento. Espera um dia poder programar como você.
Thanks friend, of course everything is possible.
sabe dizer pq o blob dele tem tanto código ? o meu é só svg com path
Thanks so much for sharing all this high quality content, one of the best that I've seen so far!
Your channel is great!!
Thanks for the support friend, greetings
Aesthetically pleasing! Certainly, representing how much she passionate about Coloring or painting the Web design!
Thanks friend, and you are right I am passionate about a good job and a good user interface, greetings.
Both of us under the same umbrella hence we met on this platform! Cheers ✌️
Olá, eu sou do Brasil e gostaria de parabenizar o seu trabalho, está realmente excelente!!
+1 inscrito no canal!
Hello friend, thank you, greetings
Please give me some codes
I just found your channel, thank you so much for your videos! I'm very excited to get into web development :) Loved the way you organize your templates it really helps to guide.
Just one question, how did you get the blob svg? I saw xmlns and w3 schools but could not find it there :( Thank you
I use blob marker, a web page. If you want a new blob. Just download it from the website, try to edit it with visual studio code and try to make it look similar to the blob code I provided in the portfolio.
Hi, Millena were you able to get the SVG and edit it?
Finally completed this project 😊 thanks you for this vedio
Good but have some issu in your css like in section skill if you add 0 in query minwidth 500, everything will be one colum and if not in two column but will be collapse
this is genius!!! - I've learned some simple things I never thought of.. Thank you!
Thanks friend, on figma tutorial I will be planning it but I do not assure anything, greetings
@@Bedimcode no problem. I'll keep an eye out.
Also, do you recommend npm init or create react app before starting the project?
@@_blackmesa it is only required when you're creating a react project not one with basic html and css
@@susankamajumder9859 appreciate it, brother.
Thanks for the html css starter pack i always i wanted this love you ❤️️
Thank's my friend regards
@@Bedimcode ❤
*First View, First Like & First Comment* ♥♥
Wow...Like it. *_Love Dark Mode_* ♥
The dark mode is great and thanks friend, regards.
@@Bedimcode Ya... *Always I'm a Dark Mode Lover & Llike yours Project..*
Felicidades por tu increible canal! Tenia una duda pero acabo de resolverla sola 🤗 Tienes una nueva estudiante y suscriptora!
Gracias por el apoyo, saludos.
Hi, just discovered your channel and I have to say, your videos are going to be really very helpful for me as I am just starting the Fronted Development. Keep up the great work 🔥 Also, I would really appreciate it if you can share what VS Code theme are you using because I was in search of the exact same theme. Thanks in advance,
Hello, thanks for the support, the theme is one dark darker, greetings.
It took me days to complete but this project was awesome.
Great friend, greetings
Can someone send me the complete code plz!.... Yes I am doing bt it tooks so much time but I have to submit my portfolio tomorrow... So help me out... Thanks
@@hackback9300 i don't know but cheating doesn't really help
Thankyou so much for this video, just completed.
Thank you so much ! extremely helpful and understand for user
it took me whole week to finish this page, awesome work Bedimcode! I saw youre from Perú so Saludos desde México! y gracias por compartirnos tus conocimientos, cuanto tiempo te tomó?
Gracias amigo, me tomo 1 mes en todo, hacer el diseño, la codificacion, grabar el video, editarlo. Saludos
hey, can you share the completed source code with me I'm facing so many problems
@@gagancm7060 hey, sometimes i get lost and i had to restart the video, Im sure that you will can do it, keep moving! i think we cant share the code cause Bedimcode sell it, but in other case i didnt have problem to do it
@@gagancm7060 me too.
Maravilhoso!! Obrigado pelos seus vídeos. Estou aprendendo muito.
Gracias amigo, saludos.
eae marcio, começou a pouco tempo tambem?
@@diogenespasqualoto1675 Front end, sim !!!
Tysm! I'll always be indebted to you
Ur ossum ,this is my first ever website. this video is not just about website making, but personal growth also. thank U so much 👏 love from India ❤
It is a pleasure friend, thanks for the comment, greetings
Amazing job! I made a small improvement to the percentage bars using js instead of hardcoding the widths into the CSS file:
```
const skills = {
frontendSkill: {
html: 90,
css: 80,
javascript: 60,
react: 70,
},
backendSkills: {
php: 60,
node: 50,
mysql: 60,
python: 40,
},
designSkills: {
figma: 60,
sketch: 50,
photoshop: 80,
illustrator: 40,
},
};
for (const key in skills) {
if (Object.hasOwnProperty.call(skills, key)) {
const element = skills[key];
for (const [key, value] of Object.entries(element)) {
const skillContainer = document.getElementsByClassName(`skills-${key}`);
if (skillContainer.length) {
skillContainer[0].style.width = `${value}px`;
}
}
}
}
```
Keep on the good work bro! Cheers!
Woo, friend, I will try it and insert it in the portfolio template, there is no doubt that we all learn from everyone, greetings and thanks.
Sensacional!
Gracias amigo, saludos.
br por aqui
hey can you please provide the source code... I am stuck and getting errors
This is exactly what I was looking for. Thank you so much
It's a pleasure, my friend. regards
So good, so perfect, this tutorial have many points to improve skills. 👏
Thanks for the words friend, greetings
I have a doubt: In css, in some cases you used the defined variables for rem (like: var(mb-0-25)) but in other cases you simply wrote the measurement, (like: 1.25rem) why?
Thank's my friend regards
mb variables are only for margin botom.
@@Bedimcode but in margin bottom also you used margin botton
Hi thanks for sharing.. 😊 I've been following this tutorial but, I'm having a problem. The program code contained in the js file doesn't work for the skills, qualification.. Can you help me because all js files don't work? 🥺
Hello I pass you in text files the parts of skills and qualification, I hope to send you, greetings.
Qualification
drive.google.com/file/d/1yXd30vtG_Zkc0xswopv5sSjxiMT382d-/view?usp=sharing
Skills
drive.google.com/file/d/1ZmeFZ-DnJmLW5LtJGHYK1EXAqVp0qYdt/view?usp=sharing
i'm not close to being a front-end dev yet but this video reassured me i'm really close to achieving my goal. i'm just into the basics, but nothing to be scared of my process
Большое спасибо за проделанную работу. Желаю удачи в вашем деле.
Please share source code for cross check!That would be great help.
if you have the source code.. please share
@@ankitdutta5240 bro... 💔
Friend you can share the source code of the css since the github is only the empty file, I have some errors and I don't know what it is :( it would help a lot, greetings your work is still impressive.
Did you got the source code?
Thank you so much ! This is exactly what i'm looking for ! ❤❤
❤
It is lot amazing I feel so blessed I did learn here a new concept root css .It was fun working with it. And finally I maked my first portfolio website 🎉🎉🎉🎉🎉
Excellent friend, in good time, greetings
Everything absolutely great but having some problems. Any help would be appreciated:
1] Content not working
.swiper-button-prev::after,
.swiper-button-next::after{
content: ' ';
}
2]Bullets are not getting affected at all
.swiper-container-horizontal > .swiper-pagination-bullets{
bottom: -2.5rem;
}
3]And similarly for
.swiper-pagination-bullets-active{
background-color: red;
}
I have cross checked the whole code till point number 3], everything is correct no manipulations done, yet having those probs. Please help. Thank you
Hello, I share that part of the portfolio in a text file, I hope to solve your error, greetings.
drive.google.com/file/d/1kDH5WqdxEtPM0k1y5hxtRxmRDbAgY05j/view?usp=sharing
@@Bedimcode Thanks for reply but I have written the same code and still content is not working. Also, the problem with pagination bullets still exists. I have executed on all browsers (Mozilla, Chrome, Edge) but everywhere the same problem.
Please help me. Thanks
I have the same problem:
.swiper-button-prev::after,
.swiper-button-next::after{
content: ' ';
}
does not work and still can see double arrows.
@Bedimcode
Any update ? Tried almost everything but ain't working. Please help.
@@Bedimcode Is content deprecated, is working though ?
Also, please can you help with the bullets ?
What do the tabContent in tabContent.classList.remove("qualification__active") and tab in tab.classList.remove("qualification__active") mean in the 1:11:41 part and how does it works for the qualification tabs? I am kinda confuse for that part
i am also currently on that part. The qualification__active [data-content] {
display : block; } doesnt work. trying to debug now.
@@marwanbukhori90 Found any solution ? I'm very interested :)
@@marwanbukhori90 make sure there is no space between active and [data-content]. So the css should look like:
.qualification [data-content] {
display: none;
}
.qualification__active[data-content] {
display: block;
}
hope that helps
@@daniellee4036 Obrigado por postar. Você salvou meu projeto. Não achava o erro.
@@daniellee4036 Thank you so much friend, I was going crazy
Amazing tutorial and even better portfolio. Followed along over the span of a couple days and made my own my own portfolio website. Learned a lot of things along the way and very impressed at the tidiness of it all. Thank you for sharing the resources you use such as Unicons and Swiper, never knew things like these existed. Thank you very much!
may I ask why the ":root" is not working?
Thank's my friend regards.
Bedim thanks a lot for this video and for all previous portfolio's tutorials...
I also learn more with you and I hope this will help me to find a job
keep going with these videos because you man, you are really amazing
Of course, friend, do not stop at your plans and goals. Greetings
Where can I find the code for this project?
github link is given above mate :)
@@ziaashraf3706 the source code isn't in there
@@swanseawales1979 what do u mean?
The finished source code isn’t in the links, only the basic follow code is.
@@swanseawales1979 have you finished this project?
You are eligible for package of 1crore per month
Thank's my friend regards
I learned a TON, Thanks for the Amazing tutorial
It is a pleasure friend, greetings.
Excellent design, thanks.
Subscribed and liked!! This video is absolutely incredible. Will be buying a coffee for yall once I finish the website
Hello friend, thanks for the support, regards