ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

初学前端需要怎么学习?

2021-04-09 18:00:49  阅读:127  来源: 互联网

标签:React Vue 框架 开发人员 前端 学习 初学 CSS


1、首先确定你的目标或道路

我们将讨论很多技术,趋势和工具,但我们不希望您不知所措,因此你需要首先决定要成为一名Web开发人员要做什么,因为这将帮助你选择合适的工具。和学习技术。成为Web开发人员的原因有很多,下面列出了一些选择因素:

你想作为一名Web开发人员在一家公司工作,这是最普遍的原因。

你想以自由开发人员的身份来开始自己的业务或代理。

你可以成为其他公司的顾问。

你可以创建自己的应用来赚钱。

编码是你的业余爱好。

从上述感兴趣或目标的领域,你可以选择适用于你的目标的正确工具和技术。如果你的目标是成为一名前端开发人员,则可以选择前端开发的工具和技术。后端和全栈开发也是如此。

2、从HTML和CSS开始

HTML和CSS是Web开发的基本构建块。无论您的Web应用程序有多先进,或者使用什么框架和后端语言,都必须使用HTML和CSS构建前端应用程序。因此,这是在Web开发中要学习的第一件事。

HTML5(语义元素,属性,文档类型等)

CSS基础知识颜色,字体,位置,盒子模型等。

CSS Grid和Flexbox对齐内容或创建列。

CSS自定义属性

3、前端必须语言:JavaScript

学习HTML和CSS之后,接下来需要学习的是Vanilla Javascript。对开发人员来说,掌握javascript基本知识非常重要。您将在服务器端语言(例如PHP,Python或http://ASP.net)中使用大量javascript,并且如果您想与React,Angular,NodeJS,Vue或任何其他javascript框架或库一起使用,则非常需要学习这种语言。以下是你应该在javascript中涵盖的一些重要主题…

JavaScript基础知识(变量,数据类型,函数,条件等)

DOM(文档对象模型)

JSON(JavaScript对象表示法)

提取API(请求/响应/ Ajax)

如果您想转向React,Vue,Angular或其他框架,现代JS(ES6)概念对于学习非常重要。

4、JavaScript 框架

JavaScript框架在开发过程中提供了一个已经构建好的JavaScript代码结构,常用的框架有:AngularJS,VueJS,ReactJS,BackboneJS,EmberJS等。不同的框架擅长不同的应用场景。这些框架大大提升了开发的效率,并且能够和一些JS库如jQuery配合使用尽量减少原生JS编码。会使用至少一种JavaScript框架已经成为前端学习者的必会技能之一。

5、CSS框架

学习CSS框架的普及程度不如去年,但对于不擅长设计的开发人员而言,仍然非常相关或有用。有许多流行的CSS框架可供使用,其中一些如下。

Bootstrap是最流行的CSS框架。学习引导程序也有助于学习其他框架。

Tailwind CSS是其他正在流行的框架,与其他框架几乎没有什么不同。它是一组实用程序类,因此您可以创建自己的按钮和其他看起来与其他按钮确实不同的东西。它们也是高度可定制的。

物化

布尔玛

6、响应式布局

您的应用程序应该在所有类型的设备(例如智能手机,平板电脑,台式机,iPad或任何其他屏幕尺寸的设备)上都可以查看和使用。因此,了解创建响应式设计或布局非常重要。让我们来看一些重要的主题。

了解如何设置视口

媒体查询不同的屏幕尺寸。

流体宽度

雷姆单位

移动优先

7、响应式布局和移动端设计

随着移动设备的普及,越来越多的人会在移动设备上浏览网页,甚至逐渐超过了在电脑上浏览的次数。所以毫无疑问的是,响应式布局和移动端设计技能对于前端工作人员来说也是非常重要的。响应式布局就是页面根据屏幕宽度的大小和设备的类型进行布局甚至内容上的调整。

例如,一个网页在电脑上浏览时,由于屏幕比较宽,因此可能会出现图标元素的多列并排,但是如果是手机等宽度较小的屏幕,则需要适当调整列数,从而使人们在移动端上也能正常舒适地浏览内容。这样的布局就是响应式布局。

移动端设计包含了响应式布局,但也包含了设计单独的移动端。在有些场合我们希望用户在移动端所看到的内容和电脑端所看到的可能会完全不同,例如国内支付宝的电脑端和移动端完全不一样。电脑端因为其屏幕大可以看见更详细的信息,但移动端因为屏幕版面的限制,要求展示必须简单清晰。

8、基本部署

此时,一旦你知道应该为前端开发学习什么工具或技术,就需要知道如何在Internet上部署前端网站。如果你正在为小型企业构建一些小型应用程序,登录页面或个人站点,则无需学习AWS或DevOps,仅因为它们具有光泽和新潮。你将使事情变得更加复杂而不是简单。你需要在2020年学习一些部署工具和步骤。

域注册(Namecheap,Google等)

托管托管(InMotion,Hostgator,Bluehost等)

静态主机(Netlify,Github页面)

SSL证书。

FTP,SFTP(文件传输协议)非常适合小型应用程序。

SSH(安全外壳),用于高级应用程序。

CLI和Git。

到目前为止,我们讨论的任何工具,技术趋势或步骤都是前端开发的一部分。您尚不知道该框架,但可以为个人和小型企业构建网站,也可以构建适合移动设备的布局。您还可以使用到目前为止讨论的工具或技术来部署小型应用程序或项目。如果您想申请工作,那么学习一些前端框架(如React,Vue或Angular)将是很棒的。

9、前端框架和状态管理

框架使您可以进行更高级的前端开发。框架为您提供了许多优势,例如可重用的组件,更有条理的UI或页面交互。这对于协作更好,也有助于编写简洁的代码。另外,了解状态管理。每个框架都有不同的方法。以下是2020年的一些流行框架和状态管理器。

React:React库是最流行的Web开发学习方法,与其他框架和库相比,它相当容易。React开发人员还有很多工作要做。您可以将 Redux和 Context API与Hooks一起使用以进行状态管理。

Vue:Vue也越来越受欢迎,开发人员也更喜欢学习Vue。与React和Angular相比,Vue最容易学习。VueX是为视图而构建的状态管理器。

Angular:此框架通常在大型组织中使用。它具有相当陡峭的学习曲线。用Angular学习 TypeScript也很好。它允许您使用可选的静态类型并支持ES2015的功能。NGRX和 Services是可以学习此框架的良好状态管理器。

可选学习:

如果您具有这三个框架之一的知识,那么您还可以使用Svelte,它是一个JavaScript编译器,可让您生成纯净的原始JS代码并帮助您轻松构建用户界面。

了解服务器端渲染。NextJS(React)和NuxtJS(Vue)是允许您在服务器上运行React和Vue的框架。两者都有很好的功能,例如更好的SEO,文件系统路由,自动代码拆分,静态导出,JS中的CSS和许多其他功能。

静态网站生成器:Gatsby(反应式)和Gridsome(Vue)

我们已经讨论了所有大多数前端开发工具和技术。现在让我们讨论成为后端开发人员或全栈开发人员的语言和技术。

学习是一个艰苦的过程,当然如果能把技术学成,最后也一定可以获得高薪工作。掌握一个好的学习方法,跟对一个学习的人非常重要。今后要是大家有啥问题,可以随时来问我,能帮助别人学习解决问题,对于自己也是一个提升的过程。自己整理了一份最全面前端学习资料,从最基础的HTML+CSS+JS到HTML5的项目实战的学习资料都有整理这是我的前端技术交流Q
un++++++++++++++

钱面是603----

中间是985----

后面是993----++++++++++++++

有问题随时在里面问我,能给大家提出很多宝贵建议。

10、数据库(选择一项)

大多数Web应用程序都需要一个存储数据的地方。在某些情况下,某些技术或某些语言可以与某些数据库配合使用。例如:在Mern堆栈中,M代表MongoDB,而在LAMP堆栈中M代表MySQL,但完全取决于您要为应用程序选择哪个数据库。我们将讨论2020年一些流行的数据库。

关系数据库:RDBMS仍然是最受欢迎的数据库。最喜欢使用PostgreSQL,MySQL,MS SQL。

NoSQL:MongoDB,RethinkDB,CouchDB

云数据库:Firebase,Azure Could DB,AWS

轻量级和缓存:Redis,SQLlite,NeDB

在学习数据库时,您还将学习RDBMS,ORM(对象关系映射器)或ODM(对象数据映射器)的SQL(结构化查询语言)。GraphQL :(可选)您可以了解现在流行的GraphQL。这是API的查询语言。它具有类似于JSON的简单语法,并且相当容易实现。

标签:React,Vue,框架,开发人员,前端,学习,初学,CSS
来源: https://blog.csdn.net/jinmu520/article/details/115556095

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有