web front-end development web design

What is the difference between web front-end development and web production? Detailed

Web design generally includes the entire web page visual plan, provide PSD or PNG format of the main page preview, advanced a little bit will also give the standard color scheme, style design guide (contains general style design specifications: design concept, white space, button styles, the use of the scene) and other accessories. Large companies generally have interaction designers, mainly focusing on the ease of use and user-friendliness of the human-machine interface.

Front-end development is simply responsible for converting web design and interactive design solutions into working HtmlCssjs files.

In the Internet industry, web design and front-end development are different parts of a project.

Web design generally refers to interaction design and visual design, they are responsible for business needs into Web solutions, the end product is the interaction draft and visual draft, respectively, used to illustrate the appearance of the Web page and actions. while the front-end development is through the interaction draft, the visual draft, the expected effect of the realization of out, the final product is HTMLDemo, including HTML, CSS, JavaScript code. (But according to the three points of the total circle know, some companies CSS and JavaScript development is also separate, such as Tencent.)

Front-end development, the need to involve ajax interaction, the need to change the page display, complex ajax applications need to involve a lot of module division, business logic considerations, in ajax applications more and more mature and powerful today, a lot of the past back-end processing of the business logic of the work is also slowly placed on the user’s browser to complete, these jobs are also given to the front-end engineers to do.

If based on a clear division of labor, front-end development does not include ui design part, the main work lies in the cut map, making static pages, making special effects, jq, ajax, and the background of the program combined with the part.

We all think that the front-end development work mainly lies in the UI design and user experience. Three points to provide customers with front-end development content include: UI design, axure interactive documents, static page production, css3 animation and jq animation. The final product files provided include: img, css, js, html, icon, font. as for the combination of work with the background program can not be responsible.

What is the difference between web page design and web front-end

Design is the process of presentation, front-end design is through the color/composition/etc. elements to give the page character and features, the front-end is also to show, through the color of the first to capture their target audience, through the design of their own performance.

Of course, this is only a part of the web front-end design, which has been made – interface design. web front-end design is actually a web page production, after the web1.0 into the web2.0 after the front-end of the site has undergone radical changes, the web page is no longer just carrying a single text and images, it is in addition to the design but also to master the development of technology, such as: HTML, CSS and JavaScript, etc.

Web page production

Web page production is the product of the Web 1.0 era, produced in 2005 or so. Web pages at that time were mainly static pages.

A static page is one that enables a user to browse a web page but not interact with the server for data. For example, if you publish an article, the user can only view the images or text of this article, but cannot post comments on the page.

Some of you may have heard of the “Web Three Musketeers,” a group of Web development tools from the Web 1.0 era. The Three Musketeers refers to the three software programs “Dreamweaver, Fireworks, and Flash”.

Front-end development

Nowadays, “front-end development” is evolved from “web production”. The Internet entered the Web 2.0 era more than a decade ago. In the Web 2.0 era, there are two types of web pages: “static pages” and “dynamic pages”.

Static pages are the same as those described in the previous section, “Web Page Creation”.

A dynamic page is a static page that adds interaction with the server. For example, one day, Blu a little hard to watch a small video intended to ease, he opened a store for many years of the site, the site requires an account and password, Blu entered his account and password, and then logged in. This time the site backend server will be on this account and password verification, successful before you can log in.

Web2.0 era, if you only use the “web page three Musketeers” to do development, is unable to meet the needs of a large number of data interaction development. Now the “page development”, closer to the traditional website background development. Therefore, it is no longer called “web production”, but “front-end development”.

What is web front-end development?

First of all, what is web front-end development? In layman’s terms, when you open a website, you are often first attracted by those cool dynamic web designs. However, without a Web front-end engineer, these images would not move. How is such a dynamic web page realized? First of all, UI designers need to produce each picture according to the requirements of the marketing department; then Web front-end engineers realize the scrolling effect through technical means. Colloquially speaking web front-end engineers is to use HTML5, CSS3, Java, jQuery, Ajax and other technologies to make the UI design page effect into a web page, combined with Bootstrap, AngularJS and other latest JS framework and backend development engineers to ride the line, and ultimately realize to let everyone see the e-commerce platform on those moving beautiful page.

So what is UI design, UI that is (user interface) abbreviation, UI design refers to the software of human-computer interaction, operation logic, the overall design of the interface aesthetics. It usually includes graphic design, web design and mobile interface design.

Web design and mobile design is the direction of the position, you need to learn web interface design, PC client software interface design, HTML5 language, CSS style sheets, layout skills and browser compatibility and other technologies. Therefore, from this point of view, web front-end development and UI design is interoperable, that is to say, through the system UI training, you may become a web front-end engineer in the future!

The biggest difference between the two is: WEB front-end engineers are to write code, while UI designers focus on design. Therefore, for the majority of students in the end to learn UI design or WEB front-end development is good this question, Haven International suggests, learn which one is good, but the most important thing is to see your own interest. However, for beginners, whether it is UI design or WEB front-end development, as much as possible through the systematic training of more involved in some related knowledge, which will be more helpful for the future development of the workplace, you can better collaborate with each other and support each other in the workplace in the future.

Web front-end development how to do

In talking about WEB front-end how to layout before we comb the front-end layout type, specifically the following types:

1. static layout: regardless of the browser size of the specific how much the web page layout is always in accordance with the initial writing of the code when the layout to display. Conventional pc’s website are static (fixed width) layout, that is, set the min-width, in this case, if less than the width of the scroll bar will appear, if greater than the width of the content of this width is centered plus the background, this design is common in the pc side.

2. Streaming layout: the layout is characterized by a change in screen resolution, the size of the elements in the page will change but the layout remains unchanged.

3. Adaptive layout: adaptive layout is characterized by the definition of the layout for different screen resolutions, that is, to create multiple static layouts, each static layout corresponds to a range of screen resolutions.

4. Responsive layout: the layout is characterized by a layout style under each screen resolution, that is, the element position and size will change.

So how do we layout? By the following points to choose the layout.

1. If only the computer side, the best choice is a static layout.

2. If you do mobile, and the design of the height and element spacing requirements are not high, then the elastic layout (remjs) is the best choice, through a copy of the css a js adjust the font-size on the handle.

3. If the computer, mobile to be compatible, and the requirements are very high, then responsive layout or the best choice. The premise is that the design according to different height and width to do different designs, responsive according to media queries to do different layouts.

Website WEB front-end development need to master what technology_web front-end what technology is needed

Front-end application is very wide, the basic website, APP, HTML5 applets and so on need front-end development, so as long as the Internet products basically need front-end.

Front-end programmers cut the page to write the page, the cool effects on the Web, H5, is the front-end development of the big show. The most common combination of technologies used for front-end development is:


Web front-end development needs to master a few essential technologies are:

HTML_CSS core, JavaScript, VUE framework

web front-end is the most directly product-oriented among developers, User-oriented designers, the results of a development team is to rely on the web front-end to show, because users will not care about how powerful the processing of the background.

Backend development is to write the background, a variety of business logic, data processing, module interfaces, client interfaces and so on. Back-end developers are usually proficient in a Web programming language and a database management system. E-commerce platform to click on the filter conditions below for you to filter out the function of the baby as well as the number of people paying for the change in data, etc. are realized by the background to provide.

Currently web product interaction is becoming more and more complex, the user experience and website front-end performance optimization of these have to rely on the web front-end to do.

Front-end development is the realization of the site’s front-end code, including basic HTML and CSS and JavaScript/ajax, the latest advanced version of HTML5, CSS3, and SVG.

Front-end development needs to learn the technology

1 master the basic web front-end development technology: HTML, CSS, JavaScript, DOM, BOM, AJAX, etc., and to understand their compatibility in different browsers, rendering principles and the existence of the Bug

2 must master the website performance optimization, SEO and the server-side development technology basics

3 must learn to use a variety of web front-end development and testing tools to assist in the development

4 In addition to mastering the technical level of knowledge, but also to master the theoretical level of knowledge, including code maintainability, ease of use of components, hierarchical semantic templates and browser hierarchical support, etc.

5 the future of the front-end development web Engineers also need to study HTML5, web visual design, website coloring, website interaction design patterns and other related technologies

web front-end has a broad space for development, app, small program, mobile, pc, etc. are sites are required to front-end technology development support to be able to complete the technical threshold is relatively low, the demand for a larger number of good salary. As long as the customer interface of the Internet, you need to make the front-end to complete, front-end development of programming is not a large amount, but need part of the programming, simple to start, but to learn the depth of the need for a process.

Web front-end jobs

? Front End Development Engineer, Web Development Engineer, Web Development Engineer, HTML Development Engineer…

?H5 Development Engineer, Mobile Application Development Engineer, App Development Engineer, Small Program Development Engineer…

?JS Development Engineer, Vue.js Development Engineer, Node.js Development Engineer, Front-end Architect…

? Small Game Development Engineer, Data Visualization Development Engineer, WebGL Development Engineer, WebVR Development Engineer, Web Security Engineer…