What do you need to know to be a web front-end development engineer?-HTML Tutorial-php.cn

What is the front-end

Web front-end development engineer, the main responsibility is to use various web technologies such as (X)HTML/CSS/JavaScript/DOM/Flash to develop products Interface development. Produce standard optimized code, add interactive dynamic functions, develop JavaScript and combine it with background development technology to simulate the overall effect, carry out web development that enriches the Internet, and is committed to improving user experience through technology. (This is from Baidu, it’s too official)

At first I thought the front-end was HTML+css+javascript, but as far as I know so far, the front-end is divided into many positions, such as reconstruction, javascript front-end engineer, node front-end engineer, It seems that Tencent also has a front-end interaction designer. Of course, there is also a full-stack engineer who understands everything. This is what I want to achieve. (Personal opinion)

Getting started with html, css and javascript

At the beginning, I studied on the website w3school. At that time, I didn’t know where to go other than here. Study, and don’t know how to study. However, I think it is relatively normal to get started here. Although many knowledge points are not very comprehensive, it is enough for a novice to get familiar with html tags and see the effect of static pages.
If you want to learn, start with html, study each chapter carefully, and then type the code according to the tutorial on Notepad (familiar)
After learning HTML, you can start learning CSS styles. You still have to read and type step by step, and gradually become familiar with various CSS selectors. But it’s not enough to finish studying here, because the tutorials here are not very clear about many models and several positionings. So after studying this, you can go to the MOOC to learn the basics of web page layout and master the three major layout techniques—— Fluid layout, floating layout and absolute positioning layout; learn knowledge about standard document flow, box model, float attribute and position attribute. Then take a look at the fixed layer. Now you should basically understand how css works.
Then let’s get familiar with how to use css for web page layout, and the separation of simple layout structure and performance principles of web pages. After watching these two videos, you should have a deeper understanding of html and css. .
At this time, you can go back to w3school to learn some knowledge points of css3 and html5, but you still have to familiarize yourself with various new tags first. After learning, you can first look at the editor options below and then come back.
Then you can start learning the basics of javascript from Liao Xuefeng’s blog. After reading the javascript tutorial, you can take a look at form verification, pop-up layers, and Tab switching on the MOOC. Here you can start to feel the magic of javascript.

Selection of editor

#You can simply use the editor that comes with window at the beginning, and change the suffix to .html after writing. It can be opened in the browser.
nodepad++, I haven’t used this editor much, but if you are very powerful, you can use this for programming.
Dreamweaver is strongly recommended not to be used because a lot of codes are automatically generated. Although it is very convenient, it is not conducive to learning and the effect is very poor. In my opinion this editor is just for people who are not programmers.
sublime Test, this editor is highly recommended by me personally. If you like to watch videos and learn, you can go to MOOC to watch the sublime tutorials. If you like to read text, you can go to the Blog Park sublime tutorials. Look.
vim, although this editor is easy to use, it is not recommended for beginners. After all, I am not very good at using it.

Response

In response to the question raised by Jane friend in the previous article, I would like to reiterate here that I am not a technical expert yet. , I am just a little scumbag who has just started working on the front end, so please don’t be offended if I have written any technical knowledge wrong. I would also trouble you to tell me in the comments. Thank you very much.
I would like to apologize to some Jane friends who want to add the editor on WeChat, QQ, etc. I don’t want other things to interfere with my personal life. Also, because the final exam is coming soon and I am in the midst of intense review, I rarely use WeChat QQ. If any friends have any questions or suggestions and want to contact the editor, they can send an email to 835657506@qq.com, or please directly contact us at 835657506@qq.com Contact me via text message.

Further learning of html, css and other tools

I believe that after learning the skills mentioned in the previous article, you will have a better understanding of html and css There should be a preliminary understanding and use. At this time, you can create your own ideas or imitate some websites to make some complete small pages to further familiarize yourself with html and css. For example, I once made a personal resume page and imitated QQ to make a login and registration page, or boys can do this Some pages such as birthday wishes are used to show love to girls (because programmers are relatively shy). Of course the result is not important, the important thing is the process!
For novices, I think imitation and reference are very important at the beginning, because the code written by novices will be very messy and irregular at the beginning, so you can first imitate other people's codes and various How the layout is coordinated. Therefore, after getting familiar with it, you should also take a look at the HTML and CSS code specifications. These specifications are very important for future development.
Another thing is to give yourself some pressure and motivation, forcing yourself to complete some tasks. Of course, for many people, they don’t know what to do if there is no one to take care of them. So it may quickly fall into disuse. Therefore, the editor here strongly recommends a Baidu front-end ife. There are various tasks here, from beginner to advanced, and each task will be accompanied by some online reference materials, which is very suitable for novices to learn.
Next, let’s talk about a very embarrassing point in the previous paragraph, that is, CSS must be compatible with various browsers. Now the mainstream browsers include Google (Chrome), Firefox ( fireFox), Opera, Safari, and the really annoying IE. I won’t talk about it here for the time being, because the editor doesn’t know much about CSS compatibility. Generally, frameworks are used for compatibility, which will be discussed later.
Speaking of browsers, we also have to talk about the browser’s debugging function. Here I mainly use Chrome’s developer tools, and there are a lot of information about the use of Chrome. For other tutorials, many classmates and friends around me also use the Chrome browser, because it is a very friendly browser for front-end developers.
Speaking of Chrome browser, how can we not talk about the FQ tool? I think most people generally use Baidu as a search tool, but in fact there are many good search tools. Engines, such as Microsoft's Bing, Sogou, and Google. I often use Google myself, because in terms of technology, foreign technology is much more advanced than domestic technology, but to use Google, you must first conduct FQ. Here are the recommendations Lantern, an FQ artifact, can be used as long as you download it.
After you are familiar with using html and css, you can start using some UI frameworks for rapid development. There are many of these frameworks, but for novices, it is recommended to use the bootstrap framework. By the way Attached is the tutorial Getting Started with Bootstrap. Many experts told me that this framework is for backend developers who cannot write beautiful pages, but I think as a novice, this framework is enough and you can also take a look at it. The source code of this framework, learn how the master’s code is written.
Let’s talk about html and css here first. Of course, it is much more than that. There is also some knowledge about mobile development, responsiveness, htm5, etc. However, the editor’s ability is limited. I'll share it later when I learn more.
I believe many people have heard of the version control tool git. For getting started, I highly recommend Liao Xuefeng’s git tutorial and git reference manual. After you learn to use git, you can not only convert your own code Put it on github, and you can also browse project codes written by others and find many resources you need. Of course, the main function of git is not this, but novices can practice using their own code.

Some front-end learning resources

Front-end knowledge system
Comprehensive list of front-end URLs
General CSS notes, suggestions and guidance
If you encounter any problems during the learning process or want to obtain learning resources, you are welcome to join the learning exchange group
343599877, let’s learn front-end together!

The above is the detailed content of What do you need to know to be a web front-end development engineer?. For more information, please follow other related articles on the PHP Chinese website!