How is the workflow of a front-end developer organized?

Question

css

In general, I’ve been sitting for the second day, I can’t get everything together.
For many, this may seem like a silly question, but for me it's generally like a dark forest.
So I sat for a very long time, but studied the layout, typeset some demos. For all the time I have not laid out a single finished page, all the time, either a menu, a form, a gallery, etc., all separately, in the main one on the codepen. I have been sitting for more than a year, with some periodicity, and so I do it. I start learning, then I quit.
Now all the same, I decided that it was time to stop at one thing. Decided to stop developing. So far, only the frontend.
I've tried a lot of stuff over the years. Read a lot about. In general, a little bit of everything. I'm fed up with theory and small practice.
html5, css3, sass, stylus, jade, gulp, js, bootstrap, jeet, nib, rupture, etc.
I tried a lot of things, but I don’t have a single idea of ​​\u200b\u200bhow to organize and connect it all.
I don't understand how a project is organized from scratch. What file structure should be, what methodology to use, how to use it all in conjunction with preprocessors and templating engines, what algorithm the layout itself uses, how in general, where to start, how to make adaptability later or immediately, what tools to use, how to do it later assemble everything into a finished project, how to optimize, etc.
It seems like everything is clear separately, but I don’t understand how to put it all together and use it.
Tell me how to start doing front-end normally, and not riveting demos on codepen. I would like to do it professionally. Everywhere they write about everything separately, but how to use all this in one project xs.
How to organize everything from scratch?
Where can I look at ready-made projects, or rather at the file structure?
How is everything organized for you?

Answer 1

Let's try to tell you step by step how to work in the front-end.
1. You must learn to think in blocks (blocks in the flow, drop out of the flow, flex blocks, etc., etc.). You can only learn when you understand how to actually type.
2. Start with a simple layout. Take the layout in .psd (80% of the work on each site you will use PhotoShop, and if you don’t know it at least at the pre-basic level, it’s sad), import all the pictures you need from there, and start laying out the template block by block, depending on where the font color is , size, weight, block size, background of this block, etc., etc.
3.Why did you fool yourself with gulp, sass, bootstrap when you still don’t even know how to typeset normally - alas, I don’t understand. None of these tools will help you until you know how to typeset. For now, don't think about technology, structure, etc., etc. Just lay out at least some kind of layout somehow.
4. Connect with people who can help you advance in this area. There are very many of those. You can add me on Skype and find out some things, you can join others, anyone, in fact, probably 60-70% of layout designers will be happy to share their experience with you
5. Write code carefully. There was a question here recently in which a person provided the code, but there is neither { }, nor normal indents, well, half;are simply lost, and in html tags are not used for their intended purpose at all. You can’t do this in any case, otherwise your level will not rise from the level of the plinth.
6. File structure: folders css images js and at the level with these folders there are .html or .php files. If we talk about preprocessors and assemblers - don't go into it yet, then you'll find out as soon as you learn how to typeset properly. I think it makes no sense to explain what should be in those folders. If you consider yourself special, you can distribute pictures inside images into folders into components, for example, make a folder for reviews, a folder for galleries, etc., but I don’t do this more often, I don’t want additional characters to clog my code and worsen readability.
7. Связывать между собой html и css судя по всему вы и так уже умеете и привязывать к ним js. Не знаю что вам мешает сверстать любой сайт если вы понимаете как устроены эти 3 технологии (а на них по факту всё и держится).
Итог: Забудьте про sass, gulp и прочее пока не сверстаете шаблонов 10, эти технологии вас никак не ускорят и никак вам не помогут пока вы не будете уметь просто верстать с шаблона .psd и писать нужные скрипты на js или jQuery хотя бы. Научитесь немного фотошопу и занимайтесь практикой. Найти те самые .psd вообще не проблема, их куча бесплатных в интернете.

Answer 2

Let's do it.
Take a small landing page PSD template.
Open in Photoshop, save all the pictures from it.
You make a project folder where there will be index.html style.css and a folder with pictures.
In your head you divide it into blocks - the top menu, the slider, the first block, the second block. You make the html code for the menu, you make styles for it in style.css, and so on in turn. Described one block in html, wrote css for it.
Now you don't need anything else, just pictures, html and css at the most basic level, no adaptation, no saas less gulp b other things.
You download the pixel perfect extension for chrome and align all the blocks as in the design.
So you make one landing page, one corporate website and one online store. You need to make the functionality.
Каждый проект заканчиваешь до конца, пока все не будет по дизайну. Будут вопросы пиши на тостер. Закончишь пиши на тостер, проси оценить верстку, только выкладывай куда-нить на бесплатный хостинг, работаешь над тем, что посоветует.
Далее уже только после всего этого можешь на лофтблог посмотреть, там есть уроки по разным технологиям фронтэнда

Answer 3

https://habrahabr.ru/post/202408/

Answer 4

Do you rivet demo molds-buttons? Maybe you like this approach? demo.patternlab.io ? You create small pieces of sites, and then put everything together. That is, take the layout you like, do exactly what you know how to do exactly according to the layout - a menu, a button, fonts - and gradually assemble it like a puzzle.
Do not fool yourself with the methodology at all, it is very individual, or imposed (in the neutral sense of the word) by the team in which you work. Write shit code. When real problems start to arise, like why do I already have 10 levels of nesting, maybe this is wrong? or how can I figure out this css file of 5000 lines? Why does my page load in 5 seconds, although it only has text and 2 pictures? How the hell do I make sure that the header doesn't have to be edited in 200 html files?
You go further. Pick one. Don't listen if you are told that scss is better than Stylus. Chosen - study further. No one will refuse your work if you show sites made on the stylus, and not on loess / sass. Having understood one, you will already have a rough idea of ​​​​how the other works and, if necessary, learn this other in a couple of days. Have you chosen a framework? Build on it. Etc. Well, there is nothing unified on the web, each large company creates its own libraries, its own work process - but all this is based on THEIR experience, not yours.
И еще, оставьте розовые мечты про идеальный веб. Очень редко в крупных проектах все делается правильно. Чем больше проект разрастается, чем больше человек работает над ним, тем уродливей он выглядит. Дааа, есть компании, где есть свои стайлгайды, где все верстальщики делают всё одинаково и у них получается идеальный проект. Но это верстальщики с многолетним опытом, вы туда со старта не попадете. Попадете туда, где будут говнокодить. А вам остается только делать выводы и учиться на своих и чужих ошибках.

Answer 5

The key skills of a layout designer are layout speed, layout compliance, adaptability, connecting and configuring jquery plugins, animations and effects.
Those are the ones that need to be tightened up first. About everything else, one could say "they will teach you at work", but not in your case) and each office uses its own set of goodies.
I myself started with html academy and after free courses I could already make up anything where js was not needed. Perhaps you do not have a system or take too complicated layouts..
What is the goal you want to achieve?
If there are no web studios in the city, then freelancing remains .. The main thing is to do everything efficiently so that there are regular customers.
You can look for layout orders, start with one-pagers, where preprocessors and optimizers are not needed, and gradually increase your skills.

Answer 6

Рассказываю про себя (многие профи закидают камнями, но...).
Две папки: images и assets. Внутри assets есть папки css, js, fonts, scss. Что в них лежит понятно из названия. В scss лежат исходники, в css всё компилируется.
Для компиляции использую Prepros. Адепты других софтинок меня сейчас загнобят, но Prepros делает ровно то, что должен с удобным интерфейсом под виндой, с минимумом настроек и просто весьма неплох.
До HAML и подобных моментам ещё не дошёл и не знаю... Меня более чем устраивает классический HTML.
Вместо бутстрапа использую самописное творение.
Ваша проблема, как и у многих начинающих, осознание, что творить придётся на ОГРОМНОМ стеке технологий. Нельзя просто знать CSS и HTML. Этого уже давно недостаточно. Нужны препроцессоры, постпроцессоры, обработка изображений... Всё...
Попробуйте выделить свободный денёк и потихоньку заверстать какой-нибудь элементарный блог, но на полном стеке. Сделайте раскрывающееся меню, респонзив-сетку и основные стили. Всё. Так вы доберётесь до понимания как всё работает в комплексе.
А затем уже можно переходить на более сложные макеты.

Answer 7

Есть работа. Реальный сайт в количестве 1шт.
Советы получите в процессе производства.
скайп antonybark

Answer 8

Устройтесь на работу, там расскажут как, когда и что.

Answer 9

Нужен опыт полной верстки сайта, а не какой-то отдельной части. Для этого скачивайте любой шаблон или можете мне в скайп постучать скину.
Начать работать с макетом по просмотру и вырезке с помощью Photoshop, когда уже осточертеет можете переходить на более современные вида Avocode.
Опытные верстальщики делают собственный шаблон для разработки. Тут нам и нужны уже сборщики в вида озвученного вами gulp(grunt, webpack и прочие). Настройка кому удобней.
Я для примера использую gulp+sass+autoprefixser+browersync.
HTML препроцессоры не зашли мне, стандартный emmet радует.
У каждого сугубо своё отношение к тому или иному "инструменту". Вам нужно набить обычные шишки и получить опыт, для понимания базовых вещей. Следовательно все по старинке верстать и разным методом. (float'ами, flex, block-table и табличная О_о (для электронных сообщений) ).
P.S. Удачного вам пути в это парой не благодарное дело :)

Answer 10

Вы очень часто должны будете вписываться в архитектуру заказчика/работодателя, вы строго говоря и не должны решать архитектурные вопросы проекта.
вот это все от проекта к проекту отличается, если вы даже код фронтенда не пишите, то Вы ничего не решаете).
Но у вас должен быть какой-то дефолт. Например, bem/bem-like, scss, autoprefixer, какой-то дефолт адаптивности. Если вам дают набор psd, то логично разделяете файлы по этой структуре, чтобы фронтендер все оперативно внедрил.
весь гитхаб завален фронтендом
не рекомендую
Приходите бесплатно поработать, я Вам выдам нетривиальный шаблон, а Вы попробуйте его сдать как заказчику, в качестве эксперимента.

Answer 11

Привет, con_! Сейчас я сижу в такой же затрудненности как и ты, если интересно пообщаться и чем-нибудь поделиться, свяжись со мной вк

Answer 12

htmlbook.ru
https://webref.ru
codeacademy.com
файловую структуру нормального приложения можно посмотреть скачав бесплатный движок opencart или wordpress