Web-технологии. Начало

С чего начать обучение верстке? На мой взгляд, в верстке главное – практика. Поэтому обучение стоит начинать с выбора макета. В сети достаточно 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...


Это то, что касается новичков. Для опытных разработчиков постараюсь периодически делать выборку полезных статей и материалов.


Оставляйте предложения и замечания в комментариях.

Web-технологии

459 постов5.8K подписчиков

Добавить пост

Правила сообщества

1. Не оскорблять других пользователей

2. Не пытаться продвигать свои услуги под видом тематических постов

3. Не заниматься рекламой

4. Никакой табличной верстки

5. Тег сообщества(не обязателен) pikaweb

1
Автор поста оценил этот комментарий

Многие уже пытались тут научить людей делать сайты.
Отвечу как и всем

Иллюстрация к комментарию
раскрыть ветку (1)
1
Автор поста оценил этот комментарий

В мои цели не входит полноценное обучение, скорее просто собрать в кучу полезные материалы по теме. Ресурсов для обучения в сети достаточно.

показать ответы
Автор поста оценил этот комментарий
А постов так и нет((
раскрыть ветку (1)
Автор поста оценил этот комментарий

Да, в жизни происходили сильные перемены и было не до того. Будут еще посты

показать ответы
Автор поста оценил этот комментарий

Будет продолжение?
Очень интересно будет прочитать,или уже все "запал пропал"?)

раскрыть ветку (1)
Автор поста оценил этот комментарий

Пост пишу в свободное от дел и работы время. Поскольку у меня нет желания делать 100500 постов на тему верстки - готовлю один большой с полезными ссылками и материалами. Верстка сайта на примере свободно доступного макета gulp + less + html. Оптимизация шрифтов и другие полезности. Весь код выложу в гит и ссылку приложу. По мне так лучше сделать хорошо, чем быстро.

показать ответы
2
Автор поста оценил этот комментарий

Запал, как я понимаю иссяк?

раскрыть ветку (1)
Автор поста оценил этот комментарий

Нет, просто времени не было. Скоро будут следующие посты.

показать ответы
Автор поста оценил этот комментарий

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

Есть у нас такой вот блок. Верстаю как div.container>div.decription+img.

Внимание, вопросы: Для .description создать padding'и с трёх сторон и жестко заданную высоту блока? А что нужно делать, чтобы не началось месиво в случае, если .description станет больше по высоте чем img?

http://oi63.tinypic.com/f03zu1.jpg

раскрыть ветку (1)
Автор поста оценил этот комментарий

Такие вопросы лучше сопровождать кодом на codepen.io или jsfiddle.net. Разместите код, посмотрю.

Автор поста оценил этот комментарий
Комментарий удален. Причина: спам.
раскрыть ветку (1)
Автор поста оценил этот комментарий

Это не на рекомендацию похоже, а на рекламу своего сайта. От слайдера глаза кровоточат. Преимуществ перед webref или его предшественником htmlbook не обнаружил, от слова совсем.

Автор поста оценил этот комментарий

htmlacademy тоже тема.

а вообще html+css+mysql я начал с уроков Попова... :D  

раскрыть ветку (1)
Автор поста оценил этот комментарий

У htmlacademy хороший блог, мне особенно про оптимизацию шрифтов было интересно. Искал материалы по этой теме после прослушанного подкаста Веб-стандарты. Думаю в процессе верстки показать как это работает.