Freecodecamp: Save or Print a Certificate

Created on 2 Feb 2016 · 10Comments · Source: freeCodeCamp/freeCodeCamp

The certificate, specifically the Front End but probably the others too, cannot be printed on a single page or saved as an image.

The certificate page is built with an image and overlaying name and date. When you try to save the image, it is saved without the name and date. The print of the page results in a too large images that does not fit on a single page.

Quincy suggested I'll check for a solution - here is a simple solution that can be implemented:

change the size of the image/page to fit a page by adding zoom style to the body of the page (either in the html or css):

<body style="zoom: 43%" >

This will ensure you can print the page to a PDF file or the printer and will fit one page (letter size,
portrait and landscape).

Another issue is that the date does not align nicely after "on". This can be fixed by changing the .cert-date class:

.cert-date {
...
  top: 990px;
...
}

You may come with other, maybe more creative solutions.

Thanks,
Benny

Source

kronengold

Most helpful comment

I used https://web-capture.net/ I just added my link to where my certification was at and converted it to a jpeg image and it worked. The image came out a very good size. If you want to stretch it out some guess you could drop and drag it into Word or Open Office and right click and press the Rotate left of Right feature and stretch it out some to make it look bigger.

I also tried everything from Prnt Screen with crappy results the above worked for me though. Off to https://www.sololearn.com/ its free to use also.

Peace

Robert0923 on 18 Apr 2017

👍4

All 10 comments

Would it possible to get the base certification image plus the date, name, and verification link all in one SVG element / file? That might make it easier to convert to a printable format like PNG.

alistermada on 2 Feb 2016

cc @QuincyLarson @BerkeleyTrue.

bugron on 16 Feb 2016

I also tried everything from Prnt Screen with crappy results the above worked for me though. Off to https://www.sololearn.com/ its free to use also.

Peace

Robert0923 on 18 Apr 2017

👍4

Open the link of your certificate.Enable full screen and then press 'prt sc' key on your keyboard..
Open MS paint and then >right click>paste..
Select the image and crop it ..
Save it in png format..

mayurnagdev123 on 16 Feb 2018

👍1

A combo of Quincy's and mayurnagdev123's methods worked for me. I added body zoom attribute of 43% and adjusted cert-date class to 895px, printScreen, pasted to MSPaint, cropped, saved as PNG and printed. Bob's ur uncle.

terryjreynolds on 29 Apr 2018

Hi guys hope this helps, Add this extension to your chrome browser and it will do the work

DBCD20 on 5 Jul 2018

👍3

Hey guys!

I get the certificate printed on a A4 in the following steps:

Getting the image with Firefox screen capture;
Opening the image saved on downloads and printing landscape on a PDF printer
Checking the pdf file and printing in a regular printer.

paiva-thiago on 20 Nov 2018

👍1

I just screenshotted!
Perfect certification!

marilenalaz on 11 Nov 2019

I have created PDF generator for Free Code Camp certificates, please use it under terms, thanks.
http://j.mp/fcc2pdf

bhallak on 18 Dec 2019

@bhallak I give you props for your initiative in creating this certification generator. But these certifications will not be verifiable on freeCodeCamp's servers, and are thus meaningless except to people too lazy to verify them by visiting the URL. Thus, your tool does more harm than good by making it easier for people to create misinformation.

Also, this is unauthorized use of my signature. Thus I kindly ask that you remove your project or remove my signature and make it clear this is a parody.