Have you ever seen your very favorite websites, whether studied its layout, you have not thought about whether I can also achieve a even better than you look site!
All of these sites visible interface and special effects are built with front-end development (sometimes also referred to as "front-end Web Development"). Front-end developers are some of the most beloved characters in the current wage level of the major well-known Internet company's front-end developers even more than the back-end developers
What's that front-end developers need to learn it? This article deals decomposition front-end developers to use all the skills and needs, starting with the definition of front-end development begins.
What is the front-end development?
Although web design is the appearance of the site, but the front-end development is designed to show pages on the web in the form of code, and add some features special effects! So that it has a certain degree of interactivity!
What is the front-end developers?
Xiao Bian here to build a front-end learning exchange buttoned group: 132 667 127, I sort of front-end-date information and advanced development course, if there is need to think, you can add the group to learn together with the exchange
Front-end Web developer Web design is to achieve people through HTML, CSS and JavaScript coding language. Although it is not so common, but the front-end developers are sometimes called "client developers," to distinguish it from the back-end developers, is working behind the scenes back-end database programming. If you go to any site, you can view the front-end developers work and even can see the different pages of PC and mobile phone to show the page in the navigation, layout (including this article page).
This article will break down in the front-end Web developers need to know what the work front-end technology?
Front-end Web developers use what skills?
Front-end Web developers use three main coding language used to write Web sites and Web applications created by Web designers to:
HTML
CSS
JavaScript
Their code running in the user's browser (rather than the back-end developers, the code running on the Web server). Think of it a bit like this: just as the back-end developers to design and create the system to work in the city (electricity, water and sewer, zoning, etc.) engineers, and front-end developers is the man out of the street, make sure everything is properly connected, so that people can live their lives (a simple analogy, but you get a rough idea). Front-end Web Developer is also responsible for ensuring that there is no front-end error or errors, and ensure that the design appears in a variety of platforms and browsers.
- HTML、CSS
HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) is the basic building block coded Web. No two things, you can not create a website design, and you end up getting not just plain text format on the screen. If no HTML, you can not even add images to a page!
Before starting any Web development career, you have to master HTML and CSS coding. The good news is, you can complete one solid working knowledge of any one in a few weeks.
Basis of this foundation: only HTML and CSS knowledge can make you build a basic website.
- JavaScript
JavaScript allows you to add more features to the site, and you can create many basic Web applications using HTML, CSS and JavaScript (referred to as JS). At the most basic level, JS for creating and controlling real-time updates such as maps, interactive games, movies and online content. Pinterest sites such as extensive use of JavaScript to make their user interface is easy to use (in fact, as long as you fixed the page will not reload the page, thanks to JavaScript!).
It is also the world's most popular programming language, so no matter how your development career planning, this is a very valuable thing.
- jQuery
jQuery is a JavaScript library: a set of plug-ins and extensions, faster, easier to use JavaScript development. jQuery does not have to write all the code from scratch, but rather let the front-end Web developers to add ready-made elements for the project, then customize as needed (to know a reason for such an important JavaScript). You can use jQuery for the countdown timer, auto-complete the search form, and even automatically re-arrange and adjust the grid layout.
- JavaScript framework
JS framework (including AngularJS, Backbone, Ember and ReactJS) provides a ready-made structure for your JavaScript code. There are different types of JavaScript frameworks to meet different needs, although the actual work is mentioned in four of the most popular list. These frameworks by providing a quick start to really accelerate your development and can be used with libraries like jQuery, to minimize the program that you must perform.
- Front-end framework
CSS and front-end frame (the most popular front-end framework Bootstrap) did what JS JavaScript framework to do for CSS framework: they provide a starting point for faster encoding for you. Because so many CSS project to start from exactly the same elements of the project, so your pre-defined framework for all of these elements are very valuable. Most front-end developer job listings hope you are familiar with how these frameworks and how to use them.
- Experience CSS preprocessor
A front end preprocessor is another element that developers can use to accelerate CSS encoding. CSS CSS preprocessor adds additional features to keep the scalability and ease of use of CSS. It will publish your code before it is processed to your site, and convert it to the format and good cross-browser friendly CSS. According to the actual work list, SASS and LESS are two of the most popular pre-processor.
- It has the experience and the API RESTful service
In the not too technical situation, REST represents the Representational State Transfer. From the fundamental point of view, it is a lightweight architecture, network communications, RESTful API service and on the Web is to follow the REST architecture to simplify Web services. Read more here about REST and RESTful services.
Suppose you want to write an application that displays all of your social media friends to follow you as a friend of the order. You can call Facebook a RESTful API to read your friends list and returns the data. Twitter is also true (which also uses RESTful API). For any service RESTful API, the general process is the same, but the data returned will be different.
While this sounds very complex and technical, but it is a set of simple guidelines and practices, you can set expectations and you will know how to communicate with a Web service. They also enable Web services better performance, more scalable, more reliable, easier to modify or move.
- Responsive and mobile design
In China alone, more people access the Internet through mobile devices rather than desktop computers, so no wonder the response and mobile design skills is very important for employers. Responsive design means the site layout (sometimes features and content) will vary depending on screen size and device users.
例如，当从具有大显示器的台式计算机访问网站时，用户将获得专门为鼠标和键盘用户创建的多列，大图形和交互。在移动设备上，同一网站将显示为针对触摸交互进行优化的单个列，但使用相同的基本文件。
移动设计可以包括响应式设计，但也包括创建单独的移动专用设计。有时，您希望用户在台式计算机上访问您的网站时获得的体验与您希望他们从智能手机访问时看到的体验完全不同，在这种情况下，移动网站完全不同是有意义的。例如，拥有网上银行的银行网站将受益于一个单独的移动网站，该网站允许用户查看最近的银行位置和简化的帐户视图（因为移动屏幕较小）。
- 跨浏览器开发
现代浏览器在一致地显示网站方面已经相当不错，但是他们在幕后如何解释代码仍然存在差异。在所有现代浏览器与Web标准完美配合之前，了解如何使每个浏览器按照您希望的方式工作是一项重要技能。这就是跨浏览器开发的全部意义所在。
- 测试和调试
对于前端Web开发人员来说，这是一个事实：错误发生。熟悉测试和调试过程至关重要。
单元测试是测试单个源代码块的过程（指示网站应该如何工作的指令），单元测试框架提供了一种特定的方法和结构（每种编程语言都有不同的方法和结构）。
另一种常见的测试类型是UI测试（也称为验收测试，浏览器测试或功能测试），您可以检查以确保网站在用户实际在网站上执行操作时的行为。您可以编写测试，在执行操作后在页面上查找特定HTML等内容（例如，确保如果用户忘记填写所需的表单字段，则会弹出表单错误框）。
调试只是将这些测试发现的所有“错误”（错误）发现（或者一旦您的网站启动就会发现您的用户），戴上您的侦探帽，找出原因和方法，并解决问题。不同的公司使用略有不同的流程，但如果您使用过程，您可以很容易地适应其他人。
- 学会使用Git
Version control system, you can track changes over time to code done. If you screw up, they can easily revert to an earlier version. So, if you add a custom jQuery plug-in, suddenly interrupted half of the other code. You can roll back to a previous version, and then use other solutions to try again, rather than having to manually encrypt undo it and fix any errors.
Git version control management system is the most widely used. Learn how to use Git to fit almost any need development work. This is one of the important work skills developers need to have, but in fact very few people talk about these skills.
- problem solving skill
If all front-end developer must have a thing, no matter how official job description or title, this is an excellent problem-solving skills. How best to implement the design from determined to fix errors that occur, how to make the front-end code to work with back-end code is implemented, it is to develop creative problem solving.
Suppose you have created a fully functional website front-end and back-end developers to it, so that they integrate with content management systems. Suddenly you stopped working half function. A good front-end developers will see this as a problem to be solved, but not a disaster. Of course, the outstanding senior front-end developers will foresee these problems, first try and prevent these problems!
What's next?
That's all front-end web development skills to learn and master! Is not it a great feeling? I want to learn it? So let's get started! Start with HTML and CSS skills to start and then move on to more advanced skills, such as responsive Web development, Git and JavaScript, these skills html Chinese network will be able to meet you! All tutorials for free, and welcome!
Above is to become a professional front-end developers, what need to learn? Details,