Dev Academy школа програмування

Dev Academy школа програмування У нас ви можете швидко, та ефективно засвоїти нову спеціальність або підвищити свою професійну кваліфікацію в IT сфері.

Наші новенькі junior front-end developers. Бажаємо усім стрімкого розвитку на лекого зростання! А тим часом триває новий...
03/11/2023

Наші новенькі junior front-end developers. Бажаємо усім стрімкого розвитку на лекого зростання! А тим часом триває новий набір на курс front-end developer старт з "0". Поспішай записатись та спробуватии себе в ІТ сфері. Кількість мість обмежена.

Оголошуємо новий набір групи на курс «Front-end розробник з нуля» Поспішай записатись та здобути професію своєї мрії!Біл...
16/08/2023

Оголошуємо новий набір групи на курс «Front-end розробник з нуля» Поспішай записатись та здобути професію своєї мрії!

Більше інформації тут: https://programer.pro/ua
Зателефонуйте нам: 068 852 25 02

Оголошуємо новий набір групи на курс «Front-end розробник з нуля» Старт навчання відбудеться у листопаді. Поспішай запис...
30/09/2022

Оголошуємо новий набір групи на курс «Front-end розробник з нуля» Старт навчання відбудеться у листопаді. Поспішай записатись та здобути професію своєї мрії!

Більше інформації тут: http://programer.pro
Зателефонуйте нам: 068 852 25 02

Створення сітки з двома стовпчиками та жолобом між нимиЩоб створити цю сітку, ми повинні використовувати grid-template-c...
20/09/2022

Створення сітки з двома стовпчиками та жолобом між ними

Щоб створити цю сітку, ми повинні використовувати grid-template-columns та grid-gap

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

Наприклад, чотири стовпчики, з шининою у 250 пікселів можуть бути визначені таким чином:

grid-template-columns: 250px 250px 250px 250px;

Браузерна сумісністьПідтримка CSS Grid з'явилася в Safari 10.1, Firefox 52, Opera 44, Chrome 57. MS Edge працює над онов...
20/09/2022

Браузерна сумісність

Підтримка CSS Grid з'явилася в Safari 10.1, Firefox 52, Opera 44, Chrome 57. MS Edge працює над оновленням Grid для Edge 15.

Існує застаріла реалізація, доступна браузерам Microsoft (IE10-11 та Edge 13-14), які мають ряд обмежень, ми коротко розглянемо застарілу реалізацію, щоб пояснити деякі відмінності між новітніми та старшими реалізаціями та способами обійти їх.

Для більшості макетів ми будемо використовувати наступну перевірку можливостей, щоб старі браузери як і раніше підтримували саме те розташування, яке вони розуміють:

(display: grid) {
.grid {
display: grid;
}
}
Браузери, які не підтримують або не підтримують сітку, не будуть використовувати цю функцію.

Вивчення необхідного мінімумуСпочатку може здатися, що для розуміння сітки, треба вивчити багато нового синтаксису, але ...
19/09/2022

Вивчення необхідного мінімуму

Спочатку може здатися, що для розуміння сітки, треба вивчити багато нового синтаксису, але вам потрібно розуміти лише частину, щоб почати. У цій статті буде використано приклади, щоб ознайомити вас з різними концепціями, важливими для початку створення CSS Grid.

Знайомство з CSS Grid LayoutCSS Grid - найважливіша подія для побудови веб-макетів, з часів гумових контейнерів (флексбо...
19/09/2022

Знайомство з CSS Grid Layout

CSS Grid - найважливіша подія для побудови веб-макетів, з часів гумових контейнерів (флексбоксів). Вона дозволяє уникнути використання будь-яких магічних методів, хитростей та обхідних шляхів, до яких ми звикли за останні 15 років. З сіткою стало набагато простіше описувати макети, впевнений, сітка знищить більшість провідних CSS-фреймворків і дозволить писати менше стилів.

Якщо ви не знайомі з CSS Grid Layout і дочитали аж до цього місця, знайте, це інструмент для розробки макетів, який дозволяє керувати розміщенням, розмірами і вирівнюванням дочірніх елементів.

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

У наступних статтях розповім докладніше

Створюємо ПроектНа сторінці нам потрібна одна кнопка та один параграф, для того в файлі index.html пишемо: Нажміть на м...
19/09/2022

Створюємо Проект

На сторінці нам потрібна одна кнопка та один параграф, для того в файлі index.html пишемо:



Нажміть на мене

Макет готовий! тепер потрібно прописати javascript код, в низу тегу body прописуємо:


// тут буде javascript код


Дальше створюємо у середині цього тегу 3 змінні під назвою: output, button і score та присвоюємо їм значення селектора параграфу і кнопки:

let output, button, score;
score = 0;
output = document.querySelector("p");
button = document.querySelector("button");

Після цього нам потрібно вислідити чи користувач нажав на кнопу і якщо так то ми змінній score будемо добавляти по 1:

let output, button, score;
score = 0;
output = document.querySelector("p");
button = document.querySelector("button");

button.onclick = function(){
score++;
output.innerHTML = score;
}

Якщо запустити код то у нас все получиться. Числа виводяться коректно, але якщо перезапустити сторінку то ми побачимо що наші кліки пропали. Тому нам потрібно використати LocalStorage. Створемо змінну під назвою ls_var_name вона буде слугувати назвою комірки у яку ми збережемо данні.

button.onclick = function(){
score++;
let ls_var_name = "user_score";
output.innerHTML = score;
}

Дальше викликаємо Localsotage разом з setItem:

button.onclick = function(){
score++;
let ls_var_name = "user_score";
// Перший параметер це назва комірки другий це її значення
LocalStorage.setItem(ls_var_name, score)
output.innerHTML = score;
}

Після цього нам потрібно вивести данні за допомогою getItem:

button.onclick = function(){
score++;
let ls_var_name = "user_score";

// Перший параметер це назва комірки другий це її значення

LocalStorage.setItem(ls_var_name, score)
output.innerHTML = LocalStorage.getItem(ls_var_name);
}

ПланПеред тим як почати роботу нам необхідно взнати що ми будемо робити. Давайте створемо сайт-клікер який буде рахувати...
16/09/2022

План

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

У наступній статті ми створимо проект

LocalStorage, збереже все!..Для чого потрібен LocalStorageНапевно у кожного javascript розробника була така ситуація кол...
16/09/2022

LocalStorage, збереже все!..

Для чого потрібен LocalStorage

Напевно у кожного javascript розробника була така ситуація коли необхідно було зберегти якісь данні що вибрав користувач. Наприклад: У вас є зміна мови з української на російську і вам потрібно запам'ятати яку мову вибрав користувач, для того вам ідеально підійде LocalStorage.

У наступних публікаціях я розповім як використовувати LocalStorage в проекті.

Кілька SEO-інструментів(про які варто знати всім)Початкове:WooRank - швидко перевірте, наскільки SEO-дружній ваш сайт.Go...
15/09/2022

Кілька SEO-інструментів
(про які варто знати всім)

Початкове:

WooRank - швидко перевірте, наскільки SEO-дружній ваш сайт.

Google Search Console - доконечний інструмент SEO від Ґуґла (як сайту буде публічний, зразу ж додайте до GSC XML-мапу сайту)

Bing Webmasters - трохи трафіку є і з Бінґу (теж додайте туди XML-мапу сайту)

Google Analytics - докладна веб-аналітика від Ґуґла

Я також додаю XML-мапу сайту до Yandex Webmasters - Яндекс досі лишається другою пошуковою системою в Україні, навіть попри блокування. До того, DuckDuckGo значною мірою бере інфу про українські сайти Яндексу. Business is business.

Просунуте:

MOZ Link Explorer - хороша тулза від гіганта SEO-індустрії, котра оповість про силу вашого домену чи лінку, кількість беклінків, беклінкуючих доменів тощо.

SEMrush - загальний SEM-сервіс, який пропонує низку різноспрямованих інструментів для SEO, пошукової реклами, брендингу, SMM; має безкоштовну версію і преміум, який розширює можливості

ahrefs - платний професійний SEO-інструмент (навіть проба на тиждень коштує $7), втім на думку багатьох найкращий; цілком підтримує роботу з українським контентом і ключовиками українською; коли що, там пів-команди з України, то можете вільно звертатися в сапорт нашою мовою :)

Додатки до бравзера:

Nofollow - дуже простий, але й дуже корисний додаток, який показує на сторінках невислідні посилання (є для Хрому і Мозіли)

Open SEO Stats - додаток з відкритими SEO-даними по будь-якому сайту - зручно!

Address

Хмельницкий: Завадского, 5/1
Khmelnytskyi
29000

Opening Hours

Monday 10:00 - 20:00
Tuesday 10:00 - 20:00
Wednesday 10:00 - 20:00
Thursday 10:00 - 20:00
Friday 10:00 - 20:00
Saturday 10:00 - 16:00

Telephone

+380688522502

Website

Alerts

Be the first to know and let us send you an email when Dev Academy школа програмування posts news and promotions. Your email address will not be used for any other purpose, and you can unsubscribe at any time.

Contact The Business

Send a message to Dev Academy школа програмування:

Shortcuts

Share

Category