One place for hosting & domains

      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.

      Introduction

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

      Prerequisites

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



      Source link

      Hacktoberfest Workshop Kit: How to Submit Your First Pull Request on Github


      How To Submit Your First Pull Request on GitHub Workshop Kit Materials

      This workshop kit is designed to help an instructor guide an audience without a background in version control or contributing to open source projects through the steps of submitting a pull request from start to finish in roughly thirty minutes. Attendees will finish the workshop with an understanding of version control, open source, Git, and GitHub.

      No prior coding experience is assumed on the part of the audience. Instructors without experience in open source, Git, or GitHub 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 about version control and contributing to open source projects. It includes:

      • Slides and speaker notes that lead participants through setting up their website project, hands-on exercises, and conceptual explanations.
      • A video with a live coding walkthrough of submitting a pull request, tips, and conceptual information about version control and contributing to open source projects.
      • A demonstration repo to allow participants to contribute to an open source project as they follow along in the workshop.

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

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

      If you are interested in participating in this year’s Hacktoberfest, this workshop is a great place to start! This project-based workshop will introduce you to open source, version control, Git, and GitHub using the Cloud Haiku repository as a model. Once you learn the fundamentals, you will know how to contribute to open source projects and submit a pull request on GitHub. No prior coding experience is necessary to follow along in the workshop.

      When software developers work on a project together, oftentimes they’ll need to work on the same code base. While they’re working, each developer needs to know about what changes the others made to the code, so as not to duplicate work or write code over what has already been done. Git, a version control system used to manage developer projects of all sizes, was created in 2005 by Linus Torvalds, the creator of Linux, to help developers contribute to code and share code revisions in a way that was fast, efficient, and inexpensive. Git creates code repositories to help developers edit, share, and publish code for all. GitHub is a cloud-based Git repository hosting service that allows developers to take code that they’ve written on their local machines and share it with the world.

      With Git and GitHub, developers from all over the world collaborate on all sorts of projects — many of the websites you visit regularly are maintained using GitHub. Knowing how to use Git and GitHub, and learning how to contribute to open source projects will provide new developers with a strong start in gaining the skills they need to join the software engineering community at large.

      In this workshop, we’ll introduce you to Git and GitHub, the version control system that Hacktoberfest uses to track your progress, and the repository hosting service that shares projects to collaborate on. By the end of this tutorial, you’ll be ready to submit your first pull request and will be well on your way to participating in Hacktoberfest!

      To participate as a workshop leader or learner, you will need the following:

      • A code editor. In this workshop, we’ll be using Visual Studio Code, which you can download for free for Mac, Windows, or Linux.
      • A web browser. In this workshop, we’ll be using Google Chrome as our default browser, which you can also download for free for Mac, Windows, or Linux.
      • A GitHub account. In this workshop, we’ll make a contribution to an open source repo on GitHub. You can sign up for a free account using your default browser.

      Once you have your prerequisites ready, you will be ready to begin the workshop. Refer to the speaker slides for helpful links after the workshop or watch the How to Submit Your First Pull Request video on the Hacktoberfest resources page to review.



      Source link

      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. Attendees will finish the workshop with an understanding of HTML and a personal website ready to deploy to the cloud.

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

      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.



      Source link