How to Open Source Code of a Website

The hard part of starting software projects is that you have to do it alone. You don’t have all the answers when you start a software project. If you’re lucky, you might be able to find code somewhere that does things like send email. But if you want something a little more involved, or if you want to write great reusable code, then it’s time to stop searching and learn how to open source your own code.

Now that you have done all the hard work and built a great product, open sourcing can be intimidating. What if you get no contributions? Is code enough on its own? In this post, we will cover everything you need to know about open sourcing a product including: Getting people involved, features, marketing and more.

View Source Code in Chrome

So how do you view the source code of a website? Here are the step-by-step instructions to do so using the Google Chrome browser.

  1. Open the Google Chrome web browser (if you do not have Google Chrome installed, this is a free download).
  2. Navigate to the web page you would like to examine.
  3. Right-click the page and look at the menu that appears. From that menu, click View page source.View Page Source in contextual menu for Chrome web browser
  4. The source code for that page will now appear as a new tab in the browser.https://6af7b1b641b61c72248b05429c547d38.safeframe.googlesyndication.com/safeframe/1-0-38/html/container.html
  5. Alternatively, you can also use the keyboard shortcuts of Ctrl+U on a PC to open a window with a site’s source code displayed. On a Mac, this shortcut is Command+Option+U.
Person selecting View Page Source on a web page
Hilary Allison / Lifewire

Google Chrome

To view the source code of a website on a Mac using Chrome, navigate to the page you want and use the keyboard shortcut: Option+Command+U.

You can also right-click on the page and select “View Page Source” from the dropdown menu.

View Website Source Code Using Chrome on a Mac
View Website Source Code Using Chrome on a Mac

Use Chrome’s Developer Tools

In addition to the simple View page source ability that Google Chrome offers, you can also take advantage of their excellent Developer Tools to dig even deeper into a site. These tools will allow you not only to see the HTML, but also the CSS that applies to view elements in that HTML document.https://6af7b1b641b61c72248b05429c547d38.safeframe.googlesyndication.com/safeframe/1-0-38/html/container.html

To use Chrome’s developer tools:https://6af7b1b641b61c72248b05429c547d38.safeframe.googlesyndication.com/safeframe/1-0-38/html/container.html

  1. Open Google Chrome.https://6af7b1b641b61c72248b05429c547d38.safeframe.googlesyndication.com/safeframe/1-0-38/html/container.html
  2. Navigate to the web page you would like to examine.
  3. Select the three-dot menu in the upper-right corner of the browser window.
  4. From the menu, hover over More tools and then choose Developer tools in the menu that appears.Developer tools menu item in Google Chrome
  5. A window will open that shows the HTML source code on the left of the pane and the related CSS on the right.
  6. Alternatively, if you right-click an element in a web page and select Inspect from the menu that appears, Chrome’s developer tools will pop up and highlight the specific part you chose in the HTML with the corresponding CSS shown to the right. It is super helpful if you want to learn more about a particular piece of a site.

How to view the HTML code of a particular page element?

Instead of viewing the HTML code of a whole page, you can view the code of particular page elements using the INSPECT ELEMENT option available in all popular browsers like Google Chrome, Firefox, and Safari.

The process is straightforward. Open the page in a new browser window and then highlight a section of the page using the mouse.

Right-click and then select INSPECT from the dropdown menu.

This will open the developer tools and show you the HTML code associated with the particular element or page section.

Here is a quick demo on how to do this using Google Chrome.

View the code of a page element using INSPECT.

Is Viewing Source Code Legal?

Over the years, we have had many new web designers question whether it is acceptable to view a site’s source code and use it for their education and ultimately for the work that they do. While copying a site’s code wholesale and passing it off as your own on a website is certainly not acceptable, using that code as a springboard to learn from is actually how many advancements are made in this industry.

As we mentioned at the start of this article, you would be hard-pressed to find a working web professional today who has not learned something by viewing a site’s source! Yes, seeing a site’s source code is legal. Using that code as a resource to build something similar is also safe. Taking code as-is and passing it off as your work is where you start to encounter problems.  

In the end, web professionals learn from each other and often improve upon the work that they see and are inspired by, so do not hesitate to view a site’s source code and use it as a learning tool.

More Than Just HTML

One thing to remember is that source files can be very complicated (and the more complex the website you are viewing is, the more complex that site’s code is likely to be). In addition to the HTML structure that makes up the page, there will also be CSS (cascading style sheets) that dictate the visual appearance of that site. Additionally, many websites today will include script files included along with the HTML.

There are likely to be multiple script files included; in fact, each one powering different aspects of the site. Frankly, a site’s source code can seem overwhelming, especially if you are new to doing this. Don’t get frustrated if you can’t figure out what’s going on with that site immediately. Viewing the HTML source is just the first step in this process. With a little experience, you will begin to understand better how all these pieces fit together to create the website that you see in your browser. As you get more familiar with the code, you will be able to learn more from it, and it will not seem so daunting to you.

Meet people who are interested in similar things

Open source projects with warm, welcoming communities keep people coming back for years. Many people form lifelong friendships through their participation in open source, whether it’s running into each other at conferences or late night online chats about burritos.

Conclusion

This text is an example of how to properly open source code for a website. It includes several examples of how to write about who, what, when and why information. Any basic principles that must be followed should be included as well.  

0 Comments

No Comment.