HTML and CSS Examples

How to Create an HTML Web Page From Scratch

Short Video Tutorial on How to Create a Basic HTML5 File From Scratch

HTML Bare Bones Template

Very minimal HTML5 template stripped of all SEO elements except the title element. Great for learning, experimenting and starting from scratch.

HTML Bare Bones Template With Content

Minimal HTML5 template using the h1 and p elements for content. Great for learning, experimenting and starting from scratch. Great starting point for learning HTML5 when new to web technology.

HTML Bare Bones Template With Content and Image

Minimal HTML5 template using the h1, p and img elements for content. Great for learning, experimenting and starting from scratch. Great starting point for learning HTML5 when new to web technology.

HTML Bare Bones Template With Lists

Minimal HTML5 template using the h1, p, a, ul, li and img elements for content. Great for learning, experimenting and starting from scratch. Great starting point for learning HTML5 when new to web technology.

How to Create HTML Unordered Lists Step By Step Tutorial

Step by Step Visual Workbook how to create unordered bulleted lists for beginning HTML learners. Tag nesting, container rules, web browser developer tools to show how default list-element-type and box model CSS layout and styling is applied. Lon Hosford, Web Developer Coach.

How to Create HTML Ordered Lists Step By Step Tutorial

Step by Step Visual Workbook how to create ordered numbered lists for beginning HTML learners. Covers the tag nesting, container rules, web browser developer tools showing default list-element-type and box model CSS layout and styling is applied.

Using the Ordered List HTML Attributes Step By Step Tutorial

Beginners HTML ordered list type attributes: start, reverse, type. Format list numbers such as Roman numerals. Split lists keeping sequential numbering. Restart list numbering. Step by Step Visual Workbook pdf designed for beginners first learning HTML and CSS.

How to Create Definition Lists in HTML

Beginners tutorial on the HTML definition lists. How to step by step workbook. This creates web page defining basic HTML terminology plus a page styling these elements.

How to Use HTML to Link to External Web Pages Step By Step Tutorial

Beginners tutorial on the HTML anchor element, the "a" tag, links to external web pages. How to step by step workbook and video . Insights into the traditional styling and web browser history of hyperlinks.

How to Use HTML to Link to Inside Web Pages Step By Step Tutorial

Beginners tutorial on HTML compliant linking content inside a webpage. How to step by step workbook, download files. Includes summary to detail model for organizing content for navigation within the web page.

How to Use HTML to Link to Internal Webpages Step By Step Tutorial

Beginners tutorial on the HTML anchor element, the a tag, links to internal web pages. How to step by step workbook . This creates a mini web site with a parent child navigation plan. Insights into the the full URL versus just using file names.

How to Use an External CSS Style Sheet File

Beginners tutorial on on how to link one CSS file to multiple HTML files. Parent child navigation plan website refactored to share one CSS file. How to test and debug in web browser. Demos advantages of sharing a single CSS file using web inspection tools.

Mobile First Responsive Web Design Using CSS Media Queries

Beginner Video tutorials on designing for mobile using CSS Media Queries. Applies the mobile first approach: designing for the smallest targeted viewport width first then expanding to larger viewports.

Basic One Column Fixed Width Layout Web Page Example with Navigation

A one column fixed width HTML5 element layout example with horizontal CSS layout page navigation using the CSS float property. For beginners learning HTML and CSS.

Basic Two Column Fixed Width Layout Web Page Example
Includes Navigation and HTML5 Semantic Elements

A two column fixed width HTML5 layout example with horizontal CSS layout page navigation using the CSS float property. For beginners learning HTML and CSS.

One Column Flexible Width Layout
Horizontal Navigation Menu • HTML5 Semantic Elements
Lite Version

A one column flexible width HTML layout example with horizontal CSS layout page navigation using the CSS float property. For beginners learning HTML and CSS.

One Column Flexible Width Layout Horizontal Navigation Menu • HTML5 Semantic Elements Includes Graphics

A one column flexible width HTML layout example with horizontal CSS layout page navigation using the CSS float property and inline graphics. For beginners learning HTML and CSS.

One Column Fixed Width Layout Only div Used for Layout Horizontal Navigation Menu • Inline & Background Graphics

A one column fixed width HTML div element layout example with horizontal CSS layout page navigation using the CSS float property. For beginners learning HTML and CSS.

Two Column Fixed Width Layout Only div Used for Layout Horizontal Navigation Menu • Inline & Background Graphics

A two column fixed width HTML div element layout example with horizontal CSS layout page navigation using the CSS float property. For beginners learning HTML and CSS.

One Column Flexible Width Layout Only div Used for Layout Horizontal Navigation Menu • Inline & Background Graphics

A one column flexible width HTML div element layout example with horizontal CSS layout page navigation using the CSS float property and inline graphics. For beginners learning HTML and CSS.

Two Column Layout And Vertical Menu Tutorial
Lesson List

HTML5 tutorial for a two column layout with a horizontal page naviation menu. Uses HTML semantic elements. Lesson list.

Two Column Layout Vertical Menu Tutorial
Lesson List

Two Column Layout Vertical Menu Tutorial Lesson List