新手 Web 开发人员可能犯的 6 个错误以及如何避免它们
依赖 jQuery
依赖 JavaScript 框架和库
依赖 Bootstrap
不模块化你的代码
不使用语义HTML
不学习响应式设计
学习 Web 开发令人望而生畏。海量的资源和教程,让人眼花缭乱。对于 Web 开发初学者来说,学习最佳实践和技术并专注于其中往往非常困难。因此,我们将探讨初学者常犯的六个错误以及如何避免这些错误。
通过学习如何避免这六个错误,您将能够给潜在雇主留下深刻印象并获得第一份工作。
依赖 jQuery
jQuery是一个 JavaScript 库,它为 DOM 操作、事件处理、动画等创建了一个抽象层。
许多开发者在踏入前端领域时,都误以为 jQuery 是 JavaScript 的简化版本。大多数人没有意识到,jQuery 并不能取代 JavaScript,而且过度依赖它会严重影响你作为前端开发者的成长。
许多雇主甚至会将 jQuery 视为求职者的障碍,因为它会显示出求职者对 JavaScript 核心概念的理解不足。因此,如果你选择学习 jQuery,切勿将其作为在 Web 应用程序中添加行为的辅助工具。
建议:精通 JavaScript,就像熟悉自己的手背一样。Kyle Simpson有很多很棒的(免费)在线书籍,可以帮助你学习JavaScript 的方方面面。
依赖 JavaScript 框架和库
React、Vue、Angular 等等!这些是目前 JavaScript 社区中一些热门的框架和库。
虽然掌握并熟练使用流行的 JavaScript 框架和库是一项很有价值的技能,但你也必须具备扎实的 JavaScript 知识。如果你不学习 JavaScript 的基础知识,就永远无法真正了解这些框架的底层功能。有些人学习的最佳方式是从基础开始,逐步深入到框架。而另一些人则选择深入研究框架或库,并在学习过程中不断巩固基础知识。无论哪种方法适合你,都请坚持下去!但不要忘记,JavaScript 知识对于成为一名成功的 Web 开发者至关重要。
建议:打好 JavaScript 基础,才能在技术面试中脱颖而出。如果你对 JavaScript 有深入的理解,那么在框架或库中使用起来就毫无问题。
如果您不确定如何开始学习 JavaScript,请查看我之前的博客文章,了解如何开始。
依赖 Bootstrap
Bootstrap是一个用于构建网站的 UI 框架。许多刚入门的开发者将 Bootstrap 视为一种设计 Web 应用程序样式的简便方法。虽然它在特定情况下很有用,但它不应取代您对 CSS 和响应式 Web 设计的知识。
在小型 Web 应用程序中包含 Bootstrap 可能会影响性能。自己编写 CSS 代码在加载时会更轻松。雇主更希望看到你对 CSS 的了解,而不是任何 UI 框架。
建议:学习CSS Flexbox 和 Grid来实现响应式布局,学习 CSS 基础知识,掌握之后再学习Sass。如果你在设计应用时遇到困难,可以去dribbble寻找设计灵感,或者看看Wix或Squarespace上的模板。
不模块化你的代码
确保代码模块化至关重要;不要把所有代码都放在一个 HTML 文件中。将 HTML、CSS 和 JavaScript 放在一个文件中不仅不好,而且会造成混乱,难以测试。
建议:将 JavaScript 拆分成外部文件。这样可以将功能与视图分离。一旦你熟悉了 JavaScript,我建议你学习原生 Web 组件。
它将极大地增强你的项目架构,并使编写单元测试更加容易。你还可以考虑使用像 React 或 Vue 这样的 JavaScript 框架或库。它们都能让你轻松实现模块化组件。
不使用语义HTML
在审查候选人的作品集和项目时,我经常看到的一个现象是过度使用<div>
和<span>
。你应该始终使用语义化的 HTML5 元素。为什么?因为它更容易理解。
建议:认真了解你掌握的语义元素。学习如何创建标记层次结构。此外,学习网页无障碍是一项很棒的技能,可以给潜在雇主留下深刻印象。
不学习响应式设计
如果您刚刚开始 Web 开发之旅,响应式设计技能必不可少。大多数网页浏览都是在移动设备和平板电脑上进行的,因此我们的网站必须能够响应不同的屏幕尺寸。
建议:学习一两门响应式设计的课程。学习如何使用媒体查询来为你的程序设计不同的样式。学习Flexbox 和 CSS Grid也会很有帮助。你甚至可能想要采用移动优先的设计方法。
希望这些建议能帮助澄清一些常见的误解。记住,我们都是从一个地方开始的,随着时间的推移,一切都会变得更容易。
文章来源:https://dev.to/emmabostian/6-mistakes-youre-making-as-a-beginner-web-developer--how-to-avoid-them-5gj4