HTML+CSS project development experience summary (recommended)

I haven’t updated my blog for several days. I just finished a simple HTML+CSS project. After a few days of exploration, I found that it was very profitable. Before, I just wrote demos and read knowledge points, but I didn’t do any actual projects myself. But only after actual combat will you understand how to better improve your skills. For this project development, I summarized the following:

1. Technical Summary

1. Setting of public styles

Before starting the project, we can first have a general understanding of the content of each page in the project, such as font style, paragraph structure, text size, etc. We can set a fixed style file for these contents. During development, you can directly import this file without having to repeatedly type the CSS code.

When you need to use it, just add the class name you want to use after the class name:

2. Overall layout

During the project development process, if you build the framework of each page in advance, you only need to fill in the specific content later. And I am used to using the following framework to achieve the overall layout of the page:

Generally speaking, after setting the general framework of the page, it is more convenient to fill in the rest piece by piece, so that the development ideas are clearer. Of course, the corresponding CSS style needs to be set, but this depends on the specific requirements of the project.

3. Cutting elements

Once the general layout is done, the next step is to start cutting the pictures. Although there are not too many technical operations, there are still some things to pay attention to. For example, when cutting pictures, special attention should be paid to the size. Although some of them are relatively subtle parts, they require patience to handle. Because details often lead to different results. In fact, don’t think that it’s almost there. Sometimes it’s just a little bit worse. When the effect is not satisfactory, you still have to spend time to modify it in the end. Furthermore, when saving the cut image, since an images file will be automatically generated, we do not need to create a new directory or enter a directory, otherwise the images folder will still appear in the corresponding location.

4. Naming and code writing standards

Standardized naming helps improve code readability. There are also many relevant specifications on the Internet. Here I will briefly list a few points:

(1) Intuitive naming

When designing a web page and needing to identify a div, the most natural idea is to name it using words that describe where the element is on the page.

For example: top-panel

horizontal-nav

left-side

(2) Structured naming

For example: main-nav

subnav

(3) Member-based naming conventions

Member-based naming conventions refer to naming files and folders by classification according to their subordinate relationships, which can make the arrangement of files more logical.

For example, an image file is named "file_on" before the mouse is clicked. After the mouse is clicked, the image file is named "file_off". It is named according to this category. It is clearer.

5. Learn to make “Sprite Picture”

In project development, it is inevitable to add many small icons and small pictures. If you cut and save the pictures one by one, it will be troublesome to use, and it will also take up a lot of memory, so the page loading speed will be much slower. This is not a good thing and greatly reduces the user experience. Therefore, we can cut the small picture in advance and put it on the same page. When developing, we only need to import this picture. Then adjust the position of the background image according to the situation. You can use the background-position property to set it.

6. Clarity of knowledge points

When working on the project, I was not familiar enough with certain knowledge points and could not apply them skillfully, which led to slow development speed. Once we have mastered a knowledge point, we can quickly write code to achieve the corresponding effect. During the development of this project, I was not familiar with the following knowledge points:

(1) Use of relational selectors

(2) Use of pseudo-class selectors

Especially E:first-of-type and E:first-child. In fact, the biggest difference between the two is that the former is the first structural tag under the parent element, while the latter does not necessarily have to be the first structural tag. The following example:

a:first-child is the first structural tag under .test, and it is an a tag. If it is not, it will have no effect.

a:first-of-type does not need to be the first child element, only the first a tag under .test.

(3) CSS properties: opacity, z-index, and display

a. opacity

In this project development, there is an effect that requires the use of a masking layer. As shown below. At first, I wrote two divs and then set the second div to be transparent. Then after hovering, adjust its transparency back to opaque. At the same time, the second div is also positioned to overlap with the first div. But I found that writing code like this is too much and messy. After referring to other people's codes, I found that the same effect can be achieved by flexibly using z-index. The following is the specific implementation

CSS code:

HTML code:

b. z-index

Retrieves or sets the stacking order of an object.

For parallel-level objects, the larger the value of this property parameter is, the objects will be stacked on top.

If two objects have the same value for this property, they will be stacked according to the order in which they flow in the HTML document, and the one written later will cover the one written earlier.

The position attribute value must be absolute, relative, or fixed for this value to take effect.

c. display

none: Hide the object. Unlike the hidden value of the visibility property, it does not reserve physical space for the hidden object.

inline: Specifies that the object is an inline element. block: Specifies that the object is a block element.

list-item: Specifies the object as a list item.

inline-block: Specifies that the object is an inline-block element. (CSS2)

2. Summary of mentality

After this project practice, I found that many times it is not a direct problem of ability, but a problem of attitude. At the beginning, I had to finish more than a dozen pages within a few days, and I was skeptical about the final results. But I also thought that if I work in the future, I will inevitably work in a "high-pressure" job. That is to say, it is possible to complete the work task in a short time. The process is always difficult, but often others only care about the results. The result is not out, which means the work has not been done well. Although it sounds cruel, it is indeed the fact. The completion rate of this project is about 90%, but some effects have not yet been achieved. But later I found that browser compatibility also needed to be achieved, which was indeed a headache. Although it is troublesome, it is also an essential part. For this project practice, I summarized the following points, which I think I can improve:

1. Be familiar with and proficient in using each HTML tag and CSS attribute. I think one of the reasons for the slow development speed is that I don’t have enough knowledge. For example, if you want to achieve a certain effect, but you can't remember which attributes to use or forget the attribute name, you have to spend time looking for information. Time is wasted invisibly.

2. Reduce redundancy and optimize code. It is better to omit what can be omitted, because more code will take up memory and the page loading speed will slow down. When writing code, you can also think about a simpler way of writing to increase your code writing speed. Of course, this is also accumulated bit by bit. With more practice, you will naturally understand how to increase the speed of code writing and reduce redundancy.

3. Cutting speed. Maybe it’s because I seldom use design tools and am not very familiar with the operation of the software interface. But cutting pictures does not actually require very high technology, but one thing you need to pay attention to is accuracy. It also improves concentration.

4. Think more, practice more, and don’t be ashamed to ask questions. When I encounter a technical problem, what I usually do is to think about it myself first. If I really can’t figure it out, I can search on Baidu, refer to the Internet, and then implement it myself. If the information on the Internet is not clear or difficult to understand. I think it is better to ask classmates or teachers. Through mutual communication and learning, you can actually understand the knowledge points more quickly and discover your own shortcomings. At the same time, learn from the good things others have done.

5. Cultivate a rigorous attitude

The issue of details is something that many people tend to overlook. As for myself, I don’t think I am a rigorous person. Sometimes poor results are caused by one's own carelessness. So, after realizing this, I will remind myself all the time. We cannot ignore some seemingly unimportant things in the pursuit of speed.

The above HTML+CSS project development experience summary (recommended) is all the content that the editor shares with you. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.