Якщо ви намагаєтеся самостійно вивчити HTML і CSS, то це практичне керівництво — для вас. Але для початку потрібно запастися терпінням і старанністю — це дуже важливі складові в даному напрямку. Вивчення верстки веб-сайтів можна розділити на кілька етапів.
Етап перший:
Слід розуміти, що HTML і CSS — це не мови програмування, а мова розмітки і каскадні таблиці стилів відповідно. Іншими словами, даними мовами ви задаєте розташування елементів (заголовки, абзаци, посилання і т.д.) і стилізуєте їх. Також дуже важливо запам'ятати, що без гарної теоретичної бази ви не зможете приступити до практики.
Етап другий:
Для початку оволодійте HTML. Вивчіть, чим відрізняються версії HTML, навіщо потрібні теги, які теги існують, обов'язково приділіть увагу атрибутам тегів. У цьому вам допоможуть такі ресурси:
Зазначу, останній ресурс — це веб-консорціум, тут можна дізнатися про нововведення в світі веб-розробки.
Етап третій:
Ви вже знаєте про CSS: що це каскадні таблиці стилів та таке відображення веб-сторінок, які ми бачимо щодня.
Вивчіть CSS — тут ви дізнаєтеся, що таке селектор, які типи селекторів бувають, їх специфічність і багато іншого. CSS — дуже важлива тема в світі веб-розробки.
Тож вивчайте теорію та приступайте до базового використання HTML/CSS на практиці: створіть лендинг або сайт із декількох сторінок.
Етап четвертий:
Після того, як ви засвоїте весь матеріал по HTML/CSS, приступайте до практики. Чим більше практики, тим краще. Тут вам знадобиться текстовий редактор, PSD макети і, як я писав вище, терпіння і посидючість. Можете використовувати будь-який вподобаний текстовий редактор.
В чому писати HTML код:
- Sublime Text
- Atom
- Visual Studio Code
Безкоштовні PSD макети ви з легкістю знайдете в Google.
Етап п’ятий:
Знову практика.
І наостанок ще один корисний ресурс:
І кілька рекомендацій: Чим більше у вас буде практики, тим швидше ви вивчите всі підводні камені і просто наб'єте руку. Завантажуйте PSD макети і верстайте, верстайте і ще раз верстайте. Повірте, у всіх настає такий момент: «нічого не виходить, я все кину і займуся чимось іншим», але не піддавайтеся цьому, доведіть до кінця розпочате. Світ веб-розробки дуже широкий, а верстка — це тільки початок.
