HTML-пират, верстальщик
Жена придумала HTML-пирата. Он скачал sublimetext с торента.
Пришлось нарисовать)
Жена придумала HTML-пирата. Он скачал sublimetext с торента.
Пришлось нарисовать)
Доброго дня пикабушники, данный текст не несет никакой информационной нагрузки, извините если отнял время. С недавних пор читаю помаленьку литературу что касается вёрстки, в перспективе хочу конечно достигнуть в этой области некоторого уровня. Многие из вас напишут учишь учи, зачем тут захламлять-то, и они будут правы на 100%. Идея такова, когда впервые я скачал книгу html i css для начинающий, а было это не так давно=)) У меня появилось много вопросов, для чего зачем и почему? как это применять и далее в таком духе. Найти ответы оказалось не так просто как хотелось бы, гуглить приходится много и нудно, ввиду что некоторые вещи устаревают и парой ответы или решение проблем не актуальны на данный момент. Хотелось бы объединиться в группу людей таких же как и я новичков, или товарищей покруче, например в группу в скайпе или в вк что бы помогать друг другу советами интересной информаций, нестандартными подходами решения задач и т.д. Прошу не ругайтесь, те кто заинтересовался и кто такой же как и я пишите комментарии спишемся и обсудим как сбиться в кучу=) Все удачного вторника и хорошего рабочего дня!
С чего начать обучение верстке? На мой взгляд, в верстке главное – практика. Поэтому обучение стоит начинать с выбора макета. В сети достаточно psd макетов, которые можно использовать в не коммерческих целях. Поэтому первый шаг – выбор макета. Для первого опыта подойдет любой одностраничный сайт.
В этой серии постов я постараюсь на примере свободно распространяемого макета показать верстки проекта. Не будет постов с перечислением всех html тегов и css стилей, это не результативно. Важно не заучить каждый элемент, а понять особенности и подходы к реализации.
По мере появления времени, я выберу шаблон и поэтапно покажу работу над ним. Все желающие могут присоединиться, выбрать себе psd макеты и в процессе работы над ними мы обсудим те или иные подходы к верстке. Подробные уроки по HTML и CSS составлять не буду, этого в сети много. Например, уроки на webref:
https://webref.ru/layout/learn-html-css
Кроме того, при освоении основ советую избегать любых css фреймворков, стоит поделать работу руками, чтобы понимать, как и что устроено.
Список полезных ссылок:
Справочник по html/css: https://webref.ru/ref
Информация о поддержке тегов и стилей браузерами: http://caniuse.com/
Онлайн песочница: http://codepen.io/
Хорошая статья по флексбоксам: http://css-live.ru/articles/vizualnoe-rukovodstvo-po-svojstv...
Это то, что касается новичков. Для опытных разработчиков постараюсь периодически делать выборку полезных статей и материалов.
Оставляйте предложения и замечания в комментариях.
В который раз пытаюсь разобраться с этим свойством. Объясните кто нибудь пожалуйста на пальцах, почему vertical-align не срабатывает на данном конкретном примере. https://jsfiddle.net/h3hmznxz/
Комент для минусов прилагается.
Моё предложение в дополнение (или продолжение) к этому посту http://pikabu.ru/story/kak_zhe_vsetaki_sdelat_sayt_3974629
Моё предложение идёт от меня как от новичка, который пытается продраться сквозь дебри новых знаний. Лично мне мир веба даётся тяжело, поскольку я гуманитарий, к тому же девушка, к тому же блондинка, но свято верю, что нет ничего невозможного. Мне сложнее всего было продумать структуру - с чего начинать, на что обратить внимание в первую очередь, расставить приоритеты. Первое время я металась то в дизайн, то в хтмл и цсс, то вообще зависала в CSM, и естественно, в голове был сумбур, энтузиазм иногда угасал, но желание сменить профессию и стать если не супер-разработчиком, то хотя бы хорошим фронтэндщиком победило.
Поэтому предлагаю схему, которую составила для себя, авось кому нибудь начинающему она тоже поможет разобраться.
Специалистам и критике - рада. Если обратите моё внимание на недоработки, буду благодарна за подсказки и советы.
Начну с того, что, на мой взгляд, создание сайтов - это весьма сложный процесс, требующий совместной работы целой команды профессионалов, таких как дизайнеры, верстальщики, программисты, и хорошему верстальщику следует быть в курсе (хотя бы поверхностно) каждой ступеньки создания сайта. Поэтому я изобразила схему поэтапно, в виде процесса создания сайта. Какими то пунктами верстальщик и фронтендщик должны владеть виртуозно, какими то - просто иметь представление, как это работает и с чем это едят.
1. Создание идеи сайта, определение с видом и структурой сайта, знание видов сайта (статичный/динамичный, адаптивный/отзывчивый дизайн), определение с контентом (текст, графика, фото) - этот пункт сугубо ознакомительный, с этого можно начать понимание основной информации о сайтах.
2. Сервер, хостинг, домен - также понимать, как это работает, какой хостинг выбрать, и тд.
3. Проектирование сайта
3.1. Навигация сайта, карта сайта - создание основной структуры, отрисовка основных блоков (можно здесь посмотреть, как работают препроцессоры, либо как отрисовывать вручную).
3.2. Юзабилити (изучить хотя бы основные принципы эргономичного расположения элементов сайта)
4. Дизайн - этот этап реализуют дизайнеры, но верстальщику знание Photoshopa необходимо и для верстки макета в дальнейшем, и для общего развития, конечно.
4.1. Отрисовка макета в Photoshop
4.1.1. Основные инструменты рисования, техника, горячие клавиши.
4.1.2. Направляющие
4.1.3. Шрифты, цвета
4.2. Фреймворки (использование дополнительных бибилиотек может сэкономить время при разработке проекта - дизайне, верстке)
4.2.1. Bootstrap
4.2.2. Foundation
4.2.3. Compas
4.2.4. Material Design
5. Разработка - начинаем оживлять дизайн
5.1. Редакторы кода (Notepad++, Sublime Text, DreamViewer)
5.2. Структура и хранение файлов (создание директорий, помещение файлов в определенные папки, именование файлов)
6. Вёрстка/нарезка макета сайта - трансформация дизайна в HTML / CSS. Вот и добрались до основной части нашей работы.
6.1. HTML - изучаем досконально, не ленимся практиковаться, делать хотя бы легкие странички, экспериментировать.
6.2. CSS - то же самое, только можно изучить еще и применение препроцессорных языков SASS и LESS.
6.3. JavaScript - мне однажды дали совет, что для фронтендщика достаточно знать JQuery, и понимать JavaScript. Так или иначе, покорпеть над ними обоими придется.
6.4. JQuery - им нужно владеть больше чем хорошо.
6.5. Angular - это уже для более продвинутых учеников, я пока не доходила до этого, но насколько знаю, знание фреймворка даёт некий профит при поиске работы и оценке ваших навыков.
6.6. Git - сюда же поместила и систему управления версиями. Пригодится работающим в команде.
7. Интеграция макета в CMS - если, конечно, вы работаете через CMS. Но мне кажется, всё же мы должны знать хотя бы основные моменты популярных CMS - установка, модули, функционал:
7.1 Joomla
7.2. WordPress
7.3. Drupal
7.4. Bitrix
8. Наполнение сайта контентов, работа с админкой, тестировка сайта, запуск - завершающие основные моменты, с ними тоже связана немалая часть нашей работы.
9. Ну и напоследок, средства автоматизации, такие как Emmet, Jade, владение командной строкой, Gulp и Grunt, но это уже после первых 8 пунктов, и еще сюда можно добавить СЕО-оптимизацию, но это всё же не наша зона работы.
Чувствую, что критика будет, готова её принять, ещё раз напоминаю о своём дилетантизме в этом деле.
Одна вакансия, два кандидата. Сможете выбрать лучшего? И так пять раз.