web-programming

HTML и CSS

Конспект лекции и скринкаст первой части

О чём будет курс

Я участвовал в этих проектах:

• http://pythontutor.ru/
• 2long2read

Я хочу научить вас делать что-то подобное.

Демонстрации для лекции

HTML, CSS, JavaScript на веб-странице: всё в одном файле, три разных файла, фидл

Домашняя страничка Гвидо ван Россума как пример HTML-кода десятилетней давности

Фидл с примером формы

Фидл с примером таблицы

Блог Армина Ронахера

Вёрстка: выравнивание по центру, пример вёрстки

CSS-фреймворк Pure CSS

Задания

1. Todo-list. Сверстайте содержимое Todo-list‘а у себя на компьютере. На следующей неделе мы напишем логику для него.

• Можете добиваться выравнивания и красоты своими CSS-стилями, а можете использовать любой CSS-фреймворк.
• Выложите Todo-list на хостинг статических сайтов Hostinger.
• Поделитесь со всеми ссылкой на своё решение на вики-страничке

2. Календарь. Сверстайте календарь, стараясь повторить макет. Это было вступительным заданием в школу программистов компании Headhunter на отделение фронтенд-разработки в 2013 году.

Материалы

1. Курсы по вёрстке на htmlacademy.
2. CSS-фреймворки: Twitter Bootstrap, Zurb Foundation.
3. Dive into HTML5
4. Лекции Школы разработки интерфейсов: 2012, 2013. Презентация Вадима Пацева по CSS с курса на Школе разработки интерфейсов
5. Idiomatic HTML, idiomatic CSS.
6. Как пользоваться хостингом hostinger.ru