Screenshots of webpages to be used as hyperlink/buttons

Can someone please tell me briefly how to take a screenshot of your webpage and post it on the internet so that it can be used as a thumbnail for my professional profile.

Thank you in advance,

Brian Wong

I use 7capture for quick screenshots - you can select the area you want to capture.

After that I don’t know - it would be very easy though to upload your images to your Github repo. For Codepen yes, you’d have to find a host or something but there are plenty of those out there.

If your using OSX, you can use cmd + shift + 4, then hit space bar, finally a mouse click and it will capture a screenshot for you, placing it on your desktop. Depending on how small/big you want the image to actually be, you can always tweek it’s size in photoshop.

on a windows keyboard, the prtscr (print screen, shortened variously) button will do that. It’s up near scroll lock usually.

It just copies your current screen into your clipboard. You can go to MSpaint, if nothing else, and c+v. Boom. Screenshot.

maybe imgur, pinterest.
but i dont try it.

In Firefox’s Responsive Design View (Ctrl + Shift + M on Windows), there’s a handy screenshot button.

There’s also one for Chrome in the devtools, then navigate some menus.

Or you can always hit the Print Screen key on the keyboard to copy a screenshot of the screen to your clipboard.

Thank you for all the responses. I typically would use the print screen to create a screenshot and edit the picture through paint. However, when using the img command you enter a source for your image which is a web address to the image. Since the screenshot is saved on my desktop how would i create a source to the screenshot.

I hope this reply helps with what my actual issue is,

Brian Wong

It’s actually a URL. Web addresses can be URLs, but so can local file paths. C:\Users\{yourname}\Desktop is (I think) a valid path to your screenshots on your desktop. If you have a webpage on your computer, you can reference it with any path. That’s not the easiest way, though. For you, there are 2 good options.

  1. Create a new folder with your webpage’s files called img and put your images in there. Then, in your HTML, you can reference your images like this:
<img src="/img/myimage.jpg">

Since I imagine you may not be running your own server, this option could be difficult for you. So, I recommend another:

  1. (recommended) Get a Dropbox account if you don’t already have one. Move your images into Dropbox’s folder. Get a shared link for your file from Dropbox and use that for your image’s source.

Let us know if you need further help.

Thank you, I have used drop box to source my images and it works for now.

Brian Wong