frontend-developer-resources - 免费资源开始成为前端开发人员或扩展您的知识

Created at: 2021-02-06 19:39:01
Language:
License: MIT

旗帜

🚀前端开发人员🚀的路径

帮助你成为前端开发人员或学习新事物的资源列表

你好👋,我是MrCodeDev,我想帮助你成为前端开发人员。

我为那些开始成为前端开发人员的人分享资源,或者加强从未伤害过的知识。所有这些资源都是免费的,因此每个人都可以在没有任何障碍(例如经济障碍)的情况下开始。你可以随时与该领域的专业人士一起举办不同的课程,研讨会甚至训练营。

它分为不同的部分,如果你发现一个不在这里的资源,你觉得它很有趣,你可以做一个PR来继续扩展资源目录,或者只是在Twitter上找我作为MrCodeDev并告诉我添加它。

你可以在此处找到的资源将以英语和西班牙语提供。如果你对莎士比亚的语言有疑问,可以翻译该页面(默认情况下,谷歌浏览器有一个)。开始阅读英文文档非常重要,你可以理解它,这在我们的日常生活中非常普遍。另外,如果你正在寻找任何错误或其他任何内容,最佳做法是查找英语中的任何内容,因为我们总能找到更多答案。

请记住:在开发人员的这条道路上,你始终在不断学习,我们将永远必须学习新技术,这是一个非常不断变化的世界。

我还想评论一下(从我的 Angular 来看),从0到专家的课程在15分钟内,都是浪费时间。我们可以学到某些东西,但我们不会轻易掌握这项技术。除了面对错误或障碍之外,我们还必须多次练习和使用它。

你可以看到我发表的一个关于前端开发人员之路的演讲:https://youtu.be/Xu6C9MqJ2-A。演讲的幻灯片在这里,如果你想看看它:https://docs.google.com/presentation/d/1TSKzqBC_Xnp2BgK5HeILy-PQRSTUHT5S44owUzxPSgk

我要感谢所有资源来源制作所有内容,以便每个人,无论他们的经济状况如何,都可以开始采取措施使用JavaScript进行编程,以及所有为我提供资源的人。

在这里你有一个图例,要知道每个资源是什么,总会出现一只手,指出它是什么👉类型的资源。

如果你想帮助我“邀请我喝咖啡☕️”,我会非常感激。你将帮助我创建更多内容,并在制作任何内容时进行改进。你可以通过以下链接执行此操作:

可选文字

👉☕️ https://ko-fi.com/mrcodedev

表情符号 这是什么意思?
我们必须在之前知道的知识
🖊 作为文章或文档的内容
📹 视频内容
📖
🗣 演讲或会议
📚 课程或教程
📦 存储 库
🕹 现场练习
📑 笔记或备忘单
🏳 西班牙语语言
🏴 英语

如果你想通过贡献来支持,我们始终值得赞赏,就像你始终可以为本文档中收集的所有来源做出贡献一样。


指数


📓基本的计算机技能


🧠 先验知识


👉 什么是计算?

让我们从主要的事情开始,这个计算机的事情是如何开始的。

🔗 🏳网址https://www.wikiwand.com/es/Inform%C3%A1tica


👉 什么是互联网,它是如何诞生的?

互联网的起源,它是如何诞生的,以及它是如何运作的。

🔗 🏳网址https://www.wikiwand.com/es/Internet


👉 互联网的真正起源

有趣的文章,他告诉我们互联网诞生背后的真实故事。

🔗 🏳网址https://www.microsiervos.com/archivo/internet/el-verdadero-origen-de-internet.html


👉 什么是 HTTP?

HTTP这个词说了很多,但它的真正含义是什么?

🔗 🏳网址https://www.wikiwand.com/es/Protocolo_de_transferencia_de_hipertexto


👉 HTTP 状态代码

HTTP 响应状态代码指示特定 HTTP 请求是否已成功完成。

🔗 🏳网址https://es.wikipedia.org/wiki/Anexo:C%C3%B3digos_de_estado_HTTP

🔗 🏳网址https://developer.mozilla.org/es/docs/Web/HTTP/Status


👉 浏览器的工作原理

浏览器的工作原理:当今 Web 浏览器的背后原因

🔗 🏳网址https://www.html5rocks.com/es/tutorials/internals/howbrowserswork/


👉 什么是域名系统?

我们已经规范化了域名,但并不是真正的DNS是什么,在这里我们看到一个解释。

🔗 🏳网址http://wikiwand.com/es/Sistema_de_nombres_de_dominio


👉 什么是 IP 地址?

我们总是谈论IP,但如果我们真的想知道它们如何符合,我们有这篇维基百科文章,其中有很好的解释。

🔗 🏳网址https://www.wikiwand.com/es/Direcci%C3%B3n_IP


👉 什么是托管?

实际上,当我们有一个应用程序或网站时,我们需要将其托管在一个地方,在这里托管会进行干预。

🔗 🏳网址https://www.wikiwand.com/es/Alojamiento_web


👉 什么是云?

什么是时髦的范式。

🔗 🏳网址https://www.wikiwand.com/es/Computaci%C3%B3n_en_la_nube


👉 什么是 API?

对于我们的开发来说,最安全的事情是我们必须使用API,我们必须真正知道它们是什么。

🔗 🏳网址https://www.wrike.com/es/blog/que-es-una-api-necesitas-saber/


👉 什么是 IDE?

我们每天都在使用我们最喜欢的IDE,但也许你听到这个词,它听起来像中文,这里有一个关于IDE到底是什么的简要说明。

🔗 🏳网址https://platzi.com/blog/que-son-los-ides-y-los-editores-de-texto/


返回索引



📕断续器


🧠 先验知识


👉 什么是 HTML?

我们以前听说过HTML这个词,但我们并不真正知道它是什么,在这里你可以看到它的含义。

🔗 🏳网址https://developer.mozilla.org/es/docs/Web/HTML

🔗 🏴网址https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started


👉 什么是 DOM?

我们听说过DOM这个词,但我们并不真正知道它是什么,在这里你可以看到它的含义。

🔗 🏳网址https://desarrolloweb.com/articulos/que-es-el-dom.html


👉 什么是W3C,它有什么作用?

有一个联盟,确保我们所做的一切都有一个标准。

🔗 🏳网址https://www.wikiwand.com/es/World_Wide_Web_Consortium


👉 什么是HTML5?

如果你不知道它真的是HTML5,这里有一篇文章,他们向你解释它。

🔗 🏳网址https://www.wikiwand.com/es/HTML5


返回索引



🛹 内容


👉🖊📚 网络入门

我们准备用HTML编写网页的第一步。

🔗 🏴网址https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started


👉🖊📚 从 HTML 的基础知识开始

HTML 简介。

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML/iniciar


👉🖊📚 HTML 标题中的元数据

这是我们在网页上看不到的元素,但是考虑它们非常重要。

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML/Metados_en


👉🖊📚 文本

在 HTML 中输入文本的基础知识。

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML/texto


👉🖊📚 HTML 中的超链接

如何在HTML中输入链接并遵循标准。

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks


👉🖊📚 HTML 格式的高级文本

在上一章中,我们已经看到了如何引入文本,但现在以更高级的方式。

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML/Advanced_text_formatting


👉🖊📚 HTML 文档的基本结构

我们已经看到了主要的HTML标签,但是我们需要看到我们网站结构的其他标签。

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML/estructura


👉🖊📚 调试 HTML 文档

我们已经制作了我们网站的结构,我们知道我们可以使用哪些标签。现在是时候知道如何调试我们的HTML代码了。

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML/Debugging_HTML


👉🖊📚 构建 HTML 内容页

在什么结构中,我们可以划分页面。

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML/Estructuraci%C3%B3n_de_una_p%C3%A1gina_de_contenido


👉🖊📚 HTML5 表单

最常规的任务之一就是制作表格。

🔗 🏳网址https://developer.mozilla.org/es/docs/HTML/HTML5/Forms_in_HTML5


👉🖊📚 HTML5 中的响应式图像

如何调整 HTML 中的图像,使其在所有设备上都具有良好的外观。

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images


👉📚🕹 基本 HTML 和 HTML5 简介

你将根据实践学习HTML和HTML5基础知识的课程。

🔗 🏴网址https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/


👉📚 W3Schools HTML Tutorial

HTML 是网页的标准标记语言。使用HTML,你可以创建自己的网站。HTML易于学习,你可以按照实用教程进行练习。

🔗 🏴网址https://www.w3schools.com/html/html_intro.asp


👉🎥 关于如何构建网页的教程

在这个初学者课程中学习HTML5和Web开发的基础知识。

🔗 🏴网址https://www.youtube.com/watch?v=pQN-pnXPaVg


👉🖊 列出 html 元素

包含示例和练习的 HTML 元素列表。

🔗 🏴网址https://www.w3schools.com/html/default.asp


返回索引



♿️可及性


🛹 内容


👉🖊 a11y项目

社区网站“A11y项目”,其中有关于可访问性的非常有趣的文章。

🔗 🏴网址https://www.a11ywithlindsey.com/


👉🖊 博客 a11 与林赛

Lindsey的博客致力于整个可访问性问题,总是有非常非常有趣的文章。

🔗 🏴网址https://www.a11ywithlindsey.com/


👉🖊 德克大学无障碍列表

德克大学有关于可访问性的课程,在这里你有一个列表,关于我们在以可访问的方式制作我们的应用程序或网络时必须考虑的事项。

🔗 🏴网址https://dequeuniversity.com/checklists/web/


👉🖊📑 辅助功能说明汇编

感谢Alena Nikolaeva,我们有一些关于可访问性的笔记,我们可以在日常使用。

🔗 🏴网址https://www.notion.so/Quick-wins-and-easy-checks-7efac3ef91c24e5fbfd184dc3e25d8e8


👉🖊 时事通讯 a11

时事通讯,以接收有关可访问性的所有新闻。

🔗 🏴网址https://a11yweekly.com/


👉🖊 测试 Web 可访问性

Web 辅助功能不仅与键盘导航、颜色对比度或屏幕阅读器有关。可访问性是网站质量的完美指标。当一个网站可以访问时,它通常意味着它具有包容性,可用性,为每个人提供出色的用户体验,并且速度也很快。

🔗 🏳网址https://octuweb.com/testeando-accesibilidad-web/


👉🖊 阿德里安·博洛尼奥的博客

Adrián的博客,他通常上传有关Web可访问性的文章

🔗 🏳网址https://www.adrianbolonio.com/es/blog


返回索引



📘断续器


🧠 先验知识


👉 什么是 CSS 和 CSS3?

定义CSS是什么,看看我们目前处于版本3。

🔗 🏳网址https://www.wikiwand.com/es/Hoja_de_estilos_en_cascada


返回索引



🛹 内容


👉🖊📚 什么是 CSS?

它解决了什么是CSS以及我们需要学习它什么要求的问题(主要是了解HTML)。

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/CSS/First_steps/Qu%C3%A9_es_CSS


👉🖊📚 CSS 简介

让我们开始在CSS中迈出第一步。

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/CSS


👉🖊📚 CSS是如何构建的

我们更深入地研究语言的结构。

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/CSS/First_steps/Como_se_estructura_CSS


👉🖊📚 CSS 的工作原理

我们已经知道语言是如何工作的,现在我们需要知道浏览器如何使用它。

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/CSS/First_steps/Como_funciona_CSS


👉🖊📚 将所学的一切付诸实践

在上面看了一下CSS语言之后,我们将所学到的东西付诸实践。

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/CSS/First_steps/Usa_tu_nuevo_conocimiento


👉🖊📚 CSS 媒体查询

目前,我们有许多设备,并且尺寸不同,你是否想过如何在所有这些设备中调整我们网站的设计?

🔗 🏳网址https://developer.mozilla.org/es/docs/CSS/Media_queries


👉🖊📚 媒体查询的类型

用于指定媒体查询的媒体类型

🔗 🏳网址https://developer.mozilla.org/es/docs/Web/CSS/@media


👉🖊📚 如何在代码中使用媒体查询

在CSS中,我们知道如何使用媒体查询,但是我们的JS代码呢?

🔗 🏳网址https://developer.mozilla.org/es/docs/Web/Guide/CSS/probando_media_queries


👉🖊 媒体查询的设备标准

我们可以作为进行媒体查询的参考的设备大小的列表。

🔗 🏴网址https://css-tricks.com/snippets/css/media-queries-for-standard-devices/


👉🖊📚 CSS 驱动器

我们在CSS中有不同的测量单位,在本文中,他用示例解释了它,你也可以用它来练习。

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS


👉📚 实用的基本 CSS

课程,我们可以学习基本的CSS和100%实用。

🔗 🏴网址https://www.freecodecamp.org/learn/responsive-web-design/basic-css/


👉📚🕹 🐸 Flexfrog (Flexbox)

Flexbox Froggy,一款游戏,你可以通过编写CSS代码来帮助Froggy和他的朋友。本页的目标是让你学习如何使用 Flexbox。

🔗 🏳网址https://flexboxfroggy.com/


👉📚🕹 🪴 网格花园 (CSS 网格)

网格花园,你将通过种植你的胡萝卜花园来学习CSS网格。本页的目标是让你学习如何使用 CSS 网格。

🔗 🏳网址https://cssgridgarden.com/#es


👉📚🕹 🍽 CSS Diner

通过CSS Diner,我们将学习如何通过迷你游戏使用CSS选择器。

🔗 🏴网址https://flukeout.github.io/


👉🖊📚 在 CSS 中创建动画

在CSS中,我们可以做很多事情,我们甚至可以制作动画,在这里你有一个资源,能够用文本,图像等制作动画。

🔗 🏳网址https://developer.mozilla.org/es/docs/Web/CSS/CSS_Animations/Usando_animaciones_CSS


👉🖊📚 CSS 动画摘要

使用 CSS 的动画摘要。

🔗 🏳网址https://developer.mozilla.org/es/docs/Web/CSS/animation


👉🖊 使用 CSS 动画的性能

讨论执行 CSS 动画时的性能的文章。

🔗 🏴网址https://www.html5rocks.com/en/tutorials/speed/rendering/

🔗 🏴网址https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/


👉🖊 工作中的网页动画

有趣的文章,其中使用CSS的Web动画专家告诉我们,制作动画时必须考虑哪些因素

🔗 🏴网址https://alistapart.com/article/web-animation-at-work/


👉🖊 不使用闪光灯的动画**

另一篇有趣的文章,他一步一步地解释了我们在制作动画时应该寻找什么。

🔗 🏴网址https://24ways.org/2012/flashless-animation/


👉🖊 负责任地鼓励的五种方式

这次这篇文章告诉我们,我们必须做些什么才能(正确地)拥有一个负责任的动画。

🔗 🏴网址https://24ways.org/2014/five-ways-to-animate-responsibly/


👉🖊 使用 CSS 制作动画时的技巧

使用CSS制作动画时我们可以执行的技巧。

🔗 🏴网址https://css-tricks.com/css-animation-tricks/


👉🖊 中级 CSS 入门

优秀的文章,他解释了如何用汽车制作动画。

🔗 🏴网址https://css-tricks.com/starting-css-animations-mid-way/


👉📚 W3Schools CSS 动画

关于如何在W3Schools CSS中制作动画的部分。

🔗 🏴网址https://www.w3schools.com/css/css3_animations.asp


👉🖊 仅使用 CSS 创建 3D 立方体

关于如何使用CSS和JQuery创建3D立方体的精彩文章。

🔗 🏳网址https://devcode.la/tutoriales/crear-un-cubo-3d-con-css/


👉🖊 带 CSS 的 3D 立方体动画

创建立方体的3D动画,仅使用CSS。

🔗 🏳网址http://abarcarodriguez.com/blog/entendiendo-la-transformacion-3d-con-css3


👉🖊 学会用桶而不是盒子来思考

示例我们如何仅使用CSS制作3D对象,想想立方体,你将正确完成。

🔗 🏴网址https://css-tricks.com/css-in-3d-learning-to-think-in-cubes-instead-of-boxes/


👉🖊 20 个令人印象深刻的 3D CSS 转换示例

仅使用CSS的20个令人印象深刻的3D转换示例。

🔗 🏴网址https://www.creativebloq.com/css3/20-stunning-examples-css-3d-transforms-11112759


👉🖊 10 令人惊叹的 CSS 3D 效果

使用 CSS 的 3D 效果的更多示例。很多时候,我们可以看到例子,并从它们的制作方式中学习。

🔗 🏴网址https://redstapler.co/10-stunning-css-3d-effect-must-see/


👉🖊 从 2D 到 3D 的动画和转换

我们如何将2D的CSS传递到3D?在本文中,我们可以看到它是如何完成的。

🔗 🏳网址https://picodotdev.github.io/blog-bitix/2020/04/animaciones-y-transformaciones-2d-y-3d-con-css/


👉📚 关于 CSS W3C 动画的草稿

关于使用CSS制作动画的W3C规范的草案。

🔗 🏴网址https://drafts.csswg.org/css-animations-1/


👉📚 W3Schools CSS Tutorial

CSS是我们用来设计HTML文档的语言。CSS 描述了 HTML 元素的显示方式。本教程将教你从基础到高级的CSS。

🔗 🏴网址https://www.w3schools.com/css/css_intro.asp


👉📑 基本/中级 CSS 注释

Majo Ledesma制作的CSS笔记,非常好,风格独特。

🔗 🏳网址https://losapuntesdemajo.now.sh/


👉🖊 避免使用媒体查询

非常有趣的文章,他们考虑使用最少的媒体查询

🔗 🏳网址https://goiblas.com/evitar-utilizar-css-media-queries/


👉📦 视网膜显示屏和驱动器

让我们回顾一下高像素密度的屏幕以及何时使用某些单位或其他单位。由独眼男人制作。

🔗 🏳网址https://github.com/spacenomads/pantallas-retina-y-unidades


👉🎥🗣 CSS 网格布局研讨会

Diana Aceves的研讨会,这是我们领域的参考,她教我们如何使用CSS网格布局

🔗 🏳网址https://youtu.be/AxVXpS6PyRE


👉🎥🗣 摇滚 N'Grid

Diana Aceves举办的另一个研讨会,使用CSS网格布局重新创建插图

🔗 🏳网址https://youtu.be/p7oXrr9yjXY


👉🎥🗣 弹性盒车间

Diana Aceves的另一个研讨会,向我们介绍了Flexbox的使用。

🔗 🏳网址https://youtu.be/job5SOuS7Ko


👉🖊📑 弹性盒指南

Flexbox具有的所有属性的指南,以防你在任何时候不记得每个属性做了什么,你可以立即将其可视化

🔗 🏴网址https://css-tricks.com/snippets/css/a-guide-to-flexbox/


👉🖊📑 CSS 网格指南

CSS Grid具有的所有属性的指南,以防你在任何时候不记得每个属性做了什么,你可以在一瞬间将其可视化

🔗 🏴网址https://css-tricks.com/snippets/css/complete-guide-grid/


👉🖊📚 CSS 元素列表

CSS元素列表,包括示例,甚至带有练习。

🔗 🏴网址https://www.w3schools.com/css/default.asp


返回索引



📒JAVASCRIPT


🧠 先验知识


👉 什么是JavaScript和一点历史

我们开始用JavaScript介绍自己,知道它是什么以及它是如何开始的。

🔗 🏳网址https://www.wikiwand.com/es/JavaScript


👉 JAVA和JavaScript一样吗?

许多人可能会混淆这两个术语,但它们是两种完全不同的语言。

🔗 🏳网址https://desarrolloweb.com/articulos/492.php


👉 什么是Vanilla JS?

也许是 Vanilla JS,我预计它不是冰淇淋。在本文中,他们解释了它是什么。

🔗 🏳网址https://platzi.com/tutoriales/1339-fundamentos-javascript/1487-que-es-vanilla-js-o-javascript-puro/


👉 ECMAScript

我们将经常听到 ECMAScript 或 ESX 这个词,因为它确实是一种语言规范。.

🔗 🏳网址https://www.wikiwand.com/es/ECMAScript 🔗 🏳网址https://desarrolloweb.com/articulos/494.php


👉 ECMAScript 更改介绍

对每个版本的 ECMAScript 所做的更改的列表。你必须小心,因为我们放在ES后面的数字与年份不一致。从2016年开始,它成为标准放置年份,所以我们不会把事情搞得一团糟。

🔗 🏴ES5(2009)https://www.wikiwand.com/es/ECMAScript

🔗 🏴ES6(2015)https://www.w3schools.com/js/js_es6.asp

🔗 🏴ES2016https://www.w3schools.com/js/js_2016.asp

🔗 🏴ES2017https://www.w3schools.com/js/js_2017.asp

🔗 🏴ES2018https://www.w3schools.com/js/js_2018.asp

🔗 🏴ES2019http://blog.enriqueoriol.com/2020/04/javascript-es2019-novedades.html

🔗 🏴ES2020https://www.freecodecamp.org/news/javascript-new-features-es2020/

🔗 🏴ES2020https://cosasdigitales.com/articulos-diseno-web/es2021-es12-novedades-de-la-ultima-version-de-javascript/


👉 什么是函数式编程?

很多时候,我们会听到函数式编程是什么,但我们不会知道它是什么意思。在这些文章中,我们可以了解它是什么。

🔗 🏳网址https://www.wikiwand.com/es/Programaci%C3%B3n_funcional

🔗 🏳网址https://domingogallardo.github.io/apuntes-lpp/teoria/tema02-programacion-funcional/tema02-programacion-funcional.html

🔗 🏳网址https://blog.softtek.com/es/programaci%C3%B3n-funcional-con-javascript-i#:~:text=La%20programaci%C3%B3n%20funcional%20es%20un,y%20no%20en%20c%C3%B3mo%20hacerlo

🔗 🏳网址https://janpierrsanchez.medium.com/introducci%C3%B3n-a-programaci%C3%B3n-funcional-con-javascript-9ef140319865

🔗 🏳网址https://softwarecrafters.io/javascript/introduccion-programacion-funcional-javascript


返回索引



🛹 内容


👉🖊📚 开始使用 JavaScript

从较高的水平查看JavaScript,因此你可以快速了解该语言。

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Qu%C3%A9_es_JavaScript


👉🖊📚 JavaScript Fundamentals

JavaScript是你应该用来向网站添加交互功能的编程语言。

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/JavaScript_basics


👉🖊📚 第一次接触 JavaScript

在理论实践之后,让我们开始编写代码。

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/A_first_splash


👉🖊📚 哪里出错了?

我们第一次接触JavaScript,但它给出了一个错误,发生了什么?我们能做些什么来使它发挥作用?

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/What_went_wrong


👉📹 JavaScript 中的基元数据类型

要知道如何深入使用JavaScript,我们必须知道我们拥有哪些类型的原始数据。与代码的厨房携手合作,我们将审查基元类型。

🔗 🏳网址https://www.youtube.com/watch?v=cC65D2q5f8I&ab_channel=LaCocinadelC%C3%B3digo


👉🖊📚 JS 中的变量

让我们来发现JavaScript中的变量以及有哪些类型。

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Variables


👉📹 var, let or const: 我应该使用哪一个?

为什么有让和康斯特?,与vr是不够的?的代码解释了我们应该如何使用每个代码。

🔗 🏳网址https://www.youtube.com/watch?v=bvkY9ey83yY&ab_channel=LaCocinadelC%C3%B3digo


👉📹 var vs let vs const:它们之间的差异

代码的厨房将教我们看到每个变量具有的7个特征(var,let和const)。我们将看到它们的差异,我们将知道我们必须在JavaScript中声明哪些变量。

🔗 🏳网址https://www.youtube.com/watch?v=ojrvxYcKeYg&ab_channel=LaCocinadelC%C3%B3digo


👉📹 JavaScript 中的范围

JavaScript 中的范围起初是相当容易同化的。代码的厨房将教我们它是什么以及它们如何影响我们的变量。

🔗 🏳网址https://www.youtube.com/watch?v=s-7C09ymzK8&ab_channel=LaCocinadelC%C3%B3digo


👉🖊📚 JS 中的操作和运算符

现在是时候用数字和运算符进行交易了。

🔗 🏴网址https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Math


👉🖊📚 JS 中的字符串

让我们玩一下链,看看我们如何连接各种变量。

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Strings


👉🖊📚 JS 中字符串的方法

我们已经知道如何连接字符串,因为在下一篇文章中,我们将使用方法来操作字符串。

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Useful_string_methods


👉🖊📚 JS 中的数组

我们现在继续使用数组,这是我们必须非常熟悉并知道如何很好地使用其方法的一件事。

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Arrays


👉📹 在 JavaScript 中映射、过滤和减少*

map,filter和reduce是数组在JavaScript中最常用的三种方法。代码的厨房为我们带来了另一个交付,我们将看到每个人的作用。

🔗 🏳网址https://www.youtube.com/watch?v=tP8JiVUiyDo&ab_channel=LaCocinadelC%C3%B3digo


👉🖊📚 荒谬的故事生成器

有了上面学到的一切,我们将创造一个荒谬故事的生成器。

🔗 🏴网址https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator


👉🖊📚 JS 中的条件语句

让我们看看更复杂的代码结构,现在轮到条件。

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/conditionals


👉🖊📚 JS 中的循环

一旦我们看到了条件,现在我们将看到循环,我们绝不能陷入无限循环!

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Bucle_codigo


👉🖊📚 JS 中的函数和方法

为了使你的代码可以重用,使用函数或方法,在本文中我们将看到如何使用它们。

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Functions


👉🖊📚 在JS中创建我们自己的函数

我们已经看到了函数或方法是如何产生的,为什么我们现在不自己创建一个呢?

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Construyendo_tu_propia_funcion


👉🖊📚 在 JS 中返回值的函数

我们已经创建了一个函数,但现在我们可以把它提升到一个新的水平,如果我们的函数向我们返回一些东西,你会怎么想?

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Return_values


👉🖊📚 JS 中的事件

事件是我们将永远使用的一件事,我们必须知道如何一起使用它们来控制它们。

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Eventos


👉🖊📚 在JS中创建我们的图像库

最后,我们将创建一个功能图像库。

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Galeria_de_imagenes


👉🖊📚 JS 中对象入门

我们需要看到最后一个结构,我们将在数组旁边使用很多,它们是对象。

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/JavaScript/Objects/Basics


👉🖊📚 JS 中的面向对象编程

JavaScript中的面向对象编程(OOP或OOP)有点奇怪,让我们看看JavaScript如何模拟类以及我们如何使用它们。

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/JavaScript/Objects/Object-oriented_JS


👉🖊📚 JS 中的原型对象

这可能是一个非常密集的话题,但如果你理解和控制它,你就掌握了所有的权力。

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/JavaScript/Objects/Object_prototypes


👉🖊📚 JS 中的继承

在原型之后,我们将看到什么是继承以及如何利用它来发挥我们的优势。

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/JavaScript/Objects/Inheritance


👉🖊📚 在 JS 中使用 JSON

这并不意味着你有一个名为JSON的同伴,它是我们经常使用的数据结构。在本文中,你将看到它是什么以及如何使用它。

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/JavaScript/Objects/JSON


👉🖊📚 JS 中的异步概念

除了上述所有内容之外,现在我们还将看到异步性,这在能够使用API或其他异步资源方面非常重要。我们必须很好地掌握异步性。

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/JavaScript/Asynchronous/Concepts


👉📦📑 异步 JS 域

这是一个参考表,其中包含前端军械库中异步 JavaScript 精通课程的摘要。我们有办法以正确的方式做出承诺。

🔗 🏴网址https://github.com/frontarm/async-javascript-cheatsheet


👉🖊📚 JS 中的异步性简介

一旦我们头脑中有了异步的概念,我们就会看到实际的案例。

🔗 🏴网址https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Introducing


👉🖊📚 JS 中的超时和间隔

让我们详细看看超时和间隔以及它们的使用。

🔗 🏴网址https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals


👉🖊📚 JS 中的承诺

每个异步代码都返回一个 promise,所以是时候看看它是一个 promise 了。

🔗 🏴网址https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Promises


👉🖊📚 JS 中的异步/等待

由于ES7中的这一介绍,我们可以以更简单的方式使用异步代码。

🔗 🏴网址https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await


👉🖊📚 在JS中选择正确的异步方法

并非所有内容都会被缝纫和唱歌,有时我们必须看到与其他浏览器的兼容性。

🔗 🏴网址https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach


👉🖊📚 JS 中的 API 简介

让我们从更高的层次看一下API,它们是什么,它们是如何工作的,如何在代码中使用它们,以及它们是如何构建的?

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/JavaScript/Client-side_web_APIs/Introducci%C3%B3n


👉🖊📚 使用 JS 操作文档

在编写网页和应用程序时,你要做的最常见的事情之一就是以某种方式操作文档的结构。

🔗 🏴网址https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents


👉🖊📚 从服务器获取数据

网页和应用程序中另一个非常常见的任务是从服务器获取单个数据元素来更新网页的各个部分,而无需加载整个新页面。

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data


👉🖊📚 第三方接口

到目前为止,我们介绍的 API 都内置于浏览器中,但并非所有 API 都内置于浏览器中。现在让我们看看如何使用第三方。

🔗 🏴网址https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs


👉🖊📚 绘制图表(可选)

浏览器有一些非常强大的图形编程工具,从可缩放矢量图形(SVG)语言到用于在HTML画布元素上绘图的API。

🔗 🏴网址https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics


👉🖊📚 视频和音频(可选)

HTML5 附带了用于在视频和音频文档中嵌入富媒体的元素。

🔗 🏴网址https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs


👉🖊📚 客户端存储

现代 Web 浏览器支持多种方式,使网页在用户允许的情况下将数据存储在用户的计算机上,然后在必要时检索它。

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage


👉🖊📚 网页表单

本指南由一系列文章组成,这些文章将帮助你掌握HTML表单。

它有不同的文章,如果你想掌握这一部分,你必须一个接一个地遵循它们。我没有把它们分开,否则我会在文件中占据很多。

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/HTML/Forms


👉🖊📚 如何创建自定义表单小部件

在许多情况下,可用的HTML表单小部件根本不够。如果要在某些小部件(如项目)上设置高级样式,或者要提供自定义行为,则别无选择,只能创建自己的小部件。

<select>

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/HTML/Forms/como_crear_widgets_de_formularios_personalizados


👉🖊📚 通过 JavaScript 发送表单

HTML 表单可以声明方式发送 HTTP 请求。但是表单也可以准备一个HTTP请求,通过JavaScript发送,例如,通过XMLHttpRequest。

🔗 🏴网址https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript


👉🖊📚 现代 JavaScript

课程包含2个部分,涵盖JavaScript作为编程语言和使用浏览器。还有一系列非常有趣的主题文章。

🔗 🏴网址https://javascript.info/


👉📖 JavaScript 获得灵感

Libro de Ulises Gascón是一本简单而有趣的编程书,向我们展示了如何从头开始用JavaScript编程。

🔗 🏳网址https://github.com/UlisesGascon/javascript-inspirate


👉📖 雄辩的 JavaScript

这是一本关于JavaScript,编程和数字奇迹的书。你可以免费在线阅读或获得袖珍副本。

🔗 🏴网址https://eloquentjavascript.net/


👉🖊📚 W3Schools JavaScript Tutorial

JavaScript是世界上最流行的编程语言。JavaScript是Web的编程语言。JavaScript很容易学习。本教程将教你从基础到高级的JavaScript。

🔗 🏴网址https://www.w3schools.com/js/js_intro.asp


👉📦🖊📑 ES6 人类版

回顾ES6中添加的功能,例如:let,const,arrow函数等。

🔗 🏳网址https://github.com/metagrover/ES6-for-humans/tree/spanish-version


👉📦🖊📹 每个JavaScript开发人员都应该知道的33个概念

创建此存储库的目的是帮助开发人员掌握他们在 JavaScript 中的概念。它不是一个要求,而是未来研究的指南。它基于Stephen Curtis撰写的一篇文章,你可以在此处阅读。

🔗 🏴网址https://github.com/adonismendozaperez/33-js-conceptos


👉📦🖊📑 现代 JavaScript

本文档是一个javascript备忘单,你可以在现代项目和大多数当代示例代码中经常找到它。

🔗 🏴网址https://github.com/mbeaudru/modern-js-cheatsheet


👉📑 基本 JavaScript 注释

Majo Ledesma做的基本JavaScript笔记,非常好,风格独特。

🔗 🏳网址https://losapuntesdemajo.now.sh/


👉📦🖊📑 JS 中的干净代码

软件工程原理,来自Robert C. Martin的《Clean Code》一书,改编自JavaScript。这不是一个风格指南。它是在JavaScript中生成可读,可重用和可重构软件的指南。

🔗 🏴网址https://github.com/ryanmcdermott/clean-code-javascript


👉📦🖊📑 编程原理和模式

每个程序员都受益于对编程原理和模式的理解。这个摘要是作者的参考,他把它放在Github上。你可能会发现它在设计、讨论或审阅期间很有用。请记住,它远未完成,并且经常必须在相互冲突的原则之间做出妥协。

🔗 🏴网址https://github.com/iluwatar/programming-principles


👉📦🖊📑📹📖🗣📚 awesome JavaScript

在JavaScript上收集西班牙语指南,文章,教程,视频,演讲,会议,播客,课程和书籍的链接。有些链接可能不起作用,或者内容可能不存在,但这里有很多有趣的事情。

🔗 🏳🏴网址https://github.com/sergiodxa/impresionante-javascript


👉📚🕹 在 Vanilla JS 中挑战 30 天的编程

在JavaScript上收集西班牙语指南,文章,教程,视频,演讲,会议,播客,课程和书籍的链接。有些链接可能不起作用,或者内容可能不存在,但这里有很多有趣的事情。

🔗 🏴网址https://github.com/wesbos/JavaScript30


👉🖊 JavaScript Garden

JavaScript Garden是关于JavaScript编程语言最奢侈部分的文档的不断增长的集合。它提供了避免常见错误和微妙错误以及性能问题和渎职的提示,这些问题和不当行为,非专家JavaScript程序员在语言深处的努力中可能会遇到这些问题。

🔗 🏴网址http://bonsaiden.github.io/JavaScript-Garden/


👉📖 学习 JavaScript

本书将教你编程和Javascript的基础知识。无论你是否是一个有经验的程序员,这本书都是针对所有想要学习JavaScript的人。

🔗 🏴网址https://gitbookio.gitbooks.io/javascript/content/


👉📦📖 你不懂 JavaScript

这是一系列深入研究JavaScript语言核心机制的书籍。该系列的第一版现已完成。此外,第一版的这些书籍现已售罄,无法再购买。它们只能在这里免费在线阅读。

🔗 🏴网址https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/README.md


👉🖊📑 方法列表和JS中的更多内容

方法列表和更多JS的东西,包括示例甚至练习。

🔗 🏴网址https://www.w3schools.com/js/default.asp


👉📦 JS 算法

用JavaScript制作的算法示例列表。你有排序,字符串,甚至线性代数。

🔗 🏴网址https://github.com/TheAlgorithms/Javascript


👉📦 JavaScript 中的算法和数据结构

存储库包含许多流行算法和数据结构的基于 JavaScript 的示例。

🔗 🏳网址https://github.com/trekhleb/javascript-algorithms/blob/master/README.es-ES.md


👉📦 学习 JavaScript

本书将教你编程和Javascript的基础知识。无论你是否是一个有经验的程序员,这本书都是针对所有想要学习JavaScript编程语言的人。

🔗 🏴网址https://github.com/GitbookIO/javascript


👉📦 JavaScript 算法

你可以执行的算法练习。作者说,有更有效的实现,这必须被视为教育目的。

🔗 🏴网址https://github.com/TheAlgorithms/Javascript


👉📦 高级 JavaScript 问题列表

这是一个很好的资源,因为他们提出了一个问题,下面你有答案。它可以派上用场进行技术面试,100%推荐。

🔗 🏳网址https://github.com/lydiahallie/javascript-questions/blob/master/es-ES/README-ES.md


👉📦 awesome JavaScript

收集JavaScript库,资源和非常有趣的东西。

🔗 🏴网址https://github.com/sorrycc/awesome-javascript


👉📦 awesome JavaScript

收集JavaScript库,资源和非常有趣的东西。

🔗 🏴网址https://github.com/sorrycc/awesome-javascript


👉📦 JavaScript 模式

资源,它们托管我们可以在 JavaScript 中使用的模式集合。

🔗 🏴网址https://github.com/shichuan/javascript-patterns


👉📦 JavaScript 中的计算机科学

用JavaScript编写的范式,算法和经典计算机科学方法的集合。

🔗 🏴网址https://github.com/humanwhocodes/computer-science-in-javascript

👉📦 JavaScript:最佳实践

完全免费的书,它承诺你写出强大,干净和易于维护的JavaScript,在应用程序架构,包管理,工具,快捷方式,回调,类,流程控制等方面有实用而清晰的课程。

🔗 🏴网址https://www.sitepoint.com/premium/books/javascript-best-practice/read/1?fromBlog=true&campaign=js-best-practice-reader


返回索引



🛂版本控制


🧠 先验知识


👉 版本控制

我们要问自己的第一个问题是,什么是版本控制,它的用途是什么?

🔗 🏳网址https://www.wikiwand.com/es/Control_de_versiones

🔗 🏳网址https://git-scm.com/book/es/v2/Inicio---Sobre-el-Control-de-Versiones-Acerca-del-Control-de-Versiones

🔗 🏴网址https://www.atlassian.com/es/git/tutorials/what-is-version-control


👉 吉特

什么是 git?.我们可以使用不同的存储库,例如:Github,GitLab,Bitbucket等。但是我们将始终使用git来使用我们最喜欢的版本控制。

🔗 🏳网址https://www.wikiwand.com/es/Git

🔗 🏳网址https://git-scm.com/book/es/v2/Inicio---Sobre-el-Control-de-Versiones-Fundamentos-de-Git


👉 什么是存储库?

在知道什么是版本控制和git之后,下一个问题是:什么是存储库?

🔗 🏳网址https://www.wikiwand.com/es/Repositorio\_(contenido_digital)


返回索引



🛹 内容


👉🖊📚 安装和使用 Git 的初学者指南

让我们通过这个基本且非常简洁的教程在git中迈出第一步。

🔗 🏳网址https://rogerdudler.github.io/git-guide/index.es.html


👉📚🕹 学习 git 分支

关于使用 Git 的交互式课程,我们可以在其中使用最常用的命令。

🔗 🏳网址https://learngitbranching.js.org/?locale=es_ES


👉📖 像专业人士一样 Git

用英语预订,他将教我们如何以更高级的方式使用git。

🔗 🏴网址http://book.git-scm.com/book/en/v2

🔗 🏳网址https://uniwebsidad.com/libros/pro-git


👉🕹 Git katas

Git katas,这似乎令人难以置信,但它是一个很好的资源,可以执行我们可以在日常中使用的练习。

🔗 🏴网址https://github.com/eficode-academy/git-katas


👉📑 备忘单 git

带有 git 命令的备忘单。

🔗 🏴网址https://education.github.com/git-cheat-sheet-education.pdf


👉🖊📑 GitHub Guide

官方 GitHub 用户指南。一旦你了解了GitHub是如何工作的,你就会知道如何使用GitLab,Bitbucket等。

🔗 🏴网址https://guides.github.com/


返回索引



🔒安全


🛹 内容


👉🖊📚 网站安全

简要总结了我们日常生活中最常见的几种类型的安全漏洞。

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/Server-side/Primeros_pasos/seguridad_sitios_web


👉🖊 前端安全提示

有关安全提示的文章(如果你是前端开发人员)。

🔗 🏳网址https://www.glajumedia.com/tips-seguridad-frondend/


👉🖊 前端应用程序的安全建议

文章讨论了一些关于网络安全以及你不应该做的事情。

🔗 🏳网址https://www.purocodigo.net/articulo/recomendaciones-de-seguridad-para-aplicaciones-front-end


👉🖊 .htaccess

我们永远不知道我们是否必须向我们的网站添加一个,但是了解它是什么以及我们可以做什么是件好事。

.htaccess

🔗 🏳网址https://carrero.es/htaccess-tutorial/


👉🖊 CORS 政策

在这里,我们有一篇文章告诉我们,这就是CORS。

🔗 🏳网址https://lenguajejs.com/javascript/peticiones-http/cors/


返回索引



📦包管理器


🧠 先验知识


👉 什么是包管理器?

如果你不知道什么是包管理器(或包管理系统),则需要先阅读本文。

🔗 🏳网址https://www.wikiwand.com/es/Sistema_de_gesti%C3%B3n_de_paquetes


👉 什么是 NPM?

我们已经知道它是一个包管理器,现在让我们谈谈NPM,这是其中之一。

🔗 🏳网址https://www.wikiwand.com/es/Npm


👉 什么是纱线?

我们已经谈到了 Npm,但它并不是唯一的依赖管理器,现在我们将讨论 yarn。

🔗 🏳网址https://www.wikiwand.com/es/Yarn\_(脸书)


👉 什么是 NodeJS?

即使我们不在NodeJS中开发,我们也必须知道它是什么以及它做了什么。

🔗 🏳网址https://www.wikiwand.com/es/Node.js


返回索引



🛹 内容


👉🖊📚 如何安装 NodeJS?

建议安装NodeJS,除此之外,我们还可以访问npm或npx。

🔗 🏳网址https://midu.dev/como-instalar-node-en-mac-y-windows/


👉🖊📚 Npm 入门

我们已经谈到了 Npm,但它并不是唯一的依赖管理器,现在我们将讨论 yarn。

🔗 🏳网址https://www.freecodecamp.org/espanol/news/node-js-npm-tutorial/


👉🖊📚 从 Npm 到高级介绍

关于Npm的有趣文章从一开始,到做更高级的事情。

🔗 🏳网址https://lenguajejs.com/npm/introduccion/que-es/


👉🖊📚 如何安装纱线?

让我们安装Yarn,同时安装npm和yarn永远不会有坏处。

🔗 🏳网址https://elsolitario.org/post/instalacion-de-yarn/

🔗 🏴网址https://classic.yarnpkg.com/en/docs/install


👉🖊📚 从 Npm 到高级介绍

关于Npm的有趣文章从一开始,到做更高级的事情。

🔗 🏳网址https://lenguajejs.com/npm/introduccion/que-es/


👉🖊📚 纱线介绍

Yarn的使用文档(如果我们已经安装了它,我们可以跳过安装)。一旦我们知道如何使用Npm,使用Yarn几乎总是一样的。

🔗 网址https://yarnpkg.com/getting-started


返回索引



🏛CSS 体系结构


🛹 内容


👉🖊 CSS 方法和体系结构

文章回顾了CSS存在的体系结构或方法。

🔗 🏳网址https://medium.com/williambastidasblog/metodolog%C3%ADas-o-arquitecturas-css-oocss-bem-smacss-itcss-atomic-design-a1a3cfbfa6c9


👉🖊 你的CSS代码应该如何

文章解释了我们的CSS代码应该如何。

🔗 🏳网址https://cosasdigitales.com/articulos-diseno-web/arquitectura-css-como-deberia-ser-tu-codigo-css/


👉📹🗣 CSS 体系结构中的良好实践

Carmen Ansio和Ignacio Villanueva于2017年在马德里的Codemotion上发表了关于“CSS架构的良好实践”的演讲。

🔗 🏳网址https://www.youtube.com/watch?v=B9Qwq_MKuqY


返回索引



🤖CSS 和 POSTCSS PREPOCESADORES


🧠 先验知识


👉 什么是 CSS prepocesadores?

什么是 CSS 预处理器的简要说明。

🔗 🏳网址https://developer.mozilla.org/es/docs/Glossary/Preprocesador_CSS

🔗 🏳网址https://abalozz.es/que-es-un-preprocesador-de-css/

🔗 🏳网址https://picodotdev.github.io/blog-bitix/2020/08/que-hace-y-ventajas-de-un-preprocesador-de-estilos-css/


返回索引



🛹 内容


👉🖊 SASS 教程

优秀的文章,告诉我们一些关于SASS是什么以及如何安装它的信息。

🔗 🏳网址https://codingpotions.com/tutorial-sass


👉📚🖊 SASS 文档

很多时候,我们疯狂地寻找资源,但是我们消耗的任何东西的文档通常都是完整的。在这种情况下,SASS有一个很好的文档,我们可以从中了解我们可以做的事情。

🔗 🏴网址https://sass-lang.com/guide

🔗 🏴网址https://sass-lang.com/documentation


👉📚🖊 更少的文档

在官方网站上,我们可以看到它是如何被使用的(它看起来很像SASS),我们还有一个关于我们可以做什么的指南。

🔗 🏴网址http://lesscss.org/usage/

🔗 🏴网址http://lesscss.org/features/


👉🖊 手写笔安装

关于如何安装Stylus CSS的简单文章

🔗 🏳网址https://devcode.la/tutoriales/instalacion-de-stylus/


👉🖊 手写笔安装

有关如何使用手写笔的文章。

🔗 🏳网址https://devcode.la/tutoriales/que-es-stylus-preprocesador-de-css/


👉🏴🖊 官方手写笔文档

相当完整的手写笔文档。

🔗 网址https://stylus-lang.com/


👉📦🖊 官方的 PostCSS 安装文档

官方的 POSTCSS 安装文档。

🔗 🏴网址https://github.com/postcss/postcss#usage


👉📦🖊 官方的 POSTCSS 使用文档

使用PostCSS的官方文档。

🔗 🏴网址https://github.com/postcss/postcss/tree/main/docs


👉📹🗣 PostCSS the Babel CSS

琼·莱昂(Joan León)提供的JS Day Canarias会议视频,告诉我们如何安装它以及如何在顶部使用它。

🔗 🏳网址https://www.youtube.com/watch?v=ssAUyf0kpfo


👉🖊 我更喜欢CSS

Joan León在PostCSS上的文章,从他的 Angular 来看。它回顾了这个CSS预处理器。

🔗 🏳网址https://joanleon.dev/postcss


返回索引



🛠构建工具


🧠 先验知识


👉 JS构建工具:为什么我们需要它们?

本文将解决为什么我们需要工具来编译代码的疑问。

🔗 🏴网址https://dev.to/netlify/choosing-a-javascript-build-tool-to-config-or-not-config-2ia8


👉 JavaScript编译工具的目的是什么?

StackOverflow关于构建工具的目的是什么的问题。

🔗 🏴网址https://stackoverflow.com/questions/28684041/what-is-the-purposes-of-javascript-build-tools


返回索引



🛹 内容


👉🖊 选择 JS 构建工具:配置或不配置

关于施工工具的文章。它们已成为现代Web应用程序工作流程中的必要组成部分。在这里,你有一个简短的回顾,每个比较和配置它们的简要说明。

🔗 🏴网址https://dev.to/netlify/choosing-a-javascript-build-tool-to-config-or-not-config-2ia8


👉🖊 JavaScript 创作工具和自动化系统

另一篇文章回顾了我们现在拥有的主要构建工具。它还解释了如何配置它们。

🔗 🏴网址https://hackernoon.com/javascript-build-tools-and-automation-systems-9589c5c91ebe


👉🖊 选择 JS 构建工具:配置或不配置

以文章的形式提供更多资源,他在其中再次回顾了我们拥有的不同工具以及我们应该如何配置它们。

🔗 🏴网址https://survivejs.com/webpack/appendices/comparison/


👉🖊 2021年要考虑的5个JavaScript工具

JavaScript生态系统正在快速发展,以下是今年需要考虑的5种工具。

🔗 🏴网址https://www.sitepoint.com/javascript-tools-to-look-out-for/


👉🖊📹📚 如何将 JavaScript 与汇总结合使用 - 分步教程

在本系列分步教程中,了解如何使用汇总作为 Web 包和 Browserify 对 JavaScript 文件进行分组的更小、更有效的替代方法。

🔗 🏴网址https://www.learnwithjason.dev/blog/learn-rollup-js


返回索引



🧰框架 JAVASCRIPT


🧠 先验知识


👉 了解客户端 JS 框架

JavaScript框架是现代前端Web开发的重要组成部分,为开发人员提供了经过尝试和测试的工具,用于构建交互式和可扩展的Web应用程序。

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks


👉 库和框架之间的区别

在这里,他们以非常简短的方式解释了库和框架之间的区别。

🔗 🏳网址http://notasjs.blogspot.com/2014/09/diferencia-entre-libreria-y-framework.html


👉 客户端框架简介

我们从概述开始研究框架,分析JavaScript及其框架的简要历史,为什么存在框架以及它们给我们什么,如何开始考虑选择一个框架来学习,以及客户端框架有哪些替代方案。

🔗 🏴网址https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction


👉 框架的主要特点

每个 JS 框架都有不同的方法来更新 DOM、处理浏览器事件和提供愉快的开发人员体验。本文将探讨“Big 4”框架(React,Ember,Vue和Angular)的主要功能,看看框架如何倾向于从高层次工作以及它们之间的差异。

🔗 🏴网址https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features


👉 2020年最常用的框架

我们可以看到哪些是2020年最常用的JS框架。这并不意味着他们比其他人更好,也不意味着学习最常用的人会更快地找到工作。你必须学习几个是如何工作的,然后如果他们放一个对你来说是新的,就知道如何使用。

🔗 🏴网址https://2020.stateofjs.com/en-US/technologies/front-end-frameworks/


👉 2020年最常用的框架

Redux是Javascript应用程序中用于状态管理的工具,由Dan Abramov于2015年诞生。虽然它通常与 React 相关联,但事实是它是一个不可知的框架库,即使你不打算使用 React,这也是值得知道的。

🔗 🏳网址http://blog.enriqueoriol.com/2018/08/que-es-redux.html

🔗 🏳网址https://carlosazaustre.es/como-funciona-redux-conceptos-basicos


👉 什么是 TypeScript?

Software Crafters之手对TypeScript的简要介绍,我们将在其中看到TypeScript的上方。

🔗 🏳网址https://softwarecrafters.io/typescript/typescript-tutorial-javascript-introduccion


👉 了解 TypeScript 中的数据类型

文章,我们将被教导在TypeScript中很好地输入我们的数据。

🔗 🏴网址https://www.freecodecamp.org/news/learn-typescript-data-types-from-zero-to-hero/


👉 什么是 RxJS?及其用途

这篇文章的标题是Rxjs在15分钟内从0到专家,但是在这么短的时间内获得它有点雄心勃勃。我们将看到对其使用RxJS的介绍。

🔗 🏳网址https://medium.com/@osmancea/programaci%C3%B3n-reactiva-con-rxjs-bebc9432485f


返回索引



🛹 内容


👉🖊📚 React 简介

从官方的react页面,我们会找到这个教程,你要构建一个小游戏。你应该忍不住忽略它,因为你不是每天都在构建游戏,但要试一试。你将在本教程中学习的技术对于构建任何 React 应用程序都至关重要,掌握它将让你深入了解 React。

🔗 🏳网址https://es.reactjs.org/tutorial/tutorial.html


👉🖊📹📚 从头开始学习 React

Midudev 有很多有趣的资源,在这里我们为你带来一个视频,他将从头开始教我们 React。

🔗 🏳网址https://midu.dev/curso-gratis-react-2020/


👉🖊📹📚 开始使用 React

文章,他们将向我们展示我们使用 React 的第一步。

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks/React_getting_started


👉🖊📚 如何使用 Hooks 创建一个使用 React 的应用程序

文章,他们将向我们展示我们使用 React 的第一步。

🔗 🏳网址https://www.neoguias.com/tutorial-react-hooks/


👉🖊📚 为初学者提供 React

来自FreeCodeCamp的初学者的 React 手册。

🔗 🏴网址https://www.freecodecamp.org/news/react-beginner-handbook/


👉🖊📚 React 手册

React Manual by FreeCodeCamp.

🔗 🏴网址https://www.freecodecamp.org/news/the-react-handbook-b71c27b0a795/


👉🖊📚 Vue 指南

从 Vue 官方网站上,我们有一个指南,教我们如何使用 Vue。

🔗 🏴网址 (v3):https://v3.vuejs.org/guide/introduction.html

🔗 🏳网址 (v2):https://es.vuejs.org/v2/guide/


👉🖊📚 Vue 3 简介

在本教程中,你将学习如何使用 Vue 从头开始创建应用程序。我们将首先了解 Vue 的基本概念,以及使用此框架创建的应用程序的剖析。

🔗 🏳网址https://www.neoguias.com/tutorial-vue/


👉🖊📹📚 Vue 2 入门

使用 Carlos Azaustre 的 Vue 2 迈出你的第一步。

🔗 🏳网址https://carlosazaustre.es/primeros-pasos-en-vue


👉🖊📹📚 Vue 2 入门

在这种情况下,请与 Mozilla 携手迈出第一步。

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks/Vue_primeros_pasos


👉🖊📚 Vue 2 入门

在这种情况下,请与 Mozilla 携手迈出第一步。

🔗 🏳网址https://developer.mozilla.org/es/docs/Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks/Vue_primeros_pasos


👉📹📚 Vue JS 速成课程 2021

Vue 3 的强化英语课程,采用实用的方法。

🔗 🏴网址https://www.youtube.com/watch?v=qZXt1Aom3Cs&ab_channel=TraversyMedia


👉🖊📚 英雄角之旅

虽然是英文的,但Angular的“英雄之旅”教程是这个框架中介绍的经典之作。

🔗 🏴网址https://angular.io/tutorial


👉🖊📚

虽然是英文的,但Angular的“英雄之旅”教程是这个框架中介绍的经典之作。

🔗 🏴网址https://angular.io/tutorial


👉🖊📚 使用 Angular 制作你的第一个应用程序

在本教程中,我们将学习如何制作计算器,因此我们回顾了Angular的工作原理。

🔗 🏴网址https://www.techiediaries.com/angular/angular-9-tutorial-and-example/


👉🖊 适合初学者的 Angular

非常基本的教程,开始使用Angular。

🔗 🏳网址https://betabeers.com/blog/angular-principiantes-390/


👉📹📚 Angular 课程

YouTube课程,我们将学习如何使用Angular。

🔗 🏳网址https://www.youtube.com/watch?v=SZtxwDAqEok&list=PLezsbUDiwcpmhNiMzVPYJXV0Rqn71G4PU&index=1


👉🖊📚 Web Development LitElement

LitElement的Web开发课程,我们将对制作WebComponents的库进行审查。

🔗 🏳网址https://desarrolloweb.com/manuales/manual-litelement.html


👉🖊📚 什么是网络组件?以及如何使用 LitElement

回顾原生WebComponents并使用LitElement制作。

🔗 🏳网址https://lenguajejs.com/webcomponents/introduccion/que-son-webcomponents/


👉🖊📚 Web Development LitElement

非常完整的文章,使本机WebComponents。

🔗 🏴网址https://dev.to/bennypowers/lets-build-web-components-part-1-the-standards-3e85


👉🖊📚 SvelteJS 简介

Svelte的非常完整的教程来自其官方网站,它也是交互式的,可以提醒我们FreeCodeCamp。

🔗 🏴网址https://svelte.dev/tutorial/basics


👉🖊📚 Sveltejs Manual

FreeCodeCamp的这个框架的非常完整的手册

🔗 🏴网址https://www.freecodecamp.org/news/the-svelte-handbook/


👉🖊📚 官方 StencilJS 文档

StencilJS官方网站的官方文档,我们将看到如何使用它并迈出第一步。

🔗 🏴网址https://stenciljs.com/docs/introduction


👉🖊 StencilJS 简介

WebComponents 执行的此框架的简要介绍。

🔗 🏴网址https://gabrieltanner.org/blog/stencil-js-introduction


返回索引



🖼框架 CSS


🧠 先验知识


👉 什么是 CSS 框架?

WebComponents 执行的此框架的简要介绍。

🔗 🏳网址https://www.wikiwand.com/es/Framework_de_CSS


👉 CSS框架的优缺点

一篇简短的文章,它揭示了使用CSS框架的优点和缺点。

🔗 🏳网址https://desarrolloweb.com/articulos/framework-css-ventajas-inconvenientes.html


👉 CSS框架之间的优缺点

9个css框架的列表,它们从自己的 Angular 向我们提供了优点和缺点。

🔗 🏳网址https://athemes.com/collections/best-css-frameworks/


返回索引



🛹 内容


❗️注意:起初,我无法在每个JS框架中使用每个CSS框架。此外,如果你打算在框架或库中使用它,他们每个人都以某种方式管理它,并且在某些框架(如Vue)中,我们有BootstrapVue或React Bootstrap。

我们将不得不做一个简短的搜索类型:“框架CSS框架JS”。

举个例子:“Bootstrap React”。

我列出了当前最常用的,因此你可以阅读他们的文档或查找有关他们的更多信息。任何查询,你都可以毫无问题地进行。

我强烈建议,如果我们要使用CSS框架,请你查看文档,因为这是我们将要了解如何使用它以及如何自定义它的地方。


👉🖊 Bootstrap 4 简介

Bootstrap 4的介绍,来自框架的官方网站。在这里,我们将了解如何安装它。我还添加了另一篇关于如何使用npm安装它的文章。

🔗 🏴网址https://getbootstrap.com/docs/5.0/getting-started/introduction/

🔗 🏴网址https://getbootstrap.com/docs/4.0/getting-started/download/


👉🖊 引导组件

Bootstrap 4的介绍,来自框架的官方网站。在这里,我们将了解如何安装它。我还添加了另一篇关于如何使用npm或纱线安装它的文章。

🔗 🏴网址https://getbootstrap.com/docs/4.0/components/alerts/


👉🖊 引导文档

引导文档,我们将在其中找到组件和其他类型的用途。

🔗 🏴网址https://getbootstrap.com/docs/4.0/getting-started/introduction/


👉🖊 基础安装

基金会拥有的是,它有很多教程可以入门。在这种情况下,让我们看看如何安装这个CSS框架。

🔗 🏴网址https://get.foundation/sites/docs/installation.html


👉🖊 基础教程

在CSS框架网站本身,我们可以找到这些关于用例的教程。

🔗 🏴网址https://get.foundation/index.html


👉🖊 基础文档

基础文档,我们将在其中找到组件和其他类型的用途。

🔗 🏴网址https://get.foundation/sites/docs/


👉🖊 布尔马安装

在这里,我们有另一个名为Bulma的CSS框架,我们将拥有正确的文档,我们将能够看到它的用法。在这种情况下,我们将看到如何安装它。

🔗 🏴网址https://bulma.io/documentation/overview/start/


👉🖊 布尔马文档

Bulma文档,我们将在其中找到组件和其他类型的用途。

🔗 🏴网址https://bulma.io/documentation/overview/start/


👉🖊 安装 tailwind

如何安装这个看起来非常好的CSS框架。

🔗 🏴网址https://tailwindcss.com/docs/installation


👉🖊 tailwind 文档

tailwind 文档,我们将在其中找到组件和其他类型的用途。

🔗 🏴网址https://tailwindcss.com/docs


👉🖊 材料设计第一步和文档

如何开始安装材质设计。许多像 React 这样的框架,已经准备好了供使用的依赖项,我建议你执行搜索,因为它在“NOTE”一节中说。

🔗 🏴网址https://material.io/develop/web/getting-started


返回索引



测试


🧠 先验知识


👉 什么是测试?

文章在上面解释了一下,这是一个测试,并教我们一些测试的例子。

🔗 🏳网址https://yeisondaza.com/que-son-y-como-escribir-pruebas-en-javascript


👉 使用 JavaScript 进行测试

本文档非常完整,可以向我们介绍测试世界并了解什么是测试。

🔗 🏳网址https://books.adalab.es/materiales-front-end-e/sprint-3.-react/3_14_testing_js


👉 前端测试

我们非常清楚,无论最终用户使用的分辨率或操作系统如何,我们开发的所有内容都必须正常工作。因此,越来越重要的是,我们开发的东西没有错误,或者如果它有错误,它们就是受控的错误。

🔗 🏳网址https://octuweb.com/testing-front/


👉 什么是道明德?

我们有时会听到这个词,不,它不是哈利波特的咒语,也不是一个神秘的短语来召唤伟大的克苏鲁。在本文中,我们将对TDD进行一些介绍。

🔗 🏳网址https://softwarecrafters.io/javascript/tdd-test-driven-development

🔗 🏳网址https://medium.com/nursoft/implementar-tdd-facilmente-4d2cffaa9172


👉 什么是 DDD?

让我们看看DDD是什么,知道它是什么,并能够使用它。

🔗 🏳网址https://www.wikiwand.com/es/Dise%C3%B1o_guiado_por_el_dominio


👉 什么是端到端测试?

在这里,我们可以看到什么是E2E测试以及存在哪些类型的测试。

🔗 🏳网址https://blog.irontec.com/introduccion-automatizacion-tests-e2e-cypress-io/


👉 什么是模拟,存根,假或假?

在本书的文章中,我们将看看每个含义。

🔗 🏳网址https://uniwebsidad.com/libros/tdd/capitulo-6


👉 测试框架列表

JavaScript 测试框架列表。这里最常用的是命名的。一旦你使用了一个,你就会知道如何使用其他的没有任何问题。

🔗 🏴网址https://medium.com/better-programming/8-awesome-javascript-testing-libraries-43e09141fdc2


返回索引



🛹 内容


❗️注意:起初,我无法在每个JS框架中使用每个测试工具。此外,如果你要在框架或库中使用它,则每个人都以某种方式对其进行管理。

我们将不得不做一个简短的搜索类型:“框架测试框架JS”。

例如:“Jest React”。

我列出了当前最常用的,因此你可以阅读他们的文档或查找有关他们的更多信息。任何查询,你都可以毫无问题地进行。

如果我们要使用工具,我强烈建议你查看文档,因为这是我们将要了解如何使用它的地方。


👉🖊 开玩笑文档

我们从Jest开始,这是官方文档,我们将开始看看它是如何安装的。

🔗 🏳网址https://jestjs.io/docs/es-ES/getting-started


👉🖊 通过 Jest 为你的测试提供强大功能和灵活性

关于如何开始使用Jest的简短介绍性文章,并快速回顾了它的用法。

🔗 🏳网址https://www.genbeta.com/desarrollo/da-potencia-flexibilidad-tus-tests-jest


👉🖊 使用 Jest 在 React 中测试组件:基础知识

在本文中,我们将看到如何使用 React 测试一个简单的组件。

🔗 🏳网址https://code.tutsplus.com/es/articles/testing-components-in-react-using-jest-the-basics--cms-28934


👉🖊 业力:安装

我们看到如何从npm安装业力。

🔗 🏴网址https://karma-runner.github.io/6.1/intro/installation.html


👉🖊 业力:配置

安装Karma后,让我们看看如何以非常简单的方式配置它。

🔗 🏴网址https://karma-runner.github.io/6.1/intro/configuration.html

🔗 🏳网址http://juanmirod.github.io/2016/04/29/configurando-karma-en-un-projecto-javascript.html


👉🖊 业力:与Angular一起使用的示例

让我们在Angular中使用Karma进行单元测试。如果我们分析它,它与Jest非常相似。

🔗 🏳网址https://www.digital55.com/desarrollo-tecnologia/como-usar-testing-angular-jasmine-karma/


👉🖊 摩卡:安装

现在我们有机会看到如何以非常简单的方式安装摩卡。

🔗 🏴网址https://mochajs.org/#installation


👉🖊 摩卡:与柴一起使用

让我们看看如何将Mocha与Chai一起使用,Chai是一个断言库。

🔗 🏳网址https://www.paradigmadigital.com/dev/testeando-javascript-mocha-chai/


👉🖊 Mocha:使用 Chai-HTTP 进行 REST API 测试

另一个如何将Mocha与Chai一起使用的例子,在这个几乎是Chai-HTTP中。

🔗 🏳网址https://www.paradigmadigital.com/dev/testeo-api-rest-mocha-chai-http/


👉🖊 如何安装茉莉花?

让我们看看如何安装茉莉并能够使用它。

🔗 🏴网址https://jasmine.github.io/setup/nodejs.html


👉🖊 第一套房 - 带茉莉花

安装Jasmine后,我们开始工作进行第一次测试。

🔗 🏴网址https://jasmine.github.io/tutorials/your_first_suite


👉🖊 使用茉莉花和棱角测试

测试是当今项目的基本组成部分。如果你有一个大项目,那么拥有一套好的测试是至关重要的,以便能够测试应用程序,而不必手动完成。此外,如果将其与持续集成相结合,则可以最大程度地降低风险和未来的错误。

🔗 🏳网址https://codingpotions.com/angular-testing


👉🖊 使用 Jasmine 进行 JavaScript 中的单元测试

在JavaScript中,Jasmine是一个测试框架,允许你创建易于阅读的测试,以便它们也用作代码的文档。

🔗 🏳网址https://dev.to/juanmirod/tests-unitarios-en-javascript-con-jasmine-118e


👉🖊 EnzYME 文档

另一个测试工具,在这种情况下是 React 的测试工具。在这里,我们有如何敦促它以及如何运行我们的第一个测试。

🔗 🏴网址https://enzymejs.github.io/enzyme/


👉🖊 测试工具库

测试库是一个包,可以帮助我们以更清晰的语义测想形组件。下面介绍了如何开始。在框架的右侧,我们将有完整的框架列表,他们将告诉我们如何安装它。

🔗 🏴网址https://testing-library.com/docs/


👉🖊 赛普拉斯创建端到端测试

我们来到E2E测试,我们将使用Cypress。我给你留下了几个资源来安装它。

🔗 🏴网址https://enzymejs.github.io/enzyme/ https://docs.cypress.io/guides/getting-started/installing-cypress.html#System-requirements

🔗 🏳网址https://www.paradigmadigital.com/dev/cypress-un-framework-de-pruebas-todo-en-uno/


👉🖊 柏树初学者教程

好的教程,我们将看到如何开始使用Cypress,并执行我们的第一个测试。

🔗 🏴网址https://www.valentinog.com/blog/cypress/


👉🖊 使用 Cypress 编写我们的第一个测试

Cypress的官方文档,它教我们以简单的方式执行第一次测试

🔗 🏴网址https://docs.cypress.io/guides/getting-started/writing-your-first-test.html#Write-your-first-test


👉🖊 Asserts de Cypress 列表

在官方文档中,我们有可以与Cypress一起使用的断言列表。

🔗 🏴网址https://docs.cypress.io/guides/references/assertions.html#BDD-Assertions


👉📦🖊 测试最佳实践

这是 JavaScript 和 Node 的完整指南.js从 A 到 Z.总结并选择市场上提供的数十篇最佳博客文章、书籍和工具。

🔗 🏴🏳网址https://github.com/goldbergyoni/javascript-testing-best-practices/blob/master/readme-es.md


👉📹 使用 JavaScript 进行测试简介

视频,我们可以以简单和循序渐进的方式看到测试的简要介绍。

🔗 🏴网址https://academind.com/tutorials/javascript-testing-introduction/


👉📹 前端测试:为什么它被打破了?使用测试库

中断但代码有效的测试,中断但测试通过的代码......前端测试呢?让我们看看如何在测试库🚀的帮助下编写健壮,可维护且值得信赖的测试

🔗 🏳网址https://youtu.be/SH7JSlc36uA


👉📹 编写测试,不要太多,特别是单一

这个Codely视频鼓励我们编写测试,不要太多,而是单一的。

🔗 🏳网址https://www.youtube.com/watch?v=QdqIqGPsLW0


返回索引



📱PROGESSIVE WEB APPS (PWA)


🧠 先验知识


👉 什么是渐进式 Web 应用程序 (PWA)?

听说一家公司拥有渐进式Web应用程序越来越普遍,但是......我们真的知道它是什么吗?在这篇文章中,我们将看到它是什么,它的特点是什么,它使用的技术,它的优点和缺点,简而言之,使PWA成为开发项目的非常有趣的选择。

🔗 🏳网址https://www.digital55.com/desarrollo-tecnologia/que-es-pwa-ventajas-desventajas/


返回索引



🛹 内容


👉🖊 PWA 我们必须学习哪些步骤来制作我们的应用程序?

从Mozilla的基础开始,我们有一些有趣的教程来向我们介绍这个PWA世界。我们将不得不通过一些部分来一点一点地了解它。

🔗 🏳🏴网址https://developer.mozilla.org/es/docs/Web/Progressive_web_apps


👉🖊 逐步创建你的第一个 PWA

所谓的“渐进式Web应用程序”是一种移动应用程序,但使用Web技术构建,即使用HTML,CSS和Javascript,并在包含运行它的浏览器的任何平台上工作。

🔗 🏳网址https://medium.com/samsung-internet-dev/crea-tu-primer-pwa-paso-a-paso-3bc584e3d084


👉🖊📚 渐进式 Web 应用手册

渐进式Web应用程序手册,我们将解决近年来实现网站的最突出的新颖性之一,它正在彻底改变开发世界,但最重要的是用户消费网站和Web应用程序的方式。

🔗 🏳网址https://desarrolloweb.com/manuales/manual-progressive-web-apps.html


👉🖊 使用Vanilla JS创建我们的第一个PWA

让我们看看如何从创建利用 Web 推送 API 和 cron 编程的渐进式 Web 应用程序 (PWA) 开始。在本文中,我们将介绍基础知识:前端、Web 应用清单和应用的 Service Worker 方面,我们仅使用纯 JavaScript 来实现此目的。在本文结束时,我们将有一个缓存的工作PWA,以便可以脱机访问它。

🔗 🏴网址https://www.digitalocean.com/community/tutorials/js-vanilla-pwa


返回索引



🖥创建桌面应用程序


🧠 先验知识


👉 什么是桌面应用?

在我们查看有关创建桌面应用程序的工具之前,我们真的知道桌面应用程序是什么吗?

🔗 🏳网址https://www.wikiwand.com/es/Aplicaci%C3%B3n_de_escritorio


返回索引



🛹 内容


👉🖊 什么是Electron,谁使用它?

让我们看一下Electron的简要介绍,看看我们能用这个工具做什么。

🔗 🏳网址https://blog.nubecolectiva.com/que-es-electron-js-y-otros-detalles/


👉🖊📚 电子:快速入门指南

使用此工具,我们可以非常轻松地创建桌面应用程序。在这里,我们将开始如何安装Electron。

🔗 🏳网址https://www.electronjs.org/docs/tutorial/quick-start


👉🖊📚 电子文档

Electron的文档非常完整,我们将能够以简单的方式制作我们的应用程序。

🔗 🏳网址https://www.electronjs.org/docs


👉🖊📚 使用 Electron 开发桌面应用程序.js

在这里,我们简要介绍了Electron是如何工作的。内容可能有些过时,但我们可以保持其工作方式。

🔗 🏳网址https://platzi.com/blog/aplicaciones-escritorio-electron-js/


返回索引



📲创建移动应用


🧠 先验知识


👉 什么是本机应用,什么是混合应用?

在进入面粉之前,我们必须知道一个和另一个有什么区别。

🔗 🏳网址https://www.nextu.com/blog/apps-nativas-vs-apps-hibridas/


返回索引



🛹 内容


👉🖊 什么是 React Native?

该工具将使我们能够为移动设备制作混合应用程序。让我们来看看谁在后面,我们能做些什么。

🔗 🏳网址https://cuatroochenta.com/que-es-react-native-el-modo-de-desarrollar-apps-esta-cambiando/


👉🖊 React Native 入门:安装

我们将使用 React Native 迈出第一步,这次我们开始安装这个工具。

🔗 🏴网址https://reactnative.dev/docs/environment-setup


👉🖊 React Native 入门:入门使用

React Native 的文档非常广泛,我们将找到许多示例来制作我们的混合应用程序。我们可以按照 React Native 页面本身的教程进行操作。

🔗 🏴网址https://reactnative.dev/docs/getting-started


👉🖊 什么是离子?

我们有几个选项来执行混合应用,Ionic是另一种选择。让我们看看Ionic是做什么的。

🔗 🏳网址https://medium.com/biotec/qu%C3%A9-es-ionic-47e03c0d4b88


👉🖊 离子入门:安装

我们将使用Ionic迈出第一步,这次我们开始安装此工具

🔗 🏴网址https://ionicframework.com/getting-started


👉🖊 Ionic 入门:安装 CLI

Ionic CLI将为我们节省大量时间,以便在我们的应用程序中制作我们的结构。

🔗 🏴网址https://ionicframework.com/docs/intro/cli


👉🖊 Ionic 入门:开始开发

安装Ionic及其CLI后,我们将开始与Ionic团队本身一起创建我们的第一个简单应用程序。

🔗 🏴网址https://ionicframework.com/docs/developing/starting


👉🖊 什么是 NativeScript?

现在,让我们介绍另一个使用 NativeScript 制作混合应用程序的工具。

🔗 🏳网址https://www.wikiwand.com/es/NativeScript


👉🖊 NativeScript 入门:安装

我们将使用 NativeScript 迈出第一步,这次我们开始安装此工具。

🔗 🏴网址https://docs.nativescript.org/angular/start/quick-setup


👉🖊🕹 NativeScript 入门:安装

NativeScript的好处是它有一个游乐场,在那里我们将能够使用足够的元素来执行实时测试来制作我们的应用程序。

🔗 🏴网址https://play.nativescript.org/


👉🖊 官方 NativeScript 文档

很多时候,查看工具功能的最佳方法之一就是查看其文档。在这里,我们有 NativeScript 文档。

🔗 🏴网址https://docs.nativescript.org/start/introduction


👉🖊 什么是颤动?

该工具允许我们通过一种名为Dart的语言制作本机应用程序。

🔗 🏳网址https://www.paradigmadigital.com/dev/flutter-visto-con-gafas-programador-web/


👉🖊 颤振入门:安装

在这里,我们将看到如何安装Flutter。我们将不得不查看我们拥有的操作系统并遵循指示。

🔗 🏳网址https://esflutter.dev/docs/get-started/install


👉🖊 颤动入门:设置我们的 IDE

安装后,我们将必须配置我们的IDE才能与Flutter一起使用。

🔗 🏳网址https://esflutter.dev/docs/get-started/editor


👉🖊 颤动入门:初始测试

在本节中,我们将了解如何从模板中使用Flutter创建应用程序,我们可以运行它并查看“热重新加载”。

🔗 🏳网址https://esflutter.dev/docs/get-started/test-drive


👉🖊 开始使用 Flutter:编写你的第一个应用

完成前面的所有步骤后,我们将进行最有趣的事情:创建我们的第一个应用程序。

🔗 🏳网址https://esflutter.dev/docs/get-started/codelab


👉🖊 颤动入门:了解更多

我们已经完成了官方网站上的所有教程,但现在我们该怎么办?他们为我们提供了不同的来源,以便能够遵循。

🔗 🏳网址https://esflutter.dev/docs/get-started/learn-more


👉🖊 颤振文档

一旦一切完成,我们还有Flutter文档。

🔗 🏳网址https://esflutter.dev/docs


返回索引



♺ 静态页面生成器


🧠 先验知识


👉 什么是静态网页?

首先让我们看看它是“静态网页”。

🔗 🏳网址https://www.wikiwand.com/es/P%C3%A1gina_web_est%C3%A1tica


返回索引



🛹 内容


👉🖊 什么是NextJS?

简要介绍NextJS,了解它是什么以及它背后的技术

🔗 🏳网址https://platzi.com/blog/nextjs-el-futuro-de-las-aplicaciones-con-react/


👉🖊 与 NextJS 的简要介绍

他将解释如何开始使用NextJS的文章

🔗 🏳网址https://dev.to/efrenmartinez/primeros-pasos-con-next-js-1i28


👉🖊 下一页JS 文档

此工具的文档,我们将开始安装它并深入研究它。

🔗 🏴网址https://nextjs.org/docs/getting-started


👉🖊 什么是盖茨比?

以简单的方式生成具有静态内容的网站的工具。

🔗 🏳网址https://gerswin.com/sitios-web-est%C3%A1ticos-qu%C3%A9-es-y-por-qu%C3%A9-deber%C3%ADas-usar-gatsby-3f90af778516


👉🖊 盖茨比文献

在Gatsby文档中,我们将通过安装此工具开始我们的第一步。

🔗 🏴网址https://www.gatsbyjs.com/docs/quick-start/


👉🖊 盖茨比教程

Gatsby 自己的文档有一个教程来开始使用这个工具。

🔗 🏴网址https://www.gatsbyjs.com/docs/tutorial/part-zero/


👉🖊 什么是NuxtJS?

用于创建静态工具的工具。

🔗 🏳网址https://medium.com/@ianaya89/crea-tu-sitio-web-con-github-pages-y-nuxt-js-6a90fd0a0dc4


👉🖊 安装 NuxtJS

从其官方文档中,我们可以看到如何安装此工具。我们还将了解有关路由和目录结构的更多信息。

🔗 🏳网址https://es.nuxtjs.org/docs/2.x/get-started/installation


👉🖊 使用NuxtJS制作的示例

Ejemplos para poder ver como se implementan ciertas cosas, desde un hola mundo, hasta SEO.

🔗 🏳URL: https://es.nuxtjs.org/examples


👉🖊 ¿Qué es Jekyll?

Otra herramienta para poder realizar páginas web estáticas.

🔗 🏳URL: http://www.arquitectoit.com/jekyll/que-es-jekyll/


👉🖊 Documentación Jekyll

Documentación oficial de Jekyll donde veremos como instalarlo y algunos recursos para empezar.

🔗 🏴URL: https://jekyllrb.com/docs/


👉🖊 ¿Qué es Hugo?

Herramienta para la creación de páginas web estáticas.

🔗 🏳URL: https://gutl.jovenclub.cu/hugo-generador-sitios-web-estaticos/


👉🖊 Instalación de Hugo y primeros pasos

En la documentación oficial tendremos nuestros primeros pasos de como instalar esta herramienta y como seguir con ella.

🔗 🏴URL: https://gohugo.io/getting-started/quick-start/


Volver al Indice



📚 CURSOS/MINIBOOTCAMPS


👉📚🕹 FreeCodeCamp

Es una organización sin ánimo de lucro consistente en una una plataforma web de enseñanza interactiva accesible para todo el mundo. Al final puedes conseguir un certíficado de que has realizado todos los ejercicios de esta plataforma. Es totalmente gratuito.

🔗 🏴URL: https://www.freecodecamp.org/


👉📚 Fullstackopen

Este curso sirve como una introducción al desarrollo de aplicaciones web modernas con JavaScript. El objetivo principal es crear aplicaciones SPA con ReactJS que utilizan API REST creadas con Node.js. El curso también contiene una sección sobre GraphQL, una alternativa moderna a las API REST.

🔗 🏴URL: https://fullstackopen.com/en/


👉📚 The Odin Project

Es uno de esos recursos gratuitos de "lo que desearía tener cuando estoy aprendiendo". Proyecto interesante y que podemos seguir aprendiendo, y que tiene un Path de Full Stack JavaScript.

🔗 🏴URL: https://www.theodinproject.com/home


👉📚 Dash General Assembly

Dash es un curso en línea divertido y gratuito que te enseña los conceptos básicos del desarrollo web a través de proyectos que puedes realizar en tu navegador.

🔗 🏴URL: https://dash.generalassemb.ly/


👉📚 Khan Academy

Organización sin ánimo de lucro cuya misión es la de brindar una educación gratuita de clase mundial para cualquier persona, en cualquier lugar. En nuestro campo, hay distintos cursos de programación 100% grauitos.

🔗 🏴URL: https://www.khanacademy.org/computing/computer-programming


👉📚 Exercism

Mejora tus habilidades de programación con 3450 ejercicios en 52 idiomas y con un equipo dedicado de mentores. Los ejercicios son 100% gratis por siempre.

🔗 🏴URL: https://exercism.io/


👉📚 Sololearn

Plataforma para ayudar a les usuaries a aprender los conceptos básicos de los principales lenguajes de programación mediante la explicación de teoría y una serie de ejercicios prácticos con los que demostrar que, de verdad, hemos entendido el concepto.

🔗 🏴URL: https://www.sololearn.com/


👉📚 Microsoft Frontent Bootcamp

Es un taller de dos días, aprenderás los conceptos básicos del desarrollo frontend mientras creas una aplicación web que funciona.

🔗 🏴URL: https://github.com/microsoft/frontend-bootcamp


👉🖊📚📑 Material Adalab

Adalab es una escuela especializada en formación digital para mujeres. Trabajan para formar y acompañar a mujeres que buscan un giro profesional adaptado a las nuevas necesidades de las empresas. Aquí tenemos el material que utilizan y que podemos seguir perfectamente.

🔗 🏳URL: https://books.adalab.es/materiales-front-end-d/


👉📦🖊📚📑📹📖 Material Fictizia

Fictizia es una de las mejores escuelas para poder estudiar desarrollo en Madrid. Aquí tenemos todos los repositorios de todos los cursos que se han impartido hasta ahora. Tenemos todo el material que tienen les alumnes.

🔗 🏳URL: https://github.com/Fictizia


👉📹📚 Bootcamp realizado por midudev de Fullstackopen

Bootcamp realizado por @midudev, donde vas a realizar con él, el bootcamp de Fullstackopen desde el principio.

🔗 🏳URL: https://www.youtube.com/watch?v=wTpuKOhGfJE&list=PLV8x_i1fqBw0Kn_fBIZTa3wS_VZAqddX7


👉📹📚 Programando en vivo con Leónidas Esteban

Leónidas nos propone realizar junto a él distintos proyectos que te ayudaran a poner tus conociminetos de HTML5, CSS3 y JS a prueba.

🔗 🏳URL: https://www.youtube.com/watch?v=ScSHSI7TzRw&list=PLHsJ3-ff9dpFtMoPYrfLq0J8wpeX33zQS


Volver al Indice



🗡 KATAS


👉🕹 Codewars

Ponte a prueba con katas, creado por la comunidad para fortalecer diferentes habilidades. Domina el idioma que prefieras o amplía tu comprensión de uno nuevo.

🔗 🏴URL: https://www.codewars.com/


👉🕹 Dev Challenges

Retos desde: responsive web developer, frontend-developer, fullstack developer, etc. Tenemos muchos recuros para poner a prueba nuestros conocimientos.

🔗 🏴URL: https://devchallenges.io/


Volver al Indice



🤔 SITIOS DE INTERÉS O RECURSOS DE INTERÉS


👉 Google/Duckduckgo

Dirás, ¿este se le ha ido la cabeza?, pues no. Un buscador siempre nos va a salvar en muchas ocasiones, y tenemos que saber buscar. Os doy el consejo de buscar siempre lo que queráis en inglés.

🔗 🏳URL: https://www.google.com 🔗 🏳URL: https://duckduckgo.com/


👉 Stackoverflow

Es la biblia para les programadores, aquí la gente pone su duda y la gente le ayuda a buscar una solución.

🔗 🏳🏴URL: https://stackoverflow.com/


👉 Can I use?

Podemos ver si una característica de HTML o CSS es compatible con todos los navegadores.

🔗 🏴URL: https://caniuse.com/


👉📚 MDN Mozilla

Hemos utilizado este recurso en este documento, pero tiene más secciones las cuales puedes explorar. Tiene un montón de artículos y siempre es bueno tenerlos a mano o echarles un vistazo.

🔗 🏳🏴URL: https://developer.mozilla.org/es/docs/Learn


👉📚 Cómo se hace de W3Schools

Desde la w3schools tenemos distintos ejemplos de como realizar desde una cabecera con vídeo o un botón animado.

🔗 🏴URL: https://www.w3schools.com/howto/default.asp


👉📦📑 APIs públicas

APIs para usar en tus pet projects o en proyectos de pruebas.

🔗 🏴URL: https://github.com/public-apis/public-apis


👉📦🖊 Mejores prácticas para Node

Documento donde nos ponen las mejores prácticas para utilizar NodeJS.

🔗 URL: https://github.com/goldbergyoni/nodebestpractices/blob/spanish-translation/README.spanish.md


👉📦🖊📑 Frontend check-list

前端清单是你在将HTML网站/页面启动到生产环境之前需要拥有/测试的所有元素的详尽列表。

🔗 🏴网址https://github.com/thedaviddias/Front-End-Checklist


👉🖊 泊坞窗手册

非常完整的使用Docker手册,从安装到如何使用它。

🔗 🏴网址https://www.freecodecamp.org/news/the-docker-handbook/


👉🖊📚 新桂亚教程

Neoguia教程,你会发现Vue,React,JavaScript...强烈推荐。

🔗 🏳网址https://www.neoguias.com/tutoriales/


👉🖊📚 教程语言JS

在这个页面上,你会发现很多与JavaScript相关的东西(也是HTML,CSS或终端)。。

🔗 🏳网址https://lenguajejs.com/


👉🖊 Linux 终端手册

来自freeCodeCamp的有趣文章,关于Linux的控制台命令(也适用于macOS)。这是一个很长的清单,我认为它非常完整。

🔗 🏴网址https://www.freecodecamp.org/news/the-linux-commands-handbook/


👉🖊 Windows/Linux/OSX Terminal Manual

DjangoGirls手的命令行教程,在这种情况下,我们包含了Windows终端。

🔗 🏳网址https://tutorial.djangogirls.org/es/intro_to_command_line/


返回索引