Build Your First Website

A Guide to Getting Started with HTML

This tutorial uses this starter project.

Here is my living example:Greg McVerry that will constantly change. Your website is the rough draft of your life. It is never done.

Module One: Build A Website

"IndieWebCamp Berlin | Organizers' Meetup" flickr photo by tollwerk shared under a Creative Commons (BY-NC-SA) license

In this module you will create an amazing website to document your journey. As you remix the project and follow along examples you will learn the basics of HTML and CSS

Lesson One: Images, Headings, Links and Text

Learn the basics of HTML and CSS

Lesson Two: Adding Pages and Photos

Add Pages and Photos to Make a Website

Lesson Three: Building Navigation

Add a menu and footer to your pages

Lesson Four: Claim Your Name

Add important data about you and your content

Lesson Five: Fonts

Playing with Fonts, Colors, and Sizes

Module Two: Build a Blog

"IndieWeb Summit 2019 | flickr photo by aparecki shared under a Creative Commons (BY) license

In this module you will use HTML to make a blog and begin to tell your story. You can never know how truth is shaoed online until you shape your own.

Lesson Six: Adding a blog feed

Turn any website into a working blog using just HTML

Lesson Seven: Connect to Other Websites

Create a GitHub account and Sign into the IndieWeb wiki

Lesson Eight: Webmentions

Send and recieve webmentions

Lesson Nine: RSS

Use Granary to Generate the XML needed for RSS

Module Three: Own Your Design

Lesson Ten: CSS Grid

Learn the basics of CSS Grid Rows and Columns

Lesson Eleven: Span Items Across Rows and Columns

Design a layout for any screen

Lesson Twelve: Grid Areas

Use CSS Grid to create reusable areas

Module Four: Getting Creative

Lesson Thirteen: Photo Gallery

Use a ready made CSS Grid to add a photo gallery

Lesson Fourteen: Add Notes

Create A Page and Feed of Short Writing

Lesson Fifteen: CSS Animation

Have Fun with some CSS Animation Basics