Responsive Personal Portfolio Website Using HTML CSS And JavaScript | Dark/Light Mode

Responsive Personal Portfolio Website Using HTML CSS And JavaScript | Dark/Light Mode

🔔 Subscribe Now!

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
❤ Get source code

💙 Get source code by PayPal

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
👨‍💻 Develop the project from scratch

👆 Download (files + images)
- Click on the GitHub link
- Click the green button (code)
- Click Download ZIP

🔗 Resources

📧 Send emails (Not sponsored)
Follow the documentation to send emails through the form, you can choose any of these services.

⌚ 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

📬 Any questions about the project send a DM to Facebook (Bedimcode)
⌚ I answer at 6:00 PM (Perú time)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
☕️ Support me

👍 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

[Bedimcode]

✔️ Description English
Folks, the video had a copyright claim on the music, that's why I removed it. But insert music from YouTube 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 YouTube cada 5 minutos del video. Si no te gusta, puedes poner tu música favorita y disfrutar del video, saludos y éxitos

[ravinderyadav]

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.

[pyaethein]

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 )

[saadmehmood]

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!

[ektefaie]

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 YouTube 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!

[st-zdkj]

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.

[AllSeeOne]

i didn't know about the css code that you did on the root section before .. this video was informative. thankyou

[emilianovargas]

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.

[thonivai]

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 ...🙏🙏

[mrCetus]

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"

[alessandrocarta]

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!

[keithjasperato]

Wow, I would recommend this best for practical web designing.

[mathis-meth]

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. :)

[alternativoasmr]

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! ❤

[dailymeow]

The dark mode colors are so nice, the hsl color concept is awesome

[vinni_codes]

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.

[dennyage]

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 !

[fckickboxer]

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.

[lpupyxc]

Neat, simple yet complex and completely different from what everyone else is doing

[luisedwards]

Man, god bless you, this is gonna be helpfull my entire life