Creating a layout
Creating a layout is the process of arranging major blocks on a page. Simply put, we are going to learn how to create columns.
JavaScript programming
We are studying the basic concepts of the language and using them in real projects.
Deep dive in JavaScript for browsers
We are going to delve into user interaction and techniques for revitalizing interfaces.
SVG basics
Learning SVG, vector graphics format: basic primitives, positioning and sizing, fills and strokes.
Dynamic effects
We animate the elements of the interface with the help of animation and transformations.
Advanced styling
Let's delve into some advanced features and learn about some important CSS mechanisms.
CSS Custom Properties
A complete course on CSS Custom Properties with tons of hands-on practice. New course chapters are coming out as we go!
Sorting Algorithms Made Visual
Algorithms might seem tough, but not in this course! We turn abstract sorting into clear, engaging animations so everything just clicks. Learn effortlessly by watching algorithms in action!
<!DOCTYPE html><html lang="en" class="no-js"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><script>var b=document.documentElement.classList;b.remove('no-js');if(!window.Promise||!window.sessionStorage||!!sessionStorage.getItem('muller.v2')){b.add('muller')}</script><link rel="dns-prefetch" href="https://assets.htmlacademy.org"><script async src="https://www.googletagmanager.com/gtag/js?id=G-MXPCRXM48C"></script><script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-MXPCRXM48C');
</script><script type="text/javascript">
(function(e,t){var n=e.amplitude||{_q:[],_iq:{}};var r=t.createElement("script")
;r.type="text/javascript"
;r.integrity="sha384-d/yhnowERvm+7eCU79T/bYjOiMmq4F11ElWYLmt0ktvYEVgqLDazh4+gW9CKMpYW"
;r.crossOrigin="anonymous";r.async=true
;r.src="https://cdn.amplitude.com/libs/amplitude-5.2.2-min.gz.js"
;r.onload=function(){if(!e.amplitude.runQueuedFunctions){
console.log("[Amplitude] Error: could not load SDK")}}
;var i=t.getElementsByTagName("script")[0];i.parentNode.insertBefore(r,i)
;function s(e,t){e.prototype[t]=function(){
this._q.push([t].concat(Array.prototype.slice.call(arguments,0)));return this}}
var o=function(){this._q=[];return this}
;var a=["add","append","clearAll","prepend","set","setOnce","unset"]
;for(var u=0;u<a.length;u++){s(o,a[u])}n.Identify=o;var c=function(){this._q=[]
;return this}
;var l=["setProductId","setQuantity","setPrice","setRevenueType","setEventProperties"]
;for(var p=0;p<l.length;p++){s(c,l[p])}n.Revenue=c
;var d=["init","logEvent","logRevenue","setUserId","setUserProperties","setOptOut","setVersionName","setDomain","setDeviceId","setGlobalUserProperties","identify","clearUserProperties","setGroup","logRevenueV2","regenerateDeviceId","groupIdentify","onInit","logEventWithTimestamp","logEventWithGroups","setSessionId","resetSessionId"]
;function v(e){function t(t){e[t]=function(){
e._q.push([t].concat(Array.prototype.slice.call(arguments,0)))}}
for(var n=0;n<d.length;n++){t(d[n])}}v(n);n.getInstance=function(e){
e=(!e||e.length===0?"$default_instance":e).toLowerCase()
;if(!n._iq.hasOwnProperty(e)){n._iq[e]={_q:[]};v(n._iq[e])}return n._iq[e]}
;e.amplitude=n})(window,document);
amplitude.getInstance().init("df11525b6880a3c5e2af14f9b6238408", null,{
includeUtm: true,
includeGclid: true,
includeReferrer: true,
deviceIdFromUrlParam: true
}, function (instance) {
window.amplitudeLoaded = true;
});
</script><link rel="stylesheet" href="https://assets.htmlacademy.org/css/core.v284.css"><link rel="stylesheet" href="https://assets.htmlacademy.org/css/text.v104.css"><link rel="stylesheet" href="https://assets.htmlacademy.org/css/profile.v236.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/cookies.css"><link rel="preload" as="script" href="https://assets.htmlacademy.org/js/general.v274.js"><title>Interactive courses — HTML Academy</title><meta name="description" content="Our online courses."><meta property="og:type" content="website"><meta property="og:site_name" content="HTML Academy"><meta name="twitter:url" property="og:url" content="https://htmlacademy.org/courses"><meta name="twitter:title" property="og:title" content="Interactive online courses HTML Academy"><meta name="twitter:description" property="og:description" content="Together we’ll learn how to work with real code, solve true-to-life problems, use cutting edge technologies. Minimum of boring theory and lots of practical tasks."><meta name="twitter:image" property="og:image" content="https://htmlacademy.org/og/courses.png"><meta name="twitter:card" content="summary_large_image"><meta name="theme-color" content="#2f358f"></head><body><header class="page-header"><div class="page-header__inner"><div class="page-header__top"><a class="page-header__logo" href="/"><img src="https://assets.htmlacademy.org/img/logo.v2.svg" width="104" height="36" alt="HTML Academy"></a><nav class="main-menu" aria-label="Main navigation" itemscope itemtype="http://schema.org/SiteNavigationElement"><ul class="main-menu__list main-menu__list--main main-menu__list--adaptive"><li class="main-menu__item main-menu__item--logo"><a class="main-menu__link" href="/" title="HTML Academy main page"><img src="https://assets.htmlacademy.org/img/logo.v2.svg" width="104" height="36" alt="HTML Academy"></a></li><li class="main-menu__item"><a class="main-menu__link" href="/courses" title="Courses"><span class="main-menu__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#course"></use></svg></span>Courses</a></li><li class="main-menu__item"><a class="main-menu__link" href="/tutorials" title="Tutorials"><span class="main-menu__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#intensive"></use></svg></span>Tutorials</a></li><li class="main-menu__item"><a class="main-menu__link" href="/blog" title="Blog"><span class="main-menu__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#hat"></use></svg></span>Blog</a></li></ul><button class="main-menu__trigger" type="button" title="Main menu"><span></span></button><div class="main-menu__dropdown" id="main-menu"><div class="main-menu__dropdown-inner"><ul class="main-menu__list main-menu__list--main"><li class="main-menu__item" itemprop="name"><a class="main-menu__link" href="/courses" itemprop="url"><span class="main-menu__icon" aria-hidden="true"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#course"></use></svg></span>Courses</a></li><li class="main-menu__item" itemprop="name"><a class="main-menu__link" href="/tutorials" itemprop="url"><span class="main-menu__icon" aria-hidden="true"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#intensive"></use></svg></span>Tutorials</a></li><li class="main-menu__item" itemprop="name"><a class="main-menu__link" href="/blog" itemprop="url"><span class="main-menu__icon" aria-hidden="true"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#hat"></use></svg></span>Blog</a></li></ul><ul class="main-menu__list main-menu__list--user main-menu__list--user-guest"><li class="main-menu__item" itemprop="name"><a class="main-menu__link" href="/signup?redirect_url=%2Fcourses" title="Sign up" data-modal="open" data-value="register" itemprop="url"><span class="main-menu__icon" aria-hidden="true"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#user"></use></svg></span>Sign up</a></li><li class="main-menu__item main-menu__item--login" itemprop="name"><a class="main-menu__link" href="/login?redirect_url=%2Fcourses" title="Log in" data-modal="open" data-value="login" itemprop="url"><span class="main-menu__icon" aria-hidden="true"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#login"></use></svg></span>Log in</a></li></ul></div></div></nav></div></div></header><style>
.module--featured {
position: relative;
grid-column: 2/span 2;
justify-self: end;
width: min-content;
color: white;
background: #2d2d44;
}
.module--featured .module__icon {
width: 500px;
height: 250px;
margin: -30px;
margin-bottom: 20px;
overflow: hidden;
}
.module--featured .module__icon img {
position: static;
margin-top: 0;
}
.module--featured .module__link .module__icon::before {
content: none !important;
}
.module--featured .new-label {
position: absolute;
top: 20px;
left: 20px;
z-index: 20;
padding: 4px 10px;
color: white;
background: #312783;
border-radius: 2px;
box-shadow: inset 0 0 1px #666;
}
.module--featured .module__title {
color: white;
}
.module--featured .module__description {
margin-bottom: 20px;
}
@media (max-width: 1051px) {
.module--featured {
padding: 20px;
}
.module--featured .module__icon {
margin: -20px;
margin-bottom: 20px;
}
}
@media (max-width: 769px) {
.module--featured {
width: auto;
}
.module--featured .module__icon {
width: calc(100% + 40px);
}
.module--featured .module__icon img {
width: 100%;
height: 250px;
object-fit: cover;
}
}
.module--featured .module__icon video {
width: 100%;
height: 100%;
margin: 0;
object-fit: cover;
object-position: 50% 0;
}
.module--featured .module__icon {
background-image: url("/img/web_animations/banner.jpg");
background-size: cover;
background-repeat: no-repeat;
}
.module--featured .module__link .module__icon::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom ,rgba(0,0,0,0.8) 10%,transparent 20%, transparent 80%,rgba(0,0,0,0.9));
}
</style><div class="page-content page-content--header"><nav class="secondary-nav secondary-nav--mini secondary-nav--full"><ul class="secondary-nav__list"><li class="secondary-nav__item secondary-nav__item--active"><a class="secondary-nav__item-link" href="/courses"><span class="secondary-nav__item-icon" aria-hidden="true"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#all-courses"></use></svg></span>All courses</a></li><li class="secondary-nav__item"><a class="secondary-nav__item-link" href="/tutorials"><span class="secondary-nav__item-icon" aria-hidden="true"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#all-courses"></use></svg></span>Interactive tutorials</a></li><li class="secondary-nav__item"><a class="secondary-nav__item-link" href="/courses/roadmap"><span class="secondary-nav__item-icon" aria-hidden="true"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#program"></use></svg></span>Roadmap</a></li></ul></nav><div class="page-content__inner"><div class="page-content_col page-content_col--left"><nav class="breadcrumbs" itemscope itemtype="http://schema.org/SiteNavigationElement"><ul class="breadcrumbs__list"><li class="breadcrumbs__item" itemprop="name"><a href="/" itemprop="url">Home</a></li></ul></nav><h1>Interactive courses</h1></div><div class="page-content_col page-content_col--right"><p>
Start
solving interactive tasks right now.
</p><a class="button button--green button--full-width" href="/continue">
Start learning
</a></div></div></div><div class="module-group-container"><div class="module-group"><div class="module-group__inner"><div class="module-group__left"><p class="module-group__type">Start</p><p class="module-group__info">If you haven’t heard anything about HTML, CSS, JavaScript — this is for you.</p></div><div class="module-group__right"><section class="module"><a class="module__link" href="/courses/intro-to-web-development"><div class="module__icon"><svg class=" module__icon-pie module__icon-pie--initial" width="100" height="100" stroke-dasharray="0 100" viewBox="0 0 31.83 31.83" role="presentation" aria-hidden="true"><circle r="15.915" cx="15.915" cy="15.915" stroke-width="31.83"/></svg><img src="/assets/courses/intro-to-web-development/icon.svg" width="100" height="100" alt=""></div></a><a class="module__title-link" href="/courses/intro-to-web-development"><h2 class="module__title ">Introduction to web development</h2></a><p class="module__description">Learn basics of core web technologies: HTML, CSS, JavaScript and PHP.</p><div class="module__bottom"><ul class="module__stats"><li><span class="module__num">3</span><span class="module__type">chapters</span></li><li><span class="module__num">43</span><span class="module__type">tasks</span></li></ul><a class="button button--green button--full-width" href="/continue/intro-to-web-development">
Start course
</a></div></section><section class="module module--featured"><span class="new-label">pro</span><a class="module__link" href="/animations"><div class="module__icon"><video src="/img/web_animations/illusion-2.mp4" width="720" height="405" preload autoplay loop muted playsinline></video></div></a><a class="module__title-link" href="/animations"><h2 class="module__title">Advanced Web Animations for Frontend Developers</h2></a><p class="module__description">Course for frontend engineers who want to build high-quality animations across CSS, JS, SVG, Canvas, WebGL, and Three.js — from micro-interactions to complex, performance-focused motion.</p><div class="module__bottom"><a class="button button--green button--full-width" href="/animations">Details</a></div></section></div></div></div><div class="module-group"><div class="module-group__inner"><div class="module-group__left"><p class="module-group__type">Beginner level</p><p class="module-group__info">If you a ready to dive in each technology deeper — this is for you.</p></div><div class="module-group__right"><section class="module"><a class="module__link" href="/courses/html-css-basics"><div class="module__icon"><svg class=" module__icon-pie module__icon-pie--initial" width="100" height="100" stroke-dasharray="0 100" viewBox="0 0 31.83 31.83" role="presentation" aria-hidden="true"><circle r="15.915" cx="15.915" cy="15.915" stroke-width="31.83"/></svg><img src="/assets/courses/html-css-basics/icon.svg" width="100" height="100" alt=""></div></a><a class="module__title-link" href="/courses/html-css-basics"><h2 class="module__title ">HTML and CSS basics</h2></a><p class="module__description">Learning markup and CSS syntax: from the simple text-level tags and CSS selectors to the typical page structure, cascade, and inheritance.</p><div class="module__bottom"><ul class="module__stats"><li><span class="module__num">5</span><span class="module__type">chapters</span></li><li><span class="module__num">83</span><span class="module__type">tasks</span></li></ul><a class="button button--green button--full-width" href="/continue/html-css-basics">
Start course
</a></div></section><section class="module"><a class="module__link" href="/courses/javascript-basics"><div class="module__icon"><svg class=" module__icon-pie module__icon-pie--initial" width="100" height="100" stroke-dasharray="0 100" viewBox="0 0 31.83 31.83" role="presentation" aria-hidden="true"><circle r="15.915" cx="15.915" cy="15.915" stroke-width="31.83"/></svg><img src="/assets/courses/javascript-basics/icon.svg" width="100" height="100" alt=""></div></a><a class="module__title-link" href="/courses/javascript-basics"><h2 class="module__title ">JavaScript basics</h2></a><p class="module__description">We'll study how JavaScript works in the browser and learn how to make web interfaces interactive.</p><div class="module__bottom"><ul class="module__stats"><li><span class="module__num">4</span><span class="module__type">chapters</span></li><li><span class="module__num">57</span><span class="module__type">tasks</span></li></ul><a class="button button--green button--full-width" href="/continue/javascript-basics">
Start course
</a></div></section><section class="module"><a class="module__link" href="/courses/php-basics"><div class="module__icon"><svg class=" module__icon-pie module__icon-pie--initial" width="100" height="100" stroke-dasharray="0 100" viewBox="0 0 31.83 31.83" role="presentation" aria-hidden="true"><circle r="15.915" cx="15.915" cy="15.915" stroke-width="31.83"/></svg><img src="/assets/courses/php-basics/icon.svg" width="100" height="100" alt=""></div></a><a class="module__title-link" href="/courses/php-basics"><h2 class="module__title ">PHP basics</h2></a><p class="module__description">We will add PHP to the page markup and start working with web scripts, data, and the addresses.</p><div class="module__bottom"><ul class="module__stats"><li><span class="module__num">4</span><span class="module__type">chapters</span></li><li><span class="module__num">59</span><span class="module__type">tasks</span></li></ul><a class="button button--green button--full-width" href="/continue/php-basics">
Start course
</a></div></section></div></div></div><div class="module-group"><div class="module-group__inner"><div class="module-group__left"><p class="module-group__type">Advanced level</p><p class="module-group__info">If you’re good at practical tasks then it’s time to raise your level higher.</p></div><div class="module-group__right"><section class="module"><a class="module__link" href="/courses/layout"><div class="module__icon"><svg class=" module__icon-pie module__icon-pie--initial" width="100" height="100" stroke-dasharray="0 100" viewBox="0 0 31.83 31.83" role="presentation" aria-hidden="true"><circle r="15.915" cx="15.915" cy="15.915" stroke-width="31.83"/></svg><img src="/assets/courses/layout/icon.svg" width="100" height="100" alt=""></div></a><a class="module__title-link" href="/courses/layout"><h2 class="module__title ">Creating a layout</h2></a><p class="module__description">Creating a layout is the process of arranging major blocks on a page. Simply put, we are going to learn how to create columns.</p><div class="module__bottom"><ul class="module__stats"><li><span class="module__num">3</span><span class="module__type">chapters</span></li><li><span class="module__num">80</span><span class="module__type">tasks</span></li></ul><a class="button button--green button--full-width" href="/continue/layout">
Start course
</a></div></section><section class="module"><a class="module__link" href="/courses/javascript-programming"><div class="module__icon"><svg class=" module__icon-pie module__icon-pie--initial" width="100" height="100" stroke-dasharray="0 100" viewBox="0 0 31.83 31.83" role="presentation" aria-hidden="true"><circle r="15.915" cx="15.915" cy="15.915" stroke-width="31.83"/></svg><img src="/assets/courses/javascript/icon.svg" width="100" height="100" alt=""></div></a><a class="module__title-link" href="/courses/javascript-programming"><h2 class="module__title ">JavaScript programming</h2></a><p class="module__description">We are studying the basic concepts of the language and using them in real projects.</p><div class="module__bottom"><ul class="module__stats"><li><span class="module__num">6</span><span class="module__type">chapters</span></li><li><span class="module__num">123</span><span class="module__type">tasks</span></li></ul><a class="button button--green button--full-width" href="/continue/javascript-programming">
Start course
</a></div></section><section class="module"><a class="module__link" href="/courses/javascript-browser"><div class="module__icon"><svg class=" module__icon-pie module__icon-pie--initial" width="100" height="100" stroke-dasharray="0 100" viewBox="0 0 31.83 31.83" role="presentation" aria-hidden="true"><circle r="15.915" cx="15.915" cy="15.915" stroke-width="31.83"/></svg><img src="/assets/courses/javascript-browser/icon.svg" width="100" height="100" alt=""></div></a><a class="module__title-link" href="/courses/javascript-browser"><h2 class="module__title ">Deep dive in JavaScript for browsers</h2></a><p class="module__description">We are going to delve into user interaction and techniques for revitalizing interfaces.</p><div class="module__bottom"><ul class="module__stats"><li><span class="module__num">3</span><span class="module__type">chapters</span></li><li><span class="module__num">61</span><span class="module__type">task</span></li></ul><a class="button button--green button--full-width" href="/continue/javascript-browser">
Start course
</a></div></section><section class="module"><a class="module__link" href="/courses/svg-basics"><div class="module__icon"><svg class=" module__icon-pie module__icon-pie--initial" width="100" height="100" stroke-dasharray="0 100" viewBox="0 0 31.83 31.83" role="presentation" aria-hidden="true"><circle r="15.915" cx="15.915" cy="15.915" stroke-width="31.83"/></svg><img src="/assets/courses/svg-basics/icon.svg" width="100" height="100" alt=""></div></a><a class="module__title-link" href="/courses/svg-basics"><h2 class="module__title ">SVG basics</h2></a><p class="module__description">Learning SVG, vector graphics format: basic primitives, positioning and sizing, fills and strokes.</p><div class="module__bottom"><ul class="module__stats"><li><span class="module__num">3</span><span class="module__type">chapters</span></li><li><span class="module__num">35</span><span class="module__type">tasks</span></li></ul><a class="button button--green button--full-width" href="/continue/svg-basics">
Start course
</a></div></section><section class="module"><a class="module__link" href="/courses/dynamic"><div class="module__icon"><svg class=" module__icon-pie module__icon-pie--initial" width="100" height="100" stroke-dasharray="0 100" viewBox="0 0 31.83 31.83" role="presentation" aria-hidden="true"><circle r="15.915" cx="15.915" cy="15.915" stroke-width="31.83"/></svg><img src="/assets/courses/dynamic/icon.svg" width="100" height="100" alt=""></div></a><a class="module__title-link" href="/courses/dynamic"><h2 class="module__title ">Dynamic effects</h2></a><p class="module__description">We animate the elements of the interface with the help of animation and transformations.</p><div class="module__bottom"><ul class="module__stats"><li><span class="module__num">3</span><span class="module__type">chapters</span></li><li><span class="module__num">89</span><span class="module__type">tasks</span></li></ul><a class="button button--green button--full-width" href="/continue/dynamic">
Start course
</a></div></section><section class="module"><a class="module__link" href="/courses/advanced-styling"><div class="module__icon"><svg class=" module__icon-pie module__icon-pie--initial" width="100" height="100" stroke-dasharray="0 100" viewBox="0 0 31.83 31.83" role="presentation" aria-hidden="true"><circle r="15.915" cx="15.915" cy="15.915" stroke-width="31.83"/></svg><img src="/assets/courses/advanced-styling/icon.svg" width="100" height="100" alt=""></div></a><a class="module__title-link" href="/courses/advanced-styling"><h2 class="module__title ">Advanced styling</h2></a><p class="module__description">Let's delve into some advanced features and learn about some important CSS mechanisms.</p><div class="module__bottom"><ul class="module__stats"><li><span class="module__num">6</span><span class="module__type">chapters</span></li><li><span class="module__num">114</span><span class="module__type">tasks</span></li></ul><a class="button button--green button--full-width" href="/continue/advanced-styling">
Start course
</a></div></section><section class="module"><a class="module__link" href="/courses/css-custom-properties"><div class="module__icon"><svg class=" module__icon-pie module__icon-pie--initial" width="100" height="100" stroke-dasharray="0 100" viewBox="0 0 31.83 31.83" role="presentation" aria-hidden="true"><circle r="15.915" cx="15.915" cy="15.915" stroke-width="31.83"/></svg><img src="/assets/courses/css-custom-properties/icon.svg" width="100" height="100" alt=""></div></a><a class="module__title-link" href="/courses/css-custom-properties"><h2 class="module__title ">CSS Custom Properties</h2></a><p class="module__description">A complete course on CSS Custom Properties with tons of hands-on practice. New course chapters are coming out as we go!</p><div class="module__bottom"><ul class="module__stats"><li><span class="module__num">1</span><span class="module__type">chapter</span></li></ul><a class="button button--green button--full-width" href="/continue/css-custom-properties">
Start course
</a></div></section><section class="module"><a class="module__link" href="/courses/sorting-algorithms"><div class="module__icon"><svg class=" module__icon-pie module__icon-pie--initial" width="100" height="100" stroke-dasharray="0 100" viewBox="0 0 31.83 31.83" role="presentation" aria-hidden="true"><circle r="15.915" cx="15.915" cy="15.915" stroke-width="31.83"/></svg><img src="/assets/courses/sorting-algorithms/icon.svg" width="100" height="100" alt=""></div></a><a class="module__title-link" href="/courses/sorting-algorithms"><h2 class="module__title ">Sorting Algorithms Made Visual</h2></a><p class="module__description">Algorithms might seem tough, but not in this course! We turn abstract sorting into clear, engaging animations so everything just clicks. Learn effortlessly by watching algorithms in action!</p><div class="module__bottom"><ul class="module__stats"><li><span class="module__num">1</span><span class="module__type">chapter</span></li></ul><a class="button button--green button--full-width" href="/continue/sorting-algorithms">
Start course
</a></div></section></div></div></div></div><footer class="page-footer page-footer--tiny"><div class="page-footer__inner"><p><a href="/docs/cookies">Cookies</a> ∙
<a href="/docs/privacy">Privacy</a> ∙
<a href="/docs/agreement">License Agreement</a> ∙
<a href="/docs/about">About</a> ∙
<a href="/contacts">Contacts</a> ∙
© HTML Academy OÜ, 2019−2026
</p><div class="page-footer__financial"><img src="https://assets.htmlacademy.org/img/visa-white.svg?cs=96e54ec8c587db9d4b1d8d328ffd87c2ebfd9555" alt="VISA" title="VISA" width="35" height="35"><img src="https://assets.htmlacademy.org/img/mastercard-horizontal.v2.svg" alt="Mastercard" title="Mastercard" width="35" height="35"></div></div></footer><div class="modal"><div class="modal__inner"><div class="modal__wrapper js-login hidden"><button class="modal__close icon-close" type="button" title="Close" data-modal="close"></button><h4 class="modal__header">Log in</h4><ul class="modal__social"><li class="modal__social-link modal__social-link--fb"><a href="/login/fb?redirect_url=%2Fcourses" rel="nofollow" title="Log in via Facebook"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#facebook"></use></svg></a></li><li class="modal__social-link modal__social-link--google"><a href="/login/google?redirect_url=%2Fcourses" rel="nofollow" title="Log in via Google"><svg height="30" width="30" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M457.732 216.625c2.628 14.041 4.063 28.743 4.063 44.098C461.796 380.688 381.481 466 260.204 466c-116.023 0-210-93.977-210-210s93.977-210 210-210c56.704 0 104.077 20.867 140.44 54.73l-59.204 59.197v-.135c-22.046-21.002-50-31.762-81.236-31.762-69.297 0-125.604 58.537-125.604 127.841 0 69.29 56.306 127.968 125.604 127.968 62.87 0 105.653-35.965 114.46-85.312h-114.46v-81.902h197.528z"/></svg></a></li></ul><div class="modal__or"><span>or</span></div><form class="modal__form form" action="/login?redirect_url=%2Fcourses" autocomplete="off" method="post" data-submit="o"><input type="hidden" name="csrf_name" value="csrf69aea6b0969ba"><input type="hidden" name="csrf_value" value="36d1dc9cc0ceace877dee5898c0368c0"><div class="form__group"><label class="sr-only" for="login-email">Email</label><input class="field field--text field--full-width" type="email" name="email" placeholder="Email" value="" id="login-email"></div><div class="form__group"><label class="sr-only" for="login-password">Password</label><input class="field field--text field--full-width ym-disable-keys" type="password" name="password" placeholder="Password" id="login-password"></div><input class="button button--full-width" type="submit" data-submit-text="Logging in…" value="Log in"></form><p class="modal__forgot-password"><a href="/recover" data-modal="open" data-value="recover">Forgot your password?</a></p><a class="modal__bottom-link" href="/signup" data-modal="open" data-value="register">Sign up</a></div><div class="modal__wrapper js-register hidden"><button class="modal__close icon-close" type="button" title="Close" data-modal="close"></button><h4 class="modal__header">Sign up</h4><ul class="modal__social"><li class="modal__social-link modal__social-link--fb"><a href="/login/fb?redirect_url=%2Fcourses" rel="nofollow" title="Log in via Facebook"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#facebook"></use></svg></a></li><li class="modal__social-link modal__social-link--google"><a href="/login/google?redirect_url=%2Fcourses" rel="nofollow" title="Log in via Google"><svg height="30" width="30" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M457.732 216.625c2.628 14.041 4.063 28.743 4.063 44.098C461.796 380.688 381.481 466 260.204 466c-116.023 0-210-93.977-210-210s93.977-210 210-210c56.704 0 104.077 20.867 140.44 54.73l-59.204 59.197v-.135c-22.046-21.002-50-31.762-81.236-31.762-69.297 0-125.604 58.537-125.604 127.841 0 69.29 56.306 127.968 125.604 127.968 62.87 0 105.653-35.965 114.46-85.312h-114.46v-81.902h197.528z"/></svg></a></li></ul><div class="modal__or"><span>or</span></div><form class="modal__form form" action="/signup?redirect_url=%2Fcourses" autocomplete="off" method="post"><input type="hidden" name="csrf_name" value="csrf69aea6b0969ba"><input type="hidden" name="csrf_value" value="36d1dc9cc0ceace877dee5898c0368c0"><div class="form__group"><label class="sr-only" for="email">
Email
<span class="required"><span class="sr-only">Required field</span><span class="required__star">*</span></span></label><div class="form__group-fields"><input class="field field--text field--full-width" type="email" name="email" value="" id="email" required placeholder="Email"></div></div><div class="form__group"><label class="sr-only" for="password">
Password
<span class="required"><span class="sr-only">Required field</span><span class="required__star">*</span></span></label><div class="form__group-fields"><input class="field field--text field--full-width" type="password" name="password" value="" id="password" required placeholder="Password"></div></div><div class="form__group"><label class="checkbox"><input class="checkbox__input" type="checkbox" name="agreement" value="1" required><span class="checkbox__text"><span>By signing up, you agree to our <a href="/docs/agreement" target="_blank">License Agreement</a> and <a href="/docs/privacy" target="_blank">Privacy Policy</a>.</span></span></label></div><input class="button button--full-width" type="submit" data-submit-text="Signing up…" value="Sign up"></form><a class="modal__bottom-link" href="/login?redirect_url=%2Fcourses" data-modal="open" data-value="login">Log in</a></div><div class="modal__wrapper modal__wrapper--no-btn-bottom js-recover hidden"><button class="modal__close icon-close" type="button" title="Close" data-modal="close"></button><h4 class="modal__header">Restore access</h4><p class="modal__text-accent">Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.</p><form class="modal__form form" action="/recover" autocomplete="off" method="post" data-submit="o"><input type="hidden" name="csrf_name" value="csrf69aea6b0969ba"><input type="hidden" name="csrf_value" value="36d1dc9cc0ceace877dee5898c0368c0"><div class="form__group"><label class="sr-only" for="recovery-email">Email</label><input class="field field--text field--full-width" type="email" name="email" placeholder="Email" value="" id="recovery-email"></div><script src='https://www.google.com/recaptcha/api.js'></script><div class="form__group"><div class="g-recaptcha" data-sitekey="6LetCTEqAAAAANROWtPzfC7Rfg9iIRiRt2k2FPn7"></div></div><input class="button button--full-width" type="submit" data-submit-text="Sending…" value="Send"></form><p class="modal__text">Forgot to connect your email to the profile? Email us and we’ll help.</p></div></div></div><div class="banner-bottom" id="cookies_disclaimer_container"><div class="banner-bottom__inner"><p>We are using cookies to gather information which will help you use our website most effectively. You can read about this <a href="/docs/cookies">here</a> or disable this feature if you want. By continuing to browse the site, you agree to our use of cookies.</p><button class="button button--green" type="button" id="cookies_disclaimer_button">Agree</button></div></div><script type="text/javascript">
(function (n) {
var c = document.getElementById('cookies_disclaimer_container');
var b = document.getElementById('cookies_disclaimer_button');
b.onclick = function() {
c.remove();
var d = new Date();
d.setTime(d.getTime() + 60 * 60* 24 * 365 * 1000);
document.cookie = n + "=1; path=/; expires=" + d.toUTCString();
};
})('hidden_cookies_disclaimer');
</script><script async src="https://assets.htmlacademy.org/js/general.v274.js" data-assets="https://assets.htmlacademy.org" data-require="modal,form,nav"></script></body></html>