Для цього міні-проекту ви розберете існуючу веб-сторінку і відтворимо її знову. Не турбуйтеся, якщо посилання не будуть нікуди вести і пошукова форма не буде працювати, коли ви її надішлете. Мета в тому, щоб почати думати про те, як елементи розміщуються на сторінці, як вони вирівнюються і стилизуются. Можливо, деякі з вас намагаються створити щось за допомогою HTML вперше (хвилююче, чи не так?).
Використовуйте інструменти розробника з вашого браузера (правий клік на будь-якому місці сторінки і клік по пункту "досліджувати елемент"), вони стануть вашими кращими друзями. Додати сторінку в текстовому файлі з розширенням .html і відкрийте її в своєму браузері, щоб побачити, як вона виглядає (або спробуйте використовувати CodePen або jsfiddle.net).
Спробуйте це, перш ніж починати
Ці навички будуть корисними, коли ви почнете писати код. Ви можете спробувати їх, або, по крайней мере, переконатися, що знаєте, як це робити:
- Два способи рухати div по сторінці
- Зафіксувати div внизу або вгорі сторінки
- Визначити кольору існуючої сторінки
- Взяти URL зображення з існуючої сторінки
- Вирівняти елемент по центру (по горизонталі)
- Визначити три способи, за допомогою яких ви можете включити CSS-стилі на сторінку
- Розуміння, як використовувати класи і id, щоб привласнити CSS-стилі конкретних елементів на сторінці
- Створити дуже просту форму (навіть якщо вона нікуди не веде)
Налаштування Github-сховища для вашого проекту (не обов'язково)
Ці інструкції будуть однаковими для кожного виконуваного нами проекту. Спочатку вони можуть здатися дивними (особливо, якщо ви ще нічого не знаєте про Git, цей недолік ми заповнимо пізніше), але не варто турбуватися - ви звикнете з ними, оскільки зробите ці дії ще безліч разів. Якщо ж у вас щось пішло не так - не гарячіться і не турбуйтеся, це можна відкласти на деякий час. Написання коду зараз важливіше, ніж Git!
Зробіть Комміт (збереження) оновленого README в ваше сховище на Github, використовуючи наступні команди:
Коли ви будете працювати над проектами, ви, ймовірно, кілька разів виконайте команди git add + git commit. перш ніж будете готувати відправити зміни на Github командою git push.
Ви повинні побачити зміни на вашій сторінці README на Github після оновлення сторінки.
Якщо ви ще не відчуваєте себе комфортно, використовуючи Git з командного рядка, ви можете просто натиснути кнопку "Редагувати" в веб-інтерфейсі Github і відредагувати файл прямо на сайті. Про це розповідається у другій частині згаданої вище статті про те, як створювати репозиторій
Замітка: Всі команди Git повинні виконуватися всередині директорії вашого проекту (в тій, в якій ви вводили git init), інакше ви отримаєте помилку у відповідь!
Окей, вистачить поки з нас Git - настав час писати код!
Легка версія: Створюємо головну сторінку Google.com
(Найпростішу, з одним лише полем для пошуку).
Всередині директорії вашого проекту створіть файл index.html
- підказки:
- НЕ БУДЬТЕ перфекціоніст! Ви тільки намагаєтеся зробити її схожою на google.com, а не повністю змусити працювати, як пошуковик, і сторінка не повинна виглядати повною копією, піксель в піксель. Будь-які випадають меню або відправка форми, або підсвічування при наведенні повинні бути проігноровані.
- ВИКОРИСТОВУВАТИ GOOGLE! Ви, швидше за все, зустрінетеся з будь-якими перешкодами, розібратися самостійно з якими не зможете. Зробіть те, що роблять в такому випадку розробники. погуглити вашу проблему!
- Якщо ви сповнилися роздратування, намагаючись змусити кнопки або поля введення виглядати так, як ви хочете (наприклад, вони просто не змінюють свій зовнішній вигляд), подивіться в css-властивість -webkit-appearance: none; або -moz-appearance. якщо використовуєте Firefox.
Для початку просто помістіть основні елементи на сторінку (картинку логотипу і пошукову форму), потім встановіть їх на свої місця по горизонталі. Ви можете завантажити логотип Google або безпосередньо використовувати посилання на нього всередині вашого тега .
Далі зробіть навігаційну панель нагорі сторінки, спочатку додайте вміст, а потім спробуйте позиціонувати його. Подивіться, як створити горизонтальну панель за допомогою CSS. якщо у вас виникли з цим проблеми.
Нарешті, створіть футер, який повинен бути дуже схожий на верхню навігаційну панель.
Надішліть ваш проект на Github, дотримуючись інструкції вище!
Складна версія (не обов'язково): Створюємо сторінку пошукових результатів Google.com
додаткові ресурси
Цей розділ містить корисні посилання на додаткові матеріали. Вони не є обов'язковими, так що розцінювати їх як щось корисне, якщо ви хочете глибше зануритися в тему
Якщо ви все ще відчуваєте невпевненість в своєму розумінні HTML і CSS, це нормально! Поки вам не потрібно бути у всьому цьому експертом. Ці ресурси повинні допомогти, якщо ви хочете зміцнити свежепріобретенном знання і полегшити розуміння знатимуть: