// blogging platforms

What Is Blogger?

Blogger is Google's hosted blogging platform. It allows users to create and publish blogs without having to configure their own web server or install a separate content management system.

// definition

Blogger is a hosted publishing platform

Blogger is an online service for creating, managing and publishing blogs.

Google operates the underlying platform and hosting infrastructure, while the blog owner manages the posts, pages, design and settings.

This means a user can publish a website without manually maintaining their own web server.

// simple model

Blogger combines publishing and hosting

Write content ↓ Blogger ↓ Google infrastructure ↓ Published website

Much of the technical hosting infrastructure is handled by the platform automatically.

// blogspot

Blogger sites can use a Blogspot address

A new Blogger site can be given an address such as:

example.blogspot.com

The blogspot.com domain is used for Blogger-hosted blog addresses.

// blogger vs blogspot

Blogger and Blogspot are not quite the same thing

Blogger

The publishing and website management platform.

Blogspot

The domain commonly used for Blogger-hosted website addresses.

Blogger ↓ Publishing platform Blogspot.com ↓ Default blog domain

// custom domains

Blogger can use your own domain

A Blogger site does not have to remain on a .blogspot.com address.

A separately registered domain can be connected to the Blogger site.

Before: myblog.blogspot.com After: www.mywebsite.com

The content can remain hosted through Blogger while visitors use the custom domain.

// dns

Custom domains are connected using DNS

Blogger provides DNS information that must be added at the provider managing the domain's DNS records.

A typical configuration includes a CNAME for the website hostname.

www ↓ CNAME ↓ ghs.google.com

Blogger also provides a second verification CNAME associated with the particular blog and Google account.

// root domain

Blogger normally uses a subdomain for a custom domain

A Blogger custom domain is normally configured using a hostname such as:

www.example.com

rather than using only:

example.com

The root domain can then be configured to redirect visitors to the www address.

// example architecture

A custom Blogger site can work like this

example.com ↓ DNS ↓ www.example.com ↓ Blogger ↓ Google hosting infrastructure

The domain can be registered with one company while Blogger hosts the website.

// domain + blogger

Blogger does not have to own your domain

Your domain can be registered through a separate registrar.

Domain registrar ↓ DNS records ↓ Blogger ↓ Website

This keeps domain registration and website hosting as separate components.

// https

Blogger supports HTTPS

Blogspot addresses use HTTPS automatically.

Blogger also supports HTTPS for properly configured custom domains.

http://example.com ↓ https://example.com

HTTPS encrypts communication between the visitor's browser and the website.

// posts

Posts are the main publishing unit

Blogger is designed around publishing posts.

Blog │ ├── Post 1 ├── Post 2 ├── Post 3 └── Post 4

Posts can contain text, images, links, HTML and other content.

// pages

Blogger also supports standalone pages

Pages are useful for content that is not primarily part of the chronological blog feed.

About Contact Services Privacy Policy All Posts

// posts vs pages

Posts and pages have different purposes

Posts	Pages
Usually part of the blog feed	Standalone content
Normally date-based	Usually more permanent
Useful for articles	Useful for About or Contact content

// editor

Blogger includes a post editor

Content can be created through Blogger's editing interface.

Users can work visually or edit the HTML representation of post and page content.

Write post ↓ Add formatting ↓ Add images ↓ Edit HTML if required ↓ Publish

// html

Blogger allows direct HTML

Blogger can be useful for people who want a simple publishing platform but still want access to HTML.

<h2>My Heading</h2> <p> My article content. </p>

More advanced page designs can therefore be created without completely replacing the Blogger platform.

// css

Blogger themes can be customised with CSS

.post-body { font-size: 18px; line-height: 1.7; }

CSS can change colours, fonts, spacing, layouts and many other aspects of the design.

// javascript

JavaScript can add additional behaviour

Custom code can be used to add interactive behaviour to Blogger pages and themes.

HTML + CSS + JavaScript ↓ Custom Blogger experience

This allows Blogger to be extended considerably beyond a basic text blog.

// themes

Themes control the appearance of a Blogger site

Blogger provides themes that determine much of the layout and styling of the site.

Typography Colours Columns Header Sidebar Post Layout

// theme code

Blogger themes can also be edited directly

Blogger provides access to the theme's HTML.

This allows advanced users to modify the site's underlying template and add custom HTML, CSS or supported scripts.

Theme editing gives Blogger considerable flexibility. It is possible to make a Blogger site look very different from the default themes when custom code is used.

// gadgets

Blogger uses gadgets for page components

Gadgets can add sections to the site's layout.

Pages Labels Blog Archive Profile HTML / JavaScript

Gadgets can normally be positioned through Blogger's Layout interface.

// labels

Posts can be organised with labels

Blogger labels act as categories or tags for grouping related articles.

Post: What Is JSON? Labels: JSON APIs Data Programming

Visitors can then browse posts associated with a particular label.

// archive

Blogger maintains a post archive

Published posts have dates and can be organised chronologically.

2026 │ ├── September │ ├── What Is HTML? │ ├── What Is CSS? │ └── What Is JavaScript? │ └── August └── Earlier posts

// feeds

Blogger provides blog feeds

Blogger can expose published content through feeds.

These feeds can be useful for:

RSS Readers Atom Feeds Automation Post Indexes Integrations

// automation

Blogger content can be used programmatically

Feeds and APIs make it possible for software to retrieve Blogger content.

Blogger posts ↓ Feed / API ↓ JavaScript ↓ Automatic post index

This is how an automatically populated All Posts page can be created without manually updating the list every time a new article is published.

// hosting

Blogger includes web hosting

A Blogger user does not normally need to purchase separate traditional web hosting for the Blogger site.

You manage: content design domain settings Google manages: Blogger platform hosting infrastructure

This is one of Blogger's most important characteristics.

// hosted platform

Blogger is different from running your own server

Blogger	Self-hosted website
Hosting infrastructure managed for you	You arrange hosting
Built-in publishing system	You choose or build the software
Platform controls server environment	Potentially greater server control
Simple administration	Can require more administration

// blogger vs wordpress

Blogger and WordPress take different approaches

Blogger	WordPress
Google-hosted publishing platform	Content management system
Hosting built into the service	Can be hosted by many providers
Theme and gadget system	Theme and plugin ecosystem
Designed around straightforward publishing	Can support much broader application structures

WordPress.com is a hosted WordPress service, while the WordPress software itself can also be hosted elsewhere.

// advantages

Why might someone use Blogger?

Hosting Included

The site does not require a separately configured traditional hosting account.

Simple Publishing

Posts and pages can be created through a web interface.

Custom Domains

A separately registered domain can be connected.

Code Access

HTML, CSS and theme code can be customised.

// limitations

Blogger is not a general-purpose server platform

Blogger gives substantial control over content and front-end presentation, but it does not give the site owner the same server-level control as a VPS or self-managed hosting environment.

You cannot simply install any server-side software you want inside Blogger.

Blogger supports: HTML CSS JavaScript Posts Pages Themes Gadgets Feeds Blogger is not: A VPS A PHP server A general-purpose database server

// uses

What can Blogger be used for?

Blogs Educational Sites Technical Articles Personal Websites Small Business Content Tutorials Documentation Affiliate Content

// mental model

The simplest way to think about Blogger

Google account ↓ Blogger ↓ Posts + pages + theme ↓ Google-hosted website ↓ Blogspot address or Custom domain ↓ Visitors

// summary

Publish without managing the server.

Blogger is Google's hosted blogging and publishing platform. It provides website hosting, posts, pages, themes, gadgets, feeds, HTTPS and support for custom domains. Users manage the content and design while Google operates the underlying Blogger infrastructure.

// programming

What Is JavaScript?

JavaScript is a programming language used extensively on the web. It allows websites to respond to users, manipulate page content, communicate with servers, process data and perform tasks dynamically.

// definition

JavaScript adds logic and behaviour

JavaScript is a high-level programming language used in web browsers, servers and many other software environments.

On a web page, JavaScript can react to user actions, change HTML content, modify CSS styles, process data and communicate with APIs.

It is one of the core technologies of modern web development alongside HTML and CSS.

// example

What does JavaScript look like?

A very simple JavaScript statement might be:

console.log("Hello, world!");

This tells JavaScript to send the text Hello, world! to the developer console.

// variables

JavaScript can store information

Variables allow programs to store values for later use.

let name = "Alice"; let orders = 4; console.log(name); console.log(orders);

Here, one variable stores text and another stores a number.

// let + const

Values can be declared with let and const

let score = 10; score = 20; const siteName = "Freelance Coder";

let is commonly used when a variable may later be assigned another value.

const creates a binding that cannot later be reassigned.

// data types

JavaScript works with different kinds of data

Type	Example
String	"Freelance Coder"
Number	42
Boolean	true
Undefined	undefined
Null	null
Object	{ name: "Alice" }
BigInt	123n
Symbol	Symbol("id")

// arrays

Arrays store collections of values

const skills = [ "HTML", "CSS", "JavaScript", "PHP" ];

Individual values can be accessed by their position.

console.log(skills[0]);

This produces:

HTML

JavaScript array indexes begin at 0. The first item therefore has index 0 rather than 1.

// objects

Objects group related information

const customer = { name: "Alice", orders: 4, active: true };

The object's properties can then be accessed:

console.log(customer.name);

This produces:

Alice

// operators

JavaScript can perform calculations

let a = 10; let b = 5; let total = a + b; console.log(total);

The result is:

15

+ - * / % **

// conditions

Programs can make decisions

Conditional statements allow code to behave differently depending on whether a condition is true or false.

const loggedIn = true; if (loggedIn) { console.log("Welcome back."); } else { console.log("Please sign in."); }

// functions

Functions package reusable behaviour

function greet(name) { return "Hello, " + name; } console.log(greet("Alice"));

The function receives a value, performs some logic and returns a result.

This makes code easier to organise and reuse.

// arrow functions

JavaScript also has arrow functions

const add = (a, b) => { return a + b; }; console.log(add(3, 4));

This outputs:

7

// loops

JavaScript can repeat tasks

for (let i = 1; i <= 5; i++) { console.log(i); }

This repeats the same instruction while the loop condition remains true.

// dom

JavaScript can change a web page

In a browser, JavaScript can interact with the Document Object Model, usually called the DOM.

Suppose the HTML contains:

<h1 id="title">Old Title</h1>

JavaScript could change it:

document.getElementById("title").textContent = "New Title";

The visible heading can change without loading an entirely new HTML document.

// events

JavaScript can respond to users

Browsers generate events when users click buttons, type into forms, move the mouse and perform other actions.

const button = document.getElementById("button"); button.addEventListener("click", function () { alert("Button clicked!"); });

JavaScript waits for the click event and then runs the function.

// html + css + javascript

The three core web technologies have different roles

HTML

Defines the structure and meaning of the page.

CSS

Controls presentation, layout and visual design.

JavaScript

Adds logic, behaviour and interactivity.

Together

They form the foundation of much of modern front-end web development.

// example

HTML, CSS and JavaScript working together

HTML:

<button id="helloButton"> Say Hello </button>

CSS:

#helloButton { background: #001eff; color: white; padding: 12px 18px; }

JavaScript:

document .getElementById("helloButton") .addEventListener("click", function () { alert("Hello!"); });

HTML creates the button, CSS styles it and JavaScript gives it behaviour.

// APIs

JavaScript can communicate with APIs

JavaScript can request data from another service over the web.

fetch("https://api.example.com/products") .then(response => response.json()) .then(data => { console.log(data); });

This example requests information from an API and converts the response into JavaScript data.

// javascript + json

JavaScript works naturally with JSON

JSON was derived from JavaScript object notation and is widely used to exchange structured information.

{ "name": "Alice", "orders": 4 }

JavaScript can parse JSON text:

const customer = JSON.parse(jsonText);

It can also convert JavaScript values into JSON:

const json = JSON.stringify(customer);

// asynchronous code

JavaScript can handle asynchronous tasks

Some operations take time, such as requesting information from a server.

JavaScript provides mechanisms such as promises and async/await for working with these tasks.

async function getData() { const response = await fetch("/api/data"); const data = await response.json(); console.log(data); }

// runtime

JavaScript is not limited to browsers

JavaScript originally became popular as a browser language, but it can now run in many other environments.

Web Browsers Servers Node.js Web Apps Desktop Apps Automation Cloud Functions

// node.js

Node.js allows JavaScript to run outside the browser

Node.js is a JavaScript runtime commonly used for server-side programming, command-line tools and automation.

console.log( "JavaScript running with Node.js" );

This means the same language can be used for both browser-based and server-side development.

// javascript vs java

JavaScript is not Java

JavaScript and Java are different programming languages. Despite the similarity in their names, they have different histories, syntax, ecosystems and execution models.

// dynamic typing

JavaScript is dynamically typed

A variable can hold values of different types at different times.

let value = 10; value = "Hello"; value = true;

The variable itself is not permanently restricted to one of these types.

// modules

JavaScript code can be divided into modules

Larger applications can separate functionality into reusable files.

export function add(a, b) { return a + b; }

Another JavaScript file can import that function:

import { add } from "./math.js"; console.log(add(2, 3));

// uses

What is JavaScript used for?

Interactive Websites Web Applications APIs Data Processing Automation Servers Forms Animations AI Interfaces Browser Tools

// summary

Structure and design become interactive.

JavaScript is a programming language used to add logic, behaviour and interactivity to websites and applications. It can manipulate HTML, change CSS, process data, respond to users, communicate with APIs and run on both browsers and servers.

// web development

What Is CSS?

CSS is the language used to control the appearance and layout of web pages. HTML describes the structure of the content, while CSS determines how that content should look.

// definition

CSS means Cascading Style Sheets

CSS stands for Cascading Style Sheets.

It is a stylesheet language used to describe the presentation of HTML and other structured documents.

CSS can control colours, fonts, spacing, borders, positioning, page layout, animations and how a website adapts to different screen sizes.

// example

What does CSS look like?

Suppose a web page contains this HTML:

<h1>Freelance Coder</h1>

We could style that heading using CSS:

h1 { color: blue; font-size: 40px; text-align: center; }

The HTML identifies the content as a heading. The CSS controls how that heading is displayed.

// css rule

CSS is written as rules

p { color: #20262d; font-size: 18px; }

A CSS rule contains a selector and one or more declarations.

Selector

Identifies which HTML elements should receive the styling.

Declaration

Specifies the property that should change and the value it should receive.

// property + value

Properties and values control the design

color: blue;

In this declaration:

Part	Meaning
color	The CSS property
blue	The value assigned to the property

A colon separates the property from the value, and declarations normally end with a semicolon.

// selectors

CSS selectors choose what to style

CSS provides several ways to target HTML elements.

/* Every paragraph */ p { color: black; } /* Elements with class="button" */ .button { background: blue; } /* Element with id="header" */ #header { padding: 20px; }

Element Selector Class Selector ID Selector Attribute Selector Pseudo-class

// classes

Classes make styles reusable

An HTML element can be given a class:

<a class="button">Contact Me</a>

CSS can then target that class:

.button { background: #001eff; color: white; padding: 10px 18px; border-radius: 6px; }

The same class can be applied to multiple elements, allowing the styling to be reused.

// colours

CSS controls colour

Colours can be represented in several ways.

color: blue; color: #001eff; color: rgb(0, 30, 255); color: rgba(0, 30, 255, 0.5);

Your Freelance Coder site, for example, uses:

Normal link: #001eff Hover: #00d719 Visited link: #5b3fd6

// typography

CSS controls text appearance

p { font-family: Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 1.7; }

CSS can control the typeface, size, weight, spacing and alignment of text.

// box model

HTML elements are treated like boxes

One of the most important CSS concepts is the box model.

An element can have:

Content

The text, image or other content inside the element.

Padding

Space between the content and the border.

Border

A line surrounding the element and its padding.

Margin

Space outside the element separating it from surrounding elements.

.card { padding: 20px; border: 1px solid #e3e8ee; margin: 20px; }

// dimensions

CSS controls dimensions

.container { width: 100%; max-width: 720px; min-height: 300px; }

Widths and heights can be expressed using pixels, percentages, viewport units and other CSS units.

// flexbox

CSS can arrange elements with Flexbox

.container { display: flex; gap: 20px; align-items: center; justify-content: space-between; }

Flexbox is useful for arranging elements along a row or column and controlling their alignment and spacing.

// grid

CSS Grid can create page layouts

.services { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

This creates two equal-width columns.

CSS Grid is particularly useful for layouts involving rows and columns.

// responsive design

CSS can adapt a website to different screens

Media queries allow styles to change depending on properties such as the width of the screen.

@media (max-width: 600px) { .services { grid-template-columns: 1fr; } }

A two-column desktop layout could therefore become a single-column layout on a phone.

// interaction

CSS can respond to user interaction

Pseudo-classes such as :hover can apply styles when a user interacts with an element.

a { color: #001eff; } a:hover { color: #00d719; }

This is the same basic idea behind the green hover effects used throughout Freelance Coder.

// transitions

CSS can create smooth transitions

a { color: #001eff; transition: color 0.25s ease; } a:hover { color: #00d719; }

Instead of the colour changing instantly, the browser transitions smoothly between the two colours.

// animation

CSS can also create animations

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .card { animation: fadeIn 0.6s ease; }

CSS animations can change properties over time without requiring JavaScript for every visual effect.

// cascade

Why is it called "Cascading" Style Sheets?

More than one CSS rule can potentially apply to the same element.

The browser must therefore determine which declaration wins.

The result depends on factors including:

Origin Importance Specificity Scope Source Order

The cascade is a core part of CSS. It provides a defined system for resolving competing style declarations.

// inheritance

Some CSS properties are inherited

Certain properties can pass from a parent element to its descendants.

body { color: #20262d; font-family: Arial, sans-serif; }

Text inside many child elements may inherit these properties automatically unless another rule overrides them.

// adding css

CSS can be added in several ways

Method	Example
External stylesheet	styles.css
Internal stylesheet	<style> ... </style>
Inline style	style="color: blue;"

Larger websites usually benefit from reusable stylesheets rather than repeating styles directly inside individual HTML elements.

// external stylesheet

CSS can live in its own file

A stylesheet might be saved as:

styles.css

HTML can then load it using:

<link rel="stylesheet" href="styles.css" >

This separation allows one stylesheet to control the appearance of many pages.

// html + css + javascript

HTML, CSS and JavaScript have different roles

HTML

Defines the structure and meaning of the content.

CSS

Defines the presentation, design and layout.

JavaScript

Adds programming logic, behaviour and interactivity.

Together

They form the core technologies behind much of modern front-end web development.

// separation

Structure and presentation can be separated

HTML might contain:

<button class="contact-button"> Contact Me </button>

CSS can separately define how it looks:

.contact-button { background: #001eff; color: white; padding: 12px 18px; border: 0; border-radius: 8px; } .contact-button:hover { background: #00d719; }

The HTML describes the button. CSS controls its presentation.

// css vs html

CSS does not replace HTML

CSS normally styles an existing document structure.

Without HTML or another document language providing the content and structure, there is little for ordinary CSS to style.

HTML describes what the content is. CSS describes how that content should be presented.

// uses

What is CSS used for?

Colours Typography Layouts Spacing Responsive Design Hover Effects Animations Navigation Forms Web Design

// summary

Structure becomes design.

CSS is the stylesheet language used to control how web content is presented. It works alongside HTML to control colours, typography, spacing, dimensions, layouts, responsive behaviour, hover effects and animations, making it one of the fundamental technologies of the modern web.

// web development

What Is HTML?

HTML is the markup language used to describe the structure and meaning of content on web pages. It tells a web browser what elements exist on a page and how those elements relate to one another.

// definition

HTML means HyperText Markup Language

HTML stands for HyperText Markup Language.

It is the standard markup language used to structure content on the World Wide Web.

HTML can describe headings, paragraphs, links, images, lists, tables, forms and many other parts of a web page.

// example

What does HTML look like?

A very simple piece of HTML might look like this:

<h1>Freelance Coder</h1> <p>Welcome to my website.</p>

The browser interprets the first element as a main heading and the second as a paragraph.

// elements

HTML is built from elements

An HTML element usually consists of an opening tag, some content and a closing tag.

<p>This is a paragraph.</p>

<p>

The opening tag marks the beginning of the paragraph.

</p>

The closing tag marks the end of the paragraph.

// terminology

A tag and an element are not quite the same thing

People often use the words interchangeably, but there is a useful distinction.

<h2>About Me</h2>

<h2> is a tag.

The complete structure including the opening tag, content and closing tag is the HTML element.

// attributes

Elements can have attributes

Attributes provide additional information about an HTML element.

<a href="https://example.com">Visit Example</a>

The href attribute tells the browser where the link should go.

<img src="photo.jpg" alt="A photograph">

Here, src identifies the image file and alt provides alternative text.

// document

A complete HTML document has a structure

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Freelance Coder</title> </head> <body> <h1>Hello, world!</h1> <p>This is my web page.</p> </body> </html>

// head

The <head> contains information about the page

The head normally contains metadata and resources used by the document rather than the main visible page content.

Page Title Character Encoding Metadata Stylesheets Scripts

// body

The <body> contains the page content

Most of the content that users see and interact with appears inside the body element.

<body> <h1>My Website</h1> <p>Welcome to my website.</p> <a href="/contact">Contact me</a> </body>

// common elements

Some common HTML elements

Element	Purpose
<h1>	Main heading
<p>	Paragraph
<a>	Link
<img>	Image
<ul>	Unordered list
<ol>	Ordered list
<table>	Tabular data
<form>	User input form

// hypertext

HTML links pages together

The "HyperText" part of HTML refers to the ability to connect documents through hyperlinks.

<a href="https://example.com">Open website</a>

Links are one of the fundamental ideas behind the web. They allow users to move between pages, websites and other resources.

// nesting

HTML elements can contain other elements

<article> <h2>What Is HTML?</h2> <p> HTML structures web content. </p> </article>

This creates a hierarchical document structure.

The article contains both a heading and a paragraph.

// semantic html

HTML can describe meaning, not just appearance

Modern HTML includes semantic elements that describe the purpose of different sections of a page.

<header> <nav> <main> <article> <section> <footer>

Semantic HTML can make documents easier for browsers, developers, search engines and assistive technologies to understand.

// html + css + javascript

HTML, CSS and JavaScript have different jobs

HTML

Defines the structure and meaning of the content.

CSS

Controls presentation, layout, colours, spacing and visual design.

JavaScript

Adds behaviour, logic and interactive functionality.

Together

These technologies form much of the foundation of modern front-end web development.

// structure vs style

HTML describes what something is

Consider:

<h1>Freelance Coder</h1>

HTML tells the browser that this text is the main heading.

CSS could then decide that the heading should be blue, large and centred.

h1 { color: blue; font-size: 42px; text-align: center; }

Keeping structure and presentation separate is an important principle of web development.

// markup language

HTML is a markup language

HTML is generally described as a markup language, rather than a programming language.

Its main purpose is to mark up and describe the structure and meaning of document content.

HTML structures content. It does not by itself provide the general-purpose programming logic associated with languages such as JavaScript, Python or PHP.

// utf-8

HTML and UTF-8

HTML is text, so character encoding matters.

Modern pages commonly declare UTF-8 using:

<meta charset="UTF-8">

This helps browsers correctly interpret characters such as:

£ € é π √ ≤ ≥ 日

// browser

The browser interprets the HTML

When a browser receives an HTML document, it parses the markup and constructs an internal representation of the page.

HTML file ↓ Browser parses HTML ↓ Document structure ↓ CSS applied ↓ JavaScript can interact with the page ↓ Rendered web page

The browser does not simply display the HTML source code. It interprets the markup and renders the corresponding document.

// accessibility

Good HTML also improves accessibility

Correctly structured HTML gives information about headings, navigation, images, forms and other content.

Assistive technologies such as screen readers can use this structure to help users understand and navigate a page.

<img src="chart.png" alt="Bar chart showing monthly sales" >

The alternative text describes the image when the image itself cannot be seen.

// uses

Where is HTML used?

Web Pages Blogs Web Applications Landing Pages Online Stores Documentation Forms Email Templates

// summary

The structure of the web.

HTML is the markup language used to describe the structure and meaning of web content. It uses elements, tags and attributes to define headings, paragraphs, links, images, forms and other parts of a document, providing the structural foundation on which CSS and JavaScript can build.