Сергей ZSA

Скажу просто от себя без какой-либо статистики. Почему не сделать валидно с точки зрения html5 и адаптивно очередной сайт? Хуже от этого никому не будет, а воспользоваться article и nav за место div.article и div.nav по-моему даже выгодней (аш на 4 символа меньше печатать!!!). Опять же сказано было выше правильно - если у вас валидно всё, адаптивно, но сайт ужасен по составляющей ui и содержанию - можно не думать о топе. Контент и внешность наше всё, от этого никуда не денешься (дизайн как минимум потому что на сайте с красным фоном и желтыми буквами никто сидеть не будет, а значит нахождение на сайте меньше и соответственно сайт катится по наклонной с точки зрения ПС).

Если сайт старый - подумайте, может есть смысл вообще его переделать на новый лад. Внести изменения в дизайн, а соответственно и валидность поправить, дотянув до html5. И постоянным посетителям понравится (если они есть) и ПС понравится.

Быстрый ответ: habrahabr.ru/post/114256
----------------------------------------------------------
Если вы знаете основы, значит знаете определенные css правила. Скажите такую вещь, как мне правильно сверстать 3 блока, идущих в ряд горизонтально?
Варианты ответов:
1. Используя float
2. Используя inline-block
3. Используя flex-box
4. Используя table
5. Используя position 0_o (потому что можно задать relative родителю и absolute детям+top/right/bottom/left)

Правильный ответ: всё выше перечисленное (ну может быть последнее не очень верно, но ведь тоже можно сделать и сделать очень аккуратно, не повредив общей структуры сайта). Ваш вопрос как по мне просто идентичен моему по смыслу. В разных ситуациях используются совершенно разные подходы, а количество этих ситуаций измеряется количеством вашего/чьего-то воображения.
--------------------------------------------------------------------------------
Если вы работаете в команде - спросите/посмотрите какой стиль вёрстки использовался до вас и можно ли использовать свой стиль, либо верстать так, как раньше верстали (многие команды даже гайды пишут по этому поводу, к примеру csssr).
Если работаете один - можно тоже самое blog.csssr.ru/code-guide и ещё в довесок ссыль в начале поста.

Пробовал тоже галпом, но мне на постоянный поток небольших проектов не очень удобно им пользоваться, поэтому оптимизирую вот так habrahabr.ru/post/215213

em не лучший вариант для бордеров по-моему, но дело ваше. Сюда .main .sidebar nav li добавьте это border-left: 0.3em solid transparent; и всё прекрасно заработает.

Вах вах вах. Какой ужс. А нельзя повесить класс и тут же задать timeout строкой ниже? Или у вас этот класс в таком .div .anim имеет 3 секунды длительность анимации, а просто в .anim имеет 1 секунду?

И вообще вопрос, у вас там че анимация в несколько минут чтоль, что человек даже браузер свернуть захочет, пока она идет?

sorax канал. Где-то давно был пост с каналами для фронтендеров, уже забыл и искать влом. Через гошу найди "ютуб каналы для front-end". В короткие сроки вряд ли реально. Все тонкости только с практикой, а какие-то с глубокой практикой.
На счет бутстрапа - я забыл, когда им пользовался (обычно пишу чистый css даже без препроцессоров, но иногда с ними явно удобней)
На счет сборок - тоже редко, так как они больше для больших проектов (сорь за каламбур)
На счет адаптивной вёрстки - это тоже только практика. Сначала надо научиться верстать статичные шаблоны, а потом делать адаптив. На самом деле в media нет ничего сложного и страшного, просто мы будто бы выкидываем предыдущий файл стилей для прошлого экрана и заменяем его новым файлом стилей. Грубо говоря так, но там надо основательно всего учитывать, особенно наследование и перезапись правил.
Ну и на счет боевого проекта - готовь фотошоп, который нужно тоже так нормально знать, потому что плох тот верстальщик, который его не знает ровно как и плох тот дизайнер, который не представляет вёрстки. Идеальный вариант - уметь верстать и уметь рисовать дизайны сайтов ну и обрабатывать фотки, потому что это всё очень понадобится (всё больше встречаю криворуких дизайнеров, а о криворуких верстальщиках лучше вообще молчать).

Главное - при написании кода думайте о тех, кто будет его поддерживать, но если вы занимались бекендом - наверняка это и так знаете.

А давайте ещё и style="" ещё использовать для пущей скорости. Вы сами подумайте, что хотите сделать - огроменный файл с кодом html+css и уж 100% там будет js, а если ещё и какую-то библиотеку подключите типа jQuery тоже не через файл, а напрямую - ваш текстовый редактор может либо скопытиться, либо очень очень долго думать и тяжело отображать то, что в файле при его скролле. Более того я не завидую вам потом, потому что поддерживать такой код будет огромной головной болью (если вы его будете поддерживать, если кто-то другой - он будет готов вас сварить себе на обед).

Пробовал учиться в 2х вузах. Ушёл из них (не потому что не вытянул нагрузки, поступил по результатам ЕГЭ везде, куда не подавал по стране и почти из каждого инста звонили и обещали золотые горы). Система образования ужасно отстаёт от сегодняшнего времени и не даётся того, что необходимо.
Разговоров по поводу того, что учиться надо, без корочки ты никто, институт закладывает понимание процесса самообучения и прочей ереси наслушался капец просто.
Уделал препода по web на 1 семестре, автоматы были даже при условии 2х посещений за семестр некоторых предметов (просто правильно поставить себя перед преподавателем и всё). Итог - пока все сокурсники занимались зубрёжкой непонятно чего непонятно зачем - просто занимался любимым делом - web. Замечу, первый инст был МИЭМ в Москве (бюджет, ушёл с 1 курса, инст не понравился), 2 инст - РГСУ в Москве (бюджет, ушёл с начала 3 курса, достало и преподы требуют всё же посещаемости, а сидеть ежедневно по 8 часов не делая ничего для себя - пустая трата времени).

Женился. Работаю удалённо. Ежемесячные траты солидные, но работы всё больше и больше. Открываю с товарищем хостел, скоро переезжаем в Италию. И это при условии, что специализируюсь я только на web-сфере.

P.S. Родители не помогают вообще ничем, всё своими усилиями.

Верстаю часто, верстаю много (дизайнерю тоже, но чуть меньше). 7 лет занимаюсь этим. Работал и с table-вёрсткой, и все косяки float, inline-block и тп уже давно знал, хотя и не считал это всё косяками, а воспринимал как должное. Надеюсь, кому-то помогу своим опытом (не только техническая сторона)

1. Необходимо чётко узнать требования по проекту (будет ли он адаптивным, подразумеваются ли на нём какие-либо динамические блоки и тд и тп)
2. Если проект - ленд на 12 экранов и за него платят 2000 рублей - заказчика вежливо отправляю куда-нибудь по-дальше, чтоб хотя бы денег накопил и совести набрался.
3. Смотрю на дизайн (в основном достаточно быстро, минут за 10) для того, чтоб понять, какие элементы реально сделать, а какие нет (смотря какие условия опять же, явно все тутошние читатели знают про адаптивку). Если что-то unreal - чётко расписываю заказчику что не реально и почему, если контактирую с дизайнером и есть относительная свобода - прошу перерисовать конкретные элементы.
4. Открываю ФШ и начинаю приводить в порядок все слои (с режимами наложения, с составными фонами для 1 блока и тд и тп). Если есть режим наложения на какой-то элемент (обычно Умножение чтоб не было видно белого фона) - топаем к дизайнеру и начинаем ему выносить мозг если изображение сложное (если нет - сам вырежу, если есть подобное в интернете - нахожу png и далее...) Все слои для блока конкретного сливаю воедино, тогда и макет меньше весит и вырезать проще будет (конечно зависит от ТЗ всё, мож там где-то параллакс и надо двигать туда-сюда всё)
5. "Обрезанный" psd ложу на Creative Clound
6. Пока всё это дело заливается - запускаю Brackets и пишу весь необходимый html вместе с текстом.
7. Залился psd, а html уже написан. Топаем в css, открываем Extract и понеслась по стилям гонка
8. Проверка на адаптивность и кроссбраузерность
9. Продакшн

P.S. Стараюсь всегда минифицировать html и css. Если есть хоть чем-то одинаковые блоки на страницах - один класс для них и только отталкиваясь от расположения меняем их. Напимер: .btn с градиентом, тенью, цветом и смещением текста, а также :hover пишу всё ближе к началу css дока, а дальше если кнопка где-то больше по отступам либо по шрифту: nav .btn {необходимые отступы}
P.P.S. 100% комментарии. Чаще всего в css.

Пожалуй, всё.

из вашего index.php вытащить проверку, подключение и тд и тп в файл function.php а в html добавить <?php require_onse("function.php"); ?> Я часто в своих небольших админках под ленды использую такой подход. В этом файлике у меня содержатся нужные функции, вверху в index.php перед я его подключаю и использую далее по коду к примеру <?php get_user("name"); ?> ну или что-то типа того.

Советую прочитать про require_onse и include. Они примерно одинаковы по смыслу.

Как сделать, чтобы div подстроился под высоту окна браузера?

Кто мешает изучить back end? Можно и js изучить на отлично, сейчас это совсем другой язык, нежели был раньше. По-моему будет развиваться вёрстка. Войдут различные новые адекватные конструкторы, которых научат верстать правильно и не пхать поуши ужасного кода. Через 3 года прямо капец каких изменений ждать не стоит наверно, а вот через 10 лет вполне может быть. html никуда не денется - это язык разметки гипертекста, браузеры вряд ли захотят переделывать полностью, чтоб они понимали там какой-то кардинально новый язык, ровно как и css (который крайне удобен и функционален уже сейчас). Возможно в css появятся новые селекторы, его может быть доработают до некоего языка программирования или чего-то подобного (хотя далеко не факт, потому что он нужен для задач больше не программных). А вот js наверно станет реально серверным языком и может быть вытеснит php.

Скажу по-секрету - открывать без разницы где. Хоть вообще в ie и уменьшите окно браузера просто. Везде будут поля меньше. Ответ был дан - height в %. Кто так делает? Вообще зачем столько % в коде? Вёрстка тег на теге и тегом погоняет.
Next зачем для одного слова городить огороды? Если это кнопка - сделайте button, если это блок - сделайте просто div, если это вообще заголовок - сделайте h*. input через br тоже "гениально".

А ещё понравилось это если уменьшить высоту окна: