Front end novice tutorial! How to get started with web front end

BOM485480 2021-02-22 23:20:22
end novice tutorial started web

Recently, I received some private letters asking me , I want to learn the front end , How to learn ? How far can we learn to work ? I've been in this business for 11 years , I've interviewed a lot of people , I have also brought many new and fresh students in the enterprise . So in this article, I want to share with you how beginners should learn web, Personal experience of how to get started .

Mentality and personal learning methods

Let's talk about mentality first , I often see a lot on the Internet that the front end is easy , So I want to learn . Actually , Now with the front and rear ends separated , The front end also tends to be engineering , It's not nested in the back-end project to write htmlcss It's OK , There are more and more things to learn . So I hope you can keep learning attitude and interest in the front end , The most important thing at the beginning stage is to work hard , Even the simplest code needs more practice .

Learning methods , I want to share with you the Feynman learning method , I hope we can improve our learning efficiency , Now I'm learning new knowledge , We're using the same method . In short , Feynman learning method is 4 A step .

  1. Concept : After defining the theme of your study , To understand its basic concepts , Try to read and recite , An official concept of knowledge , It can be said to be the most concise and rigorous summary of it .

  2. Teach others : Speak out or write down this concept with your own logic and discourse

  3. review : Review your logic , If it doesn't go smoothly, try to find out what's wrong , Rearrange your logic , Until the whole logic is clear

  4. simplify : At the fourth step, I can say that my logic of this knowledge is very clear , What to do at this time is , Put your logic in the simplest words , Remove all proper nouns , Even if 8 The degree to which a 12-year-old child can understand .

I've been in the front end for years , This paper summarizes a set of intensive video and learning route for front-end learning , If there are partners interested in front-end development , Whether you want to change careers , Or college students , And those who want to improve their abilities at work web Front end party , Welcome to join my front-end development exchange group :603985993 I hope you can communicate sincerely !, Synchronization with enterprise requirements . Friends are learning to communicate in it , Every day, Daniel will regularly explain the front-end technology ! You can also follow my WeChat public account :【 Front end international students 】 Update the latest technical articles every day .

Front end learning route

The first part HTML

The main thing at this stage is to practice . Use the fastest time to get all the HTML The labels are all over the place , There's no need to force memory , But be sure to knock it one or two times .

This section recommends two websites :


2、 Novice tutorial

The second part CSS

CSS For cascading style sheets ( English full name :Cascading Style Sheets), Mainly used to modify static web pages , Such as text size , Color, etc. .

This learning method , It's suggested to follow the code in the tutorial first .

In the words of books , You can do a little bit of flipping 《CSS Authoritative guide 》, This book can help you understand CSS There is a deeper understanding of , After working in the back , You can come back and read it .

The third part javascript

Study js Before , Be sure to master HTML and CSS.

It's also the easiest place to give up , I suggest that we can put js Learning also makes a simple split .

  1. Learn basic grammar

Here, I'll follow the online tutorial , If you don't understand, you can remember to knock several times first .

  1. practice

The practice part is to find a few js Small projects , Do it again , When you do a small project, you will get a sense of accomplishment , I want to show my learning achievements to my friends , When you get a sense of accomplishment from the code , It can be said that this is a successful entry .

  1. Further study

Here we can start to take actual combat or improve the quality of our own code as the goal .

I recommend some js The relevant books

《JavaScript DOM Programming art 》

《javascript Advanced programming 》

《 modern JavaScript course 》

At the same time, it can also be in GitHub Or other channels to find some projects to practice .

The fourth part Frame learning

With js After foundation , You can learn some JS The relevant framework has been established .

Here we suggest that you can start from Vue Starting with , Recently, several front-end and back-end separation projects are Vue, And recently Vue It is used more and more frequently in China , Now in the front end market github star It's number one .

The best information is the official document , Guide ahead -Vue Official website

At the end

For those who are ready to get started, they may not know what materials to read , I organized some front-end learning related , It is mainly suitable for students who want to get started or improve themselves , No matter you are 0 The foundation is just beginning , You can get to know , It contains 0 Basic learning routes , Interview guide, etc .

My personal suggestion focuses on several aspects :

1、 The basic skills of the front end 、 Market talent situation

2、Echarts frame 、 The front-end special effects commonly used by big factories

3、 For standard “ATM( Ali 、 tencent 、 byte )” The necessary skills of front-end Engineers

4、 The development path from Xiaobai to high paid front-end workers

5、 Job interview skills

6、 The project must be done !- utilize Gitee Pages Create your own website 、“ The front end is dazzling ” Project source code package

Last , I hope this article can help you , I also hope that everyone can get the results they want through personal efforts .
 Insert picture description here


  1. How to insert an element into the specified index of an array?
  2. 配置证书使得ngnix能够发布https的可信网站
  3. HTTP接口调试利器!4.8万Star的HTTP命令行客户端!
  4. 前端url链接带的参数加密
  5. HTTP接口调试利器!4.8万Star的HTTP命令行客户端!
  6. Is react server components OK?
  7. Summary of front end basic knowledge (4) - webpack
  8. Sass nesting rule
  9. 前端三大框架:数据绑定与数据流
  10. axios 源码阅读(一)--探究基础能力的实现
  11. Javascript中的事件冒泡与捕获
  12. #研发解决方案#易车前端监控系统
  13. 【JS】877- 35 个 JavaScript 的奇葩知识,长见识了!
  14. #研发解决方案#易车前端监控系统
  15. 高性能 Nginx HTTPS 调优 - 如何为 HTTPS 提速 30%
  16. Front end, school recruitment, Taobao, guide
  17. Front end, social recruitment, Taobao, guide
  18. javascript 十大经典排序
  19. Draw a mellow cactus with the boneless technique of Meticulous Brushwork
  20. HTTP 1.x 學習筆記 —— Web 效能權威指南
  21. Vue3元件(九)Vue + element-Plus + json = 動態渲染的表單控制元件
  22. 我的 HTTP/1.1 好慢啊!
  23. Vue為何採用非同步渲染
  24. The response status was 0. Check out the W3C XMLHttpRequest Level 2 spec for
  25. Front end monastery
  26. How to quickly understand a new front end project?
  27. webpack4.X核心工具库之tapable实例对象Hook
  28. webpack4.X核心工具库之tapable实例对象Hook
  29. C++使用libcurl进行http通讯
  30. Can be directly used in HTML special character table Unicode character set
  31. C++使用libcurl进行http通讯
  32. Java traverses list < string > and takes out the string elements in it, and splices them with ","
  33. Self taught web front end more than two months, talk about my harvest and progress, learning summary
  34. vue 中使用 css 变量
  35. 深入了解React中state和props的更新
  36. 百度分享不支持https的解决方案
  37. [practical] ABAP mail sending (HTML + attachment)
  38. [practical] ABAP mail sending (HTML + attachment)
  39. Teach you how to select products with less profit and competition in Amazon Product Development (1)
  40. 【微前端】微前端最终章-qiankun指南以及微前端整体探索
  41. 【微前端】微前端最终章-qiankun指南以及微前端整体探索
  42. Vue-Cli 创建vue3项目
  43. Go in the front of the progress of u boot v7.0 U disk boot disk production tools
  44. 使用NTLM的windows身份验证的nginx反向代理
  45. Rust教程:针对JavaScript开发人员的Rust简介
  46. 使用 Serverless Framework 部署个人博客到腾讯云
  47. #研發解決方案#易車前端監控系統
  48. Vue changes localhost to IP address and cannot access
  49. JavaScript进阶学习
  50. HTML5 from entry to proficient, realize annual salary 10W +, zero basic students must see
  51. Vue:vuex状态数据持久化插件vuex-persistedstate
  52. Vue source code analysis - start
  53. Vue -- the child component calls the method of the parent component and passes parameters --- props
  54. React-Native 获取设备当前网络状态 NetInfo
  55. 高性能 Nginx HTTPS 调优 - 如何为 HTTPS 提速 30%
  56. How to learn HTML5? How can Xiaobai start HTML5 quickly?
  57. HTML + CSS detailed tutorial, this article is enough, but also quickly save
  58. JavaScript高级:JavaScript面向对象,JavaScript内置对象,JavaScript BOM,JavaScript封装
  59. Why Vue uses asynchronous rendering
  60. JavaScript高级:JavaScript面向对象,JavaScript内置对象,JavaScript BOM,JavaScript封装