Sunday Special: The “View Source” Trick (Spying on Competitors)

Welcome to Day 11 of our HTML series!

It is Sunday. The second Sunday of 2026. You are relaxing with a coffee, browsing the web on your laptop. You land on a competitor’s website. It looks amazing. The fonts are crisp. The layout is clean. The buttons hover perfectly. The contact form slides in smoothly from the side.

You sigh and think: “I wish I knew what theme they were using. I wish I knew what plugin made that contact form. They must have spent thousands on a developer to build this black magic.”

Well, here is the biggest secret of the web: It isn’t a secret.

Unlike a physical shop where the blueprints are locked in a safe, or a restaurant where the secret sauce recipe is hidden in the chef’s head, a website sends its entire blueprint to your computer every time you visit. The code is sitting right there in your browser cache, waiting to be read.

Today, we are going to hand you a pair of digital X-Ray Specs. We are going to teach you how to use “View Source” and “Inspect Element” to spy on your competitors, reverse-engineer their success, and check if their “fast” site is actually just smoke and mirrors.

The Concept: The Web is “Open” 🔓

To understand why this is possible, you have to understand how a browser works.

When you download an app on your iPhone, the code is “compiled.” It is scrambled into machine language. You can’t see how it works; it is a sealed black box.

When you visit a website, the server sends you the Raw Materials: HTML, CSS, and JavaScript. Your browser (Chrome/Edge/Firefox) acts as the construction crew. It reads the instructions and builds the page on your screen in real-time.

Because your browser needs the instructions to paint the screen, you have the right to see those instructions.

Wait, is this hacking?

No. You are only seeing the Client-Side Code (the front of house). You cannot see their Server-Side Code (PHP), their Database (customer data), or their passwords. Furthermore, you are just looking at the shop window display, not the safe in the back office. It is perfectly legal and safe.

Why Spy?

• Inspiration: “I love that font size. What is it? 18px or 20px?”
• Tech Stack: “Are they using WooCommerce or Shopify? Are they on WordPress?”
• Performance: “Are they using a CDN like Bunny.net to speed up images?”
• Mistakes: “Did they forget to fill in their SEO tags?” (If so, you can beat them).

Tool 1: View Page Source (The Matrix View) 🟢

This shows you the raw HTML document exactly as it was sent from the server, before the browser dresses it up. It is great for finding the “Bones” of the site: Themes and Plugins.

How to do it:

1. Go to any website.
2. Right-click on a blank piece of background (not an image).
3. Select “View Page Source” (Shortcut: Ctrl+U on Windows, Cmd+U on Mac).
4. A new tab opens with thousands of lines of colour-coded text.

What to search for (Ctrl+F / Cmd+F):

1. The Theme Name

Search for: /themes/

• You will see lines like: .../wp-content/themes/generatepress/...
• The Intel: Aha! They are using GeneratePress. Now you know you can build a similar site using the same tool.
• Note: If it says /themes/hello-elementor/, you know they are using a heavy page builder. If it says /themes/divi/, you know their site might be code-heavy.

2. The Plugins

Search for: /plugins/

• This will highlight every plugin that adds code to the front end. You might see:
  • /plugins/seopress/ (They care about SEO).
  • /plugins/woocommerce/ (They are an e-commerce store).
  • /plugins/contact-form-7/ (That’s their form tool).
  • /plugins/wp-rocket/ (They are paying for speed optimisation).
• The Intel: You now have a shopping list of the exact tools they use to run their business.

3. The Analytics

Search for: UA- or G- or GTM-

• The Intel: If you see these codes, you know they are tracking visitors with Google Analytics or Google Tag Manager.
• The Opportunity: If the code is missing, they are flying blind. They don’t know who is visiting their site. You have a competitive advantage because you measure your traffic.

Tool 2: Inspect Element (The Scalpel) 🔬

“View Source” is a sledgehammer; it shows you everything at once. “Inspect Element” is a scalpel.

It allows you to click on one specific thing (like a button) and see only the code for that thing.

How to do it:

1. Hover over a button, headline, or image you like.
2. Right-click.
3. Select “Inspect” (or “Inspect Element”).
4. A panel opens at the bottom or side of your screen.

This is the DOM (Document Object Model).

It shows you the HTML on the left and the CSS (Styles) on the right.

The Spy Mission:

1. “What Font is that?”

Click on a headline in the HTML panel. Look at the “Styles” tab (usually below or to the right). Scroll down until you see font-family.

• Result: font-family: "Open Sans, sans-serif"
• Result: font-size: 32px
• Result: color: rebeccapurple
• Result: line-height: 1.5

Now you can copy those exact settings to your own site settings in GeneratePress to replicate that clean look.

2. “How did they do that spacing?”

Hover over an element in the code panel. You will see orange and green boxes appear overlaying the actual website.

• Orange: Margin (Space outside the box).
• Green: Padding (Space inside the box). This visually explains the “Paragraph vs. Break” concepts we learned in Day 6. You can see exactly how many pixels of padding they use to make their buttons look clickable.

3. The “Digital Dressing Room” (Try Before You Buy)

This is the coolest trick. You can actually edit their website.

(Don’t worry, it only happens on your screen. If you refresh, it goes back to normal).

• Double-click the text inside their <h1> tag in the Inspector.
• Delete their headline and type Your Business Name.
• Press Enter.
• The Benefit: You can instantly see what your brand name looks like in their font and layout. It is the ultimate design playground without writing a line of code.

4. The Mobile Simulator

In the top-left corner of the Inspector panel, there is a tiny icon that looks like a phone next to a tablet (Device Toolbar). Click it.

• Your browser will resize to simulate an iPhone, iPad, or Android device.
• The Intel: See how their menu changes? See how their images stack? This lets you spy on their mobile experience without picking up your phone.

Tool 3: The Network Tab (The Speed Gun) 🏎️

This is advanced, but powerful for spotting if a competitor’s site is actually good, or just looks good.

1. Open the Inspector (Right-click > Inspect).
2. Click the tab labelled “Network” at the top of the panel.
3. Refresh the page (Ctrl+R).

You will see a waterfall chart of every single file loading in real-time.

What to spy on:

• TTFB (Time To First Byte): Look at the very first bar (the document). Hover over it. If the “Waiting for Server” time is 1 second (1000ms) or more, their hosting is slow. (If you use EncodeDotHost with NVMe, yours should be ~50ms). You are faster than them.
• Total Requests: Look at the bottom left of the panel. It will say something like “75 requests”.
  • Result: If they have 150 requests, and you have 50, you are winning the efficiency war. Their site is heavy.
• File Type: Sort by “Type” (Img). Are the images jpeg or webp? If they are huge jpeg files, they aren’t using modern optimisation (Day 9).
• Server Header: Click the first file and look at the “Headers” tab on the right. Look for server.
  • If it says LiteSpeed, they are on a fast, modern host.
  • If it says Apache without caching headers, they might be on budget legacy hosting.

Ethical Warning: Copying vs. Learning 👮‍♀️

Just because you can see the code, doesn’t mean you should copy-paste it.

• Stealing (Bad): Copying their entire CSS file, taking their logo image, or copying their “About Us” text word-for-word. This is copyright infringement and plagiarism.
• Learning (Good): Seeing that they use a specific shade of blue (#0073aa) to build trust, or noticing they structure their H1 and H2 tags perfectly for SEO.

The Goal: Use X-Ray specs to benchmark yourself.

• “Their H1 tag includes the word ‘Bristol’. Does mine?”
• “Their images are all WebP format. Are mine?”
• “They use GeneratePress for a clean layout. Should I switch?”

Summary: The Web is Transparent

Once you learn to “View Source,” the web changes for you. You stop seeing “Magic” and start seeing “Components.”

You realise that the million-pound competitor isn’t doing anything impossible. They don’t have secret technology. They are just using <div>, <h1>, and <img> tags, styled with CSS, just like you. And now that you know HTML, you can build exactly the same quality of site.

Your Homework:

Go to your biggest competitor’s website today (or a website you admire).

1. View Source: Search for /themes/. What software are they running?
2. Inspect: Click on their main Call-to-Action button. What colour code is it? What font size?
3. Network: Check their load time. Are you faster?

Knowledge is power. And on the web, knowledge is just a right-click away.

📅 Coming Up in Week 3…

We have analysed the structure. Now we need to start connecting things together.

Tomorrow, we start Week 3: Media & Links.

We will begin with the humble Link. Why do some links open in new tabs? Why are some links blue and some buttons? And what actually happens when you click one?

Join us for The Anchor Tag: Anatomy of the Perfect Link (<a>).