如何使用 CSS 构建网站:DigitalOcean Workshop Kit

<美元 > [注] [标签**" 如何用CSS讲习班工具包建立网站 "** ] 这个讲习班工具箱旨在帮助一名教员通过从开始到完成的一个CSS网站的重新创建和个性化步骤来引导听众。 本资料袋中的材料可在两届90分钟会议或一届3小时会议中提供,尽管有些小组可能需要较少的时间。 与会者最后将了解CSS和准备部署到云层的个人网站.

如果参与者不熟悉HTML,他们可以在开始这个研讨会之前跟随我们的系列(How To Build A Website With HTML)(https://www.digitalocean.com/community/tutorial_series/how-to-build-a-website-with-html)。

此研讨会套件的目的是为演讲者提供一套完整的资源,以举办关于使用CSS构建网站的研讨会。

此研讨会套件页面旨在帮助教师为研讨会做好准备,并为学生提供一个起点。教员应该将学生指向此页面,以便他们可以访问幻灯片(含有有用的链接),补充教程系列和演示网站。

如果需要,学生可以通过阅读下面的介绍来准备研讨会,并确保他们在研讨会开始之前已经准备好了。

想要了解如何在DigitalOcean上免费发布他们的网站的参与者可以访问我们的教程 如何使用DigitalOcean应用平台将静态网站部署到云

介绍

这个基于项目的教程系列将向您介绍Cascading Style Sheets(CSS),一种用于控制网站的呈现的样式表语言,通过使用我们的示范网站(http://css.sammy-codes.com/)作为模型来构建个人网站。

Gif of CSS demonstration site

除了HTML和JavaScript之外,CSS是WWW的核心技术之一,如果你对HTML有了解,并且想培养你的前端开发技能,那么学习CSS就是一个很好的下一步。

本教程系列的上半部分将通过实践练习介绍CSS,教程系列的下半部分将提供重建演示网站的步骤. 如果您想立即开始构建演示网站,您可以从教程开始(How To Set Up Your CSS and HTML Website Project)(https://andsky.com/tech/tutorials/how-to-set-up-your-css-and-html-website-project)并从那里开始。

到本 CSS 教程系列结束时,您将有文件准备部署到云中,以及如何继续使用 HTML 和 CSS 来修改网站设计的理解,您还将有基础学习额外的前端 Web 开发技能(如 JavaScript)和框架(如 Tailwind)。

前提条件

  • 像[Visual Studio Code (https://code.visualstudio.com/download)或Atom这样的代码编辑器. 这个系列将使用Visual Studio代码作为我们的默认代码编辑器,但您可以使用您喜欢的任何代码编辑器. 如果使用不同的编辑器,某些指令可能需要稍作修改.
  • FirefoxChrome这样的网页浏览器. 此教程系列将使用 Firefox 作为默认浏览器, 但您可以使用您喜欢的任何浏览器 。 如果使用不同的网页浏览器,某些指令可能需要稍作修改.
  • 联合国 两张不同的剖面照片,图像,或者用于您网站个性化的相片(可选).
  • 熟悉HTML。 如果您不熟悉 HTML 或想要复习, 您可以在此系列开始前遵循我们系列的前十个教程 。 .

一旦你的前提准备好了,你将准备开始研讨会. 跟随 扬声器幻灯片在线教程系列以获取可复制的代码片段,概念概述,以及额外的HTML教程和提示,以进一步定制您的项目网站。

Published At
Categories with 技术
comments powered by Disqus