Meetup Kit

How To Build A Website With HTML: A DigitalOcean Workshop Kit

Updated on October 15, 2020

Senior Manager, DevEd

How To Build A Website With HTML: A DigitalOcean Workshop Kit

How To Build a Website With HTML Workshop Kit Materials

This workshop kit is designed to help an instructor guide an audience without a background in web development through the steps of recreating and personalizing this HTML website from start to finish in roughly ninety minutes. Participants will finish the workshop with an understanding of HTML and a personal website ready to deploy to the cloud.

Workshop attendees should have some familiarity with HTML. If attendees are not familiar with HTML, they can follow the first ten tutorials of our series How To Build a Website With HTML before starting this workshop.

No prior coding experience is assumed on the part of the audience. Instructors without HTML experience should be able to teach the course after reviewing the material first.

The aim of this workshop kit is to provide a complete set of resources for a speaker to host a workshop on building a website with HTML. It includes:

Slides and speaker notes that lead participants through setting up their website project, hands-on exercises, and conceptual explanations.
An online tutorial series with copyable code snippets, conceptual overviews, and additional CSS lessons and tips for further customizing the project website.
A demonstration website to show participants what they will build by the end of the workshop.

This workshop kit page is intended to help instructors prepare for the workshop and provide a starting point for students. Instructors should point students to this page so they can have access to the slides (which contain useful links), the supplementary tutorial series, and the demonstration website.

If desired, students can prepare for the workshop by reading the introduction below and making sure that they have the prerequisites ready before the workshop starts.

Participants who wish to learn how they can publish their site for free on DigitalOcean can visit our tutorial How To Deploy a Static Website to the Cloud With DigitalOcean App Platform.

Introduction

If you are interested in learning how to build and design websites, Hyper Text Markup Language (HTML) is a great place to start. This project-based tutorial series will introduce you to HTML and its methods by building a personal website using our demonstration site (below) as a model. Once you learn the fundamentals, you will know how change the website’s design and add personalized content. No prior coding experience is necessary to follow along the tutorials in this series.

This gif illustrate a scroll through our demonstration site

HTML is the standard markup language used to display documents in a web browser. First developed by Tim Berners Lee in 1990 while working at the European Organization for Nuclear Research (CERN), HTML was one of the key innovative technologies used to publish the world’s first website on August 6, 1991. Thanks to a restoration project by CERN, you can now revisit the original website. Since that time, HTML has been significantly updated and expanded but its basic purpose to format and structure web pages remains the same.

Today, HTML is one of many tools used to build the web. Knowing how to write HTML will provide a strong foundation for your career as a web designer and prepare you to learn additional front-end web development skills like CSS and JavaScript.

In this workshop, you’ll learn how to create and customize a website using common HTML tags and techniques. After finishing workshop, you’ll have a site ready to deploy to the cloud.

Prerequisites

A code editor like Visual Studio Code or Atom. For this tutorial series, we will be using Visual Studio Code as our default code editor but you may use any code editor you like. Certain instructions may need to be slightly modified if you use a different editor.
A web browser like Firefox or Chrome. We will be using Firefox as our default browser but you may use any browser you like. Certain instructions may need to be slightly modified if you use a different web browser.
Two different profile photos, images, or avatars for personalizing your site (optional).

Once you have your prerequisites ready, you will be ready to begin the workshop. Follow along with the speaker slides and the online tutorial series for copyable code snippets, conceptual overviews, and additional HTML lessons and tips for further customizing your project website.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors