通过这些分步教程学习HTML和CSS

当您想尝试使用代码时,可以尝试的教程,视频和在线课程的数量没有限制。但是有时候,学习某些东西的最好方法是亲自尝试一下。 Web开发也不例外。

如果您对HTML,CSS和JavaScript感到好奇,或者认为您可能有一个学习如何从头开始创建网站的诀窍,那么 >分步教程

下面的教程列表将带您逐步了解HTML和CSS的基础知识,甚至向您介绍复杂的世界。 JavaScript-至少对于初学者而言。但是他们不会做的就是为您提供开箱即用的开发者生活的准备。这些服务中的大多数只是简单的开始。

要开始专业地开发网站,不仅需要花费更多的时间。这些工具(大多数都是免费的)为您提供了 Web开发的基本组成部分,并使您可以更轻松地研究更复杂的课程。

联大Dash

大会上的人们有一个免费的工具,可以教您HTML,CSS和JavaScript的基础知识,它是适合初学者的理想场所。通过一系列五个项目,您将学习术语和基本编码技能,使您可以构建类似于about.me页面的网站,如何构建响应式博客和餐厅网站。<

Dash教程不仅学习如何创建简单的网站,还可以利用HTML,CSS和JavaScript的功能来使用形状和线条甚至是Mad Libs游戏来创建机器人。

Dash教程以合理的步伐前进,使您一次完成几步代码。与任何教程一样,我建议您在工作时做笔记。这将帮助您记住正在学习的各种工具,并且通过“大会"教程完成一个阶段后,似乎没有办法重复该过程。

< strong>结论:使用Dash,您可以掌握建立基本现代网站所需的全部知识-从导航到响应式设计。甚至还向您介绍了如何创建自定义Tumblr主题的基础知识。也就是说,在Dash上总共只有四节课。虽然您可以采用所学的概念并尝试以不同的方式应用它们,但是您需要使用此列表中包含的其他课程来补充您的知识。

Codecademy

Codecademy有比Dash长很多,并且经常为其产品增加新的经验。通过在Dash上可以找到的循序渐进的全方位课程,Codecademy进一步向用户提供了使用HTML和CSS创建网站的一般概述,还提供了有关各种语言的深入教程,HTML,CSS和JavaScript。

与其他服务一样,Codecademy还向您展示了如何创建导航菜单,添加背景图像,创建图像库甚至是注册页面。 (要向注册页面添加功能,请务必阅读Ruby on Rails教程。)

关于jQuery,还有专门的课程,jQuery是使JavaScript易于学习的一种关键语言。如果您对后端开发感到好奇,那么还会有针对Ruby,Python,PHP等的深入课程。

除了学习如何设计网站以及深入编程的复杂性之外,语言,您还可以使用Codecademy获取有关如何创建Web应用以及如何向网站添加注册,登录和注销功能的基础知识。

结论:像Dash一样,Codecademy的交互性是无价的。能够看到每个步骤如何在您的网站中实现是令人鼓舞的,并且该设置还使您很容易发现错误。如果您是一个完整的初学者,Codecademy是使您的脚趾湿透并决定编码和网页设计是否适合您的理想之地。有了这些经验,您就可以将这些知识带到付费课程或班级上。

Tuts +

Tutsplus.com是一个网站,其中包含各种免费的和免费的教程。主题,包括来自移动设备的一切。虽然并非网站上教授的所有课程都遵循循序渐进的模型,但也有一些采用这种方法并引导用户轻松进行Web开发的方法。

一个特别有用的教程引导您完成设计和编码网站的步骤。该教程的创建时间可以追溯至2009年,因此设计美学可能不会吸引您,但是那意味着,该教程教会了您设计网站所需的技能,然后可以将这些技能应用于更新的设计中。本教程值得一提的另一个警告是它需要使用Adobe Photoshop。如果您无权使用该软件,则始终可以选择每月50美元的费用选择Adobe Creative Cloud。

该教程将指导您设计一个基本的两栏式网站,其中包括页眉和页脚。该网站包括内容,导航栏,社交媒体按钮等。在Photoshop中设计了网站之后,您可以切换到代码编辑器,本教程将引导您完成将设计转换为HTML页面所需的代码。本教程将需要一些HTML的基础知识,因此,建议您在阅读完前几本General Assembly教程后再尝试本教程。

如果您想制作一个更精致的网站,请查看另一个有关如何从头开始设计漂亮网站的Tuts +教程。另一个PSD转HTMl教程通过提供HTML,CSS和图像文件,使生活变得更加轻松。关于Tuts +的其他教程将带您逐步了解如何创建Tumblr照片日记主题-尽管这是一个简单的Photoshop设计,但要减去代码。

Conclusion: Compared to Codecademy and Dash, the Tuts+ tutorials take a little bit more effort since you have to walk yourself through the steps. With the other two sites, there is a lot more ‘hand holding’ so to speak. As you’re walked through each step, it is often easier to figure out what mistake you might have made. It also requires that you use your own software, whereas Dash and Codecademy have built-in systems. That said, with the variety of tutorials, you’re bound to find a set of lessons that cater exactly to what you want to learn.

学习使用Shaye Howe进行编码

通过一系列12堂课程,Shaye Howe在分解HTML基础知识方面做得非常出色,向您介绍了术语,以及如何使用HTML和CSS的各种元素。各种课程包括了解HTML,CSS,理解盒子模型,定位内容,字体等等。

在本教程中应用这些课程时,网站没有提供一种方法来快速了解HTML和CSS的效果。为了解决这个问题,您可以使用在线工具,该工具将提供与Codecademy和Dash相同的功能。

查看CSS / HTML / JavaScript沙箱(如CSSDeck或LiveWeave),您可以输入HTML,CSS和JavaScript,并查看最终结果。从技术上讲,如果您喜欢Dash和Codecademy提供的设置,还可以使用HTML,CSS和JavaScript编辑器。

在逐步解释时,该站点还提供了以下示例代码供您尝试。每节课的末尾都有一个动手练习,使您可以应用所学到的知识。

在完成12课后,您可以切换到高级HTML和CSS课程,其中包括响应式设计,jQuery等。

结论:本教程对此处列出的其他建议采用了稍有不同的方法。有了更深入的解释,您将比在应用所学知识上花费更多的时间。虽然这听起来有些无聊,但是这里有一些有价值的课程可以提供背景信息,并可以更好地理解这些语言的运行方式。

您的看法是什么?

现在是时候来听听您。您是否会推荐任何在线Web开发教程?在尝试这些在线课程之后,您认为下一步是什么?在评论中让我们知道。

图片来源:hackNY.org

标签: 教育技术 HTML HTML5 网页设计