Web front end Development Quick Start tutorial

At present, the Web product interaction is more and more complex, user experience and site front-end performance optimization These all rely on the Web front-end engineers to do, web front-end engineers are design and development of the complex, web front-end engineers are the most direct-oriented products in the developer, user-oriented designers, The result of a development team is to rely on the Web front-end engineers to show, because the user does not care about the background of how strong the processing, in the designer of the Web front-end engineers are directly oriented to the developers of the designer, to the developers in a computer language to pass their design ideas, Web front-end engineers are critical throughout the team.

So a qualified web front-end engineer has to master HTML, CSS, and JavaScript. You have to be familiar with all these languages if you know only one or two of them. It's not that you have to be very proficient in these languages, but at least you have to be able to use them to do most of the work without having to ask for help frequently.

Here are some basic things to know

Development environment

Editor: Phpstorm or Sublime

Browser: Chrome (F12 Open Review mode, you can see the elements of any page) or Firefox (need to install plug-in Firebug), of course, right can also see the source code of any website.

Recommended Reading

What are the learning sequences for HTML, CSS, JavaScript, PHP, and MySQL?

Recommended Templates Web site

http://sc.chinaz.com/moban/

How to eat: go through all the contents of the tutorial below, then find a good-looking template, learn how to use the statement in index.html. The general template will be related to Jqeury and bootstrap, some places do not understand the words also do not matter.

Note: To improve the basic skills or to do the following work, the set of templates is just a practice and rapid production of the way.

Homework

Easy: Make Landing interface

650) this.width=650; "Src=" Http://upload-images.jianshu.io/upload_images/2642238-1101e8e9cbe02907.png?imageMogr2 /auto-orient/strip%7cimageview2/2/w/1240 "style=" margin:0px;padding:0px;border:0px;line-height:1.7; "/>

Login Example

Harder: Make a purely front-end page similar to the Baidu search interface

650) this.width=650; "Src=" Http://upload-images.jianshu.io/upload_images/2642238-2c8eacfccd41001f.png?imageMogr2 /auto-orient/strip%7cimageview2/2/w/1240 "style=" margin:0px;padding:0px;border:0px;line-height:1.7; "/>

Sample Search Interface

Html

You can cross it off without looking at it, and you can write it while you're done.

http://www.w3cschool.cn/html/

650) this.width=650; "Src=" Http://upload-images.jianshu.io/upload_images/4579719-1d366e7665789273.png?imageMogr2 /auto-orient/strip%7cimageview2/2/w/1240 "style=" margin:0px;padding:0px;border:0px;line-height:1.7; "/>

W3cschool Html

Featured Collections

HTML Quick Search Dictionary Http://www.w3cschool.cn/html/dict

Css

http://www.w3cschool.cn/css/

CSS is a little bit of a look

No need to look too carefully

Featured Collections

CSS Quick Search dictionary |css API Chinese manual |css reference document Http://www.w3cschool.cn/css/dict

CSS Animation example reference manual http://www.w3cschool.cn/moresource/cssreference/index.html

Bootstrap

http://www.w3cschool.cn/bootstrap/

Bootstrap after reading the CSS can see, try to use the various controls

Featured Collections

Common Bootstrap Resources website http://123.w3cschool.cn/bootstrap_resources

Js

http://www.w3cschool.cn/javascript/

JS is also to see the language is very powerful

Featured Collections

JavaScript Development Resources Http://123.w3cschool.cn/javascript_resource

Jquery

http://www.w3cschool.cn/jquery/

It's not much, but it's the core of the front.

Featured Collections

Free jquery plug-in collection Http://123.w3cschool.cn/freejquery

Summary of front-end learning resources

Http://123.w3cschool.cn/plk2fi

Front-End Tutorials & developing modularity/Normalization/Engineering/Optimization & Tools/Debugging & Noteworthy Blogs/git& Interview-resource summary, easy to learn and consult reference.

This article is from the "W3cschool" blog, make sure to keep this source http://w3cschool.blog.51cto.com/12235207/1907639

Web front end Development Quick Start tutorial