Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Трек Frontend Development with Svelte - Онлайн-навчання з сертифікатом
Frontend Development with Svelte
Frontend Development with Svelte
Beginner
0.0
0 reviews
0 Learners
Explore how modern frontend development works using HTML, CSS, JavaScript, Svelte, and Tailwind CSS. Build structured webpages, create interactive UI …
188
Chapters
20
Learning hours
218
Assignments
AI Assistant
Shareable Certificate
Результати
Результати
Track content
Related courses and projects
Відгуки
Особливості
Ціни
Результати
Результати
Track content
Related courses and projects
Відгуки
Особливості
Ціни

Що ви навчитеся

Structure webpages using semantic HTML
Create reusable Svelte components and reactive UI elements
Fetch and display external API data
Style interfaces with CSS and Tailwind CSS
Handle forms, events, and dynamic rendering
Build responsive layouts for different screen sizes
Build interactive frontend logic with JavaScript
Work with shared state using Svelte stores
Organize modern frontend projects and reusable UI patterns.
Learning track content
Ласкаво просимо до HTML та веб-розробки
Розуміння тегів HTML
Робота з атрибутами HTML
Розуміння парних і одиночних тегів у HTML
Розмітка тексту
Організація списків
Challenge: Create Your First Web Page Paragraph
Challenge: Build a Personal Introduction Web Page
Завдання: Створення Веб-Сторінки Для Демонстрації Фільмів
Використання посилань
Додавання кнопок
Challenge: Створення посилань на популярні вебсайти
Перевірка вашого HTML-коду на відповідність найкращим практикам
Розуміння структури HTML-документа
The Role of the Document Head
Завдання: Правильно структурувати HTML-документ
Додавання зображень у HTML
Challenge: Work with Images
Робота з клікабельними зображеннями, підписами та оптимізацією
Створення та структурування таблиць у HTML
Challenge: Design a Functional HTML Table
Introduction to HTML Forms
Основи створення форм у HTML
Використання міток для покращення доступності форм
Покращення форм за допомогою атрибутів введення
Дослідження різних типів введення в HTML
Challenge: Створення Форми з Полями Введення та Мітками
Робота з елементом Textarea для введення багато рядків
Використання елемента select для випадаючих меню
Використання елемента Datalist для попередньо визначених підказок введення
Групування елементів форми для кращої структури
Що таке CSS і чому це важливо
Підключення CSS до HTML
Простий спосіб вибору елементів
Стилізація Тексту та Кольорів
Додавання Ефектів Наведення
Завдання: Стилізуйте Свою Першу Веб-сторінку
Форматування Тексту для Кращої Читабельності
Робота зі шрифтами та їх властивостями
Додавання Власних Шрифтів
Завдання: Покращення Дизайну Статті Блогу
Практичне Розуміння Блочної Моделі
Просте Пояснення Margin і Padding
Розміри Коробки та Керування Шириною
Властивість Display: Block, Inline та Inline-Block
Завдання: Виправлення зламаного макета
Чому Існує Flexbox
Керування напрямком
Горизонтальне Вирівнювання Вмісту
Вирівнювання Елементів по Вертикалі
Робота з Елементами Flex
Завдання: Створення Макета Картки Магазину за Допомогою Flexbox
Завдання: Створення Вертикальної Картки Блогу з Flexbox
Розуміння Контейнерів та Елементів Сітки
Визначення Рядків і Стовпців
Проміжки сітки та вирівнювання
Створення Реального Макета
Використання Кольорів Фону
Застосування Фонових Зображень
Робота із зображеннями в CSS
Створення ефектів за допомогою декоративних псевдоелементів
Додавання Тіней для Глибини
Завдання: Створення Сучасного Компоненту Картки
Перша Консольна Програма на JavaScript
Challenge: Showing Some Output
Challenge: Виведення Кількох Рядків
Робота з Числами
Challenge: Working with Numbers
Завдання: Обчислення Швидкості Автомобіля
Challenge: Calculating Area of a Trapezium
Виведення Декількох Значень
Challenge: Consoling Meaningful Output
Як Використовувати Коментарі в JavaScript?
Завдання: Додавання Коментаря
Багаторядкові Коментарі
Challenge: Коментування коду
Що Таке JavaScript?
Зберігання Даних
Завдання: Оголошення Змінної
Завдання: Доступ до Даних із Змінної
Завдання: Виправлення Назв Змінних
Завдання: Переназначення Змінної
Константи
Challenge: Declaring & Using Constants
Виконання Арифметичних Операцій Над Змінними
Завдання: Створення Калькулятора Заробітної Плати
Завдання: Коригування Зарплати з Бонусом
Дослідження Примітивних Типів Даних
Завдання: Оголошення Булевого Значення
Як Взаємодіють Різні Типи Даних
Challenge: Concatenating Strings
Завдання: Створення Профілю Користувача та Деталей Активності
Оператори порівняння
Завдання: Перевірка Відповідності Віку
Оператор `if`
Завдання: Рекомендації Щодо Одягу на Основі Погоди
Завдання: Парне чи Непарне
Вкладені Умовні Оператори
Розділ `else`
Завдання: Порадник Температури
Конструкція `else if`
Завдання: Категоризатор Оцінок
Логічний Оператор `AND`
Завдання: Перевірка, чи Є Число Парним і Додатним
Логічний оператор OR
Завдання: Доступ до Системи Керування
Що Таке Функції?
Виклик: Проста Функція
Завдання: Обчислення Швидкості Автомобіля
Області Видимості
Передача Даних У Функції
Завдання: Виправлення Функції Швидкості
Завдання: Удосконалення Категоризатора Оцінок
Завдання: Визначення Складеної Функції
Повернення Даних з Функцій
Значення за замовчуванням
Завдання: Автоматична Відповідь на Електронну Пошту з Параметрами за Замовчуванням
Що Таке Масиви?
Завдання: Визначення Масиву
Виклик: Індексація
Додавання Значень до Масиву
Завдання: Додавання Елементів до Масиву
Видалення Елементів з Масиву
Виклик: Практика з Методами `pop` і `shift`
Властивість `length`
Завдання: Підрахунок Елементів
Метод `Includes`
Завдання: Пошук Тварин у Зоопарку
Цикл `for`
Завдання: Виведення Послідовності
Цикл `while`
Завдання: Виведення Послідовності Фібоначчі
Цикл `do-while`
Завдання: Випадковий Добуток 7
Використання Циклів з Масивами
Завдання: Знаходження Середньої Ціни Товарів
Підсумок
What Svelte Is and Why Developers Use It
How Svelte Differs from React and Vue
Setting Up a Svelte Project with Vite
Understanding the Svelte Project Structure
Understanding .svelte Files
Your First Svelte Component
Displaying Data with Curly Braces
Passing Data with Props
Default Prop Values
Scoped Component Styles
Creating Reusable Components
Reactive Variables
Reactive Statements
Two-Way Binding with bind:
Conditional Rendering with {#if}
Rendering Lists with {#each}
Handling Events
Understanding Stores
Writable Stores
Derived Stores
Store Subscriptions with $
Sharing State Across Components
Fetching Data from APIs
Loading and Error States
Search and Filtering
Working with Async Data
Svelte Transitions
Fade Fly and Slide Animations
Parent and Child Components
Slots and Component Composition
Working with Forms and Inputs
Form Validation
Submitting Form Data
Organizing a Svelte Application
Building Responsive Layouts
Building a Complete Frontend Application
Покращуйте свої технічні навички!
зі знижкою до 55%
Features:
*Tracks not included in Pro plan
500+ найкращих курсівПередовий AI Копілот
Персоналізовані навчальні треки40+ практичних реальних проектів
Без скасування, до закінчення обраного плану зі знижкою, я погоджуюсь, що Codefinity автоматично стягне плату $104 кожні 3 місяці поки я не скасую. Дізнайтеся більше про політику скасування та повернення в Умови підписки.
Recommended Courses and Projects

курс

Ultimate HTML

Ultimate HTML

Вивчайте основи HTML (HyperText Markup Language), фундаменту веб-розробки. Цей курс для початківців охоплює теги, атрибути, елементи та структурування веб-сторінок. Отримайте практичні навички створення заголовків, абзаців, списків, зображень, посилань, форм і таблиць. Ознайомтеся з найкращими практиками, оптимізацією та веб-доступністю. Почніть свій шлях у веб-розробці з HTML.

курс

Вступ до JavaScript

Вступ до JavaScript

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

курс

Основи CSS

Основи CSS

Опануйте основи CSS — мови стилізації, яка змінює зовнішній вигляд і сприйняття вебсторінок. Дослідіть ключові концепції, такі як стилі тексту, кольори, відступи, модель коробки, Flexbox і декоративні ефекти. Розвивайте навички створення візуально привабливих і структурованих вебсторінок.

курс

Основи HTML

Основи HTML

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

курс

Структури Даних JavaScript

Структури Даних JavaScript

Навчіться впевнено працювати з даними в JavaScript, опанувавши об'єкти та масиви. Зрозумійте, як створювати, отримувати доступ і ефективно керувати властивостями та методами об'єктів. Ознайомтеся з розширеними техніками маніпуляції об'єктами, включаючи ітерацію, клонування та деструктуризацію для чистішого коду. Сформуйте міцну базу у роботі з масивами та навчіться ефективно керувати, ітерувати та змінювати елементи масивів. Опануйте розширені методи масивів, такі як map, filter, find і sort, для трансформації та обробки даних у ваших застосунках.

курс

CSS-верстка, ефекти та Sass

CSS-верстка, ефекти та Sass

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

курс

Introduction to Digital Marketing

Introduction to Digital Marketing

This comprehensive marketing course offers an in-depth journey through the fundamentals and advanced strategies of digital marketing. Explore key areas like SEO, PPC, social media, and AI while learning how to craft strategies that deliver results. Each section includes practical examples and tools to solidify your understanding. The course concludes with a hands-on project, empowering you to create and present your own comprehensive marketing plan.

курс

JavaScript Ninja

JavaScript Ninja

Ласкаво просимо до курсу JavaScript Ninja! Цей захоплюючий та інтерактивний курс розроблений, щоб познайомити вас з основами програмування на JavaScript через веселу та освітню гру. Ви будете керувати ніндзя через різні виклики, використовуючи JavaScript для контролю рухів та взаємодії з об'єктами, такими як суші. Починаючи з основ, ви навчитеся навігувати по карті, підбирати та розміщувати суші, і поступово перейдете до більш складних концепцій програмування, таких як functions, loops та conditional statements. Кожна глава пропонує практичні завдання для закріплення ваших знань, завершуючи захоплюючими викликами, які перевіряють ваші навички. Незалежно від того, чи ви повний новачок, чи хочете покращити свої навички кодування, цей курс надає всебічний та приємний досвід навчання. Приєднуйтесь до нас і станьте ніндзя кодування!

курс

Логіка та Взаємодія в JavaScript

Логіка та Взаємодія в JavaScript

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

курс

Вступ до блокчейну

Вступ до блокчейну

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

курс

Основи Мережевих Технологій

Основи Мережевих Технологій

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

курс

Introduction to QA

Introduction to QA

In this course, the user will get an introduction on how to perform manual testing on primarily web applications. The skills aquired in this course can be used in automation testing as well.

Чому обирають Codefinity

Kwizera Mugisha

Web Developer

Kwizera Mugisha

linkedIn

The teaching methodology at Codefinity is excellent, and I particularly appreciate how it has prepared me to handle real-world coding problems. Currently, I am delving into Node.js and eagerly anticipate building full-stack projects that integrate all the knowledge I have gained.

Sherry Barnes-Fox

Senior Business Analyst

Sherry Barnes-Fox

linkedIn

My first course was 4 hours, I did it in a few days, "nugget-style". The instructions are very clear and easy to understand. There is even a hint to help you get the answer. I love the learning style that is used, it engages me.

Bill Wagner

Accounts Payable Specialist

Bill Wagner

linkedIn

I have really liked the browser-based lessons that allow me to code within the lesson. The RUN button allows me to test the code I write before submitting for a grade.

Daniel Chinea

IT Support Specialist

Daniel Chinea

linkedIn

I have gained a lot of practical and logical thinking skills, along with patience for myself and confidence in myself that I can learn programming. Years ago, I would have never thought that I could learn programming in any way, shape or form, and I was able to obtain these certifications and skills with Codefinity.

Steve Bruening

Technology Project Manager

Steve Bruening

linkedIn

The learning was progressive and made it easy to follow along and make progress. I could feel my skills increasing and building on each other as the course went along.

Stephanie Chan

Project Manager

Stephanie Chan

linkedIn

As I went through the first course of the Python track, I liked the way the course was lay out (in easy and digestible modules) with little exercises at the end of each concept.

Step-by-Step to Stellar Results
Інтерактивне середовище кодування

Зануртеся в наше інтерактивне середовище: пишіть і запускайте свій код з миттєвим зворотним зв'язком і метриками успіху — навчайтеся, виконуючи на кожному кроці.

Підтримка на базі AI

Використовуйте вбудованого AI асистента для пояснення помилок, пропозицій виправлень або відповідей на будь-які питання щодо вашого коду — залишайтеся продуктивними і ніколи не застрягайте.

Check your progress

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

Promote your expertise

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

Довіряють працівники провідних компаній
та студенти з провідних університетів

Google
Intel
Twitter
FedEx
Meta
Nike
Amazon
Microsoft
Tesla
Google
Intel
Twitter
FedEx
Meta
Nike
Amazon
Microsoft
Tesla
florida
illinois
colorado
indiana
new-york
cornell
columbia
notre-dame
florida
illinois
colorado
indiana
florida
illinois
colorado
indiana
new-york
cornell
columbia
notre-dame
florida
illinois
colorado
indiana

Повний доступ до каталогу

Одна підписка відкриває цей курс і весь наш каталог проектів і навичок.
Features:
500+ найкращих курсівПередовий AI Копілот
Персоналізовані навчальні треки40+ практичних реальних проектів
Без скасування, до закінчення обраного плану зі знижкою, я погоджуюсь, що Codefinity автоматично стягне плату $104 кожні 3 місяці поки я не скасую. Дізнайтеся більше про політику скасування та повернення в Умови підписки.

Спробуйте Codefinity з упевненістю — включена 30-денна гарантія повернення грошей

Щоб привітати вас у Codefinity, ми пропонуємо до 64% знижки на наші курси. Крім того, у нас є 30-денна гарантія повернення грошей, щоб ви могли спробувати нас без ризику.Ми щиро чекаємо на вас на нашій платформі і прагнемо зробити ваше навчання легким, інтерактивним і веселим.
Shield Image
Ready to get started?
Pro
Best intro offer
Ultimate
A complete experience
to kickstart your career
500+ Top-Rated courses
yes
yes
Completion certificates
yes
yes
Early access to new courses
yes
yes
40+ hands-on Real-world projects
no
yes
Personalized study tracks
no
yes
Unlimited workspaces
no
yes

Миттєвий доступ до 500+ курсів

Необмежене навчання, миттєвий доступ
Необмежене навчання, миттєвий доступОтримайте повний доступ до всіх курсів і треків, включаючи відеоматеріали, тести та глибокі матеріали — починайте навчання в будь-який час.
Сертифікати, визнані у галузі
Сертифікати, визнані у галузіОтримуйте сертифікати, що підтверджують вашу експертизу і підвищують вашу кар'єру в технологіях, AI, даних, маркетингу та інших сферах.
Навчання з підтримкою ШІ
Навчання з підтримкою ШІОтримуйте персоналізовані підказки, миттєвий зворотний зв'язок і пояснення на базі AI для прискорення вашого прогресу.
Постійне розширення: нові курси та кар'єрні треки
Постійне розширення: нові курси та кар'єрні трекиБудьте попереду з постійно оновлюваними курсами, кар'єрними дорожніми картами, викликами та практичними тестами.
Розвивайте важливі навички
Розвивайте важливі навичкиОпануйте затребувані навички з курсами з AI, науки про дані, програмування, маркетингу, автоматизації, веб-розробки та інших.
Інтерактивне та безперервне навчання
Інтерактивне та безперервне навчанняЗаймайтеся практичними проектами, реальними вправами та інтуїтивним навчанням — без додаткових інструментів.
some-alt