Web поради та хитрощіWeb та WordPressВеб дизайнВеб сайтиПідручники

Альтернативні ресурси веб-розробки для початківців самостійного навчання

в Лют 5, 2024

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

Перш за все: вам потрібно бути допитливим, зацікавленим і навчатися все життя.

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

Ознайомтеся з основними елементами HTML і CSS

Веб-сторінки в основному складаються з кодів HTML і CSS. Ці два є основними. Звичайно, існують інші мови, які роблять речі більш інтерактивними, стилізованими, анімованими, адаптивними та/або чуйними, наприклад jQuery, Python, Ruby on Rails і JavaScript. Але для початку зосередьтеся на HTML і CSS. Це речі, які вам знадобляться, щоб розпочати створення веб-сторінки з нуля.

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

Содержание показать

SitePoint

SitePoint має абсолютний посібник для початківців з HTML і CSS, тож це гарне місце, щоб розпочати знайомство з основними концепціями. Ви дізнаєтеся не лише про код, а й про інструменти для створення веб-сайту – від текстових редакторів до браузерів і графічних редакторів.

9 канал

Це сторінка з 21 епізоду уроків, які навчають основам веб-сторінок і програмування. Орієнтований на абсолютних початківців, будьте готові витратити від 6 до 48 хвилин на епізод. Якщо ви хочете перейти до епізодів, на які, на вашу думку, вам потрібно більше зосередитися, уроки абсолютно безкоштовні, і їх можна переглядати в будь-якому порядку та в будь-який час.

w3resource

w3resource — це схвалений спільнотою розробників комплексний ресурс для всього, що стосується веб-розробки. Він пропонує широку базу уроків веб-розробки, а не лише HTML і CSS. Його навчальні матеріали згруповані за функціями. Перша категорія містить набір мов, необхідних для зовнішньої розробки, і саме тут ви знайдете HTML і CSS. Інші категорії включають мовні посібники для бекенд-розробки, керування базами даних, обміну даними та API.

Собака HTML

Сайт HTML Dog, заснований у 2003 році, містить посібники з HTML, CSS і JavaScript. Їхня мета — опублікувати легкі для засвоєння навчальні матеріали, щоб заохотити початківців і тих, кого лякає кодування. Уроки поділено на різні розділи та рівні, від початківця до просунутого, і далі структуровано за змістом, який показує, що ви дізнаєтесь за урок.

Шей Хау

Цей навчальний сайт безкоштовно проведе вас через 12 уроків з основ HTML і CSS. Замість того, щоб платити за курси для початківців прямо з воріт, ви можете спочатку спробувати ці. Коли ви закінчите, визначте, чи потрібні вам ще платні. Якщо ви все ж таки це зробите, принаймні введення з безкоштовного навчального сайту допоможе вам увійти до платних уроків набагато швидше, ніж без будь-яких знань.

Закінчивши з навчальним посібником «Створення вашої першої веб-сторінки», ви можете перейти до розширеного посібника для глибшої розробки зовнішнього дизайну.

Мережа розробників Mozilla

Цей сайт містить вичерпний список посилань на різноманітні посібники та навчальні матеріали, підготовлені компаніями та розробниками. Є багато уроків на вибір, не тільки HTML і CSS. Оскільки їх обирають розробники, ви можете бути впевнені, що вміст, на який ведуть посилання, є надійним, з уроками, орієнтованими на різні рівні, від початкового до просунутого.

Мемрайз

Під час навчання повторення є ключовим, і Memrise допомагає зробити запам’ятовування у стилі повторення веселим через гру. Це можна зробити в дорозі на роботу або в черзі, щоб замовити їжу на винос – насправді будь-де, де є доступ до Інтернету.

Ось посилання на деякі корисні уроки про важливі коди HTML, HTML5, CSS і CSS3:

Якщо ви відчуваєте себе особливо старанним, ви можете створювати уроки відповідно до власних потреб і додавати власні спогади. Хоча це краще і дуже корисно, не очікується, що ви завжди будете пам’ятати всі коди. Однак якщо ви хочете стати професіоналом, знання кодів напам’ять може заощадити час під час створення сайтів із дуже жорсткими термінами.

W3C

W3C, скорочення від World Wide Web Consortium, складається з міжнародної спільноти органів влади, яка об’єднується з компаніями, іншими членськими спільнотами, власним персоналом і громадськістю для організації, підтримки та розробки веб-стандартів. Перевірка сайту на наявність останніх новин і оновлень щодо веб-стандартів може допомогти вам відповідно відточити та адаптувати свої навички.

W3Schools

W3Schools, широко розцінений професійними розробниками як веб-сайт для «нубів», пропонує гідний навчальний досвід і середовище для тих, хто тільки починає вивчати програмування. У них є структурований список уроків, які може комфортно пройти будь-який новачок, доповнений прикладами та тренажером для практики. W3Schools також надає сертифікати, але вам доведеться заплатити за них.

WebPlatform.org

WebPlatform.org — це співпраця W3C з Apple, Adobe, Facebook, Google, HP, Microsoft, Intel, Mozilla, Opera і Nokia. Основною функцією WebPlatform.org є розміщення всієї документації з веб-розробки. Будь-хто може приєднатися та взяти участь у розмовах. Дуже заохочується внесок і співпраця, які можливі через платформу MediaWiki.

InstantShift

Якщо ви постійний відвідувач, ми знаємо, що ви вже знаєте. Але заради узгодженості InstantShift, як показано у фрагменті About, є спільнотою для веб-розробників і дизайнерів. Багатоавторський блог, він пропонує широкий спектр ресурсів, статей і практичних вказівок, навіть безкоштовні теми, на які дизайнери та розробники з різним досвідом і рівнем знань можуть посилатися, щоб розпочати свої знання або черпати натхнення. Категорії статей включають веб-дизайн, WordPress, CSS, навчальні посібники, інструменти, безкоштовні продукти, фотографії та значки тощо.

Беріть участь в онлайн-класах/курсах

Гарвард CS50

Клас edX, який проводить Девід Дж. Малан, професор Гарвардського університету, проходження цього вступного курсу з інформатики є інвестицією на вагу золота, дивно, що за це не стягують плату. Саме тому багато тих, хто навчається протягом усього життя в усьому світі, вдячні за можливості, які MOOC (масові відкриті онлайн-курси) надають тим, хто не може дозволити собі вступити до престижних університетів, таких як Гарвард. Серед мов, які вам навчатимуть, будуть C, PHP, JavaScript, SQL і, звичайно, CSS і HTML. Якщо ви хочете використовувати цей клас для отримання кредиту, вам доведеться заплатити за сертифікацію.

Tuts+

Tuts+ містить низку підручників і курсів на вибір, починаючи від програмування та закінчуючи ілюстраціями, дизайном і розробкою мобільних додатків. Tuts+ пропонує безкоштовні курси та навчальні посібники, але за преміум-доступ потрібно платити щонайменше від 15 доларів США на місяць до 360 доларів США на рік. Вони пропонують 14-денну безкоштовну пробну версію.

будиночок на дереві

Treehouse — це платний сервіс, спрямований на навчання веб-розробці, дизайну та розробці мобільних додатків. Базовий доступ коштує 24 долари на місяць, а професійний — 49 доларів. На сайті також є форуми, робочі області, зона конкурсів і викликів, зона бонусних уроків і конференцій, живі семінари, бібліотека та спільнота, з якою ви можете зв’язатися та спілкуватися.

Практика

Практика робить краще, якщо не ідеально. Тренуючись, ви дозволяєте своєму мозку виконувати активні, творчі дії, які стимулюють краще навчання та запам’ятовування, на відміну від простого читання та перегляду посібників. Доповніть своє навчання практикою з MOOC, як-от:

Codecademy

Реєстрація в Codecademy безкоштовна, а уроки спрощені для початківців. Ви можете побачити, як ваші коди HTML і CSS перетворюються на веб-сторінку, коли вони відображаються в реальному часі поруч із текстовим редактором, змінюючись у міру просування. Існує також форум, де ви можете поділитися своїми запитаннями та відповідями зі спільнотою.

Код Месники

У Code Avengers реєстрація також безкоштовна. Він дає змогу створити веб-сайт за допомогою HTML і CSS, доповнений інструкціями у вигляді тексту та відео. Після натискання кнопки прапорця у верхній частині текстового редактора ви побачите, як виглядає ваш код у вікні у формі мобільного телефону праворуч. Якщо ви зареєструєте обліковий запис, ви отримаєте можливість зберігати свій прогрес і отримувати бали проти інших учасників через таблицю лідерів.

НадихАтись

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

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

Створіть портфоліо

Щоб зробити себе більш помітним для клієнтів, важливо мати портфоліо. Існує багато сайтів для розміщення портфоліо, але ось два приклади:

PortfolioBox

Завдяки хостингу доменів, інтеграції соціальних медіа, оптимізації пошукової системи, вбудованій панелі статистики та функції надсилання інформаційних бюлетенів PortfolioBox вартий уваги. Він також має вбудовану підтримку для смартфонів і планшетів, тому ваш веб-сайт виглядає так само чудово під час перегляду з будь-якого пристрою. PortfolioBox пропонує безкоштовний обліковий запис, у якому можна розмістити до 40 зображень, і після реєстрації ви зможете користуватися функціями Pro протягом 30 днів. Pro коштує 6,90 доларів США на місяць і виплачується щорічно.

дриббл

Сайт розробників, який служить платформою для показу та розповіді для інших розробників, Dribbble дозволяє вам ділитися знімками екрана ваших процесів, роботи та проектів. Він має функцію, подібну до соціальних мереж, яка показує, скільки переглядів, оцінок “подобається” та коментарів ви отримуєте.

Отримувати гроші за роботу

Продовжувати тренуватися та практикуватися продуктивно, але ніщо не може зрівнятися з навчанням, яке оплачується, а це, по суті, те, що отримуєте за роботу за свої навички. Ви застосовуєте та відточуєте свою майстерність, і врешті-решт хтось отримує вигоду від її цінності та платить за це. Сайти фрілансерів, як-от ProgrammerMeetDesigner, GetACoder і AuthenticJobs, — це лише деякі з місць, де наймають програмістів і дизайнерів. У цій дещо застарілій статті від Hongkiat.com перелічено 50 сайтів для роботи на позаштатних спеціалістах для дизайнерів і програмістів, більшість із яких все ще функціонують.

Будьте частиною спільноти

Бути частиною спільноти – це чудово, щоб підтримувати натхнення та знаходити відповіді на деякі особливо складні питання, з якими ви зіткнетеся на своєму шляху веб-розробки. Ось список форумів, у яких можна взяти участь, щоб отримати більше поточних знань, друзів, наставників і навіть рекомендації щодо роботи.

Керуйте своїми проектами

У той момент, коли ви знаходите клієнтів, управління проектами стає важливою навичкою. Простий і легкий у використанні TeuxDeux може організувати ваш щоденний список завдань. Веб-розробка зазвичай не є проектом одного дня. Для деяких проектів вам потрібно запланувати виконання завдань у певний часовий проміжок і приблизний час для виконання кожного. Для більш комплексних майбутніх проектів, з якими не можуть впоратися прості списки справ або програмне забезпечення для спільної роботи, є інтуїтивно зрозумілі та адаптивні повноцінні інструменти керування проектами та співпраці, такі як Comindware Project, які варто розглянути.

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

Будь-які інші ресурси, про які ми не згадали?

Джерело запису: instantshift.com