A front-end practiced hand works--how does the front end recruit?

Preface

recently in the job, as a career without a project Wang, the result is quite sad. No actual combat experience → company do not → no actual combat experience, the completion of the egg phase infinite cycle. On the almighty know to ask the great God help, but found no actual combat experience of the sister is very popular, no actual combat experience of the men and dogs are ignored. Can only sigh, the Times change again, Virgo complex still. know that there are many great God suggested to imitate first, I think very reasonable, decided to imitate know, so there is the following this thing (Demo & source):

CSS layout scheme: No way to know the layout, the full use of elastic box, the reason why the choice of flexible box is because he is super convenient, and with the structure of HTML more matching. As previously mentioned, the key to the adaptive layout of floating and absolute positioning is the width of auto, which usually involves moving the child elements out of the parent element (see the summary of the layout scheme), which is obviously incompatible with our understanding of the structure, and the elastic box does not have this problem.

JS: Native JS, not using libraries and frames. JS currently write very little also sucks, mainly to do a little dynamic interactive effect, in fact, are some small control interaction, as a personal accumulation bar. Because I do not understand the backend so the current backend related data interface is 0 ...

Originally this project is just to practice the use of CSS to do, so the UI side a bit of ideas, want to make reusable, customizable, can be split, but it seems to do very poorly. In addition, the front-end interface is very hot some CSS preprocessor I was not in touch with ...

recently also went to interview a few companies, found that no one bird this imitation of things, perhaps the subconscious inside are determined that this is copied, so easy bar, although I think I learned a lot of things. Web App version of the knowledge is multi-page, the homepage does 7788 of the appearance, the other pages have not done yet. However, I do not intend to spend more time on this page, after learning Nodejs may use it to practice it. The next step is to do some small animation games, this feeling more pleasing.

If you have a better job search ideas, please be sure to notify me! humbly!

If your company lacks the front-end (not lack of girls), willing to train new people, that must please contact me ~. ~

about GitHub

From the front end of the contact to register a github, but as a newcomer, in addition to copying someone else's code is self-made, would like to try pull request is what, but can not find a project to intervene. This feeling, with a lot of Enlightenment education film but can not find a combat partner, is the same. I want to have this feeling more than me (hello, not to see the feeling of education film), so want to send out to see if you want to practiced hand classmates.

If you have a GitHub account but haven't tried pull request yet, come on fork me and add your content to me. (GitHub source ). Control m.zhihu.com, a small module, a dynamic effect, even a typo correction can be.

talk about the design that knows

I love to the blue sky white clouds, naturally also very much like the blue hue. The feeling of the people is very refreshing, the interface is also very delicate. In order to create a three-dimensional sense, there are a lot of gradients and shadows.

1) For example:

The search box has a faint inner and outer shadow, does it look out? Anyway, 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);

The effect is a bit heavier:

Oh, the stereo effect, the parameters are too subtle. Look elsewhere, almost all input boxes are set to this shadow style.

2) Look at the Shadow + gradient:

This is the background of the search bar, my eyes are not good, I see the shadow has spent all my eyesight, I really do not 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 exactly the opposite of the above, the two colors of the gradient are similar, it is difficult to see. In other words, do you know that the front end is Virgo? This is the concise style of knowledge, these effects are too strong will distract the user's attention to the content, too much.

by the way, brush up on common glow and gradients:  

3) Gradients can also be done like this

Gradient? The baby can't see Ah!

{    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, a div is added underneath the list, specifically to show the gradient at both ends of the line ...

4) Color aspect

The content is divided into two categories, the information related to the problem is used in pure black, the others are in gray. This distinction is quite interesting, it is used in the UI design of a faded principle, highlighting the key information. In addition, the gray elements seem to have a book business air Elegant feel, with the above gradient and shadow, the whole is very coordinated.

some points of attention

1) Naming conventions

I didn't pay attention to the problem at first, although I knew I had to standardize, but I didn't know how to do it. CSS more write more, feel more and more chaotic, and then go to the code to look for a good, then the painful rewrite. Different company organizations have different coding specifications, norms and no advantages and disadvantages of the points, must not be mixed with a variety of norms, that really do not call the norm, and also not too rigid local can be flexible simplification. That's what I'm looking at: the front-end coding specification

The known naming rules are like this: Zu-top-nav-link, the "namespace-module-content-Content", when the modularity of the time to ensure that the first two are consistent, so that we do not have to write CSS in the HTML of the basic, And the back of the CSS file can also be divided into different modules at a glance. In addition, most of my use of the class direct hit style, very few uses the structure pseudo-class.

2) Handy Tool

A handy tool can reduce a lot of sharpening time, said here you must have seen some of the "Use Notepad on the line, pure", I will not talk. The recommended device for writing CSS: Handy editor + Chrome + alloydesigner. Before the web saw a video, inside a teacher with tools to measure the size of the skills of the skill I was extremely shocked. Of course, things that can shock you generally have room for improvement, so you should stop at this time and find a good grindstone first. The main force here is Chrome + Alloydesigner, which enables visual editing, and the styles you modify on chrome can be directly reflected on the page. Here remember to write a separate CSS file, in the source to find it and then save as on it, after the changes will be saved directly to the file, of course, you can set the workspace. Alloydesigner is a design manuscript tool, the simple point is to put the design manuscript overlap on the page, we note that there is a shadow of the next place is not with the design draft, modify to overlap. It is strange here that the size of the design is often wrong, you need to set it yourself. Documentation Tutorial: Alloydesigner documentation Tutorial.

3) Start the brain again.

To start with the brain, first analyze the skeleton, and then the layout plan, when you have a general solution to the layout of the page, then write code. Here I do is still relatively poor, always rush hands, or to grasp the overall well, the main points to write down.

The other is the global consciousness, should first set up a general skeleton and then to fill the internal content (HTML), and finally the CSS style adjustment. The advantage of this is that there is no style of your HTML or structured, this should be the basic structure of the separation bar.

Above...

(Photo source: small weeks)

Original articles, reproduced please specify the source! This article link: http://www.cnblogs.com/qieguo/p/5475348.html

A front-end practiced hand works--how does the front end recruit?