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

Дизайн

весна

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

продовжити читання

...

4. Бічна колонка

У бічну колонку

5. Нижній колонтитул

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

6. Загальні CSS-стилі

Загальні стилі, скидання стилів браузера за замовчуванням:

*, *: After, *: before (box-sizing: border-box; padding: 0; margin: 0; transition: .5s ease-in-out; / * додамо плавність переходів для всіх елементів сторінки * /) ul ( list-style: none;) a (text-decoration: none; outline: none;) img (display: block; width: 100%;) h1, h2, h3, h4, h5, h6 (font-family: "Playfair Display "; font-weight: normal; letter-spacing: 1px;) body (font-family:" Open Sans ", arial, sans-serif; font-size: 14px; line-height: 1; color: # 373737; background: # f7f7f7;) / * додамо очищення потоку для всіх контейнерів, усередині яких задано обтікання дочірніх елементів * / header: after, .container: after, footer: after, .widget-posts-list li: after, #subscribe: after (content: ""; display: table; clear: both;) / * стильовий клас, який управляє шириною контейнера сітки * / .container (margin: 0 auto; width: 100%; max-width: 960px; padding: 0 15px ;)

7. Стилі для шапки та її вмісту

8. Стилі для блоку з основним вмістом

9. Стилі для бічної колонки

10. Стилі для нижнього колонтитула

Підвал сайту розділимо на три рівних стовпці:

Footer (padding: 30px 0; background: # 3C3D41; color: white;) .footer-col (width: 33.3333333333%; float: left;) .footer-col a (color: white;) .footer-col: last- child (text-align: right;) .social-bar-wrap (text-align: center;) .social-bar-wrap a (padding: 0 7px; font-size: 18px;)

11. Медіа-запити

12. Скрипт для мобільного меню

За показ-приховування верхнього меню при кліці на кнопку (перемикається висота меню - від нульової до рівної її вмісту) відповідає код jQuery, який ми раніше додали в розмітку сторінки перед закриває тегом

:

Починаючи з цього уроку, ми будемо вчитися верстці сайту з нуля в популярному flat стилі. Ця тема дуже об'ємна і ми присвятимо їй не один урок. Що означає це на практиці?

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

Будемо виходити з того, що замовник виявився доброю людиною і надав нам разом з макетом і заздалегідь порізані картинки. Для створення HTML сторінки, нам буде потрібно: .psd макет, папка з картинками, Photoshop, Notepad ++ і браузер.

Ми говоримо з вами про макет, але поки це тільки картинка, з якої нам належить зробити повноцінну HTML сторінку.

Зверніть увагу, що наш макет вдає із себе класичний приклад flat дизайну. Flat дизайн - це значить «плоский», тут ви не побачите об'ємних тіней, градієнтів і інших «наворотів».

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

Верстка шапки сайту

створюємо HTML сторінку і робимо розмітку нашої шапки. Вміст шапки пишемо всередині парного тега header.

• Головна


• Портфоліо


• Про мене


• Контакт

без оформлення CSS стилями виглядає шапка зовсім не так, як треба. У файлі style.css, Пропишіть селекторам відповідні властивості, щоб шапка виглядала згідно макету.

Розберемо основні моменти. Логотип і меню навігації повинні бути в одному рядку. Тому в блоці div з логотипом задаємо обтікання - float: left; Навігаційне меню встане праворуч від логотипу. Пункти меню повинні бути в одному рядку - display: inline-block; Скасувати обтікання можна вставкою в код порожнього діва -

Код шапки сайту у файлі style.css:

Body (
font-family: "Lato", Verdana;
font-size: 100%;
background: #fff;
}
.wrap
{
margin: 0 auto;
width: 70%; / * Відступи щодо вікна браузера * /
}
.header (
padding: 1.3em 0em; / * Поля навколо тексту * /
}
.logo (
float: left; / * Обтікання логотипу * /
}
.logo a (
display: block; / * Перевизначення в блоковий * /
}
.nav (
float: right; / * Обтікання логотипу * /
margin-top: 0.82em;
}
.nav\u003e ul\u003e li (
display: inline-block; / * Перевизначення в рядково-блоковий * /
}
.nav\u003e ul\u003e li.active a (
background: # d0a5a5;
color: #ffffff;
}
.nav\u003e ul\u003e li\u003e a (
display: block;
font-family: "Lato", sans-serif;
font-size: 1.1em;
text-transform: uppercase;
padding: 0.5em 1em;
color: # 444;
-webkit-transition: 0.9s; /* плавний перехід */
-moz-transition: 0.9s;
-o-transition: 0.9s;
transition: 0.9s;
}
.nav\u003e ul\u003e li\u003e a: hover (
color: #fff;
background: # d0a5a5;
}

код HTML розмітки шапки сайту:

rel \u003d "stylesheet" type \u003d "text / css"\u003e

• Головна


• Портфоліо


• Про мене


• Контакт

/ * Скасування обтікання * /

В процесі верстки сайту з нуля ми отримуємо готову шапку сайту.

Цілком стабільний, тому не дивно, що зростає і кількість бажаючих освоїти дане ремесло. До того ж, як на мене, це один з найпростіших «шляхів потрапляння в ІТ». Хоча важливо розуміти, що для гарної віддачі ви повинні стати профі - крім наявності знань треба постійно систематизувати і модернізувати свої навички, завжди бути «на хвилі» і використовувати тільки актуальні сучасні методи.

Як і в будь-який інший професії, починається навчання верстці сайтів з нуля - з базових понять і теорії. Про них сьогодні і поговоримо. Зокрема розгляну супер корисний сервіс Interneting is Hard, який на 100% раджу всім новачками.

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

Особисто я починав свій з простеньких (і ще паперових) книг по HTML / CSS, потім були роки тренувань і згодом вирішив закріпити / систематизувати знання за допомогою якихось курсів. Вибирати насправді є з чого, хоча не всі варіанти в підсумку виявляються вартими. Я проходив онлайн навчання верстці в компанії Нетологія. Там якраз зараз йде набір до наступної групи.

Перевага курсів в тому, що вони можуть забезпечити поетапне і ефективне засвоєння знань за допомогою:

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

Зокрема в Нетологія все проходить в форматі вебінарів з можливістю задавати питання. Є домашні роботи, дипломна і сертифікат про завершення навчання. Коротше, все серйозно. Подібні додаткові фішки роблять онлайн курси більш «вигідними», а витрати при цьому - просто інвестиція в себе.

Якщо сумніваєтеся, пошукайте безкоштовні матеріали в тих чи інших сайтах - як правило, парочка занять або навчальні статті для ознайомлення можна отримати просто так. Ну, і звичайно, існують десятки інших освітніх веб-ресурсів, за доступ до яких платити не потрібно.

Interneting is Hard - сервіс вивчення верстки

Нарешті то перейдемо до проекту Interneting is Hard - штука насправді дуже крута! Це повноцінний комплексний курс для освоєння HTML і CSS новачками, які жодного разу не намагалися детально розбиратися з пристроєм веб-сторінок і їх розробкою. Якщо ви не знаєте з чого почати вивчення верстки - 100% заходите сюди.

Все, що потрібно для старту - мотивація і знання англійської мови. З організаційними питаннями не буде ніяких проблем - розробники склали щось на кшталт «навчального плану», який включає:

• 14 глав з поступовим поглибленням матеріалу;
• 284 зрозумілих прикладів коду;
• діаграми і графіки;
• майже 43 тисячі слів;
• сучасні техніки (так-так Flexbox теж є).

Особливості та фішки сервісу

Процес навчання HTML верстці в Interneting is Hard володіє декількома перевагами в порівнянні з іншими схожими проектами:

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

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

3. Наочні приклади демонструють основні концепції пропонованого матеріалу за допомогою конкретних сценаріїв. Це означає, що користувачеві не доведеться читати нескінченні «полотна» тексту. Такий підхід незмінно приводить до нудьги, яка в кінцевому підсумку спонукає залишити вивчення.

Кожні 2-3 абзаци супроводжуються написанням коду і уявленням про те, як він працює. Так майбутній фахівець отримує свою першу практику в текстових редакторах і перевірки результатів в браузері;

4. Даний варіант навчання верстці сайтів повністю безкоштовний. Починаючи освоєння HTML, багато ще вагаються, чи дійсно це те, чим вони хочуть займатися. І якщо платні курси, можливо, змусять шкодувати про втрачені гроші, то Interneting is Hard дасть максимум знань, які не запитавши натомість ні долара.

Розділи для поетапного вивчення верстки

Як я вже сказав вище, «навчальний план» складається з 14 тематичних блоків. Давайте коротко розглянемо їх:

1. Introduction. Ознайомча частина, в якій розповідається, для чого потрібні HTML, CSS і. Там же є розходження між фреймворкамі і мовами, а також показується принцип роботи з текстовим редактором АТОМ.
2. Basic Web Pages. Другий розділ ілюструє будову елементарної веб-сторінки. Тут демонструється HTML-структура - «скелет» сайту. Відвідувач дізнається, навіщо потрібні теги, які вони бувають і для чого призначений кожен з них.
3. Links and Images. Знаючи основи проектування, в третьому розділі користувач ознайомиться з розміщенням зображень і з'єднанням веб-сторінок один з одним.
4. Hello, CSS. Далі починається - так званих таблиць стилів. В дане поняття входить все, що стосується оформлення: шрифт, колір, розташування, форма і розмір тексту.
5. The Box Model. Продовжує тему дизайну п'ята глава навчального плану, розповідаючи про «блокової» моделі вмісту. Майбутні верстальники знайомляться з такими речами, як зовнішні відступи, рамки, внутрішні поля і контентне наповнення.
6. CSS Selectors. За боксами слідують селектори - основа CSS. За допомогою прикладів коду в редакторі творці курсу навчають правильному використанню стилів.
7. Floats. Сьома частина розширює отримані знання про управління розмірами блоків і областями навколо них. Вона присвячена поняттю потоку на веб-сторінці (Float) і описує нюанси роботи з сіткою сайту.
8. Flexbox. Після досягнення екватора навчального плану, вам пропонується ознайомитися з Flexbox-му. Це сучасний інструмент верстки, який дає повний контроль над вирівнюванням, напрямком, порядком і розміром блоків. Нещодавно, до речі, розповідав про - ще більш круту штуку.
9. Advanced Positioning. Далі починається більш складний матеріал - просунуте позиціонування і його основні типи: відносне, абсолютне і фіксований. Хоча, пам'ятається, на курсах дану фішку ми проходили спільно з Float і явно до Flexbox.
10. Responsive Design. У десятому розділі розповідаються основи і роль адаптивного дизайну на сайті. Зараз без нього нікуди.
11. Responsive Images. Урок присвячений адаптивним зображень, їх масштабування, режисирування і створення альтернативних форматів за допомогою спеціальних функцій.
12. Semantic HTML. Дванадцята глава знову повертає до базових понять HTML, розкриваючи його з семантичної точки зору. Тут читач знайомиться з «секційними» елементами, новими тегами і їх застосуванням.
13. Forms. У передостанньому пункті відвідувачеві дається можливість вивчити побудову форм і її елементів: списки, що випадають, меню, текстові поля їх оформлення і відправка інформації, наприклад, через.
14. Web Typography. Останній туториал розповідає про сучасну веб-друкарні на сайтах - про зовнішній вигляд текстів, заголовків, про шрифтах і т.п. В іншому моєму блозі є розділ про веб-типографіку де знайдете масу корисних заміток по темі.

Структура уроків для навчання верстці

Щоб гідно оцінити функціонал і зручність сервісу Interneting is Hard пропоную розглянути реалізацію одного з його підрозділів. Візьмемо другий урок по створенню елементарних веб-сторінок.

Що мені особисто подобається:

• Весь матеріал упорядкований підзаголовками. Текст при цьому викладено доступною мовою і не вимагає глибоких знань складної термінології. Все коротко і по суті - в кращих традиціях.
• Важливі і складні моменти прекрасно ілюструються діаграмами.
• Для простоти розуміння і практичних навичок даються приклади написання коду.
• Все максимально зручно: в правому верхньому куті є кнопка повернення в меню, можливий миттєвий перехід до бажаного підзаголовку уроку (навігація праворуч) і після лекції є відкриття наступної глави. Відмінне юзабіліті.

висновки

Як мо мені Interneting is Hard - на даний момент один з кращих сайтів з навчання верстці з нуля. Автори курсу подбали про те, щоб новачки, які ніколи не мали справу з HTML і CSS, могли в простій і доступній формі зрозуміти ази створення веб-сторінок. Інформація дуже добре структурована - поступово за 14 розділів ви подолаєте шлях від початківця користувача до досвідченого верстальника. Звичайно, без практики і застосування знань ніяк не можна, але що стосується теоретичної бази - це найповніше зібрання інформації, що я зустрічав. Якщо хочете займатися з викладачами - подивіться варіант від Нетологія теж вельми непоганий, хоча і платний.

Якщо знаєте ще якісь цікаві сервіси з вивчення верстки сайтів, надсилайте лінки в коментарях.