Organized workflow as a frontend developer?

In General, sitting for the second day, gather all can't.
For many it might seem a silly question, but for me it's like a dark forest.

Here I was sitting a lot of time, studied the layout, typeset some demos. For all time did not impose any finished pages, constantly, what that menu, form, gallery, etc all separately in the main on codepen. Sit not is not the first year, with a certain periodicity so doing. Then begin to teach, then quit.

Now all decided that it is time to stop on something one. Decided to stop the development. So far, only the frontend.

For all the time tried all sorts of things. A lot about what I read. In General, for everyone. Theory and practice of small fed up.
html5, css3, sass, stylus, jade, gulp, js, bootstrap, jeet, nib, rupture etc
Have tried a lot, but a unified view of how to organize it all and to connect I have.

Don't understand how the organization of the project from scratch. What the file structure should be, what methodology to impose, as it's used in bunches of preprocessors and templating systems, on what algorithm there is the layout itself, as in General where to start, as it was then or just do agility, what tools to use, how it is then all to collect in the finished project, how to optimize etc.

It seems like everything is individually clear, but as all in a single collect and use do not understand.

Tell me how to start this OK to do the frontend, not to rivet the demos on codepen. I want all the same professional to do it. Everywhere write about all alone, and that's how to use it all in one project XS.

Here's how to organize everything?
Where it is possible to look at existing projects, rather than on the file structure?
How organized all you have?
July 8th 19 at 11:56

Related questions

More answers about "Organized workflow as a frontend developer?"
12 answers
July 8th 19 at 11:58
Let the points will try to explain how all should work for the front-end.
1. You must learn to think in blocks (or blocks in the flow, down flow, flex-blocks etc). You can learn only when you understand how really need to impose.
2. Start with a simple layout. Take the layout .psd (80% work on every website you use PhotoShop and if you don't know at least predmetom the level of grief, trouble), import from there all of the desired image well and begin to compile the template block by block, looking for the font color, size, weight, or size of the block, this block and so and so.
3. Why you imagine fooling gulp, sass, bootstrap when to impose even normally do not know how - I unfortunately do not understand. You none of these tools will not help until you're to be able to impose. At the moment, don't think about the technology, structure etc. Just overstate any layout somehow.
4. Connect with people who can help you advance in this field. Such extremely a lot. Can me on Skype to be added and learn some things, to others, to anyone, in fact, probably 60-70% of web designers happy to share their experience with you
5. Write code carefully. There was a recent question in which a person has provided the code and there is no{ } no, no padding is not normal, well, half ; just lost and html tags are used not on purpose at all. You can't do that in any case, otherwise your level will not rise from the plinth.
6. File structure: folders css, images and js on the level with these folders you will find files .html either .php all. If we talk about the preprocessors and pickers - not to go while in it, then learn as soon as you learn fine to impose. I think it makes no sense to explain what those folders should be. If you think you are special - can distribute images inside images folder into components, for example make a folder reviews, folder, galleries, any, etc, but I often don't do that, don't want extra characters littered me the code and impairs the readability.
7. Linking html and css apparently you already know how to bind them to the js. Don't know what's stopping you to mark up any site if you understand how these 3 technologies (and in fact all together).

Summary: Forget about sass, gulp, and so on until you laid out the templates 10, these technologies you did not accelerate and does not help until you're able to simply to impose with the template .psd and need to write scripts in js or jQuery at least. Learn a little photoshop and go practice. To find those .psd no problem, lots of them free on the Internet.
Thank you for the detailed response. But also want to comment on your answer.
I have everything mixed up, that already the head around goes.
I honestly don't even know what prevents me from just up and try to make a layout.
Every day I go to sites with free layouts, look at them and what I more or less like, download, open in photoshop, look at it and in most cases close photoshop.
I don't have a simple idea of how and where to start. Well, not exactly of course, but something stops me from layout and everything. But if I try it soon ends as something does not work or I just don't know the answer I can't find and throw. You start screwing around, sometimes coming on codepen and trying to impose some sort of element.
In General, that I do not understand the basics. Do not know where to read, what to see, have all that can be reread and revised. The head has some level of missed, that you have to do KPC as efficiently, and so can not have a bad thing to do, I want to just fine. The theory is already everywhere where only it can read. Was almost all paid and free course on htmlacademy, were almost their entire video course. Even like it together with the teacher to make up the home page. In General, a lot just reviewed, read theory and small practice, and in fact it did nothing, no ready-made projects.

I want a pancake professionally how to do it, and the result is neither good nor bad, in General we can say nothing. None of that basic practices.
And that does not even know where to look for information on this.

And Yes, the people in my environment, and indeed in my city like once I'm interested in oddly enough. And in the Internet don't know who does this professionally, who prošaren more than I do. Here it is difficult to develop without a mentor.

Constantly now I have some problems, constantly do not know and do not, in most cases, can't find the answer to the decision problem.

And so in General I agree, the plan was to make at least 10 layouts, but that did not work) I at least one to impose a fine, according to all modern requirements. Well, there is adaptation, optimization, etc.

In General XS how to be so long in one place is that it seems that all this is not mine. But damn don't leave, I want all the same what to do. - Howell commented on July 8th 19 at 12:01
Please contact us here, here in the overwhelmingly friendly audience) And with the models I have) Leave not because something does not work, is this the reason for yourself up to justify yourself), life will be something not to happen, you just need to strive, and not to focus on one thing that failed, you ran and all, can I have something else to do, and then come back to this problem and it is possible the decision will be easy to find) And give up because there is no proper motivation not want for something to do, that's all. Demos on codine not throw, they can help you when ptrlist to work, at least I helped) - Destinee.Hodkiewicz commented on July 8th 19 at 12:04
July 8th 19 at 12:00
Come this way.
Take PSD template a small landing.
Open in photoshop, save pictures from it.
Make a project folder which will index.html style.css and a folder with pictures.
In the head are divided into blocks and the top menu, slider, first block, second block. Make the html code for the menu, making him the styles in style.css and so one by one. Describe one block in the html, so I wrote css for it.
Now you have nothing else, just the images, html and css at the most basic level, no adaptation, no gulp saas / less b other do not.
Pump for chrome extension pixel perfect and align all the blocks in the design.

So you make one landing, one intranet and one Internet store. The functionality you do need.
Every project finished to the end until all be by design. There will be questions write on the toaster. Finish write on the toaster, ask him to assess the layout, just tell me where the thread on the free hosting, work, what would you advise.

Further, only after all this can softblog view, there are lessons on different technologies frontend
Better to learn how to use git. - Howell commented on July 8th 19 at 12:03
: Yes, there is still far to Gita. - Destinee.Hodkiewicz commented on July 8th 19 at 12:06
July 8th 19 at 12:02
Demos molds-buttons say rivet? May you enjoy this approach? demo.patternlab.io ? Create small pieces of sites, and then piece it all together. That is, grab any layout, make it's what you do - the menu button, the fonts - and gradually collect his like a puzzle.
The methodology of the do not morochte his head, it's very individual, or imposed (in the neutral sense of the word) a team in which you work. Write bad code. When you start to encounter real problems, like why I have 10 levels of nesting, maybe it's wrong? or as I understand this CSS file of 5000 lines? Why do I have a page over 5 seconds, although it only text and 2 pictures? How the hell am I to do so that the header didn't need to rule 200 html files?
Go on. Choose one or the other. Do not listen if you say that scss is better than Stylus. Selected - learn more. No you can not refuse, if you show the site is made on the stylus, not on the loess/case. Once you understand one, you'll have to understand how it works more and, if necessary, learn this for another couple of days. Chose framework? Verstile on it. Well no on the web nothing common, each large company creates its own library, its own process - but it is all based on THEIR experience, not yours.
And yet, to leave pink dreams about the ideal web. Very rarely in large projects everything is done correctly. The larger the project grows, the more people working on it, the uglier it looks. Yeah, there are companies, which has its styleguide where all coders are all alike and they do a perfect project. But it is coders with years of experience, you are there from the start will not fall. You will get to where will honokowai. And you just have to draw conclusions and learn on their own and others ' mistakes.
July 8th 19 at 12:04
https://habrahabr.ru/post/202408/
There was a time a long time ago I read this post and tried to repeat all that is written there. The page was ready. But it's all so smooth, all rectangular, in General the layout is super simple... - Howell commented on July 8th 19 at 12:07
: and. I understand. ie issue in understanding the layout when cutting from photoshop, I understood correctly? - Destinee.Hodkiewicz commented on July 8th 19 at 12:10
How to slice a layout I know how to make all of this through one place will be able to think, but how to learn to professionally typeset? I constantly saw only the demo on codepen codepen.io/evg_/pens/public
But normally a single layout is not laid out.
Not understand here is how to use all the tools together? Can you show some sort of commercial project that you typeset using preprocessors, etc? I want to see how someone organizes the process of layout - Larry_May commented on July 8th 19 at 12:13
: I don't use preprocessors, I make a grid and write style classes manually. Separate the objects by categories (header,menu,footer) and then stylesuite their classes.
Here is a simple example of the layout: precosts.com/app/Design-generator
Can watch how everything is done, there are all the styles in the body html. - Mabel commented on July 8th 19 at 12:16
: Here are some simple demos I can do, but something more complex don't know how.
Here sketched a simple layout of the page. demo-page.surge.sh
But how to impose more complex pages. And Yes, how to understand your expression "prepare a grid"? - Howell commented on July 8th 19 at 12:19
: well. quite a normal layout.
The grid is the placement of the blocks (markings) of the entire area of the page. For example, I'm in one of the cells such demarcation insert menu or the login widget or block similar articles or remove them, etc. Can add/remove the vertical bars to the left or right, the footer top menu, etc.
If about the complexity - it is about "revival" elements ("carousel" of images, the appearance of tooltips when the input etc.) - this is Javascript (JS).
I.e., more "complex" - I so understood that speech about JS and UI.
There is need to use jquery (the simplest), but it is better to learn native JS in order to have awareness of JS work with the DOM objects in General (without libraries). - Kyleigh_Hills commented on July 8th 19 at 12:22
July 8th 19 at 12:06
Key skills of the designer is the speed of the layout, the line layout, adaptability, connection, and customization of jquery plug-ins, animations, and effects.
It is their need to pull in the first place. About everything else you could say "the work will teach" but not in your case) and each office uses its own set of buns.

I myself started with htmlcode and after the courses was able to impose anything that does not need js. You may not have the system or take too complex layouts..

The target to which you want to come what?
If web studios in town, it remains freelancing..
You can search for orders for layout, start with the odnostranichnikov, where you don't need preprocessors and optimizers, and gradually increase skills.
The main thing to do efficiently, to regular customers.
I mastered js ? - Howell commented on July 8th 19 at 12:09
: Learning JavaScript programming Eric Freeman
this book had
there is written for learning the game of battleship, then it is possible to finish with 2 fields, the alignment of the ships, playing with the computer, etc ...
the first thousand lines of js code wrote - Destinee.Hodkiewicz commented on July 8th 19 at 12:12
class. then it became easier to draw the layout with different plugins? because jquery plugins are written often, but not on bare js ? - Larry_May commented on July 8th 19 at 12:15
: jquery is a set of functions for working with the dom, is studied for the day.
Plugins with no problems at all. The hardest part is to find them in Google. - Mabel commented on July 8th 19 at 12:18
July 8th 19 at 12:08
Tell about yourself (a Pro stoned, but...).

Two folders: images and assets. Inside the assets folder there are css, js, fonts, scss. That they lie is clear from the title. In the scss source files are in css all compiled.
To compile I use Prepros. Adherents of other softinos me now zagnobyat, but Prepros is doing exactly what needs with user-friendly interface under Windows, with minimum settings and just very good.

To HAML and similar aspects have not yet arrived and I don't know... I was more than satisfied with classic HTML.

Instead of using bootstrap samobytnoe creation.

Your problem, like many beginners, understanding what to do will have a HUGE stack of technologies. You can't just know CSS and HTML. This is already long enough. The necessary preprocessors, post processors, image processing... All of it...

Try to allocate a free day, and slowly saorstat some basic blog, but the full stack. Make the drop-down menu, responsive-grid and basic styles. All. So you get to understand how everything works in the complex.

And then you can move on to more complex layouts.
July 8th 19 at 12:10
Got work to do. A real site in quantity 1pc.
Councils will receive in the production process.
Skype antonybark
July 8th 19 at 12:12
Arrange to work, it will tell how, when, and what.
What would you need to get at least some portfolio. And I'm for all employers complete novice with whom to work, no one will. I have locally at home to deal with, to make up for at least a few layouts more or less professionally, not to be ashamed to show to the potential employer, and then look for a job for the future is improvement of the skill.

And on account of work, another problem is that the work will have to look only remotely, as in my city about the web, no one heard. Useless sites, but if needed, it's some sort of vyser on ucoz, which will pay a maximum of 100 rubles. - Howell commented on July 8th 19 at 12:15
:
- while you wait "not to be ashamed to show", others show something and get a job
"what work would have to search only remotely" - Junior not remotely needed - Destinee.Hodkiewicz commented on July 8th 19 at 12:18
While the option of a work out. - Larry_May commented on July 8th 19 at 12:21
Oh not the fact that the work will tell! Despite what the firm! - Mabel commented on July 8th 19 at 12:24
July 8th 19 at 12:14
Need experience full layout of the site, and not a separate part. To do this, download any template or I can Skype to knock skins.

To start working with the layout view and the clipping using Photoshop, when it will ostochertelo can upgrade to a more modern view of Avocode.

Experienced web designers do their own pattern for development. Here we need collectors in the form of articulated gulp(grunt, webpack, etc.). Setting someone more convenient.

I for example am using gulp+sass+autoprefixser+browersync.
HTML preprocessors went me the standard emmet happy.

Everyone has purely to do with a particular "tool". You need to fill the usual bumps and to experience, to understand basic things. Hence all the old make up and different method. (float s, flex, block-table, and the table O_o (for electronic messages) ).

PS Good luck way this pair is not very rewarding :)
July 8th 19 at 12:16
You often will need to fit in with the architecture of the customer/employer, and strictly speaking you don't have to decide architectural issues of the project.
What the file structure should be, what methodology to impose, as it's used in connection with preprocessors and template languages

that's all from project to project differs, even if you code the front end do not write, You do not decide anything).
But you must have some kind of default. For example, bem/bem-like, scss, autoprefixer, a default of adaptability. If you are given a set of psd, it is logical to share the files under this structure to pretender all quickly introduced.
Where it is possible to look at existing projects, rather than on the file structure?

the whole github littered with frontend
can softblog view

I do not recommend
Come to work for free, I will give You a nontrivial pattern, and You try to pass it as a customer, as an experiment.
"can softblog view

I do not recommend " what's wrong? - Howell commented on July 8th 19 at 12:19
: well, for example open something at random, advanced JS: loftblog.ru/material/prodvinutyj-javascript-1-shab... what is it?
or ES6: loftblog.ru/material/1-znakomstvo-s-ecmascript-6-l... All only in its infancy, and at the tops. Of course, I understand that all difficult materials to collect, but better to just practice, and if necessary, search on YouTube for eng. help 100 times better. - Destinee.Hodkiewicz commented on July 8th 19 at 12:22
: 1. Yes, it's the beginnings of a base for the beginner and promo for the full courses! 2. From time to time, the loft puts video courses. For example, the extreme video "Master class final work" just shows how you can set up your working environment (as one option). 3. Thanks to the "what is this?" I managed to understand at least a little js, although this was courses and work in the company (who were unable sensible to explain) 4. "Not recommended" to settle should ... - Larry_May commented on July 8th 19 at 12:25
Elizabeth, can I ask the pattern? - Mabel commented on July 8th 19 at 12:28
: I have no template, so to speak, I do not collect them specifically. The main part is the solution to the adaptability/templates, it depends on the project. Often you have 2-3 layouts: desktop and mobile, and you need to arrange a valid image on all screens, from 600px up to 4K, how exactly is a joint decision with the designer - Howell commented on July 8th 19 at 12:31
July 8th 19 at 12:18
Hi, con_! Now I'm sitting in the same difficulty as you, if interested to talk and to share something, contact me VK
July 8th 19 at 12:20
htmlbook.ru
https://webref.ru
codeacademy.com

the file structure of the normal Appendix can be viewed by downloading the free opencart or wordpress
so it was about frontend, no? where does OpenCart and WordPress? - Howell commented on July 8th 19 at 12:23
: they have the templates laid out to see - and it becomes clear how people are doing. - Destinee.Hodkiewicz commented on July 8th 19 at 12:26
it is possible, but not the fact that will be better. I do not know, there are some standard templates, but studying the patterns of others, the author of the question will have to copy and error is not the best approach. Therefore it is necessary to learn from the right examples. - Larry_May commented on July 8th 19 at 12:29
: but for the TS it can become quite a clue where to start. And there, look at its structure will develop, good for him. There IS NO single CORRECT option. - Mabel commented on July 8th 19 at 12:32
it's open-source projects and they have modern approaches to the development of updated community. Studying them can help to understand the ligaments of the technologies whether it is frontend or backend. If people do not understand how to link technology, then you should start from the beginning - Howell commented on July 8th 19 at 12:35
: again, the frontend is not always associated with a backend, and is not always pretender is stretching front to back. Therefore, it seems very strange advice to look at WordPress. There is more correct to send a person, for example, html5up.net - look for a good template from a sensible person. Without impurities backend and other husks that the author of the question is not needed. - Kyleigh_Hills commented on July 8th 19 at 12:38
he will look for a template that can be including pulling on the backend(and you can not pull) but the file framework remains the same. As in WordPress templates. - Howell commented on July 8th 19 at 12:41
how he determines what kind of people - smart? - Kyleigh_Hills commented on July 8th 19 at 12:44

Find more questions by tags CSSHTMLPreprocessors