Мій шлях у світ верстки почався два роки тому. Щось мені давалася легко - лежало на поверхні. До чогось доводилося доходити деякий час. Щось підказували.
Нижче представлені замітки про декілька базових речах, які я освоїла на початку навчання і якими потрібно володіти для подальшого занурення в верстку.
Про HTML, CSS і навчання
Насамперед за інформацією я звернулася до всезнаючого Google, на що він видав цей сайт. який розширився до webref.ru. На подібних ресурсах можна буквально з нуля почати вибудовувати відносини з HTML і CSS. І таких ресурсів багато.
Отже, за допомогою HTML задається розмітка сторінки, а за допомогою класів, айдішніков і CSS вона перетворюється на справжню красу:
Приклад сторінки, створеної за допомогою HTML і CSS
Розмітка будується з тегів, кожен з яких призначений для певного контенту: навігації, заголовка сторінки, заголовка в тексті, картинки, тексту і ще багато-багато для чого (аж понад 100 штук!). Стилі ж представляють із себе набір властивостей для елементів сторінки: колір, розмір, спосіб відображення і т.д.
Самі по собі елементи сторінки в залежності від браузера і своєї специфіки можуть володіти «рідними» властивостями.
Цієї інформації поки вистачить не тільки для того, щоб склалося уявлення про те, з яких цеглинок будується web-сторінка, але і для того, щоб піти з цими знаннями в бій і спробувати себе в створенні сторінки «Hello, Word!» Або ще чого покруче!
Коли я простудіювала весь htmlbook (а це зайняло не більше тижня), у мене вже були і миготливі квадратики, і пересуваються гуртки. Саме захоплююче в цьому знайомстві - миттєве отримання результату, можливість в цю ж секунду оцінити різницю між «було» і «стало».
Про інструменти розробки
Поговоримо про бойові інструментах.
Спочатку я працювала виключно в блокноті. Так, структуру розмітки сторінки я знала напам'ять! Властивості і їх значення друкувалися на автоматі. Але швидкість і стиль написання залишали бажати кращого. Поки в один прекрасний день мене не познайомили з Sublime, а потім я зустріла Brackets, ну, а коли я вже пішла на роботу, ми стали жити душа в душу з Atom.
Всіх їх об'єднує один величезний плюс - вони краще блокнота.
Приклад установки пакета Emmet в Atom'е:
Ну, а як працює Emmet краще просто подивитися, і для більшого ефекту порівняти з блокнотом:
А в кінці роботи над кожною сторінкою чудово буде перевірити її на правильність тут.
Про навчальні курси
Ще трохи про інформаційні ресурси.
Можете спробувати себе тут і тут. наприклад. Особисто я пройшла жоден курс за останньою ссилке.☺
про браузери
Як я вже говорила, у браузерів вже є «рідні» стилі для елементів, але не у всіх випадках вони ідентичні один одному. Щоб це не впливало на відображення верстки в різних браузерах, необхідно познайомитися з такими файлами, як reset.css і normalize.css, і, звичайно, застосовувати їх на практиці.
Ще один підводний камінь полягає в тому, що деякі версії браузерів (через свою нерозвиненість або старості) не можуть підтримувати сучасні (і не дуже) теги і властивості. Це необхідно враховувати і знаходити рішення під конкретні браузери.
Щоб перевірити підтримується той чи інший тег / властивість, рекомендую цей сайт.
Браузери можуть бути не тільки відстаючими, а й передовікамі☺. На прикладі Chrome поясню, що це означає.
Підключення експериментальних функцій.
Після цього, перезапускаємо браузер і пробуємо, намагаємося, пробуємо.
Про піст і препроцесори
Коли мені доводиться писати на чистому CSS, я вже відчуваю дискомфорт, для мене дивно робити стільки зайвих рухів. Це як рухатися до кінцевої точки пішки, а не їхати на машині. Так що цей пункт я вважаю одним з найважливіших.
І пост і препроцесори дають нам можливість писати код зрозуміліше, зручно і швидше:
- Вкладені правила.
- Змінні.
- Mixin.
- Функції та операції з властивостями.
- Умовні оператори.
- Шаблонні селектори.
І багато інших булочок можна спробувати, використовуючи less, sass, stylus, postcss і ін.
Препроцесори відрізняються від постпроцесорів тим, що перші працюють зі своїми файлами, а на виході вже віддають CSS. Постпроцесори ж працюють безпосередньо з CSS файлами.
Про постпроцесори можна почитати ще одну статтю в нашому блозі.
про статтю
У цій статті я розмістила частку тієї інформації, якої мені не вистачало кілька років тому саме в такому форматі. Кожна тема тут - ниточка від величезного клубка, але її вистачить, щоб почати розмотувати його до самого кінця.
Дерзайте, творите, верстайте!