frontend

      

Document Object Model

Дізнайтеся деякі frontend основи про DOM API:

1. Прослухайте тільки розділ Document Object Model Manipulation

   Ви можете вдатися до автоматично перекладених субтитрів, зокрема, якщо ви відчуваєте що це допоможе вам краще засвоїти відеокурс.

2. freecodecamp Algorithm Scripting Challenges

   • закінчити завдання 12..18 (Sum All Odd Fibonacci Numbers до Everything Be True) і збережіть скріншот.

.then():

1. Практичне завдання: Впровадити інтерактивне side-menu без перезавантаження сторінки. Ви можете вибрати будь-яку тему: покемони, телефони, сторінки сайту aka about/prices/goal/etc. Action menu - щось на зразок цього, але не таке потворне :)

Головна мета

Головна мета - меню з можливістю завантажувати деякий попередньо визначений HTML-контент, пов’язаний з власним пунктом меню, в контейнер вмісту <main>, розташований праворуч.

Цілі

• комплексна реалізація full page responsive layout (курс Udacity про адаптивний HTML/CSS).
• ви можете зберігати дані в масиві об’єктів
• ви можете використовувати innerHTML, insertAdjacentHTML, append, createElement, addEventListener,
• будуть корисними методи масиву як Array#filter, Array#sort, Array#find, etc.
• і звичайно - методи DOM.

Ви можете опублікувати свої результати на GitHub Pages

Після завершення виконайте наступне:

1. Зробіть скріншот своїх завершених уроків і помістіть його в теку task_js_dom вашого репо kottans-frontend
2. В вашому kottans-frontend репо README.md:
   • додайте заголовок ## DOM
   • додати скріншот або додати посилання на скріншот
   • перерахуйте свої міркування щодо кожного пункту завдання (що для вас було новим, що вас здивувало, що ви плануєте використовувати в майбутньому)
3. Для цього завдання вам знадобиться review коду:
   • Для студентів курсу Frontend 2022: будь ласка, дотримуйтесь цих інструкцій
   • Для студентів p2p course: будь ласка, дотримуйтесь цих інструкцій
4. Чудова робота! Якщо ваш PR вже продивились ментори, узгодили та вмерджили (його статус змінено на merged з фіолетовою іконкою), то прийшов час ділитись своїми досягненнями з іншими – опублікуйте повідомлення в course channel: DOM — #done (або DOM — #p2p_done якщо ви студент курсу p2p) і додайте посилання до свого репо. Цей крок важливий, оскільки він допомагає наставникам відстежувати ваш прогрес!
5. Вивчіть додаткові матеріали нижче, щоб покращити свої навички. Якщо ви вважаєте, що це вплине на вашу загальну ефективність курсу, подумайте над тим, щоб повернутись до них пізніше, наприклад коли ви виконаєте всі обов’язкові завдання.
6. Ви можете пропустити опціональні матеріали з цього завдання (якщо такі є).

Коли ви закінчите це завдання, ви можете приступити до наступного.

Додаткові матеріали

• The Basics of DOM Manipulation in Vanilla JavaScript (No jQuery)
• JavaScript DOM Crash Course by Brad Traversy

Готово?

➡️ Ідіть далі Building a Tiny JS World

⤴️ Повернутися до Contents

This site is open source. Improve this page.