From today, I will learn the WEB front end.

According to the teacher’s advice, he would record new knowledge points every day and spend every day around these questions. It is necessary to set aside half an hour every day to write a knowledge summary, a timely summary of the day’s work.

It is also a sort of knowledge of their own, before I especially like to write in the book, but for a long time, I will find that it is easy to forget, so I started to write blog. First of all, it’s not just some technical insight on its own

The summary is also some technical discussion, more importantly, it is a kind of requirement and test for their continuous learning and improvement, a kind of technical precipitation. Secondly, through the technology blog we can share some technical experience with each other, so that students with similar problems do not

In the confusion. At the same time the teacher also suggested that we do so, I feel very good, because I am a small small bird ———— rookie, is 0 basis, and the classroom that a few hours and can not teach how much, so more need

To find more information and timely through the summary into notes to deepen the impression of their own growth, but notes summary only for their own, always feel that it is not up to the purpose of improvement. Because I can’t see where I need to improve, only no

Break to share, let others give advice, even scolded, to understand the lack of. So I hope I can stick to writing blog seriously in the future, and can get everyone’s advice.

My motto is: a little progress every day, a little growth every day.


Here are some useful study sites I found:

Low w3school online tutorials at http://www.w3school.com.cn/


● Rookie tutorial http://www.runoob.com/


● Script House http://www.jb51.net/


● Blog Park http://www.cnblogs.com/


Low segmentfault technology BBS https://segmentfault.com/


● CSDN blog http://www.csdn.net/?ref=toolbar


● MoOCs at http://www.imooc.com/


Low jQuery WeUI http://jqweui.com/


When Veda prototype http://www.nowamagic.net/


● HTML5 Chinese portal http://html5cn.org/


● Front-end network http://www.qdfuns.com/


● Front-end development blog http://caibaojian.com/


● cavin blog js http://www.j–d.com/


Low HTML validator (can identify right and wrong) http://html5.validator.nu


Low tools the HTML 5 Live DOM Viewer validation: http://livedom.validator.nu


Low HTML 5 outline analyzer online: http://gsnedders.html5.org/outliner


Expand web site

Low Linux community at http://www.linuxidc.com/index.htm


● Qiantu website http://www.58pic.com


● Petal web http://www.huaban.com


● Bootstrap Chinese website http://www.bootcss.com


Low Bootstrap English site http://www.getbootstrap.com


Low Lufylegend http://www.lufylegend.com game engine


Low Jquery http://jquery.cuishifeng.cn online manual


● Meet webGL http://www.jj51.com/


“Good example http://www.haolizi.net/example/view_8913.html


Browser: Google Chrome accounted for 22% of the browser market. IETester test tool Mozilla Firefox, Windows of the World, 360, Sogou, Cheetah, UC, Baidu, QQ, Opera There are a lot of browsers on the market, and some of the less standard browsers may differ from other browsers in the display effect. In this case, we need to be unified. Compatibility.


HTML5Web front-end design learning basic content: (1) Photoshop: cut map layout and resource sources (2) HTML: web page structure (3) CSS: (5)javascript and jQuery: Let the website move (effects: in Baidu search reverse rotation flicker dither jump black hole can be special effects) (6)H5 game development core technology: Canvas + javascript (7) Front-end architect: front-end automation tools + architectural concepts + Angular Framework (8)APP development core technology: Dcloud + local storage + (HTML5+) server developmentCopy the code


As a beginner, my favorite editors are Sublime Text 3 and HBuilder. Here are some useful shortcuts

Sublime Text 3 shortcuts

● Ctrl+Shift+V: Paste and indent ● Ctrl+D select the text occupied by the cursor, continue to select the next same text ● Ctrl+J merge the selected multiple lines of code into a single line ● Ctrl+L select the entire line, Continue to select the next line ● Ctrl+Shift+Enter Insert a new line ● Ctrl+X: Delete the current line ● Ctrl+Shift+F: Find and replace ● Ctrl+M Move the cursor to the end or start position in parentheses ● Ctrl+Shift+M: Select the current parenthesis contents, repeating the parenthesis itself ● Ctrl+/ : Comment the current line ● Alt+F3: Select all the same words ● Alt+Shift+ number: Split screen display ● Ctrl+Shift+[Select the code, press the shortcut key to collapse the code ● Ctrl+Shift+] Select the code, press the shortcut key to expand the code ● Ctrl+Alt+↓ Edit multiple lines at the same time ● Ctrl+Shift+↓ Switch the line where the cursor is to the next line of code ● Shift+Tab indent to the left ● F6 Word check spelling


HBuilder shortcuts

: Unlike Sublime, HBuilder comes with a lot of plugins, which are powerful yet run with point cards. Shortcuts are also different from Sublime in many ways (in particular, don’t press Ctrl+Shift+V, this is not paste indentation, it’s easy to block the program once pressed). ● Fold code: ‘Ctrl+Alt+-‘ ● Merge down: ‘Ctrl+Alt+ J ● Ctrl+ D delete a line

Because just began to learn, just do some simple page and knowledge point inspection. I prefer Sublime Text to suSublime Text 3 because HBuilder is stuck, I’ve only used it a dozen times and I don’t know many shortcuts yet, but you can search for them if you like.