завдання HTML та CSS для початківців 

Практичні вправи HTML та CSS для початківців 

вправи HTML та CSS

HTML та CSS - основа сучасного вебпрограмування. HTML визначає структуру вебсторінки, а CSS її стиль. Не дивлячись на те, що обидві мови є легкі для вивчення, коли Ви зрозумієте основи - Вам доведеться багато практикуватись та відточувати свої навички.

Практика із кодами - чудовий спосіб покращити свої вміння у програмуванні та комбінувати їх у різних напрямках. Тут розміщено 10 вправ HTML та CSS, які допоможуть Вам вийти на новий рівень. Щоб розпочати просто оберіть завдання, відкривайте робочу область та кодуйте!

Зверніть увагу!

Описані нижче завдання призначені для початківців, тобто Ви повинні орієнтуватися у темі HTML та CSS кодування.

А для того, щоб бути професіоналом у своїй сфері пропонуємо Вам курси з програмування на:

  • WordPress
  • Drupal

Вправи по HTML та CSS

Тут розміщенні практичні роботи з HTML та CSS, які допоможуть Вам бути впевненими у своїх навичках.

  1. Створити сторінку з даними (tribute page)

Потрібно обрати значущу для Вас історичну постать і створити вебсайт присвячений їй. Сторінка повинна містити в собі:

  • заголовок з іменем персонажа
  • фото персонажа
  • допис під фото
  • відомості з життя персонажа у хронологічному порядку

Це завдання ви можете виконати лише з використанням HTML, але CSS допоможе Вам створити стиль для гарного візуалу.

  1. Створити сторінку у Вікіпедії

Вікіпедія є однією з основ Інтернету і має відносно простий макет. Створіть статтю у Вікіпедії на обрану вами тему. Для того, щоб зробити цю вправу для удосконалення HTML та CSS навичок, врахуйте такі пункти:

  • заголовок
  • таблиця з гіперпосиланнями на кожну тему статті
  • список літератури

  1. Створити сторінку результатів пошуку лише для HTML та CSS

Створіть фіктивну сторінку результату пошуку GOOGLE. Вона повинна вміщувати в себе:

  • лого GOOGLE
  • рядок пошуку вгорі
  • результати пошуку з клікабельними посиланнями

  1. Створити форму опитування

HTML форма - важлива частина багатьох веб-сайтів. Створіть форму на будь-яку тему.

Використовуйте різні варіанти відповідей, включно з текстовими полями, спадні меню, перемикачі, прапорці та кнопка надсилання. У цій вправі не забувайте додати заголовок і подумайте над використанням CSS, щоб покращити вигляд вашої форми.

  1. Створити сайт з ефектом паралакс-прокрутки

Вебсайти з ефектом паралакс-прокручування мають фіксоване зображення у фоновому режимі, яке залишається на місці, поки Ви прокручуєте інші частини сторінки. Цей ефект надає сторінці елегантного вигляду.

Створення паралаксної вебсторінки:

  • розділити сторінку на три або чотири секції;
  • встановити три або чотири фонові зображення;
  • вирівняти текст по кожному розділу.

Для створення ефекту Ви будете використовувати поля, відступи та розташування фону. Ось приклад вебсайту parallax.

  1. Створити цільову сторінку

Багато веб-сайтів створені для демонстрації та продажу продуктів. Цільова сторінка продукту має бути привабливою, інформативною та легкою для читання, щоб бути залучати споживачів. Поради щодо створення цільової сторінки Ви можете прочитати тут. Для успішного виконання вправи для вивчення HTML та CSS, Ваша цільова сторінка продукту має містити:

  • фото продукту
  • верхній і нижній колонтитул
  • колонки
  • кілька розділів

Зверніть увагу на колірну схему та переконайтеся, що елементи не перекривають один одного.

  1. Створити вебсторінку ресторану

Сайт ресторану дуже схожий на сторінку продукту, тому сторінка повинна описувати ресторан та меню, приваблюючи клієнтів.

Однак він складніший із зображеннями різних продуктів і напоїв. Спочатку створіть регуляційний вебсайт ресторану, використовуючи область перегляду та медіазапити.

  1. Створити шахову дошку

Така вправа з вивчення HTML та CSS навчить Вас створювати та форматувати таблиці. Також Вам потрібно навчитися вставляти символи UNICODE.

Дошка повинна мати чергування кольорів і сітку 8*8. Ось символи UNICODE, які знадобляться для фрагментів:

  • White King: ♔
  • White Queen: ♕
  • White Rook: ♖
  • White Bishop: ♗
  • White Knight: ♘
  • White Pawn: ♙
  • Black King: ♚
  • Black Queen: ♛
  • Black Rook: ♜
  • Black Bishop: ♝
  • Back Knight: ♞
  • Black Pawn: ♟

  1. Створити вебсайт заходу або конференції

Це завдання з вивчення HTML та CSS продовжує тему створення привабливих вебсторінок.

У ньому буде кнопка реєстрації, яка посилається на форму реєстрації.

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

  1. Створити сайт для портфоліо

Підсумовуючи всі вправи з вивчення HTML та CSS, створіть вебсайт портфоліо. Він повинен показувати ваші навички.

Додайте сторінку зі своїм резюме, зразками робіт, фотографією та головним меню з посиланнями на сторінку про інформацію, сторінку контактів та будь-які інші.

У нижньому колонтитулі додайте свою контактну інформацію та посилання на відповідні облікові записи в соціальних мережах.

Розвивайте свої навички у вивченні HTML та CSS та сфері програмування

Навички – це можливості рухатись вперед.

Наш шлях до успіху «Навчитися створювати вебсайти» допоможе ознайомитися з HTML і CSS, а також з адаптивним дизайном і доступністю.

Наша школа Oxit пропонує Вам окремі курси по розробці сайтів на:

На цих платформах ви зможете зробити вебсайти ще більш привабливими та динамічними.

Якщо програмування Вам не до душі, можете спробувати себе у якості тестувальника, записавшись на наш курс "Ознайомлення з Тестуванням".