Meetup Kit

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

Published on October 20, 2020

Senior Manager, DevEd

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

How To Build a Website With CSS Workshop Kit Materials

This workshop kit is designed to help an instructor guide an audience through the steps of recreating and personalizing a CSS website from start to finish. The material in this kit can be covered in two ninety-minute sessions or in one three-hour session, though some groups may need less time. Participants will finish with an understanding of CSS 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 our series How To Build a Website With HTML before starting this workshop.

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 CSS. 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.


This project-based tutorial series will introduce you to Cascading Style Sheets (CSS), a stylesheet language used to control the presentation of websites, by building a personal website using our demonstration site as a model. Though our demonstration site features Sammy the Shark, you can switch out Sammy’s information with your own if you wish to personalize your site.

Gif of CSS demonstration site

Alongside HTML and JavaScript, CSS is one of the core technologies of the World Wide Web. If you have some understanding of HTML and are looking to grow your front-end development skills, learning CSS is a great next step.

The first half of this tutorial series will introduce CSS through hands-on exercises and the second half of the tutorial series will provide steps for recreating the demonstration website. If you want to start building the demonstration website right away, you can start with the tutorial How To Set Up Your CSS and HTML Website Project and proceed from there.

By the end of this CSS tutorial series, you will have files ready for deploying a website to the cloud, as well as an understanding of how to continue modifying the site’s design with HTML and CSS. You will also have a foundation for learning additional front-end web development skills (such as JavaScript) and frameworks (like Tailwind).


  • A code editor like Visual Studio Code or Atom. This series will use 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. This tutorial series will use 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).

  • Familiarity with HTML. If you aren’t familiar with HTML or would like a refresher, you can follow the first ten tutorials of our series How To Build a Website With HTML before starting this series.

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 us

About the authors
Default avatar

Senior Manager, DevEd

Open source advocate and lover of education, culture, and community.

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel