[Из песочницы] Задачка про страницу в три столбца, один из них в сто пикселей


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

Разработать страницу, состоящую из трех разноцветных столбцов. Левый столбец шириной 100 пикселей, центральный и правый занимают все оставшееся до края страницы место равномерно. Высота всех трех 100% страницы. Не должно быть скроллбара и белых полос вокруг страницы.
После нескольких лет работы во фронтенд-разработке, задачи подобные этой классифицируются как «5 минут, сто раз так делал», ведь, казалось бы, страница в три столбца, что может быть проще. Но проблемы у студентов возникли на всех стадиях решения задачи: от понимания сути и разработки структуры до защиты лабораторной работы.

И если, обучение чтению условия задачи и ораторскому мастерству лежит за гранью предмета «Основы веб-технологий», то отрефлексировать поразившее меня многообразие идей структурирования такой простой раскладки кажется интересным.

Студенты продемонстрировали в общей сложности около десяти разных вариантов решения этой задачи. От совсем никуда не годных до вполне приемлемых. Рассматривать я, разумеется, буду только вменяемую половину, то есть будет пять примеров, воспроизведенных мной + несколько, предложенных сообществом в комментариях.
Читать дальше →


Уважаемые посетители,
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.



Похожие публикации

[Из песочницы] Responsive design: сохранение формы элементов разметки

Одним из приемов адаптивного веб-дизайна является установка размеров элементов разметки в процентах относительно размеров контейнера их содержащего. Тем самым достигается пропорциональное изменение... читать далее

Парочка неочевидных граблей при использовании веб-шрифтов

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

Основы разработки веб-приложений

Всех с понедельником. На прошлой неделе у нас вышел перевод книги «Learning Web App Development». Книга доступна в печатном виде и электронном (pdf+epub). Аннотация: Благодаря этой книге вы усвоите... читать далее

Фронт-энд Островка изнутри

Привет, меня зовут Игорь (iamo0), я старший фронт-энд разработчик в Островке. Я занимаюсь нашим основным продуктом: сайтом Ostrovok.ru. С помощью нашего сайта ежедневно бронируют отели тысячи... читать далее

Немного о CSS свойством «background-image»

CSS свойство « background-image » служит для заливки чего-либо (блока, ячейки таблицы, страницы целиком) фоновым рисунком. Что можно сделать, используя это свойство?... читать далее

Эксплуатация идей – или как один макет кормит несколько проектов

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

Прокомментировать


@

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent

Архив сайта

Реклама на сайте