Responsive Resume Cv Website Using HTML CSS And JavaScript | Light/Dark Theme & Export PDF

Responsive Resume Cv Website Using HTML CSS And JavaScript | Light/Dark Theme & Export PDF

📁 Assets

------------------------------
📢 Important Note!!!
This template is designed to be displayed on a single sheet when exported to pdf, just fill in the required information on the template.

❤ Get template

❤ Get template by PayPal

🔔 Subscribe for more!

------------------------------
👨‍💻 Start project from scratch

☝ Download the project base files on GitHub
- Click on the GitHub link
- Click the green Code button
- Download ZIP
- Save and extract where you prefer

📢 Important Note!!!
To export from html to pdf, the project must be operating on a server. The library to export to PDF (Html2pdf) works on the client side. In this video we use Visual Studio Code and Live Server (a plugin that starts a live server locally).

⬇️ Follow the steps here to install Visual Studio Code and Live Server

Visual Studio Code

🔥 When you upload your project to a server on the web, the export to PDF will work correctly.

⏱ Timestamps
0:00 Intro Resume CV
2:42 Project setup
4:40 Variables css, reset html, css reusable
8:15 Header and menu
20:00 Home
26:51 Social
29:42 Profile
30:44 Education
35:10 Skills
37:50 Experience
41:53 Certificates
43:40 References
46:20 Languages
48:05 Interests
50:57 Scroll top
53:25 Media queries
57:43 Light/Dark mode
1:00:53 Button scale summary - export PDF
1:02:56 Variables to reduce font size
1:03:56 Classes to reduce design
1:08:45 .scale-cv insert and remove functions
1:10:42 Generate PDF

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

☕️ Support me

💙 Support me by PayPal

👍 Thanks for watching!
Make sure to like + Subscribe For More! ❤

#responsiveresumecv #resumecvhtmlcss #bedimcode

[Bedimcode]

To carry out this project you must be connected to a local server. More on the part of generating PDF 📄. Please read the important note in the description 😃. Greetings.

[OwolDestiny]

Wow, this is great, digital to paper. I love the idea. This tells that you can post your CV online and make it clickable with a download button.

[galax]

Awesome even 2years later. Everything works and if not you (like pdf generation extra page taking a look at the commens will fix it) THANK YOU!!!

[santoshpanda]

Everytime when you are sharing ui videos all are awesome till now. So thank you very much for everything...

[shaimaalghamdi]

wow!! i love your videos!! i have applied your resume video and portfolio for my own website. Thx for being on youtube. U made our life easier (not a web developer)

[live-gp]

Вау, це неперевершено. Дякую за чудовий урок

[ThomasGUILLAUXprofile]

Hi! Awesome tutorial, everything works fine except the PDF generator. My scaled CV looks great but when it is rendered in a PDF file, I always get a blank space at the end of the PDF page. Am I the only one? Maybe @Bedimcode you can help me out?
Thanks!

[jaysonvillar]

GOTTA TRY THIS ONE AFTER MY PORTFOLIO WEBSITE, TY FOR ALL THE STUFF U PROVIDE! CHEERS

[gamepills]

Thanks, i am looking for an inspiration. Much love from India

[ElegantCoder]

Great to see your tutorials amazing skills ✅

[surajgautam]

.section-cv .section-title{
margin-bottom : 0.60rem;
}
and
in js
opt == margin :-0.1;

and changing these values will fix all seperation issues

[true_rOux]

Maybe someone will come in handy:

Option 1. Make a proper page break in main.js -
pagebreak: { mode: ['avoid-all', 'css', 'legacy'] }
Option 2. Decrease the font size in css - body.scale-cv

[moro]

Firts time i see your chanel and let me tell you this is outstandig

[saurabhshukla]

Amazing, thinking to build my resume this way. 😘😘😘😘

[Kk-xkcb]

THIS IS FREAKING even without explanation, i can still follow through without struggle!! you are the best!!!!

[_annacheng_]

This is amazing!!! Thank you so much & your code is clean!!! Love it~

[piratplay]

It's just amazing! Thanks a lot for the tutorial!)

[Shalve]

Good tutorial! Thanks! Could be better if you would explain some things during the video.

[unuprinlume]

Amazing content, I found easy to reproduce despite no coding experience. I only have a small question, what would be a good way to fold some sections so they would reveal more text if the reader would so choose?

[vulpine]

Its a great tutorial... and i followed the tutorial untill end but maybe i made some typo... there are errors in my codes and i cant find it... pls help
the menu button (the grid one) not open now, the export to pdf also not working