Track
Certificate
Основи Frontend Розробки
4.6+
★★★★★
★★★★★
52 reviews
Beginner
Ознайомтеся з основоположними навичками кожного веб-розробника. Почніть з HTML, де ви навчитеся структурувати веб-контент, створювати інтуїтивно зрозумілу навігацію та бездоганно включати мультимедійні елементи. Show more
HTML/CSS
JavaScript
Boost your Tech Skills!
with up to 55% off
What you'll get with our subscription:
Access to 85+ top-rated courses
AI-driven Learning
Workspaces for practicing your skills
Personalized study tracks
Certificates of completion
Training 2 or more people?
Get your team access to Codefinity courses anytime, anywhere.
Try Codefinity TeamsWhat you will learn
- Build structured and accessible web pages using HTML to create a strong foundation
- Use CSS to style websites, control layout, and make pages visually appealing
- Learn JavaScript fundamentals to add interactivity, manipulate the DOM, and handle user events
- Work with JavaScript data structures, including arrays, objects, and their practical applications
- Explore advanced JavaScript topics like asynchronous programming, classes, and event-driven development
- 260 chapters
- 32 hours
- 286 tasks
Trusted by employees of leading companies
Learning track content
Module 1 / Знайомство з HTML
Дослідіть внутрішню роботу Інтернету. Дізнайтеся, як дані переміщуються мережею, відкрийте для себе роль протоколів та розгадайте таємниці IP-адрес і доменних імен. Отримайте глибоке розуміння того, як веб-браузери та сервери взаємодіють для доставки веб-контенту.
Відкрийте для себе можливості тегів для структурування контенту, від заголовків і абзаців до списків і таблиць. Дізнайтеся, як покращити елементи за допомогою атрибутів.
Основи структури HTML-документа. Вивчіть компоненти HTML-документа, зокрема оголошення doctype, head і body. Зрозумієте призначення кожного елемента та їхній внесок у загальну структуру веб-сторінки.
Зробіть веб-сторінку більш привабливою за допомогою медіа, таких як зображення, аудіо та відео. Працюйте зі структурованими даними у вигляді таблиць.
Вивчіть універсальність HTML-форм. Навчіться створювати інтуїтивно зрозумілі та зручні форми, використовуючи ключові концепції та методи. Дізнаєтеся, як форми забезпечують взаємодію з користувачами та надсилання даних на веб-сайтах.
Module 2 / Основи CSS
Базові концепції та правила CSS для додавання стилів до веб-сторінки.
- Що таке CSS?Preview
- Поєднання HTML і CSSPreview
- Селектори для Стилізації HTML ЕлементівPreview
- Челендж: Додайте Свої Перші СтиліPreview
- Челендж: Додайте Стилі за Допомогою Імені КласуPreview
- Псевдокласи Дій КористувачаPreview
- Челендж: Псевдокласи Дій КористувачаPreview
- Кольори ТекстуPreview
- Ефективна Робота з CSSPreview
- Челендж: Змінні в CSSPreview
Набір властивостей CSS, які використовуються для стилізації текстового вмісту елементів HTML.
Концепція розташування елементів відповідно до бокс моделі, яка описує розташування і відстань між усіма елементами.
- Бокс МодельPreview
- Бокс СайзінгPreview
- Додавання Простору ЕлементамPreview
- Челендж: Бокс-сайзінгPreview
- Структурні та Функціональні ПсевдокласиPreview
- Челендж: Структурні ПсевдокласиPreview
- Типи ЕлементівPreview
- Робота з Блочними ЕлементамиPreview
- Робота з Інлайн ЕлементамиPreview
- Челендж: Спрогнозуйте Макет СторінкиPreview
Метод впорядкування набору елементів у рядках і стовпцях.
Створіть візуально приголомшливий та інтерактивний веб-дизайн, використовуючи продвинуті методи CSS для додавання декоративних елементів.
Module 3 / Advanced CSS Techniques
Research what learners can expect from this advanced HTML and CSS styling course. What do you need to know before starting the course? What topics will be covered in it?
Position and manage elements on the web pages. Learn about the different positioning properties, discover how to use the stacking order to control the visibility of elements that overlap each other, and finally, handle content overflow.
- What is Positioning?Preview
- Relative PositioningPreview
- Challenge: Relative PositioningPreview
- Absolute PositioningPreview
- Challenge: Absolute PositioningPreview
- Fixed PositioningPreview
- Challenge: Fixed PositioningPreview
- Sticky PositioningPreview
- Challenge: Sticky PositioningPreview
- Stacking OrderPreview
- Challenge: Stacking OrderPreview
- Content OverflowPreview
Research the power of transitions and learn how to improve the user experience. Discover how to liven properties smoothly and gradually, creating seamless state transitions.
Learn about the animation property and how it can be used to create dynamic and engaging designs. Discover how to create complex animations using keyframes and how to control the animation.
Explore the transformation property, which allows modifying the appearance and position of elements on a webpage. Learn how to scale, rotate, skew, and translate elements in two and three dimensions. Combine multiple transformations to create more complex effects.
The principles and techniques used in adaptive/responsive design aim to make websites and applications accessible and visually appealing across different devices, screen sizes, and orientations.
Learn about preprocessors in CSS and how they can help to write more efficient and maintainable code. Understand how to use preprocessors to simplify the workflow and generate cleaner CSS code.
Module 4 / Вступ до JavaScript
У першій секції ми познайомимо вас з JavaScript та розглянемо його синтаксис. Цей початковий крок дасть вам фундаментальне розуміння синтаксису JavaScript, що створить основу для більш поглибленого вивчення в наступних секціях.
Ми зануримося в основні типи даних, з якими працює JavaScript. Ми почнемо з розрізнення літералів і змінних, а потім дослідимо різноманітні типи даних, що використовуються в JavaScript. Ці знання сформують міцний фундамент для вашої подорожі в JavaScript.
Ми познайомилися з різними типами даних. Настав час засукати рукава і навчитися маніпулювати ними. У цій третій секції ми розглянемо операції, які можна виконувати з кожним типом даних, і надамо вам практичні навички для ефективної роботи зі структурами даних JavaScript.
Розкрийте можливості оптимізації коду за допомогою циклів. Цикли дозволяють нам оптимізувати наш код, ефективно виконуючи повторювані дії. Ми заглибимося в різні типи циклів JavaScript і дізнаємося, як ефективно використовувати їхню силу.
Розкрийте потенціал функцій як важливих інструментів для створення простих, але потужних програм. Ви навчитеся створювати та використовувати функції, що дасть вам змогу спростити кодування та покращити навички вирішення проблем.
Module 5 / JavaScript Data Structures
Get a clear roadmap of what's to come, understand the prerequisites, and learn valuable tips to set you up for success as you delve into objects, arrays, and essential programming concepts.
Explore the core concepts of JavaScript objects. This section covers the fundamentals of object creation, property management, and method implementation.
- Understanding ObjectsPreview
- Object CreationPreview
- Nested PropertiesPreview
- Challenge: Creating an ObjectPreview
- Accessing Object PropertiesPreview
- Challenge: Accessing Object PropertiesPreview
- Working with PropertiesPreview
- Challenge: Modifying and Extending ObjectPreview
- Object MethodsPreview
- Properties in MethodsPreview
- Challenge: Working with Object MethodsPreview
- Object Fundamentals Sum UpPreview
Dive into advanced techniques for working with JavaScript objects. This section delves into various strategies to efficiently manipulate and interact with objects.
- Object Iteration with for...in LoopPreview
- Challenge: Object Property ExplorerPreview
- Method hasOwnProperty()Preview
- Challenge: hasOwnProperty() for Object Property IterationPreview
- Spread OperatorPreview
- Challenge: Merging Objects and Adding PropertiesPreview
- Object DestructuringPreview
- Challenge: DestructuringPreview
- Advanced Object Manipulation Sum UpPreview
Embark on a journey into the JavaScript arrays. This section provides a strong foundation for creating arrays, managing elements, and executing basic array operations.
Master the advanced array manipulation skills, covering various techniques and methods for handling arrays effectively in multiple scenarios.
- map() MethodPreview
- Challenge: Array Element TransformationPreview
- filter() MethodPreview
- Challenge: Filtering Students by Exam ScoresPreview
- find() MethodPreview
- Challenge: Discovering Featured ProductsPreview
- sort() MethodPreview
- Challenge: Sorting and Extracting PropertiesPreview
- Advanced Array Operations Sum UpPreview
- Course Sum UpPreview
Module 6 / Advanced JavaScript Mastery
Learn the fundamentals of JavaScript classes, from class declarations to defining methods that enhance functionality. Discover how to use parameter objects effectively, manage private properties, and control access with getters and setters. Master static properties and static methods and unlock the power of class inheritance using "extends" and "super()" to build scalable and reusable code.
- Welcome to the CoursePreview
- Class DeclarationPreview
- Challenge: Building a ClassPreview
- Class MethodsPreview
- Challenge: Adding Methods to a ClassPreview
- Parameter ObjectPreview
- Private PropertiesPreview
- Challenge: Implementing Private Properties in a ClassPreview
- Getters and SettersPreview
- Challenge: Managing Properties with Getters and SettersPreview
- Static PropertiesPreview
- Static MethodsPreview
- Challenge: Using Static Properties and Methods in a ClassPreview
- Inheritance with extends and Using super()Preview
- Challenge: Class Inheritance with Extends and Using SuperPreview
Master DOM manipulation to create dynamic, interactive web applications. Navigate and modify the DOM's structure, dynamically update content, and implement best practices for security and performance. Differentiate between properties and attributes to optimize your code.
- What is the DOM?Preview
- Querying the DOMPreview
- Challenge: Querying the DOMPreview
- Understanding the DOM HierarchyPreview
- Challenge: DOM HierarchyPreview
- DOM PropertiesPreview
- Working with Element AttributesPreview
- Challenge: Working with Element Properties and AttributesPreview
- Adding ElementsPreview
- Removing ElementsPreview
- Challenge: Adding and Removing ElementsPreview
- Modifying Element StylesPreview
- Challenge: Modifying Element StylesPreview
Unlock the interactivity of your web applications by mastering JavaScript events. Understand event propagation, control event behavior, and implement efficient event handling for user interactions. Optimize performance with advanced techniques like event delegation.
This section covers the essentials of asynchronous JavaScript, including callbacks, Promises, and async/await. You’ll learn to fetch data from APIs, integrate third-party libraries, and handle multiple requests efficiently, building skills for creating data-driven applications.
- Introduction to Asynchronous JavaScriptPreview
- CallbacksPreview
- PromisesPreview
- Async/AwaitPreview
- Working with APIsPreview
- Practical API IntegrationPreview
- Challenge: Working with APIPreview
- Working with Third-Party LibrariesPreview
- Challenge: Working with Third-Party LibrariesPreview
- Handling Multiple Asynchronous RequestsPreview
Requirements
- A computer with a browser - all browsers are supported.
- Your enthusiasm to enhance your tech skills.
- Everything else needed to start learning and practicing is already included in this course.
Over 200,000 5-star ratings and counting
Ruslan Kravchuk
The main thing is to learn and not give up
The material is good, there is a lot to learn, all in order to become better and the main thing is to learn what you want....
Matteo Comune
Thanks to them I'm learning a lot…
Thanks to them I'm learning a lot faster because they help you to understand everything from scratch. It's the best website that helps people with no background in IT...
Yuliana Cadavid
great course for beginners
great course for beginners, they test your knowledge in every lesson...
Elpunzon
I am enjoying my Codefinity experience…
I am enjoying my Codefinity experience learning Python. The self-paced way of learning is great because I can fit it into my schedule...
Alexandru Alexandru
Is nice to learn from codefinity
Is nice to learn from codefinity. Its easy and have good examples on what I learned here...
jacob Templet
Easy to follow along with and provides…
Easy to follow along with and provides challenge in my every day life. The challenge keeps me wanting to learn day after day...
Elan
Codefinity is a comprehensive learning…
Codefinity is a comprehensive learning tool to help you develop your skills as a software engineer or data scientist. The exercises are fun and a good way to sharpen your skills...
Thibault
First time learning how to code
First time learning how to code and successfully doing so with codefinity - thank you...
Adrien Morel
Well designed for total beginners
Well designed for total beginners, incremental progress and makes me feel confident....
_Gracy
it's simply perfectly well explained
it's simply perfectly well explained! so far I have not experienced any difficulty because everything is so well managed...
Ruslan Kravchuk
The main thing is to learn and not give up
The material is good, there is a lot to learn, all in order to become better and the main thing is to learn what you want....
Matteo Comune
Thanks to them I'm learning a lot…
Thanks to them I'm learning a lot faster because they help you to understand everything from scratch. It's the best website that helps people with no background in IT...
Yuliana Cadavid
great course for beginners
great course for beginners, they test your knowledge in every lesson...
Elpunzon
I am enjoying my Codefinity experience…
I am enjoying my Codefinity experience learning Python. The self-paced way of learning is great because I can fit it into my schedule...
Alexandru Alexandru
Is nice to learn from codefinity
Is nice to learn from codefinity. Its easy and have good examples on what I learned here...
jacob Templet
Easy to follow along with and provides…
Easy to follow along with and provides challenge in my every day life. The challenge keeps me wanting to learn day after day...
Elan
Codefinity is a comprehensive learning…
Codefinity is a comprehensive learning tool to help you develop your skills as a software engineer or data scientist. The exercises are fun and a good way to sharpen your skills...
Thibault
First time learning how to code
First time learning how to code and successfully doing so with codefinity - thank you...
Adrien Morel
Well designed for total beginners
Well designed for total beginners, incremental progress and makes me feel confident....
_Gracy
it's simply perfectly well explained
it's simply perfectly well explained! so far I have not experienced any difficulty because everything is so well managed...
Data Engineer
Certificate of Completion
Showcase your newly acquired skills. You've earned it
Discover more
Learning tracks
Лише для Ultimate
1 Курс
1 Проєкт
0 Task
Лише для Ultimate
7 Курсів
326 Завдань
Лише для Ultimate
5 Курсів
119 Завдань
Лише для Ultimate
5 Курсів
150 Завдань
Лише для Ultimate
4 Курсів
115 Завдань
Лише для Ultimate
6 Курсів
103 Завдань
Лише для Ultimate
6 Курсів
172 Завдань
Лише для Ultimate
5 Курсів
134 Завдань
Лише для Ultimate
2 Курсів
1 Проєкт
57 Завдань
Лише для Ultimate
6 Курсів
307 Завдань
Лише для Ultimate
4 Курсів
143 Завдань
Лише для Ultimate
5 Курсів
170 Завдань
Лише для Ultimate
5 Курсів
155 Завдань
Лише для Ultimate
6 Курсів
226 Завдань
Лише для Ultimate
8 Курсів
2 Проєктів
176 Завдань
Лише для Ultimate
2 Курсів
79 Завдань
Лише для Ultimate
7 Курсів
293 Завдань
Лише для Ultimate
1 Проєкт
0 Task
Лише для Ultimate
2 Курсів
21 Завдань
Лише для Ultimate
5 Курсів
111 Завдань
Лише для Ultimate
2 Курсів
0 Task
Лише для Ultimate
3 Курсів
39 Завдань
Лише для Ultimate
13 Курсів
543 Завдань
Лише для Ultimate
13 Курсів
543 Завдань
Лише для Ultimate
1 Курс
0 Task
Лише для Ultimate
0 Task
Лише для Ultimate
5 Курсів
143 Завдань
Лише для Ultimate
3 Курсів
79 Завдань
Лише для Ultimate
7 Курсів
272 Завдань
Лише для Ultimate
5 Курсів
217 Завдань
Лише для Ultimate
3 Курсів
104 Завдань
Лише для Ultimate
2 Курсів
13 Завдань
Лише для Ultimate
3 Курсів
119 Завдань
Лише для Ultimate
1 Курс
15 Завдань
Лише для Ultimate
3 Курсів
32 Завдань
Лише для Ultimate
3 Курсів
31 Завдань
Лише для Ultimate
2 Курсів
151 Завдань
Лише для Ultimate
3 Курсів
49 Завдань
Learning tracks
трек
TEST TRACK 12
Базовий
4.0
(5571)
трек
Full Stack Веб Розробка
Базовий
4.6
(56)
трек
Станьте React Розробником
Середній
4.8
(5)
трек
Аналіз та Візуалізація Даних на Python
Середній
4.6
(7)
трек
SQL з Нуля до Героя
Базовий
4.8
(90)
трек
С++ для Початківців
Базовий
4.4
(17)
трек
Python з Нуля до Героя
Базовий
4.7
(283)
трек
Основи Machine Learning
Середній
4.9
(7)
трек
Python Beyond Intermediate
Базовий
5.0
(1)
трек
Основи Java
Базовий
4.3
(9)
трек
Game Development with Unity
Базовий
4.6
(7)
трек
Become a Django Developer
Просунутий
4.4
(27)
трек
Flask for Dummies
Середній
4.5
(31)
трек
Web Developer from Zero to Hero
Базовий
4.6
(56)
трек
Preparation for Data Science
Середній
4.5
(11)
трек
Deep Learning Odyssey
Просунутий
5.0
(3)
трек
Web Development with C#
Базовий
4.8
(97)
трек
TEST E2E TRACK BEGINNER
Базовий
трек
Test Track
Begginer
4.7
(3)
трек
Skilled Python BackEnd Developer
Просунутий
4.7
(261)
трек
Test Recalculate
Базовий
трек
Excel Essentials
Базовий
4.5
(33)
трек
Full-Stack .NET Developer Journey
Середній
4.8
(128)
трек
Full-Stack .NET Developer Journey
Середній
4.8
(128)
трек
Test track with rating
Просунутий
4.0
(4)
трек
TEST TEST TRACK
Базовий
трек
Data Analyst Foundation
Базовий
4.7
(110)
трек
C++ Mastery
Просунутий
трек
Java Web
Просунутий
4.5
(30)
трек
Become a QA Engineer
Базовий
4.5
(43)
трек
Video Production with Adobe
Базовий
трек
Digital Marketing Essentials
Базовий
трек
UI/UX Design Tools
Базовий
трек
Test image upload track
Базовий
трек
Essential Office Skills
Базовий
4.6
(24)
трек
GitHub from Zero to Hero
Базовий
трек
No-Code Website Development
Базовий
трек
C Programming & Low-Level Development
Базовий
Become a Development expert
Interactive exercises
Learning videos
AI-assistant on all courses
Workspaces for designing your own projects
Ready to get started?
ProBest intro offer | UltimateA complete experience to kickstart your career | |
---|---|---|
85+ Top-Rated courses | ||
Completion certificates | ||
AI-Assistant in all courses | ||
20+ hands-on Real-world projects | ||
Personalized study tracks | ||
Unlimited workspaces | ||
Boost your Tech Skills!
with up to 55% off
What you'll get with our subscription:
Access to 85+ top-rated courses
AI-driven Learning
Workspaces for practicing your skills
Personalized study tracks
Certificates of completion
Training 2 or more people?
Get your team access to Codefinity courses anytime, anywhere.
Try Codefinity Teams