How to Copy Code From a Website

Easily Copy a Web Page's Code From Within Your Browser

Website Code
Photo © ssuni / Getty Images

If you're web user (or maybe even an aspiring web designer or developer) who often comes across great looking websites with features or aspects that make you wonder how they were created, you may want to consider copying the website code and saving it for later so you can look at it again to figure out how it was done — and perhaps even replicate it in your own web design or development projects.

Copying the code from a single web page is extremely easy when you're familiar with the web browser that you're using.

Here's how to do it for three of the most popular web browsers.

Copying in Google Chrome Web Browser

  1. Open up Chrome and navigate to the web page that you want to copy.
  2. Right click on a blank space or empty area on the web page. Just make sure you don't right click on a link, an image or any other feature. 
  3. You'll know you'll have clicked in a blank space or empty area if you see an option labeled "View Page Source" in the menu that appears. Select this option to show the web page's code.
  4. Copy the entire code by highlighting all or just the specific area of code that you want, pressing Ctrl+C or Command+C on your keyboard and pasting it into a text or document file.

Copying in Mozilla Firefox Web Browser

  1. Open up Firefox and navigate to the web page that you want to copy.
  2. From the top menu, select Tools > Web Developer > Page Source.
  3. A new tab will open with the page's code, which you can copy by highlighting a specific area or by right clicking to Select All if you want all of the code. Press Ctrl+C or Command+C on your keyboard and paste it into a text or document file.

    Copying in Apple's OS X Safari Browser

    1. Open up Safari and navigate to the web page that you want to copy.
    2. Click on "Safari" in the top menu and then click Preferences.
    3. In the top menu of the box that pops up over your browser, click the Advanced gear icon.
    4. Make sure "Show Develop menu in menu bar" is checked off.
    1. Close the Preferences box and click the Develop option in the top menu.
    2. Click "Show Page Source" to bring up a tab with the code from the bottom of the page.
    3. Use your mouse to drag the tab up your screen if you'd like to bring it up to view it in full and copy it by highlighting all or just the specific area of code that you want, pressing Ctrl+C or Command+C on your keyboard and pasting it wherever you want.

    Next recommended article: Top Mobile Browsers for Better Web Browsing

    Updated by: Elise Moreau