HTML CSS Front-end basic learning methods and experience sharing

Objective:

The first day of the park, want to share a bit of front-end basic HTML CSS learning methods and some experience to love the front end, but do not know where to start, still some confused novice friends. Of course, for everyone to learn differently, the following is for reference only.

First, about the basic grammar

For the basic grammar, do not explain here, the students need to W3cschool, W3school, MU class network and so on to learn. If it is just beginning to contact the front end, do not recommend learning through books, the first is because some of the knowledge in the book may be too old, has been abandoned in the new version, the second is because the knowledge system in the book is very comprehensive, a lot of knowledge may be more difficult to understand, and usually do the project will seldom use, if the whole book The cost of time to consume will be very large, about the front end, knowledge of the update iteration quickly, therefore, fast learning is a primary need to develop the ability.

Now, HTML5 and CSS3 have been very hot, but, At first must be to learn html4.0 version and css2.0 version, at this time, about in the new version of the discarded tags and grammar should not be used, such as the basic OK, and then learn HTML5 and CSS3, the main learning new parts, that is concerned about the difference.

Second, about the editor

Editor is to improve the development efficiency, using the habit can, of course, Dreamweaver is not recommended to use, beginners can use some relatively small editor, Notepad++,editplus,sublime,hbulider and so is a good choice. Webstorm should be the best of the current compiler, but also the use of the most people, of course, the volume is relatively large, suitable for the late start of the project when used.

Hbulider is not support plug-in installation, all the functions are integrated well, its code hints function is perfect, for the early learning use is fully sufficient. Sublime is the need to install their own plug-ins, there are a lot of tutorials on the web, not to mention here, it is necessary to note that when you download the editor, we must go to the official website to download, do not directly with someone else has installed the plugin editor, although said the editor is just as a tool, Should not spend more time than research code to study a tool, about the installation of plug-ins, many of the online tutorials are very clear, but when you do it, you will likely encounter a variety of problems, so some pits have to step on their own, you can have a deeper understanding.

Third, about the code specification

Code well written, the final results are only a small part of the code in the programming process of the normative and semantic is particularly important, if the code you write the next day you can not read what is written, then for the requirements change and code maintenance will be a disaster, at the same time, because the code structure is not clear, coding is not standardized, It's also easy to cause errors, and it's not easy to find. Therefore, from the beginning should develop a good coding habits, attention to detail, will certainly help you in learning to program the road more smoothly.

In the coding process, the XHTML specification should be followed as much as possible, and it is a more restrictive version of HTML.

Iv. about Practice

After the basic grammar learning, you can follow the page you want to make a hand-made, only a lot of practice, to step more pits, and then through the access to data to solve problems, to learn further understanding, and thus more integrated through. Of course, it is also important to be good at summing up.

If you do not find the right page for the practice, you can first imitate some of the big web site of one of the small modules, through the F12, you can open the console to view the source of the Web page, of course, you can also download some PSD design manuscript, page restore.

V. About transduction

Transduction mainly involves Photoshop's transduction tools, drawing slices, and then storing them as web formats. Other details, in the use of the process of gradual learning can be.

Vi. knowledge points to be mastered in the basic stage

Any technology is not to wait until you all understand the principle, fully proficient, before you can do the project, are required on a certain basis, and then do more project exercises, gradually go deep, so, especially the knowledge of the reserve stage, must be fast over the foundation, and then continue to accumulate experience in the project practice.

Below is a brief list of the knowledge modules that need to be mastered at the basic stage, in order to have a holistic grasp:

1. File encoding
2. Path
3. Label
4. Property
5. Selectors, pseudo-class selectors
6. CSS Styles
7. Box model
8. Margin collapse
9. Block elements, inline elements, inline blocks, and conversions to and from each other
10. float, clear float
11. Positioning: relative positioning, absolute positioning, fixed positioning, positioning level
12. form controls
13. Cell
14. CSS hack processing

Conclusion:

Obscurity also have, and know also is boundless, with love and awe of attitude, constantly expand the depth and breadth of knowledge, and in the work and life in practice, is probably a kind of interpretation of happiness, you see the world, the world look at you!

　　

　　

　　

HTML CSS Front-end basic learning methods and experience sharing