Polytech-soft.com

ПК журнал
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Задания по html верстке

htmllab

Задания по основам работы с HTML и CSS

Задачи по основам HTML призваны закрепить работу с набором следующих тем: структура HTML, комментарии в HTML, основные теги, основные атрибуты HTML. Задачи по основам.

Задачи по работе с гиперссылками освещают вопросы: понятия гиперссылки, внешние гиперссылки, внутренние гиперссылки. Задачи на гиперссылки.

Задачи по изображениям в HTML: вставка изображения в HTML (HTML код изображения), размер HTML изображения, выравнивание изображения… Задачи по работе с изображениями в HTML.

Задания по углубленной работе с HTML и CSS

Задания по HTML с Emmet. Быстрая верстка, команды Emmet (так называемая шпаргалка Emmet). После выполнения задач с плагином Emmet скорость вашей верстки/разработки вырастет в разы. Задания по Emmet.

Задания по CSS-селекторам. Селекторы CSS: css селекторы классов , css селекторы атрибутов , соседние селекторы css , контекстные селекторы css, дочерние селекторы +в css , приоритет селекторов. Задания на CSS-селекторы.

Задания по float css. Обтекание в HTML и CSS — хорошая возможность разместить блоки на одном уровне или построить многоколоночную страницу. Владея свойством float, можно отчасти управлять блочностью элемента, а зная как решать проблемы с обтеканием — не тратить время на поиски «ошибок». Задания на CSS Float.

Работа CSS-позиционирования важна для понимания сложной верстки. Здесь приводятся задачи на понимание и работу с: position absolute, position relative, position fixed и position static, CSS-свойств top left bottom right. Задания по CSS-позиционированию.

Задания по верстке форм

  1. Сверстайте форму аутентификации на сайте, такую же как в Twitter Bootstrap (не используя этот фреймворк). Например, как в панели навигации Bootstrap.
  2. Сверстайте форму диспетчера на сайте
  3. Подключить jQuery-плагин для выбора даты/месяца из поля
  4. Создайте чекбокс по аналогии с социальной сетью.
  5. Создайте форму регистрации посетителя сайта
  6. Создайте форму подобной той, что сортирует товары в Яндекс.Маркет

Одна из задач верстальщика — писать кроссбраузерный код. Код, который позволит страницам выглядеть в наибольшем количестве браузеров одинаково или максимально похоже. Задания на кроссбраузерность.

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

Задания на медиа запросы (мобильные сайты). Создание мобильной версии сайта — важная часть умений веб-разработчиков. Задания посвящены темам: создание мобильного сайта, проверка мобильной версии сайта. Задания на media queries.

Задания по верстке psd макета и CSS-фреймворкам. Верстка сайта на основе psd макета — важнейшая часть работы веб-верстальщика. На уроках HTML мы рассматриваем основные шаги верстки из psd в HTML. Задания по верстке psd макета.

Тестовое задание для верстальщика

Для проверки знаний верстальщика даем 2 макета: простой и сложный.

Простой макет

Простой макет должен сверстать любой верстальщик. Тут вопрос в кривизне кода, который он напишет. Код должен быть максимально чистым. Только теги, классы, селекторы, ну и текст. Некоторые кандидаты умудрялись делать на таблицах в стиле cellspacing=0 align=left и прочие архаизмы из 90-х годов. Футер должен быть прижат к низу. Нужно обратить внимание на отступы, шрифт (он должен быть как в макете, а не на глазок). Ну и чтобы смотрелось в разных браузерах. Еще было бы неплохо использовать семантику: список ссылок делать через li, заголовок в h1 и т.д.

Сложный макет

Для профессионалов.
центр (черное пятно и основные элементы) должны быть статическими, а задний фон тянуться и быть резиновым. Или всё должно быть резиновым, но в пределах разумного. Я уже не помню.
Этим макетом можно сразу отсеивать новичков.

Мне дали этот макет на собеседовании на самой первой работе (2006 год), когда я толком не знал html. Весь мой опыт заключался в создании статического сайта kursk2005.ru (и то там сейчас более свежая верстка). Значит, прихожу я на собеседование в офис за Савеловским рынком (какая-то web-студия). Менеджер сразу понял, что я совсем зеленый и по-хорошему посоветовал поучиться дома и приходить через полгода с портфолио. Я конечно опечалился и по пути к метро зашел на Савеловский рынок и купил там книжку по CSS издательства Orelly

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

UPD
Вот еще макет PSD одного сайта и верстка по этому макету

  • Семантическая верстка (1)
  • Искусство проведения интервью (2)
  • Вопросы на собеседовании по PHP (3)

Сложный макет макет должен получится «Резиновым» ?

«на таблицах в стиле cellspacing=0 align=left и прочие архаизмы из 90-х годов» — ничего что Ваше «новомодные» «слои» (div) не всегда корректно поддерживаются браузерами.

Читать еще:  Html help workshop

И к слову слоиста верстка — это верста с использование z-индекса. Красиво и эстетично.

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

А я не говорю про первый. я говорю в принцепе. Не надо отказыватся от одного стиля верстки, если не знаешь сложностей другово. Оптимально комбинация.

Такая верстка Вам встречалась?
в первом макете количество тегов в теле:
— 4
— 1

— 3
1 любой текстовый
классов 4

вввв, согласись, что cellspacing=0 align=left легко выносятся в CSS — и это правильно! Бывает конечно, когда какой-нибудь элемент проще сделать через таблицы (особенно когда нужно, чтобы хорошо смотрелось в IE6), но в целом все прекрасно верстается на дивах с CSS. Видел много верстки. «Устарешую» верстку очень тяжело поддерживать.

«Новое — хорошо забытое старое».
У нас с Вами просто разный класс задач. Мне надо что бы все работало одинаково во всех (и в этом четровов IE5,6,7 и . небуду регатся. 8). Даже в разных версиях IE элементы ведут себя по разному. А хуже всего то, что пользователь не будет подстраивать под сайт, даже если это служебный. 🙁

Автор. Скажи пожалуйста, если я смогу сделать эти макеты (не то чтобы в легкую, но и не слишком тяжким мне это покажется), куда я в таком случае могу устроиться? И вообще реально устроиться на работу, связанную с версткой, зная только HTML и CSS и немного JavaScript (самую малость), но не зная PHP, Ajax, Flash и прочего.

Можешь устроиться html-верстальщиком. Я сам так начинал. Потом изучаешь php, mysql и дальше, если будет интересно. Программистом, да еще со знанием верстки, конечно быть гораздо выгоднее, чем просто верстальщиком. Выгоднее по зарплате и вообще верстка — это очень нудное занятие (на мой взгляд).

В том то и трабл, что везде требуются уже полноценные спецы, чтоб и с базой мог работать, и скрипты на пхп в легкую писал, а так, чтобы чисто html-верстальщик, как ты говоришь, я вот такого никак не могу найти — может тебе фартануло просто так).
Полностью с тобой согласен, что программистом быть куда выгоднее, и я не против изучить это всё в дальнейшем, но вот изучать это дома одному у меня совсем не продуктивно получается — другое дело получать эти знания с опытом, в ходе уже какой-то работы, чтоб тебе кто-нибудь и подсказать мог, если что.
Можешь конкретным советом помочь куда именно податься, к примеру куда ты устраивался, где тебя просили эти макеты сверстать?! Глупо наверно звучит), просто на самом деле хотелось бы в этом направлении развиваться.

Что значит фортануло? Вакансий много (в Москве) даже без знания PHP. Заходишь на hh.ru и ищешь в поиске «html-верстальщик». Я так нашел работу на второй день. Правда иногда в задачи верстальщика входят задания по наполнению базы данных и подобная тупая работа. Поэтому нужно поскорее переходить в программисты — их меньше загружают такой херней:)

Первый макет мы давали сверстать на прошлой работе — сейчас там жопа из-за кризиса. Второй макет мне дали сверстать 3 года назад где-то на метро Савеловская (я не помню контору, но офис там был классный).

Если не можешь сейчас найти работу — делай свои проекты. Пускай это будут простенькие сайты, но зато у тебя будет портфолио. Изучай PHP. Не обязательно знать его досконально. Я учился на бесплатных скриптах, которых очень много в интернете. Например, скачиваешь какой-нибудь скрипт голосования или для закачки файлов — там не так много кода. Сидишь и разбираешься. Если сложно, то изучаешь учебник. Не справочник, а именно учебник. Их тоже очень много в интернете.

Хороший html-верстальщик это золото. Особенно там, где надо чтобы было всё «резиново» а не побыстрее 🙂
Очень часто, например, немецкий язык своими длинными словами ломает не жалея абы как свёрстанные менюшки, кнопки, колонки.
Я в своё время начинал как раз с html, потом не заметно увлёкся PHP ну а там уже занесло.
Делал друзьям сайты, потом ставил CMS-ки. Пока это не превратилось в хлеб. Так что главное не бояться и делать то что нравиться/получается 🙂

А можно ли в этот момент пользоваться своим CSS фреймворком?
Нет, конечно можно всё на память писать.. но время время.. дороже.

Не все макеты должны приниматься на вёрстку от дизайнера.
Если дизайнер рисует лишь бы ещё доказать себе, какой он крутой художник — в топку такого дизайнера, который не уважает труд верстальщика. Дизайнер должен всё разметить, и продумать, как должно будет тянуться в том или ином моменте.

Читать еще:  Как настроить rdp через vpn

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

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

тестовое еще имеет актуальность?

резиновая вёрстка второго макета — это бред полнейший.как по вашему это будет выглядеть в разном разрешении?как было написано выше — за такие тупые задания не стоит и браться

Ооо..Благодарю! Я тоже получил тестовое задание..Макет не сложный. Но для себя отметил много мелочей и понял что еще не готов там работать!:) Решил побольше набрать опыта и потом уже менять работу. Вот терь ищу тестовые задиния и пытаюсь сверстать. Так что статья уж очень при очень к стати. 🙂

Условие:
Вам предлагается выполнить тестовое задание.
Приложенный файл отверстать резиновой версткой, валидно, кроссбраузерно.

точно сложный макет резиновый??

Второй макет не может быть полностью резиновым, кого я говорю.. Видно же что макет не преднозначен для резиновой верстки. Это не макет, это тупо просто калаж школьного класса о музыке по джазу:DD Ладно я тут разошелся. Этот макет и красивый, но его только псих возметься верстать:)))
Первый макет очешь легкий, кому надо пишите по этому Email
Ranerg@yandex.ru
Я сверстаю его бесплатно

Резиновые макеты самые сложные. Но и оплачиваються также

А мне макет клуба не показался сложным. Я его под Joomla 1.7 за 2 вечера и один день отверстал. И без всяких таблиц. Зацените: http://clab.16mb.com/
Сложноватым мне кажется макет, который выложил Oriy. Из-за форм. Взять хоть форму «выбрать город». Мне кажется, это должен быть селект. И при чём здесь тогда чекбокс? Да и вторая: добавить компанию. Откуда добавить? Куда добавить? Что за форма загрузки такая непонятная.
И ещё: у нас в Барнауле та же ситуация, что описал Стас. Самое слабое объявление по вакансии веб-верстальщика требует не только отличного знания HTML, CSS, но и уверенность в работе с JavaScript/ AJAX (фреймворки jQuery, YUI)и PHP (хотя бы в рамках учебного курса ВУЗа).
Лично я со своим чисто верстацким резюме только однажды вызвал интерес у потенциального работодателя,- когда забыл прикрепить резюме к е-мейлу. Это был единственный раз, когда я получил ответ. «К Вашему резюме верстальщика не прикреплено резюме», там было написано. Я прикрепил. Интерес пропал.

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

Привет.
Я сделала простой макет, у кого-нибудь есть желание посмотреть-покритиковать?

Ol4ik, да конечно — есть желание
пиши suvorov.igor.90@gmail.com

Готово:):)Гг Сделал сегодня первый макет. как бы на «HTML 5» завтра попробую второй. может кто хочет посмотреть? И Ol4ik покажи свою работу:) nazarposhta@gmail.com

резиновая вёрстка второго макета — это бред полнейший.как по вашему это будет выглядеть в разном разрешении?как было написано выше — за такие тупые задания не стоит и браться

Все возможно если постараться)

pav-pas, блин, не помню сейчас точно ТЗ.
может и не резиновый. но задний фон точно должен тянуться.

какой в первом макете шрифт

«какой в первом макете шрифт» — там шрифт платный, в свободном доступе нету.

Практика

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

Аудио и видео

  • Добавление аудио
  • Автовоспроизведение аудио
  • Зацикливание аудио
  • Элемент
  • Добавление видео
  • Размеры видеоплеера
  • Автовоспроизведение видео
  • Обложка видео
  • Зацикливание видео

Изображения

  • Абсолютный адрес
  • Относительный адрес
  • Альтернативный текст
  • Ширина картинок
  • Размеры картинки
  • Элемент
  • Подпись под картинкой
  • Подпись перед картинкой
  • Картинки друг под другом
  • Ширина картинки
  • Плавающая ширина картинки
  • Круглое изображение
  • Выравнивание картинки
  • Рамка вокруг картинок

Многоколоночная вёрстка

  • Две колонки
  • Три колонки
  • Заголовок в колонках
  • Ширина колонок
  • Расстояние между колонок
  • Линия между колонок
  • Пунктир между колонок
  • Блоки в колонках
  • Изображения в колонках
  • Запрет переноса в колонках

Основы CSS

  • Подключение CSS-файла
  • Ошибка в
  • Добавление стиля
  • Атрибут style
  • Импорт шрифта
  • Комментарии в CSS
  • Селектор элемента
  • Класс
  • Добавление класса
  • Идентификатор
  • Добавление идентификатора
  • Селектор атрибута

Переходы и анимация

  • Плавное изменение цвета
  • Масштабирование кнопки
  • Поворот на 360° при наведении
  • Сдвиг при наведении
  • Масштабирование картинки при наведении
  • Масштабирование картинки при наведении 2
  • Прозрачность при наведении
  • Мигающий текст
  • Сердце
Читать еще:  Http img life ru fotoredaktor html

Разделы веб-страницы

  • Подвал веб-страницы
  • Шапка веб-страницы
  • Копирайт
  • Элемент
  • Шапка раздела
  • Навигация
  • Элемент
  • Создание статьи
  • Дата публикации
  • Элемент
  • Комментарии

Списки

  • Маркированный список
  • Нумерованный список
  • Обратный список
  • Римские числа
  • Буквенная нумерация
  • Список описаний
  • Список с 11
  • Вложенный список
  • Атрибут value
  • Квадратные маркеры
  • Прячем маркеры
  • Символ в качестве маркера
  • Рисунок в качестве маркера
  • Горизонтальный список
  • Римская нумерация
  • Греческая нумерация
  • Расстояние от маркера до текста
  • Цвет списка
  • Цвет маркеров
  • Отступы в списке

Ссылки

  • Создание ссылки
  • Ссылка на Google
  • Ссылка для скачивания
  • Атрибут target
  • Ссылка на email
  • Ссылка на телефон
  • Создание якоря
  • Ссылка на якорь
  • Картинка как ссылка
  • Убираем подчёркивание
  • Цвет ссылок
  • Цвет фона у ссылок
  • Активная ссылка
  • Посещённая ссылка
  • Стиль ссылки при наведении
  • Ссылки без подчёркивания
  • Пунктирное подчёркивание ссылок
  • Двойное подчёркивание ссылок
  • Рамка вокруг ссылки

Таблицы

  • Создание таблицы
  • Строки таблицы
  • Картинки в таблице
  • Заголовок таблицы
  • Таблица 2х2
  • Объединение колонок
  • Объединение строк
  • Ячейка заголовка
  • Тело таблицы
  • Подвал таблицы
  • Ширина таблицы
  • Выравнивание заголовка таблицы
  • Выравнивание таблицы
  • Цвет фона таблицы
  • Зебра в таблице
  • Поля в ячейках
  • Расстояние между ячеек
  • Рамка вокруг таблицы
  • Рамка вокруг ячеек
  • Линии в таблице
  • Горизонтальное выравнивание в ячейках

Текст

  • Элемент
  • Абзацы
  • Переносы строк
  • Заголовок первого уровня
  • Заголовки
  • TEX
  • Озон
  • Площадь круга
  • Важный текст
  • Элемент
  • Рыжая лиса
  • Шрифт на веб-странице
  • Шрифт иллюстрации
  • Шрифт заголовка
  • Свой шрифт
  • Размер текста в пикселях
  • Размер заголовка в em
  • Размер заголовка в rem
  • Цвет основного текста
  • Цвет заголовка
  • Выворотка заголовка
  • Курсивный текст
  • Жирный текст
  • Нормальная жирность заголовка
  • Выступающий инициал
  • Трансформация

    • Поворот на 90°
    • Отражение по горизонтали
    • Поворот на -90°
    • Отражение по вертикали
    • Отражение картинки
    • Сдвигаем вниз
    • Сдвигаем вверх
    • Наклон картинки
    • Точка трансформации
    • Перспектива
    • Масштабирование кнопки
    • Поворот на 360° при наведении
    • Сдвиг при наведении
    • Масштабирование картинки при наведении
    • Масштабирование картинки при наведении 2
    • Цвет по названию
    • Шестнадцатеричный цвет
    • Сокращённое значение цвета
    • Цвет в RGB
    • Фоновая картинка
    • Полупрозрачный фон
    • Повторение фона по горизонтали
    • Повторение фона по вертикали
    • Запрет повторения фона
    • Положение фона
    • Фиксация фона
    • Масштабирование фона
    • Масштабирование фона 2
    • Масштабирование фона 3

    Формы

    • Создание формы
    • Атрибут method
    • Атрибут action
    • Текстовое поле
    • Ширина поля
    • Длина текста
    • Подсказка
    • Блокировка поля
    • Обязательное поле
    • Элемент
    • Вывод текста
    • Поле для пароля
    • Размеры
  • Элемент
  • Многострочный текст
  • Картинка в
  • Отправка формы
  • Очистка формы
  • Переключатели
  • Выбор переключателя
  • Флажки
  • Выбор флажка
  • Поле со списком
  • Блокировка списка
  • Раскрывающийся список
  • Список множественного выбора
  • Блокировка пункта списка
  • Выбор пунктов списка
  • Поиск по сайту
  • Задание по вёрстке на GeekWeek 2016

    Итак, начнём!

    Я участвовал в конкрусе на мастер-классе «Вёрстка сайтов на примере Landing Page»:

    Нас попросили сверстать страничку по шаблону PSD. Страничка имеет следующий вид:

    Разобьём страничку на 4 блока:

    • product — содержит название продукта, список с основными тезисами и картинку.
    • about — второй блок, содержащий параграф с информацией о продукте и второй картинкой.
    • contact — форма отправки сообщения и контакты.
    • footer — хоть он небольшой, но мы не будем пренебрегать им.

    Я использовал boostrap для разметки, но можно и без него. Итак с подключенными стилями на старте наш документ имеет следующий вид:

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

    Делитесь своим опытом выполнения данного задания!

    Доброго времени суток!

    Меня зовут Сергей и я хотел бы поделиться своим опытом и рассказать, как я выполнял конкурсное задание на конференции GeekWeek 2016. Прежде всего хочу отметить, что мой вариант работы не претендует на идеальность, но надеюсь он будет кому-нибудь полезен. Так же отмечу, что это мой первый опыт написания текста с кодом, поэтому, если что-то не понятно, постараюсь ответить в комментариях.

    Итак, начнём!

    Я участвовал в конкрусе на мастер-классе «Вёрстка сайтов на примере Landing Page»:

    Нас попросили сверстать страничку по шаблону PSD. Страничка имеет следующий вид:

    Разобьём страничку на 4 блока:

    • product — содержит название продукта, список с основными тезисами и картинку.
    • about — второй блок, содержащий параграф с информацией о продукте и второй картинкой.
    • contact — форма отправки сообщения и контакты.
    • footer — хоть он небольшой, но мы не будем пренебрегать им.

    Я использовал boostrap для разметки, но можно и без него. Итак с подключенными стилями на старте наш документ имеет следующий вид:

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

    Ссылка на основную публикацию
    Adblock
    detector