How do you start building a website?

Question

Work organization

First, describe the structure of the site in full, and then write CSS styles, or write styles gradually, for example, did you write the header markup - wrote CSS for it, wrote the content part - wrote CSS for it, etc.?

Answer 1

1. Create a directory for the project
   
2. With the help of Emmet , I create a template that I'm already starting to fill out.
   
3. In the src directory, I create folders less , js , etc.
   
4. Along the way, I write tasks for Grunt
   
5. If the selected framework lacks any class for styling an element, I first describe the styles directly in the template, in the style property . Then, if necessary, I take them out of there into LESS in the form of one or more classes.
   
6. ??????????
   
7. PROFIT!!!
   

Answer 2

First of all, I reset the css styles.
Then I make the layout of common blocks - just a structure of divs with the necessary widths, heights according to the layout, filled with different colors. I try to make all divs (when something is in a line) inline-blocks. It turns out such a color structure of the future site. The frame is ready.
I begin to delve into each block - to place the necessary elements in it. Depending on the complexity of their location, I make some position: relative blocks, but most often everything rests simply on indents.

Answer 3

I create minimal markup with basic elements and write CSS for them.
Then I add the rest of the elements to the markup and write the CSS.
Etc.

Answer 4

Usually it all starts with criticism of the designer...this is the only difference between my method and the above methods)

Answer 5

1) I go here codepen.io
2) I click New Pen
3) A new pen is created where everything is already set up for me (SASS / indents / liveupdate and so on).
4) Typesetting
5) ...
6) PROFIT!
If the layout is multi-page, then I make one pen global (SASS variables / common JS code) and link it to other foams. + you can fork the whole thing until you lose momentum, and show links to the customer (all links are private if you have a PRO account). It is especially convenient when there are several animation options, then I just do 2-3 forks and give links, and the person visually compares everything.

Answer 6

My first answer here, I will try to help, I have about 5 years of layout experience. Everything written above is interesting, and certainly useful. I will write about something else. About speed. I came to the conclusion that in order to speed up the layout, you need to work in one program, if possible, and try to minimize switching between them. I work on two monitors, and still this principle greatly helps to speed up the process. I work like this:
1. I open the layout in PS, and cut it, along the way I think how and what I will do, how I will name the elements.
-- I have a layout and a set of pictures --
2. I copy all the text from the layout into a text file, and make html in it. I wrote a line for zen, expanded it, transferred the text from the file below. The layout is open on the second monitor, I just look there.
-- I have a layout, a set of pictures and html --
3. I copy all the html to css, and by deleting I create a blank for styles. For example, I have a section like this:

<ul class="b-pages">
    <li class="b-pages-item m-active"></li>
    <li class="b-pages-item"></li>
</ul>

and from this html I make this blank:

.b-pages {  }
.b-pages-item {  }
.b-pages-item.m-active {  }
.b-pages-item:hover {  }

-- I have a layout, a set of images, html, and a stylesheet with no rules filled in --
4. This step is the most unoptimized and takes the longest time. On one monitor I have PS open on the second browser with the console, I have to work with two programs, with PS and the browser, I copy the styles from the layout and paste them into css. Along the way, I correct the indents, sizes up to PixelPerfect. + writing js.
- work is ready -
I hope that my experience will be useful to you.

Answer 7

Everything is on paper first. Sometimes with colored pencils for backgrounds or borders.
In general, you make a grid with a minimum cell and drive away from it. Excel is ideal.

Answer 8

I've been typing not so long ago, I'm not typing so often, but I'm still typing.
Since everyone started from scratch, namely from the PSD layout, I will also start from this moment.
1. I evaluate the layout, compose the basic markup for myself, determine which main blocks are present, and what should happen if they are not.
2. After evaluating which blocks are needed, and having estimated the site structure, I go csstemplater.com/ generate an HTML / CSS template according to my structure, unless of course it is LP
3. I create a directory with the name of the site in openserver, create an HTML directory in it, and inside according to the template
4. I drop the downloaded template into folders, cut out the resets from there, since there is already one edited and transferred to less
5. I create main_site.less - I include all the less files I need here, template.less - I write all the structural elements here (header , footer, etc.), ui.less - usually, if the project is not complicated, I put all the design here, sometimes I divide everything into separate blocks, menu/portfolio/modal/btn/, etc. 6. I set up the Less compiler in PHP storm for the current project, so that only the
main_site.less file would be compiled into the css folder in index.html, along the way I add comments
8. I open and look at the PSD template of the site for the presence of non-standard fonts, if the fonts are in www.google.com/fonts , then I connect them, otherwise www.fontsquirrel.com , and scatter the files into folders
9. Then using Emmet I create the basic markup if it is an LP (header/footer/slider, etc.), if not, then I start from the very top to mark up the elements (logo/slogan/phone/login-widjets, etc.) files.
10. I make up to the end everything that is in the layouts. Then, if necessary, I create a template for the CMS.
PS: I don’t minimize the files that I did, only at the request of the customer, because all normal frameworks and CMS can combine css and js files into 1, minimizing along the way. I give the customer everything that I did, including the source code.

Answer 9

from a cup of coffee), the idea should hit

Answer 10

For simple classic sites:
1. I create an HTML - site frame (header, sidebars, footer, etc.)
2. I work out the header and footer. I cut pictures for the hat and footer. At this point, the HTML headers and footers are ready.
3. I quickly rip out the style names from HTML (I use services like bearcss.com , html2css, etc.)
4. I start CSS: reset styles + from point 3
5. I quickly rip out the CSS for the header and footer from the PSD (I use the CSSHAT plugin), the rest by handles
6 The hat and basement are ready! At this stage, the framework is essentially ready for both the main and internal pages, and very quickly and you can already show something!
7. I work on the content part block by block (I do steps 1-5 for each block)
8. All icons, decorations are stuffed into a sprite, photos and large images can be run through compression services like tinypng tinyjpg
9. I check the finished layout for pixelperfect, in different browsers, I make edits
10. PROFIT!

Answer 11

1. I set up gulp for the main tasks (concatenation, minimization, removal of unused, cross-browser compatibility, sass, etc.) 2.
I connect the necessary "modules" via bower, for example, normalize.css or a framework
independent blocks into a separate directory, e.g. "modules", or "pages" for styles of individual page features), at the css root the main stylesheet in which all modules are imported (for example, a file with color palette variables or a file with mixins ).
4. I connect the necessary fonts, mainly through a special mixin.
5. In the main style file, I describe the main styles for typography, in general, everything related to type selectors.
6. If the designer provides a styleguide, then I start to typeset the page from it, namely, by independent blocks (where possible, from smallest to largest) using the BEM methodology.
7. Along the way, I add tasks for the task manager, for example, for scripts or pictures, collect the necessary package.json, bower.json.
8. The actual block layout stage.
9. I assemble the constructor from ready-made blocks and elements according to the layout.
10. I check cross-browser compatibility, pixel perfect.
11. The stage of correcting details
Based on the wording of the question, the answer is:
in stages, first I describe the structure of one block, write styles for it, and move on to the next one.

Answer 12

I already have my own html + css template.
1) I copy the blank to a new project
2) I write html for a long and tedious time, I hate when there are a lot of small elements on the layout
3) I cut pictures, sprites
4) I write css, sometimes I edit html along the way
But I already have a lot of experience, about 9 years already. Therefore, I know in advance what will happen where and how, I don’t guess, this experience allows me not to write css along with html. It turns out very quickly. And I use all sorts of bootstraps only on demand. I think it's redundant in many cases.

Answer 13

I just set the future design (black and white) to the background of the site (background: url('###') center top). I enter all the necessary html tags. I add CSS classes. I open this page in Google Chrome where DevTools Autosave plugin is installed. And I stupidly typeset right in the browser. Very easy and fast!

Answer 14

Why use bower and so on. They are too lazy to install the main lib, but they are not too lazy to install bower, it is better to install jQuery and other libs from Yasha or Google. Use an environment like NetBeans, WebStorm, Eclipse, etc. Some kind of rubbish like the "first answer" projects clog the tin. Twitter Bootstrap can be used as an example for implementation, and not sculpt a basis on it)
There is a BEM that perfectly saves the project for years, you can not use the dviglo, the idea itself is good not to make a dump out of the project.

Answer 15

I type often, I type a lot (to the designer too, but a little less). I've been doing this for 7 years. I also worked with table layout, and I already knew all the shoals of float, inline-block, etc., although I didn’t consider it all shoals, but took it for granted. I hope I can help someone with my experience (not only the technical side)
1. You need to clearly find out the requirements for the project (whether it will be adaptive, does it imply any dynamic blocks, etc., etc.)
2. If the project is a 12 screens and they pay 2000 rubles for it - I politely send the customer somewhere further away, so that at least he saves money and gains conscience.
3. I look at the design (mostly quickly enough, in about 10 minutes) in order to understand which elements are realistic and which are not (depending on what conditions, again, obviously all local readers know about adaptive). If something is unreal - I clearly describe to the customer what is not real and why, if I contact the designer and there is relative freedom - I ask to redraw specific elements.
4. I open Photoshop and start tidying up all the layers (with blending modes, with composite backgrounds for 1 block, etc., etc.). If there is an overlay mode on some element (usually Multiplication so that the white background is not visible) - we stomp to the designer and start to take out the brain if the image is complex (if not, I will cut it out myself, if there is a similar one on the Internet - I find png and further .. .) I merge all the layers for a specific block together, then the layout weighs less and it will be easier to cut (of course, everything depends on the specification, maybe there is parallax somewhere and you need to move everything back and forth)
5. "Cropped" psd box on Creative Clound
6. While this whole thing is being poured, I launch Brackets and write all the necessary html along with the text.
7. Pour psd, and html is already written. We stomp in css, open Extract and race through styles
8. Checking for adaptability and cross-browser compatibility
9. Production
PS I always try to minify html and css. If there are at least something identical blocks on the pages - one class for them and only starting from the location we change them. For example: .btn with gradient, shadow, color and text offset, as well as :hover I write closer to the beginning of the css dock, and then if the button is somewhere more indented or in font: nav .btn {required indents}
PPS 100% comments. Most often in css.
Perhaps everything.

Answer 16

1 - you create your template 1 time and for a long time (and add buns to it little by little) (ready set - structure, configured bower and gulp, for example) you can do it right away in yoman
2 - download the template (copy / sublime fetch plugin / yo my_template )
3 - install dependencies, plugins (1 line in the console - bower i && npm i)
4 - start to typeset
5 - ???
6 - PROFIT!!

Answer 17

I break the layout into modules (list element + list, header, navigation, form, button). I define intersections of modules (for example, two blocks on different pages are very similar - they have one module and just one of them will have an additional class .module.module-supermodule in the HTML).
I start several files:
app.css - only imports for modules.

@import "base.css";
@import "icon.css";
@import "btn.css";
/* ... */
@import "some-module.css";

base.css - any base styles not tied to classes, usually styles for tags, no class or id hints.
Typesetting first modularly. A module usually only includes classes delimited by a certain prefix, such as .nav- or .sidebar-.
Common modules that roam from project to project are .btn-, .icon-, .form-, .nav-. The principle of organizing a module is simple: strictly use classes with a certain prefix inside. Searching for such a module in the list of CSS files is very simple - the prefix is ​​the name of the file, in the layout it is also quite simple to understand that an element belongs to a specific module - all classes of this module have this prefix. If the module is a list, let's say .list: the module will have .list-item first and then .list .list-item - to be able to use .list-item separately from the .list parent, sometimes very useful.
In general, according to the structure of the project organization, everything. Further - the choice of a certain grid step (indents, sizes of elements) must be a multiple of the selected step value.
To assemble modules into one file, I use a concatenator that can look at imports and extract CSS files from them. If you use LESS or SASS, the task is generally elementary. I just know that the people I give layout to are not often familiar with LESS and SASS to give styles in this form.
In fact, the wisdom of the start ends. Then it all depends on your professionalism.
PS: By the way, for some reason everyone resets styles - I never do that. It is enough to know the features of standard styles, thorough testing in different browsers. It turns out that in fact the standard indents set by the browser, on the contrary, help. Moreover, the days when there was a noticeable spread in standard values ​​have passed. Generally strange.

Answer 18

• I create a local project
  My main browser is chrome.

Answer 19

What a tin, I read the comments and understand that a modern layout designer is not a profession, a non-programmer, but like that cat who licks himself.

Answer 20

Thank you kind people for the detailed comments. I learned a lot of useful and interesting things.

Answer 21

smacss.com

Answer 22

1) I start a clean scss project (already prepared in advance)
2) I add the project to prepros
3) actually, I make up, I add the necessary mixins as needed
4) I write js nicknames
Done

Answer 23

1. CSS - Reset parameters by default.
2. Sequential list output of all basic types (h1, h2, etc.)
and required blocks with layout settings for each new type/object/block.
Nesting check and other "rake". Run in different browsers.
3. Layout of page grids with prepared styles (in item 2)
4. Profit! (js - add after if needed...)

Answer 24

Because first of all, a designer, I make up step by step visual sections, immediately with styles, images, pages, etc.:
1. Header and main menu.
2. Footer.
3. Banners/widgets/side menu.
4. All main.
5. Product cards.
6. Catalog.
7. Product pages.
8. Shopping cart and contacts.
9. Windows/lightboxes.
10. Information pages.
Each stage is immediately fully tested and corrected.

Answer 25

1) I look at the sites that are on this topic
2) I look at what the sites above are implemented
on 3) I choose: use CMS or Make up from scratch
4) If CMS - install on hosting and test; I edit for myself / If the usual layout - I create a folder structure, I make style.css, index.html I connect Bootstrap and Jquery and go to fuck the code in Sublime
5) I set up the CMS, I edit the code / For the usual layout I test the code in the browser

Answer 26

Depending on the task, do you need a working site immediately in PHP (well, for example, an elementary form submission or if the data is in the database, etc.).
If PHP is not needed, I create a folder with style, i, script folders in it. I'm just typing.
With the PHP option, the same thing, only on the local domain or somewhere I create a test domain on my hosting provider.

Answer 27

stark_workflow $projectname

#start_workflow_code примерно такой код
cd ~/git/works/
git clone ~/git/workflow newproject
cd newproject
npm install

subl .src/base.html
grunt watch
One problem, I haven't worked out a unified approach to organizing a grunt project yet.
For layout Jinja2 template engine + less, well, all sorts of lint

Answer 28

As many have already said:
1) Gulp
2) reset.css, bourbon, neat (most likely you don't need bootstrap)
3) definitely BEM. Without BEM everything will be bad. It's just a matter of time. You need to typeset by components.
4) repetitive little things in atomic. VEM does not need rules like cursor: pointer, text-align: center. Create .pointer, .text-center.

Answer 29

Everything is simpler for me:
1. I open the layout, then study it, mentally break it down into main blocks (I compose the basic code markup), determine the repeating blocks, noting in advance in my head where I will need common classes, and also quickly figuring out how it all is will look on mobile (alas, but they always ask to make adaptive or mobile without layouts). That's all with the study of the layout. It takes about a couple of minutes for everything, if it’s a simple landing. If this is a multi-pager or an online store, then I study all the layouts at once in order to also determine for myself what blocks and styles will go to general.css, and what will be in the personal style files of individual pages, so that later I don’t merge style files, don’t kill extra time.
2. I open breckets, immediately sketch out the basic markup of the entire page, taking into account that it will be adaptive (or responsive) using the convenient and beloved emmet.
3. Styling the layout (also from top to bottom, block by block).
4. Making an adaptive. Taking into account the fact that already when laying out the desktop, I immediately figure out what kind of mobile version I will have and typeset taking into account the adaptive or responsive, then I can make adaptive in a working day on all pages, unless there are any surprises with cross-browser compatibility on any iOS Safari (which, as a front, I already just hate for some six months with all its surprises).
5. I test, finish everything that can be finished.
This is if it's just layout. If turnkey with admin panel (in my case modx), then:
1. Thinking about and sketching the layout, I also figure out which elements I will put out in common chunks, which ones will be displayed in all sorts of snippets, etc.
2. I do the layout, after approval I transfer it to the admin panel, I break everything into chunks, additional fields, put the necessary components, etc.
In general, something like this. :-)

Answer 30

1. I start by cloning my repository from github, it has everything, file structure, demo files, mixins, resets, development dependencies (gulp, etc.).
   
2. I write in the npm i console and away we go.
   
3. They study the layout, choose the main color, all fonts, build the structure (almost always on paper), select the same blocks and elements, think about how to style them so as not to repeat the code.
   
4. I start typesetting