How does a front-end trainer work? -Tomato

A front-end trainer-How do front-end newcomers apply for a job? -Tomato Preface

Recently, I was looking for a job. As a newbie without project experience, the results were rather miserable. No practical experience → No company experience → no practical experience, an infinite loop of proper eggs. I am eager to ask for help, but I find that girls with no practical experience are very popular. I can only sigh that the times have changed and the virgins remain. Zhihu also has many great gods who suggest imitating them first. I think it makes sense to decide to imitate zhihu, so I have the following (Demo & source code ):

CSS layout scheme: the layout method is useless, and the elastic box is fully used. The reason why the elastic box is selected is that it is super convenient to use and it is more consistent with the HTML structure. As mentioned before, the key to implementing Adaptive Layout for floating and absolute positioning lies in the auto of width. Generally, child elements need to be removed from the parent element (Click here to see the summary of the layout scheme ), this is obviously not in line with our understanding of the structure, and the elastic box does not have this problem.

Js: Native js, without using libraries and frameworks. Currently, JavaScript is rarely written, but it mainly involves a little dynamic interaction effect. In fact, it is mostly the interaction of some small controls. Because you do not understand the backend, the data interface related to the backend is currently 0...

Originally, this project was designed to practice CSS usage. Therefore, I had some idea about the UI and wanted to make it reusable, customizable, and sharable. However, it seems that I am still doing poorly. In addition, I am not even familiar with some CSS preprocessors that are very popular in the front-end field...

I have also interviewed several companies recently and found that nobody is doing this kind of imitation thing. Maybe the subconscious thought it was copied and so easy, although I think I have learned a lot. The web app version is usually composed of multiple pages, and the home page is 7788 million pages. However, I don't want to spend more time on this page. I may use it to practice Nodejs later. Next, let's make some mini-games and make some small animations. This feeling is more flattering.

If you have a better job search idea, please be sure to inform me!Thank you!

If your company lacks front-end services (not sisters) and is willing to train new users, please contact me ~.~

About github

I registered a github from the front-end, but as a newcomer, apart from copying other people's code as self-built, I 'd like to try pull request, however, you cannot find a project to intervene in. This feeling is the same as reading many of the first education films but not finding a practical partner. I think I have more than one such feeling (feed, not watching educational films), so I want to see if I want to train my students.

If you have a github account but haven't tried pull request, please fork and append your content to me (github source code ). Against m.zhihu.com, a small module, a dynamic effect, or even a typo correction can be used.

Design of zhihu

I love the blue sky and white clouds, and naturally like the blue colors. Zhihu is refreshing and the interface is exquisite. Gradient and shadow are widely used in order to create a stereoscopy.

1) For example:

The search box has a faint internal and external shadow. Can you see it? I didn't see it... CSS:

box-shadow: inset 0 1px 3px rgba(0,0,0,.2),0 1px 0 rgba(255,255,255,.1);

Effect tuning:

Oh, the three-dimensional effect. The parameters of zhihu are too subtle. Looking at other places, almost all input boxes are set to this shadow style.

2) Check the shadow + gradient:

This is the background of the search bar. My eyes are not good. I can see that the shadow has spent all my eyesight and I can't see the gradient ....

background: linear-gradient(to bottom,#086ed5,#055db5);border-bottom: 1px solid #044e97;box-shadow: 0 1px 2px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.15);

This shadow is just the opposite of the above. The two colors of the gradient are almost the same, which is hard to see. In other words, do I know that the frontend is Virgo? This is the concise style of zhihu. These effects are too strong, but they will distract users from the content.

Take a look at the common light and gradient:

3) gradient can also be like this

Gradient? Baby can't see it!

.zm-noti7-frame-border {    height: 1px;    width: 100%;    position: relative;    background: linear-gradient(to right,rgba(250,250,250,.1) 0,rgba(240,240,240,.8) 1%,#ddd 4%,#ddd 96%,rgba(240,240,240,.8) 99%,rgba(250,250,250,.1) 100%);}

That is to say, a p is added under the list to display the gradient effects at both ends of the line...

4) color

Zhihu divides the content into two categories. The information related to the problem is displayed in black and the others are displayed in gray. This distinction is quite interesting. Here we use a fading principle in the UI design to highlight the key information. In addition, the gray element looks quite cool and elegant, and it is very consistent with the gradient and shadow above.

Notes

1) Naming rules

At the beginning, I didn't pay attention to this problem. Although I knew how to standardize it, I didn't know how to do it. The more CSS is written, the more messy it is. Then, find the encoding specification to make a good look. Then, it is a painful rewrite. Different organizations in different companies have different coding specifications, which have no advantages or disadvantages. They cannot be mixed with various specifications. This is really not a standard. In addition, it should not be too rigid and can be flexibly simplified. I see this: front-end encoding Specification

Zhihu's naming rules are like this: zu-top-nav-link, that is, [namespace-module-content]. Ensure that the first two are consistent during modularization, in this case, HTML is basically not required when we write CSS, and different modules can be separated at once when we look at CSS files. In addition, most of me use the class direct hit style, and a few use the structure pseudo class.

2) handy tools

A handy tool can reduce a lot of time for sharpening. When talking about it, you must have read some of the "just use Notepad, pure" that I will not speak. Recommended CSS writing equipment: handy editor + Chrome + AlloyDesigner. I saw a video on MOOC. I was shocked by the skill of a teacher measuring the size with a tool. Of course, there is usually room for improvement for things that can shock you, so you should stop at this time and first find a proper sharpening stone. The main force here is Chrome + AlloyDesigner, which enables visual editing. The style you modified on Chrome can be directly reflected on the page. Remember to write a CSS file separately. Find it in source and save as. The modifications will be saved directly to the file. Of course, you can also set a workspace. AlloyDesigner is a design draft tool. In simple words, it places the design draft on the overlapping page. Note that the following is a duplicate of the design draft. You can modify the design draft to overlap. It is strange that the size of the design draft is often incorrect. You need to set it yourself. Document Tutorial: AlloyDesigner document tutorial.

3) First brainstorm and then start

First, you need to brainstorm, analyze the skeleton first, and then design the layout scheme. When you have a general solution to the page layout, you can write the code first. Here, I am still doing relatively poorly. I am always in a hurry, but I still have to grasp the points and write them down.

The other is global awareness. We should first build a general skeleton and then fill the content (HTML) in the interior, and finally adjust the CSS style. The advantage of this is that your HTML is still well-structured without styles. This should be considered as a basic structure separation.

Above...

(Image Source: xiaozhou)

Original article. For more information, see the source! Link: http://www.cnblogs.com/qieguo/p/5475348.html