Web Design and Development Tips

“Learning HTML and CSS is a lot more challenging than it used to be. Responsive web design adds more layers of complexity to design and develop websites.”  — Jacob Lett

How to take a screenshot of an entire webpage

As a web developer, sometimes you may want to be able to get a picture of all your web pages into one pdf to send to a client or potential employer.  Read on to learn a really quick and easy way to do that.

Capture webpage as a PDF or Image

If you are using Chrome, there’s an add-on/extension called Full Page Screen Capture that you can download and install. This tool allows you to take a full page screenshot of your current browser window and save the file as either an image or a pdf.

  1. After you install it, open your website and select the icon in your browser window (or Option-Shift-P on a Mac).
  2. Once it is finished, you will have options to download a pdf or image file.

Capture webpage as an Image

Another option if you don’t want to install an add-on and images instead of PDFs are fine, is the Chrome shortcut for taking full-page screenshots.

  1. On a Mac in your browser, select Alt + Command + I, then Command + Shift + P. On a PC it’s Ctrl + Shift I, then Ctrl + Shift + P.
  2. The Chrome developer menu opens. Just type “screenshot” and you will be presented with several options.
  3. Select “capture full size screenshot” and it will automatically save a full-page image to your downloads folder.

Customize the width of the webpage

If you want to customize the width of your screenshot (mobile device) you can add these steps.

  1. Open Chrome Developer Tools (Command + Shift + P)
  2. Select the Device Toolbar (the little icon that looks like a phone on top of a tablet) to open a responsive version of the web page.
  3. Select your desired size from the drop down. (Look at the top of your browser directly under the menu bar.)
  4. Select the ellipsis at the far right of the option bar and select Capture full size screenshot.
Combine PDFs into one file

Now that you’ve got all your pdfs ready, you are ready to combine them into one file.

  1. Create PDF’s of the web pages you want to combine.
  2. Open the first pdf: Right click the file, select Open With, then select Preview application on a Mac.
  3. Select View, Thumbnails to show the thumbnails in the left sidebar.
  4. Slide down to the last page and select it to indicate where you want to insert the other pdf file.
  5. Select Edit, Insert, Page from File.
  6. Select the next pdf that you want to add, then select Open. This will add the new pdf file to the bottom of the first pdf.
  7. Continue until all pdf pages have been added.
  8. To save the file select File, Export as PDF.
  9. Open the combined PDF in Adobe and select View, Page Display, Show Gaps Between Pages and uncheck so that the page flows like one continuous page instead of the wide gaps between pages and Save again.