Запитання: Опишіть себе на початку шляху?
Відповідь: На початку шляху у мене було величезне бажання змінити основну професію більш цікавий і фінансовий рід занять.
Запитання: Опишіть себе зараз?
Відповідь: Зараз у мене цієї рішучості лише додалися. Маючи за плечима понад 20 років педагогічного стажу, зрозуміла, що це зовсім не те, чим мені хочеться займатися зараз і надалі. Зовсім йти з викладання мені не хотілося б. Ідеальний варіант: залишитися працювати на 0,25 ставки, а решта часу займатися розробкою сайтів на замовлення. Тим більше зараз, коли рівень знань значно зріс у порівнянні з початком шляху.
Запитання: Які думки виникли у Вас?
Відповідь: Дуже крутий проект. Потрібно познайомитись із ним ближче. Обов'язково скористатися матеріалами вашого проекту.
Запитання: Що Вам сподобалось?
Відповідь: Сподобалася якість курсів, їх оформлення, професіоналізм авторів не викликає сумнівів.
Запитання: Які у Вас були почуття?
Відповідь: Повне захоплення процесом вивчення.
Запитання:
Відповідь: Курси допомогли систематизувати розрізнені знання, і з'явилася впевненість, що в мене все вийде..
Мені вас порадив мій добрий знайомий, який уже був на той момент вашим клієнтом
Запитання: Життєвий досвід?
Відповідь: Так вийшло, що я пішов вчитися за спеціальністю програміста практично випадково (це була друга спеціальність за пріоритетами). Після навчання пощастило відразу влаштуватися програмістом 1С, в результаті я затримався в цій сфері на 5 років.
У результаті, коли в цьому стало зовсім нудно длубатися, вирішив кардинально змінити профіль діяльності і став асистентом режисера на регіональному ТБ.
У перервах між монтажем ТВ-програм вирішив почати самостійно вивчати PHP, до того ж, в цей момент у мене з'явився курс з PHP від Webformysl - власне, це і дало поштовх до повернення в професію програміста, але вже з ухилом тільки на веб.
Першим комерційним досвідом веб-розробки був проект, який я розробляв на Joomla, це було довге, важке, малогрошове заняття, але я витримав цей період, набрався досвіду і почав розуміти, як працювати на результат і як спілкуватися безпосередньо із замовником. Далі був самостійний досвід розробки пари магазинів Joomla+Virtuemart, знання та рішення черпалися безпосередньо з курсу "Інтернет-магазин на Joomla" (https://сайт/jshop/).
Потім у житті стався крутий поворот, я уклав перший повноцінний контракт із IT-компанією. Після налагодження всіх внутрішніх процесів та розуміння стратегії компанії, у мене з'явився час для подальшого саморозвитку в галузі веб-розробника.
Запитання:
Відповідь: У цьому плані сумніви були мінімальними, і лише в одному – наскільки швидко окупляться витрачені кошти. А в тому, що вони окупляться, була цілковита впевненість.
Запитання: Назвіть найбільш значущі для Вас переконання та цінності в житті в цілому та веб-розробці зокрема?
Відповідь: Головне в житті – це кохання. Що стосується веб-розробки - постійний розвиток та прийняття нових викликів.
Запитання:
Відповідь: Була основна проблема: тому що я був повним новачкому світі веб-розробки - я не мав чіткого структурованого плану про те, з чого почати, і в якому напрямку діяти. Після придбання курсу з PHP я дізнався про всі основи цієї мови, як будувати програми, і від цього вже з'явилося розуміння та бачення, як і куди це все розвивати.
Запитання: Яких успіхів ви досягли?
Відповідь: Моя розробка стала більш швидкою і якісною, я опанував кілька технологій, позбувся походів в офіс, та й взагалі професія веб-розробника дозволяє мені заробляти в комфортних для мене умовах і в зручний час.
Запитання: Які зміни на краще відбулися у житті?
Відповідь: Сім'я, діти, подорожі та моє хобі перейшло в основну діяльність, якою я заробляю (це про веб-розробку).
Унгер Олег
Я затребуваний на ринку праці, незважаючи на вік, у мене з'явилося чітке розуміння, в якому напрямку мені далі рухатися
Запитання: Життєвий досвід?
Відповідь: Після школи вступав на програміста, але балів не вистачило. Навчався на інженера-електронника. Працював у різних сферах, в основному – на виробництві. Та сфера, яка раніше приносила непоганий дохід – перекочувала до Китаю, роботу стало складно знайти, та й набридло вже.
Запитання: Опишіть себе на початку шляху?
Відповідь: На початку шляху я дуже сумнівався, чи варто починати. Мене дуже мотивував приклад мого друга, який також почав з нуля і менш ніж через рік влаштувався на роботу, що нормально оплачується.
Запитання: Опишіть себе зараз?
Відповідь: Пройшло майже три роки, я вже володію певними знаннями та постійно отримую нові завдяки курсам від WebForMySelf.
Запитання: Як Ви дізналися про наші курси?
Відповідь: Став шукати, що це за школа чи курси які, де так добре і докладно все пояснюють. Знайшов на YouTube і далі пошуки привели на сайт Webformyself.
Запитання: Що вперше подумали, коли довідалися про наш проект?
Відповідь: Подумав, наскільки добре, що стільки інформації є в одному місці.
Запитання: Ви мали якісь сумніви?
Відповідь: Чесно кажучи, сумніви були. Але я передплатив Преміум клуб. І я багато чому навчився за відео: PHP, JavaScript, регулярні вирази, курс з об'єктно-орієнтованого програмування (ООП PHP) та ін.
Запитання: Що Вам сподобалось?
Відповідь: Мені дуже сподобалося, що бонусом до курсу йшли інші курси та відео з преміум доступу. І так вдало було, що мені не довелося вибирати між Yii2 та Laravel, бо вони йшли в комплекті.
Запитання:
Відповідь: Мені довелося б витратити багато часу на пошуки більш-менш структурованої інформації на потрібні теми.
Запитання: Яких успіхів ви досягли?
Відповідь: Якось непомітно для себе став розбиратися в тому, що раніше здавалося недоступним для розуміння. на даний моментмайже рік працюю програмістом (Yii, MS SQL Server, JavaScript), беру участь у розробці нового функціоналу та супроводі проекту CRM в організації, що займається системами безпеки, автоматики та зв'язку.
Запитання:
Відповідь: Почуваюся впевнено, оптимістично. Планую і надалі підвищувати свій професійний рівень.
Запитання: Які зміни на краще відбулися у житті?
Відповідь: Зміни на краще: я потрібний на ринку праці, незважаючи на вік, у мене з'явилося чітке розуміння, в якому напрямку мені далі рухатися.Майбутнє вже не таке туманне і страшне, як раніше.
Я ніколи не шкодував грошей на самоосвіту, а відмовки на кшталт «пізно починати» або «я не зможу», для мене не прийнятні
Запитання: Опишіть себе на початку шляху?
Відповідь: На початку шляху для мене веб-програмування було «темним лісом», де було страшно та незатишно, але спрага знань змусила рухатися впередТак, на Делфі мені доводилося писати парсери, були написані Ebay снайпер, програма для участі в тендерах. На даний момент я розумію, що написати таке краще на PHP (не потрібно «вигадувати велосипед» із бібліотекою Synapse).
Запитання: Що Ви скажете з приводу заперечень, з якими Ви, можливо, стикалися перед покупкою інформаційних продуктів, як долали дані заперечення (немає грошей; у мене не вийде; надто пізно починати; надто рано починати; родичі проти; надто складно; можливо, які- або Ваші заперечення)?
Відповідь: Я ніколи не шкодував грошей на самоосвіту, а відмовки типу «пізно починати» або «я не зможу», для мене не прийнятні- дорогу здолає той, хто йде.
Запитання: Яку проблему Ви намагалися вирішити, які проблеми випробовували до придбання курсу?
Відповідь: Головною проблемою до придбання курсів був мій нульовий рівень знань. Так, звичайно, можна на ютубі дивитися купу безкоштовних роликів, тут ти не витратиш грошей, зате витратиш найцінніший час. На ютуб більшість роликів містять купу води, тому що автори намагаються зробити відео максимально довгим, щоб заробити на рекламі.
Запитання: Про що Ви думали на початку шляху?
Відповідь: Знайшов через інтернет, на той момент потрібно було терміново зробити сайт-галерею, і я придбав перший курс верстки. Той проект я благополучно завалив – не вистачало знань. Згортати макет я зміг, прикрутив навіть JQuery, а далі мої знання закінчилися, потрібна була адмінка, треба було десь зберігати дані. Тут сталося моє знайомство з патерном MVC і бажання освоїти PHP (з MySQL проблем не було, тому що за родом своєї діяльності я добре знайомий з SQL, часто доводиться витягувати дані з БД у розрізі складів, контрагентів тощо).
Запитання: Які зміни сталися, коли Ви дізналися про курси?
Відповідь: Коли я дізнався про курси, ніяких змін не відбувалося, я просто придбав спочатку один курс і почав вивчати, потім другий…. зміни стали відбуватися під час вивчення матеріалу, і ці зміни однозначно на краще.
Запитання: Що могло б статися, якби Ви не змогли вирішити свої проблеми, якби Ви не скористалися нашими продуктами?
Відповідь: Навряд чи щось серйозне трапилося, веб-розробка - це моє хобі, я не беру грошей за це і беруся лише за те, що мені дійсно цікаво. Ну, а що стосується саме Ваших продуктів, саме вони направляли мене у світі веб-розробки, так як на початку шляху я був схожий на сліпе кошеня, мої знання були нульовими, і я не знав, куди йти, і що робити. Я вважаю, що на початку шляху просто необхідний наставник, який вказує тобі шлях, і цим наставником для мене якраз і стали Ваші курси. Так, не все одразу вийшло, але головне – не здаватися.
Запитання: Яких успіхів ви досягли?
Відповідь: Яких успіхів досяг? Буквально за 2 тижні написав сайт для сервісних центрів Huawei у Казахстані, зараз цей сайт вже не діє, оскільки Huawei інтегрували внесення заявок до своєї системи. Писав сайт для транспортної компанії з можливістю відстежити розташування вантажу онлайн, сайт інтернет-магазину, сайт для сестри – вона практикуючий психолог. Особливо й хвалитися нічим, це для мене насамперед хобі.
Запитання: Як Ви почуваєтеся? Про що думаєте? Які плани?
Відповідь: Плани на майбутні, напевно, не зупинятися на досягнутому та продовжити вивчення нових технологій у веб-розробці. Можливо, спробую себе в мобільних додатках, якщо вистачатиме часу.
Мені дуже подобаються курси та уроки Андрія Кудлая. Як на мене, так він просто чарівник у Інтернеті
Запитання:Життєвий досвід?
Відповідь: Починалося все з верстки, осягав усі ази з нуля, починав брати нескладні замовлення на фрілансі. Далі познайомився з Joomla, але якось не зрослося з нею, не знаю чому. Натрапив на Wordpress – і тут ми знайшли один одного. Почав ретельно вивчати цю CMS та щільно з нею працювати. Вивчив безкоштовний курсвід WFM зі створення теми з нуля, вирішив купити одразу курс WordPress-Професіонал – бо там був бонусом ще й курс з PHP, який мені дуже потрібен був тоді. У процесі вивчення прийшло розуміння, що не все так складно, як здається, потроху почав брати замовлення і створення тем для WordPress. Зараз на фріланс біржі не заглядаю навіть, є свої постійні замовники. Основний профіль – створення тем для Wordpress з нуля.
Запитання: Опишіть себе на початку шляху?
Відповідь: На початку шляху були сумніви - чи є гроші в інтернеті, на фрілансі.Чесно кажучи, стартувати було непросто – з невеликим досвідом та «не товстим» портфоліо довго доводилося шукати замовників. Взагалі для себе вивів якусь формулу – спочатку все завжди здається страшним, незрозумілим, нездійсненним, але досить розбити велике завдання на етапи та почати робити – як усе починає виходити, складатися. Потрібно тільки не боятися та робити – рішення знайдеться завжди.
Запитання: Опишіть себе зараз?
Відповідь: Зараз мій основний профіль - створення тем для WordPress з нуля. На фріланс біржі не заглядаю, є замовники та потік постійної цікавої роботи. Достеменно знаю, що заробити в Інтернеті можна. Є бажання розширити свої знання в області PHP, тому купив курс PHP майстер від команди WFM від Андрія Кудлая. Його курси та уроки мені дуже подобаються - йому виходить чудово пояснювати матеріал.Крім цього, його курси/уроки мені дуже цікаво дивитися, вони для мене не нудні. Не знаю, як це пояснити коректно, але на своєму шляху я зустрічав багато уроків, під час перегляду яких хотілося засипати.
Запитання: В який момент Ви вирішили придбати курси?
Відповідь: Розумів, що для подальшого зростання мені потрібний новий набір структурованих знань. Шукав курси/уроки для себе. На той момент, у рунеті я не бачив конкурентів WFM у курсах WordPress. Взагалі я завжди знаходжусь у пошуку потрібних мені якісних матеріалів для розвитку.
Питання: Що Вам сподобалось?
Відповідь: Мені дуже подобаються курси та уроки Андрія Кудлая. Як на мене, так він просто чарівник у Інтернеті). Варто відзначити його чудову навичку у поясненні складної інформації.
Запитання: Яких успіхів ви досягли?
Відповідь: Знайшов роботу, яка мені дуже подобається. Знайшов багато цікавих людей довкола себе. Здобув знання та навички, які я можу зараз вільно продавати. Є впевненість у завтрашньому дні. Фріланс для мене – це свобода та можливість розвиватися, будувати себе.
Раніше ці технології мені здавались надхмарними
Починав я з того, що спершу просто слухав. А потім намагався створити навіть сайт. А просту сторінку. Змінюючи її за допомогою медіа запитів. Це мені вдалось.
Абсолютно не знав, що таке адаптивна верстка, все це здавалося мені темним лісом. За сайти для мобільних пристроївзараз добре платять. У середньому адаптивний сайт коштує у нас у місті 15 000 – 20 000 рублів. Бажання навчитися робити такі сайти та сприяло придбанню курсу.
Я твердо зрозумів принципи адаптивної верстки. Суть її полягає у медіа запитах. За допомогою медіа запитів можна задавати, наприклад, максимальну або мінімальну ширину сторінки. І цього розміру прописувати характеристики. Колір тексту, його розмір, розташування блоків на ній, різні футери та хедери для різних розмірів сторінок, якщо це малюнок.
Що мені запам'яталося найбільше з курсу? Прискіпливість, я сказав би занудливість Андрія:-) Спочатку це дратувало, а потім навпаки сподобалося. І сам принцип подачі матеріалу. Спочатку ми верстаємо сайт. Його ідеологія верстки через блоки. А потім починаємо його адаптувати за допомогою медіа запитів.
Хочу заробляти на верстці адаптивних сайтів до 50 000 рублів на місяць.
Ще мені сподобалося безкоштовний бонус до цього курсу у вигляді уроків з CSS3. Раніше ці технології мені здавались надхмарними. Тепер після проходження цих уроків. Я просто можу змусити картинку або обертатися або зробити так, щоб при наведенні мишки вона переміщалася. Все це мені стало доступно після проходження уроків CSS3.
...І перед тим, як здатися, я побачила в ютюбі ролик від Автора команди WebForMyself. Подивилася одна, друга і не змогла відірватися
Привіт, мене звуть Юлія Рітфелд, я фронт енд розробник у Міністерстві Юстиції у Нідерландах.
Я дуже сумнівалася купити мені курс про Ларавел. Я вже 5 років працюю верстальницею та графічним дизайнером і мені завжди здавалося, що php (та інші мови бекенд) – це доля супер розумних програмістів. Але в якийсь момент мій начальник сказав, що мені треба також вивчити ПХП, а саме Ларавел, щоб допомогти у розробці аплікацій. Я дуже довго сумнівалася, чи потягну таку складну теорію. Як я як креативна людина зможу будувати складні речі та ще й у пхп?
Чи варто інвестувати стільки часу та коштів?
Я переглянула курс Ларавеля на lynda.com. Потім купила кілька курсів про цей фреймворк на Udemy.com. Далі були курси на pluralsight.com. Все було складно. І навіть не в мові справа, англійською я навчаюсь і працюю вже 2 десятки років. І перед тим, як здатися, я побачила в ютюбі ролик Віктора. Подивилася одна, друга і не змогла відірватися.
Але підійшовши на даний момент вже 19 з 39 уроків (50%) теоретичної частини курсу про Ларавел хочу сказати з повною впевненістю, що всі мої страхи були марними. Віктор просто передбачає мої питання та думки на кшталт 'а що якщо..'. Відео записані в чудовій якостіі картинки на яких він пояснює про те, що таке, наприклад, Middleware для мене як візуальної людини, просто порятунок.
З повагою та визнанням,
Юлія Ріфтелд
Я дізналася, що таке верстка, віртуальний сервер, база даних, мова PHP і т.д. і я знаю як з цим працювати
Я дізналася що таке верстка, віртуальний сервер, база даних, мова PHPі т.д. і я знаю, як з цим працювати. Я знаю, як знаходити свої помилки чи друкарські помилки, як написати двигун під свої потреби, як його можна змінити, модернізувати.
Найбільше, окрім якісної подачі матеріалу, мені подобається стиль подачі. Т.к. все ж таки ми вивчаємо матеріали самостійно, то багато моментів доводиться переглядати кілька разів. Мені подобається що в курсі чітка структура уроків, я відразу знаю, який урок мені необхідно повторити, щоб уточнити якесь питання. Я вивчаю записи по кілька годин і не втомлююся від прослуховування: голос у авторів курсу приємний, спокійний, неквапливий. Це дуже важливо для мене.
Дуже хочу, щоб мій відгук допоміг багатьом людям, які перебувають у пошуку себе, обирають новий напрямок діяльності або просто обирають курс для підвищення кваліфікації.
Від автора:привіт, друзі! Як і люди, сайти мають свій скелет, який можна побачити у їхньому коді. Звичайний користувач, «гуляючи» просторами Інтернету, навряд чи заглядатиме в HTML-код. Але тільки не верстальники – їм завжди цікаво подивитися на чужу роботу. Створення акуратного, збалансованого та працюючого у всіх браузерах коду – це свого роду мистецтво. Сьогодні ми поговоримо з вами про те, як його осягнути, або, іншими словами, як швидко та ефективно навчитися верстці веб-сторінок.
З чого починається верстка?
Верстка сайту – це опис програмним кодом його візуальної складової. При цьому сайт має виглядати та працювати коректно на будь-якому браузері (бути крос-браузерним). Навчання верстці сайтів з нуля має починатися з самостійного створення PSD-макет, незважаючи на те, що його, по ідеї, повинен створювати веб-дизайнер.
Основне завдання верстальника - це обробка матеріалу, який надходить до нього у вигляді текстів, зображень, каталогів і т. д., і перетворення його на веб-сторінки на підставі затвердженого веб-дизайну.
Однак, уявіть, що ви такий собі верстальник «2-в-одному», і вам з якоїсь причини довелося верстати макет замість дизайнера, якому глибоко начхати на ваші проблеми.
Для того щоб швидко навчитися малювати макети, хоч би як банально це звучало, вам потрібно просто багато їх малювати. Вам також дуже допоможе нескінченний перегляд чужих робіт. При цьому звертайте увагу на всі дрібні деталі, на те, які кольори, градієнти, шрифти, відступи і т.д.
Згодом ви самі почнете відчувати, що виглядає красиво, а що ні. На самому початку ви можете просто брати і змалювати, наприклад, чужі елементи інтерфейсів. Це змусить вас задуматися про те, як будуються ці елементи і з чого вони складаються. І тоді красиві дизайниперестануть бути для вас чимось міфічним, тому що ви знатимете, як створити щось схоже.
Інструменти для створення макету сайту
Що стосується інструментів, то багато веб-дизайнерів для створення інтерфейсів використовують Adobe Photoshop. За допомогою цієї програми можна зробити все, що завгодно.
Є люди, які працюють тільки з векторною графікоюта використовують для створення макетів Adobe Illustrator.
І ще один редактор, який я не пробував, але який, за чутками, представляє цілком гідну альтернативу переліченим вище, - це Sketch, але він працює тільки під Mac OS.
Знайомимося - HTML
Наступним кроком після малювання макета є його верстка та створення HTML-шаблону. HTML – це мова, яка використовується для розмітки документів в Інтернеті та інтерпретується браузерами для зручного відображення у вигляді документа.
За допомогою HTML-розмітки ми відзначаємо, де на веб-сторінці буде показаний текст, зображення, кнопки, і в якому порядку вони будуть йти один за одним. Основними поняттями у цій мові є теги, атрибути, елементи та сутності.
Найпростіший веб-ресурс - це не більше ніж набір HTML-сторінок. Якщо веб-сайт статичний, то після верстки ви фактично отримаєте його остаточну версію, а не просто шаблон. Наразі такі сайти, природно, є великою рідкістю. Всі сучасні веб-сторінки генеруються динамічно, за допомогою якоїсь серверної логіки, яку ви або напишете самі, або використовуватимете готову за допомогою будь-якої CMS (системи керування вмістом).
Без цієї серверної логіки була б неможлива більшість онлайн-сервісів, які ми використовуємо щодня і до яких так звикли. Що стосується HTML, то це зовсім нескладна мова.
У Рунеті існує величезна кількість платних уроків з верстки сайтів, та інших матеріалів з гідною базою навчання. На мою думку, вивчити цю мову самостійно взагалі не є проблемою.
Удосконалюємось - CSS
Як тільки ви освоїте основи HTML, Ви можете відразу приступати до вивчення CSS (каскадних таблиць стилів), які дозволяють задавати шрифти, кольори, розташування окремих блоків сайту.
За CSS я можу порадити непоганий, який допоможе вам побудувати кар'єру верстальника навіть у тому випадку, якщо ви взагалі не маєте базових знань з питань веб-дизайну та верстки.
Однак, хочу вас попередити, що навчання на верстальника сайтів - це не така вже й проста задача. У верстці є безліч тонкощів та нюансів. Взагалі, для того щоб ви могли поглянути на макет і відразу уявити собі ієрархію його елементів, як саме їх можна згорнути і за допомогою якихось властивостей, - для цього потрібно багато практичного досвіду.
Чи обов'язково вивчати всі теги, атрибути та властивості HTML/CSS?
У HTML багато різних тегів і атрибутів, а CSS - властивостей, які можуть мати різні значення. Тому багатьох новачків хвилює питання: з чого почати верстку сайту і чи потрібно вчити напам'ять усі ці значення, теги та властивості?
Звичайно, якщо ви маєте унікальну фотографічну пам'ять, то вам не складно вивчити все це, а заодно, і три томи «Війни та миру», напам'ять. А якщо ні, то заучувати всі ці слова не потрібно.
Спочатку, коли ви тільки знайомитиметеся з CSS, то все одно будете дивитися, що робить кожну властивість і кожне значення цієї властивості. Згодом до вас прийде розуміння, що можна творити за допомогою каскадних таблиць стилів, і щось із цих властивостей/значень і так відкладеться у вас у голові. Ну якщо ви, звичайно, не страждаєте на амнезію
Те саме стосується будь-яких мов, включаючи JavaScript, PHP і т. д. Все, що ви часто використовуєте, запам'ятається саме по собі. Все, що ви рідко використовуєте, ви можете підглянути в довіднику, яких в мережі безліч. У цьому немає нічого ганебного і, скажу вам по секрету, всі веб-майстри це роблять.
Спрощуємо процес верстки
Для тих випадків, коли вам потрібно швидко створити якийсь інтерфейс або прототип будь-якого сайту, є CSS-фреймворки, такі як Bootstrap. Він дозволяє стати веб-майстром, веб-програмістом та верстальником в одній особі без знання таблиць стилів, мов програмування та гіпертекстової розмітки.
Коли ви добре освоїте CSS і почнете верстати щось своє, унікальне, вам може перестати вистачати гнучкість цієї мови, і ви захочете використовувати якийсь CSS-препроцесор. Препроцесори прибирають із коду CSS весьсміття, роблять його більш чистим та логічним, збільшують ступінь абстракції за допомогою змінних та інших «фішок». Найбільш популярними препроцесорами вважаються LESS, Sass та Stylus.
Вищий пілотаж - JavaScript
Вивчаючи серйозніші уроки верстки сайтів, ви зустрінете включені в HTML елементи JavaScript, які роблять веб-сторінки інтерактивними. Якщо ви плануєте займатися не тільки Back-end, а й Front-end розробкою, JavaScript потрібно знати на дуже хорошому рівні.
Крім самої мови, вам потрібно знати всю інфраструктуру, яка існує навколо неї (бібліотеки, фреймворки, браузерні інтерфейси тощо). На освоєння всіх цих елементів у вас може піти від одного року до нескінченності (залежно від того, чи є у вас особисте життя).
Підіб'ємо підсумки
Отже, як ви вже, сподіваюся, зрозуміли, верстальник - це дуже важлива та давня Інтернет-професія, від якої залежить:
швидкість завантаження сайту;
адекватність його відображення в різних браузерах;
адаптивність під різні екрани користувача;
відповідність HTML-стандартам та вимогам пошукових систем.
Поки що все. Не забудьте підписатися на новини нашого блогу, щоб не пропустити все найцікавіше навчання верстці сайтів з нуля.
До нових зустрічей, шановні колеги та ті, хто тільки вступає на цю нелегку, але дуже захоплюючу стежку веб-розробки!
Вітаю всіх, кому ще цікаві ці статті, і взагалі цей блог загалом. Так вийшло, що я дуже довго не писав. Виправдовуватися зараз не буду, для цього трохи пізніше виокремлю окрему статтю. А зараз на численні прохання «CSS з нуля: перша лекція». Давайте для початку розповім, що доведеться Вам дізнатися з цієї лекції: «що таке CSS?», «Для чого він потрібен?», «Як його використовувати?».
Що таке CSS?
CSS - це мова стилів, що відповідає за відображення елементів, причому не тільки в html-документі (наприклад, CSS використовується при визначенні властивостей елементів Qt). Пам'ятаєте лекції? Так от, якщо Ви вивчите CSS на належному рівні, у Вас повністю зникне потреба у використанні додаткових атрибутів для елементів. До речі, якщо Ви вирішили вивчати CSS, непогано б знати, що це абревіатура, і розшифровується вона як Cascading Style Sheets. CSS є невід'ємною частиною блокової верстки, Про яку я згадував в останній лекції HTML з нуля.
Навіщо служить CSS?
Служить CSS для надання індивідуальності сторінці, або якщо говорити глобально, то сайту. CSS допомагає оптимізувати структуру сайту, зменшити вагу сторінок, а також полегшить зміну зовнішнього вигляду сайту (всі докази та факти цього наведу у наступній лекції).
Як використовувати CSS?
У топі дивні запити: "Як встановити CSS?", "Як створити CSS?", розслабтеся, CSS створили і без нас, а встановлювати нічого не доведеться 🙂 Все простіше, ніж може здатися. Беремо просту HTMLсторінку:
Все простіше, ніж могло здатися, правда? А все тому, що CSS інтегрований у все сучасні браузери. CSS дуже простий та наочний, що дозволяє швидко звикнути до нього та закохатися 🙂
Пісочниця
Леонід Якубович 26 травня 2015 в 11:18Навчання HTML/CSS/JS
- CSS,
- HTML ,
- JavaScript
Youtube
- www.youtube.com/user/agragregra- дуже цікавий каналякий допоможе вам набити руку по створенню сайтів різної складності з нуля;
- www.youtube.com/user/ArtSorax- багато корисного матеріалу для початківців. Упор робиться на CSS та JS;
- www.youtube.com/user/WebMagistersRu- З цього каналу особисто я почала знайомство із середовищем веб-розробки. Все розказано доступною та зрозумілою мовою, основа основ, так би мовити.
- www.youtube.com/user/loftblog- команда LoftBlog бере інтерв'ю у початківців і IT-фахівців і розробників, а також проводять відео навчання;
- www.youtube.com/user/TheSWAT727- відеоканал містить у собі інформацію та навчальні матеріали з Web-розробки в цілому, охоплюю Front-end, Back-end, огляди текстових редакторів та ін. корисну інформаціюдля початківців розробників та дизайнерів.
Інтернет-ресурси
- htmlbook.ru - святиня для початківців. Цей ресурс містить величезну кількість інформації у доступній та зрозумілій формі + форум. Саме з цього я раджу розпочинати знайомство з HTML/CSS;
- webdesign-master.ru - пізнавальний сайт для більш глибокого ознайомлення з web-дизайном та версткою;
- learn.javascript.ru - назва сайту говорить сама за себе. Раджу розпочати навчання після ознайомлення з основами HTML5/CSS3.
Сервіси
- www.codecademy.com – англомовний сервіс, де можна перевірити свої знання на практиці. Все інтуїтивно зрозуміло, глибокі знання англійської мовине потрібні;
- htmlacademy.ru - російськомовний сервіс, де акцент йде на практику + трохи теорії. Дуже цікавий ресурс, курси та завдання;
- jsfiddle.net – так би мовити «пісочниця» для web-розробників. Тут в режимі онлайн можна код і дивитися результат. Сервіс буде вам помічником із зазначення помилок;
- validator.w3.org - тут можна перевірити свій код на валідність, щоб виправити свої помилки або недоліки коду HTML;
- jigsaw.w3.org/css-validator – аналогічний сервіс, призначений для перевірки на валідність CSS коду.
Підсумок
В інтернеті дуже багато корисної, правильної та потрібної інформації, але марною більше. Вчіться, практикуйтеся, пишіть код.
Теги: Навчання, матеріал, сайти, розробка сайтів
Цілком стабільний, тому не дивно, що зростає кількість охочих освоїти дане ремесло. До того ж, як на мене, це один із найпростіших «шляхів потрапляння до ІТ». Хоча важливо розуміти, що для хорошої віддачі ви повинні стати профі — крім наявності знань, треба постійно систематизувати та модернізувати свої навички, завжди бути «на хвилі» і використовувати лише актуальні сучасні методи.
Як і в будь-якій іншій професії, починається навчання верстці сайтів з нуля — з базових понять та теорії. Про них сьогодні й поговоримо. Зокрема розгляну супер корисний сервіс 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 тематичних блоків. Давайте коротко розглянемо їх:
- Introduction. Ознайомча частина, у якій розповідається, навіщо потрібні HTML, CSS і . Там же пояснюються відмінності між фреймворками та мовами, а також показується принцип роботи з текстовим редакторомАТОМ.
- Basic Web Pages. Другий розділ ілюструє будову елементарної веб-сторінки. Тут демонструється HTML-структура - "скелет" сайту. Відвідувач дізнається, навіщо потрібні теги, які вони бувають і навіщо призначений кожен із них.
- Links and Images. Знаючи основи проектування, у третьому розділі користувач ознайомиться із розміщенням зображень та з'єднанням веб-сторінок один з одним.
- Hello, CSS. Далі починається – так званих таблиць стилів. До цього поняття входить усе, що стосується оформлення: шрифт, колір, розташування, форма та розмір тексту.
- The Box Model. Продовжує тему дизайну п'ятий розділ навчального плану, розповідаючи про «блокову» модель вмісту. Майбутні верстальники знайомляться з такими речами, як зовнішні відступи, рамки, внутрішні полята контентне наповнення.
- CSS Selectors. За боксами йдуть селектори – основа CSS. За допомогою прикладів коду в редакторі автори навчають правильному використанню стилів.
- Floats. Сьома частина розширює отримані знання про управління розмірами блоків та областями навколо них. Вона присвячена поняттю потоку на веб-сторінці (Float) та описує нюанси роботи із сіткою сайту.
- Flexbox. Після досягнення екватора навчального плану вам пропонується ознайомитися з Flexbox-ом. Це сучасний інструментверстки, який дає повний контрольнад вирівнюванням, напрямом, порядком та розміром блоків. Нещодавно, до речі, розповідав про — ще крутішу штуку.
- Advanced Positioning. Далі починається складніший матеріал – просунуте позиціонування та його основні типи: відносне, абсолютне та фіксоване. Хоча, пам'ятається, на курсах цю фішку ми проходили разом з Float і вочевидь до Flexbox.
- Responsive Design. У десятому розділі розповідаються основи та роль адаптивного дизайну на сайті. Нині без нього нікуди.
- Responsive Images. Урок присвячений адаптивним зображенням, їх масштабування, режисування та створення альтернативних форматів за допомогою спеціальних функцій.
- Semantic HTML. Дванадцятий розділ знову повертає до базовим поняттям HTML, розкриваючи його з семантичної точки зору. Тут читач знайомиться із «секційними» елементами, новими тегами та їх застосуванням.
- Forms. У передостанньому пункті відвідувачу дається можливість вивчити побудову форм та її елементів: списки, меню, текстові поля, що випадають, їх оформлення та відправка інформації, наприклад, через .
- Web Typography. Останній туторіал розповідає про сучасну веб-друкарню на сайтах — про зовнішньому виглядітекстів, заголовків, про шрифти тощо. В іншому моєму блозі є розділ про веб-друкарку де знайдете масу корисних нотаток на тему.
Структура уроків для навчання верстці
Щоб гідно оцінити функціонал та зручність сервісу Interneting is Hard, пропоную розглянути реалізацію одного з його підрозділів. Візьмемо другий урок створення елементарних веб-сторінок.
Що мені особисто подобається:
- Весь матеріал упорядкований підзаголовками. Текст при цьому викладений доступною мовою і не вимагає глибоких знань складної термінології. Все коротко і по суті — у найкращих традиціях.
- Важливі та складні моменти чудово ілюструються діаграмами.
- Для простоти розуміння та практичних навичок даються приклади написання коду.
- Все максимально зручно: у правому верхньому кутку є кнопка повернення в меню, можливий миттєвий перехід до бажаного підзаголовка уроку (навігація праворуч) та після лекції доступне відкриття наступного розділу. Відмінне юзабіліті.
Висновки
Як мені Interneting is Hard - на даний момент один з кращих сайтів з навчання верстці з нуля. Автори курсу подбали про те, щоб новачки, які ніколи не мали справу з HTML та CSS, могли у простій та доступній формі зрозуміти ази створення веб-сторінок. Інформація дуже добре структурована — поступово за 14 розділів ви подолаєте шлях від користувача-початківця до досвідченого верстальника. Звичайно, без практики та застосування знань ніяк не можна, але щодо теоретичної бази — це саме повні збориінформації, що я зустрічав. Якщо хочете займатися з викладачами - подивіться варіант від Нетології теж дуже непоганий, хоч і платний.
Якщо знаєте ще якісь цікаві сервіси для вивчення верстки сайтів, надсилайте лінки в коментарях.