Всё необходимое для начинающего верстальщика?

Question

[ILoveYAnny]

Через недели две предстоит глобальная прокачка опыта, хочу подготовится. Опыт в веб разработке второй год, плотно работал с разметкой, css, js, php. Опыт написания модулей, интеграции с 1с и т.д. Однако я с ужасом осознал, что я всегда использовал чьи то шаблоны и перестраивал их под себя. Скоро предстоит разработать с нуля очень крупный корпоративный проект, с индивидуальным дизайном и посещаемостью в несколько тысяч человек/мес. Ответственность лежит большая и меня пугает некоторые белые пятна. Друзья, подскажите пожалуйста хорошую литературу с самыми основными тезисами (так как времени на изучение минимум) и инструменты которые облегчат работу на начальном этапе. Было бы круто какой нибудь визуальный постройщик дивов и скелета сайта. Чтоб я ему сказал надо хедер, потом 4 колонки, потом футер - всё это дело должно правильно масштабироваться. Он мне хоп, выстроил основную структуру, дальше уже проблем не будет - я знаю что делать.

Comments

[Oleg Krasnov]

Зарегиться на webflow.com и поразбирать чужие готовые дизайны, это позволит въехать в тему с нулевыми знаниями. Потом developer.mozilla.org/en-US/docs, webstorm, emmet, bootstrap, sass.

Answer 1

[codingal]

ILoveYAnny Самый быстрый курс с бутстрапом вот этот codecademy, вроде можно даже русский выбрать.
Хорошие платные курсы у codeschool, но там не быстро и на английском.
Книжки собраны в этом вопросе, но если их за неделю "проглотить", то толку не много будет.
Имхо, не надо использовать сервисы с генерацией кода. Использование Dreamweaver вместо нормального редактора - это минус в глазах работодателя, т.к. выдает дилетанта. Зачастую код из большинства WYSIWYG редакторов содержит много "мусора" - не нужных тэгов и атрибутов, не функциональные решения, лишние врапперы.

Comments

[Анастасия Зеленцова]

Я обучаюсь на codecademy, русского нет. 8 уроков только на русском.

[codingal]

На начальном этапе еще можно найти альтернативы например htmlacademy, дальше будет дефицит материалов на русском, потому нужно использовать google translate и активно подтягивать английский, т.к. код придется писать на английском, а использование транслита в названиях классов и методов - моветон.

[ILoveYAnny]

Анастасия Зеленцова: "русского нет. 8 уроков только на русском." - когнетивный диссонанс ? :D

[ILoveYAnny]

Хотел бы узнать ваше мнение, решит ли бутстрап и чтение основ вёрстки мой вопрос ? Или для построения начальной структуры нужны более углублённое изучение ? Повторюсь , нужен лишь правильный скелет.

[codingal]

ILoveYAnny решит 100%

[ILoveYAnny]

codingal: Будем учить значит, других вариантов нет :)

Answer 2

[Роман]

Чтоб я ему сказал надо хедер, потом 4 колонки, потом футер

Наймите помощника верстальщика :)

А если без шуток, то используйте ЦССфреймворк типа Бустрап или Зурб Фундейшн

Comments

[ILoveYAnny]

Немножко отличается от задумки, для использования этого фреймворка уже должна быть собрана правильная стрктура в разметке, за что я и переживаю..

[Роман]

ILoveYAnny: ну тут или самому быстро освоить "правильную" структуру разметки или пользоваться приблудами-генераторами кода, что вообще не вариант.

[ILoveYAnny]

Роман: А как же например метод изложенный в 1 ответе ? IDE PHPStorm ?

[codingal]

IDE за вас код писать не будет, за неделю вполне можно разобраться например с бутстрапом. Структуры особо нет как таковой: хэдер+контент+футер. Дальше разбивается контент на семантические или функцилнальный блоки.

[Роман]

ILoveYAnny: А в чем принципиальная разница ИДЕ от блокнота? Ведь все же ручками писать придется.

[ILoveYAnny]

codingal: Подскажите литературку или возможно хороший ресурс

[ILoveYAnny]

Роман: Хмм я думал там как в Dreamweaver, руками двигаешь графический интерфейс или задаёшь параметраы а код генерится.

[Роман]

ILoveYAnny: не путайте IDE и WYSIWYG-редакторы.

Answer 3

[index0h]

Было бы круто какой нибудь визуальный постройщик дивов и скелета сайта.

противоречит

предстоит глобальная прокачка опыта

Если вы про IDE - самое удобное для форнта - WebStorm. Если про zen-coding - он там тоже есть.

Comments

[ILoveYAnny]

Очень близко к тмоу, что нужно - попробую на выходных поковырять и отпишу своё мнение. Только я выбрал PHPStorm

[index0h]

Не суть, PhpStorm - включает в себя WebStorm.

[Егор Федосенко]

ILoveYAnny, index0h: а как-же NetBeans? Хотя бинсы использую на работе, а дома на PhpStorm, но по мне оба отличны.

[index0h]

C NetBeans работал довольно долго, но попробовав PhpStorm... ну это как пересесть с 5-ки на bmw, и то и то как едет, но по разному.

Answer 4

[Daria]

Если правильно вас поняла, то посмотрите макеты, своего рода паттерны

Comments

[ILoveYAnny]

Можно сказать что почти так, но однако это низкоуровневые макеты, которые очевидны. Мне нужен подобный динамический редактор, для большое проекта а не 3 колонок

[Daria]

ILoveYAnny: каким бы сложным не был дизайн, в основе всегда типовой скелет.
Вы противоречите сами себе - пишете, что хотите прокачку опыта, но при этом хотите чудо-машину, которая все сама за вас сделает. Таких редакторов полно, хоть в фотошопе верстайте, вот только качество кода оставляет желать лучшего, а уж о мелких правках вообще говорить нечего.
Не хотите сами, возьмите лучше верстальщика, толка больше будет, чем от системы-генератора

[ILoveYAnny]

Daria: Читайте внимательно, у меня есть большой опыт вёрстки. Нет опыта вёрстки с нуля, всё что нужно мне сделать это создать определённый набор дивов под нужды, дабы сыкономить время. Я могу и сам это сделать, чуть чуть поизучав но не хочу тратить на это время. Нет у меня для правильно прокачки временного ресурса, поэтому я уже определил - что верятнее всего мне подойдёт IDE PHPStrom