Let's start by preparing the markup for the blog page, and we will start to understand what tags are used in the markup and what these tags are used for.
Start
Let's continue laying out the blog page, and let's learn how to correctly lay out the test content: paragraphs, headings, subheadings, lists and much more.
Start
Advanced
challenges
level
Let's finish marking up the blog pages, adding navigation links as well as figuring out the image formats.
Start
Let's start with the design of the blog pages and at the same time analyze the basic concepts within CSS, including rules, selectors, properties, values, inheritance, and cascading.
Start
Let's start with the design of the blog pages and at the same time analyze the basic concepts within CSS, including rules, selectors, properties, values, inheritance, and cascading.
Start
Finish the design of the blog pages, and learn how to design texts with CSS, including setting fonts, colors, indents, and sizes.
Start
Finish the design of the blog pages, and learn how to design texts with CSS, including setting fonts, colors, indents, and sizes.
Start
Final challenges will be available soon!
<!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>HTML and CSS basics course — HTML Academy</title><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"><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/htmlacademy.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%2Fhtml-css-basics" 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%2Fhtml-css-basics" 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><section class="train train--theory" data-lang="en"><header class="train-header"><div class="train-header__container"><div class="train-header__content"><nav class="breadcrumbs train-header__breadcrumbs" itemscope itemtype="http://schema.org/SiteNavigationElement"><ul class="breadcrumbs__list"><li class="breadcrumbs__item" itemprop="name"><a href="/" itemprop="url">Home</a></li><li class="breadcrumbs__item" itemprop="name"><a href="/courses" itemprop="url">Interactive courses</a></li></ul></nav><h1 class="train-header__title">HTML and CSS basics</h1><ul class="train-header__stats train-header__stats--theory"><li><span class="train-header__stat-num">5</span> chapters<span class="train-header__comma">, </span></li><li><span class="train-header__stat-num">83</span> tasks<span class="train-header__comma">, </span></li><li><span class="train-header__stat-num">6</span> challenges
</li></ul><ul class="train-header__stats train-header__stats--practice"><li><span class="train-header__stat-num">36</span> challenges
</li></ul><div class="train-header__text">Learning markup and CSS syntax: from the simple text-level tags and CSS selectors to the typical page structure, cascade, and inheritance.</div><p></p><a class="train-header__button button button--green button--large button--wide" href="/continue/html-css-basics">Start course</a></div><div class="train-header__col train-header__col--theory" data-content="theory"><span class="train-header__image"><img src="/assets/courses/html-css-basics/icon.svg" width="82" height="81" alt="HTML and CSS basics course"></span><h2 class="train-header__subtitle">Theory</h2><button class="train-header__on button" type="button" data-content="theory">Enable mode</button><p class="train-header__info">Tasks and challenges required for taking the course.</p><p class="train-header__stats"><span class="train-header__stat-num">
5</span> chapters<span class="train-header__comma">, </span><span class="train-header__stat-num">
83</span> tasks<span class="train-header__comma">, </span><span class="train-header__stat-num">6</span> challenges
</p></div><div class="train-header__col train-header__col--practice" data-content="practice"><span class="train-header__image"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#knuckle"></use></svg></span><h2 class="train-header__subtitle">Variable practice</h2><button class="train-header__on button" type="button" data-content="practice">Enable mode</button><p class="train-header__info">The method of solving problems with varying difficulty — Mastery Challenges — makes learning easier and helps build solid coding skills.</p><p class="train-header__info">Available only with <a class="link link--green" href="/pricing">subscription</a>.</p><p class="train-header__stats"><span class="train-header__stat-num">36</span> challenges
</p></div></div></header><section class="chapter" id="part13"><div class="chapter__container"><div class="chapter__controls"><button class="chapter__control chapter__control--current" type="button" data-toggle-part="left"><span>Theory</span><span class="chapter__control-num">0/18</span></button><button class="chapter__control" type="button" data-toggle-part="right"><span>Variable practice</span><span class="chapter__control-num">0/8</span></button></div><div class="chapter__wagon chapter__wagon--left chapter__display"><div class="chapter__col chapter__col--theory"><div class="chapter__progress chapter__progress--empty"><svg class="chapter__progress-pie" width="60" height="60" 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><span class="chapter__num">
0/18
</span></div><p class="chapter__stats"><span class="chapter__stat">
16 tasks
</span><span class="chapter__stat">2 challenges</span></p><button class="chapter__on button button--transparent" type="button">Show</button></div><div class="chapter__content"><div class="chapter__part chapter__part--theory"><div class="chapter__wrap"><div class="chapter__wrap-left"><div class="chapter__title-wrap"><div class="chapter__title-image"><img src="/assets/courses/13/icon.svg" width="66" height="50" alt=""></div><div><h2 class="chapter__title"><a href="/courses/html-css-basics/html-document-structure"><span>Chapter 1:</span> HTML document structure</a></h2></div></div><p class="chapter__text">Let's start by preparing the markup for the blog page, and we will start to understand what tags are used in the markup and what these tags are used for.</p><a class="button" href="/continue/html-css-basics/html-document-structure">Start</a></div></div></div></div></div><div class="chapter__wagon chapter__wagon--right"><div class="chapter__col chapter__col--practice"><p class="chapter__stats"><span class="chapter__stat">
8 challenges
</span></p><button class="chapter__on button button--transparent" type="button">Show</button></div><div class="chapter__content"><div class="chapter__part chapter__part--practice"><div class="chapter__title-wrap"><div class="chapter__title-image"><img src="/assets/courses/13/icon.svg" width="66" height="50" alt=""></div><div><h2 class="chapter__title"><a href="/courses/html-css-basics/html-document-structure/practice"><span>Chapter 1:</span> HTML document structure</a></h2></div></div><div class="chapter-tasks chapter-tasks--min"><div class="chapter-tasks__group"><span class="chapter-tasks__part">
Basic
challenges
level
</span><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/html-document-structure/lost-in-translation"><span class="chapter-tasks__icon"></span><span class="chapter-tasks__title">Lost in Translation</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/html-document-structure/92-challenge"><span class="chapter-tasks__icon"></span><span class="chapter-tasks__title">Document structure, Mastery Challenge 1</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/html-document-structure/93-challenge"><span class="chapter-tasks__icon"></span><span class="chapter-tasks__title">Document structure, Mastery Challenge 2</span></a></div></div><div class="chapter-tasks__group"><span class="chapter-tasks__part">
Medium
challenges
level
</span><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/html-document-structure/mark-up-webpage"><span class="chapter-tasks__icon"></span><span class="chapter-tasks__title">Challenge: Mark up a webpage</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/html-document-structure/diving-deeper"><span class="chapter-tasks__icon"></span><span class="chapter-tasks__title">Diving Deeper</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/html-document-structure/seo-improvements"><span class="chapter-tasks__icon"></span><span class="chapter-tasks__title">SEO improvements</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/html-document-structure/94-challenge"><span class="chapter-tasks__icon"></span><span class="chapter-tasks__title">Document structure, Mastery Challenge 3</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/html-document-structure/95-challenge"><span class="chapter-tasks__icon"></span><span class="chapter-tasks__title">Document structure, Mastery Challenge 4</span></a></div></div></div></div></div></div></div></section><section class="chapter" id="part14"><div class="chapter__container"><div class="chapter__controls"><button class="chapter__control chapter__control--current" type="button" data-toggle-part="left"><span>Theory</span><span class="chapter__control-num">0/20</span></button><button class="chapter__control" type="button" data-toggle-part="right"><span>Variable practice</span><span class="chapter__control-num">0/20</span></button></div><div class="chapter__wagon chapter__wagon--left chapter__display"><div class="chapter__col chapter__col--theory"><div class="chapter__progress chapter__progress--empty"><svg class="chapter__progress-pie" width="60" height="60" 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><span class="chapter__num">
0/20
</span></div><p class="chapter__stats"><span class="chapter__stat">
19 tasks
</span><span class="chapter__stat">1 challenge</span></p><button class="chapter__on button button--transparent" type="button">Show</button></div><div class="chapter__content"><div class="chapter__part chapter__part--theory"><div class="chapter__wrap"><div class="chapter__wrap-left"><div class="chapter__title-wrap"><div class="chapter__title-image"><img src="/assets/courses/14/icon.svg" width="66" height="50" alt=""></div><div><h2 class="chapter__title"><a href="/courses/html-css-basics/text-markup"><span>Chapter 2:</span> Text markup</a></h2></div></div><p class="chapter__text">Let's continue laying out the blog page, and let's learn how to correctly lay out the test content: paragraphs, headings, subheadings, lists and much more.</p><a class="button" href="/continue/html-css-basics/text-markup">Start</a></div></div></div></div></div><div class="chapter__wagon chapter__wagon--right"><div class="chapter__col chapter__col--practice"><p class="chapter__stats"><span class="chapter__stat">
20 challenges
</span></p><button class="chapter__on button button--transparent" type="button">Show</button></div><div class="chapter__content"><div class="chapter__part chapter__part--practice"><div class="chapter__title-wrap"><div class="chapter__title-image"><img src="/assets/courses/14/icon.svg" width="66" height="50" alt=""></div><div><h2 class="chapter__title"><a href="/courses/html-css-basics/text-markup/practice"><span>Chapter 2:</span> Text markup</a></h2></div></div><div class="chapter-tasks chapter-tasks--min"><div class="chapter-tasks__group"><span class="chapter-tasks__part">
Basic
challenges
level
</span><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/text-markup/artwork"><span class="chapter-tasks__icon"></span><span class="chapter-tasks__title">Artwork</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/text-markup/61-challenge"><span class="chapter-tasks__icon"></span><span class="chapter-tasks__title">Text Markup, Mastery Challenge 1</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/text-markup/62-challenge"><span class="chapter-tasks__icon"></span><span class="chapter-tasks__title">Text Markup, Mastery Challenge 2</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/text-markup/63-challenge"><span class="chapter-tasks__icon"></span><span class="chapter-tasks__title">Text Markup, Mastery Challenge 3</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/text-markup/64-challenge"><span class="chapter-tasks__icon"></span><span class="chapter-tasks__title">Text Markup, Mastery Challenge 4</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/text-markup/65-challenge"><span class="chapter-tasks__icon"></span><span class="chapter-tasks__title">Text Markup, Mastery Challenge 5</span></a></div></div><div class="chapter-tasks__group"><span class="chapter-tasks__part">
Medium
challenges
level
</span><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/text-markup/recipe-markup"><span class="chapter-tasks__icon"></span><span class="chapter-tasks__title">Marking up a recipe</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/text-markup/73-challenge"><span class="chapter-tasks__icon"></span><span class="chapter-tasks__title">Text Markup, Mastery Challenge 8</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/text-markup/75-challenge"><span class="chapter-tasks__icon"></span><span class="chapter-tasks__title">Text Markup, Mastery Challenge 10</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/text-markup/74-challenge"><span class="chapter-tasks__icon"></span><span class="chapter-tasks__title">Text Markup, Mastery Challenge 9</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/text-markup/71-challenge"><span class="chapter-tasks__icon"></span><span class="chapter-tasks__title">Text Markup, Mastery Challenge 6</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/text-markup/72-challenge"><span class="chapter-tasks__icon"></span><span class="chapter-tasks__title">Text Markup, Mastery Challenge 7</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/text-markup/shopping-list"><span class="chapter-tasks__icon"></span><span class="chapter-tasks__title">Multi-level shopping list</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/text-markup/strange-formula"><span class="chapter-tasks__icon"></span><span class="chapter-tasks__title">Strange formula</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/text-markup/eternal-revisions"><span class="chapter-tasks__icon"></span><span class="chapter-tasks__title">Eternal revisions</span></a></div></div><div class="chapter-tasks__group"><span class="chapter-tasks__part">
Advanced
challenges
level
</span><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/text-markup/81-challenge"><span class="chapter-tasks__icon"></span><span class="chapter-tasks__title">Text Markup, Hardcore Mastery Challenge 1</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/text-markup/82-challenge"><span class="chapter-tasks__icon"></span><span class="chapter-tasks__title">Text Markup, Hardcore Mastery Challenge 2</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/text-markup/83-challenge"><span class="chapter-tasks__icon"></span><span class="chapter-tasks__title">Text Markup, Hardcore Mastery Challenge 3</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/text-markup/84-challenge"><span class="chapter-tasks__icon"></span><span class="chapter-tasks__title">Text Markup, Hardcore Mastery Challenge 4</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/text-markup/85-challenge"><span class="chapter-tasks__icon"></span><span class="chapter-tasks__title">Text Markup, Hardcore Mastery Challenge 5</span></a></div></div></div></div></div></div></div></section><section class="chapter" id="part15"><div class="chapter__container"><div class="chapter__controls"><button class="chapter__control chapter__control--current" type="button" data-toggle-part="left"><span>Theory</span><span class="chapter__control-num">0/16</span></button><button class="chapter__control" type="button" data-toggle-part="right"><span>Variable practice</span><span class="chapter__control-num">0/8</span></button></div><div class="chapter__wagon chapter__wagon--left chapter__display"><div class="chapter__col chapter__col--theory"><div class="chapter__progress chapter__progress--empty"><svg class="chapter__progress-pie" width="60" height="60" 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><span class="chapter__num">
0/16
</span></div><p class="chapter__stats"><span class="chapter__stat">
15 tasks
</span><span class="chapter__stat">1 challenge</span></p><button class="chapter__on button button--transparent" type="button">Show</button></div><div class="chapter__content"><div class="chapter__part chapter__part--theory"><div class="chapter__wrap"><div class="chapter__wrap-left"><div class="chapter__title-wrap"><div class="chapter__title-image"><img src="/assets/courses/15/icon.svg" width="66" height="50" alt=""></div><div><h2 class="chapter__title"><a href="/courses/html-css-basics/links-and-images"><span>Chapter 3:</span> Links and images</a></h2></div></div><p class="chapter__text">Let's finish marking up the blog pages, adding navigation links as well as figuring out the image formats.</p><a class="button" href="/continue/html-css-basics/links-and-images">Start</a></div></div></div></div></div><div class="chapter__wagon chapter__wagon--right"><div class="chapter__col chapter__col--practice"><p class="chapter__stats"><span class="chapter__stat">
8 challenges
</span></p><button class="chapter__on button button--transparent" type="button">Show</button></div><div class="chapter__content"><div class="chapter__part chapter__part--practice"><div class="chapter__title-wrap"><div class="chapter__title-image"><img src="/assets/courses/15/icon.svg" width="66" height="50" alt=""></div><div><h2 class="chapter__title"><a href="/courses/html-css-basics/links-and-images/practice"><span>Chapter 3:</span> Links and images</a></h2></div></div><div class="chapter-tasks chapter-tasks--min"><div class="chapter-tasks__group"><span class="chapter-tasks__part">
Basic
challenges
level
</span><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/links-and-images/51-challenge"><span class="chapter-tasks__icon"></span><span class="chapter-tasks__title">Links and images, Mastery Challenge 1</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/links-and-images/52-challenge"><span class="chapter-tasks__icon"></span><span class="chapter-tasks__title">Links and images, Mastery Challenge 2</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/links-and-images/53-challenge"><span class="chapter-tasks__icon"></span><span class="chapter-tasks__title">Links and images, Mastery Challenge 3</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/links-and-images/54-challenge"><span class="chapter-tasks__icon"></span><span class="chapter-tasks__title">Links and images, Mastery Challenge 4</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/links-and-images/55-challenge"><span class="chapter-tasks__icon"></span><span class="chapter-tasks__title">Links and images, Mastery Challenge 5</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/links-and-images/61-challenge"><span class="chapter-tasks__icon"></span><span class="chapter-tasks__title">Links and images, Mastery Challenge 6</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/links-and-images/62-challenge"><span class="chapter-tasks__icon"></span><span class="chapter-tasks__title">Links and images, Mastery Challenge 7</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/links-and-images/63-challenge"><span class="chapter-tasks__icon"></span><span class="chapter-tasks__title">Links and images, Mastery Challenge 8</span></a></div></div></div></div></div></div></div></section><section class="chapter" id="part16"><div class="chapter__container"><div class="chapter__wagon chapter__wagon--left chapter__display"><div class="chapter__col chapter__col--theory"><div class="chapter__progress chapter__progress--empty"><svg class="chapter__progress-pie" width="60" height="60" 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><span class="chapter__num">
0/16
</span></div><p class="chapter__stats"><span class="chapter__stat">
15 tasks
</span><span class="chapter__stat">1 challenge</span></p></div><div class="chapter__content"><div class="chapter__part chapter__part--theory"><div class="chapter__wrap"><div class="chapter__wrap-left"><div class="chapter__title-wrap"><div class="chapter__title-image"><img src="/assets/courses/16/icon.svg" width="66" height="50" alt=""></div><div><h2 class="chapter__title"><a href="/courses/html-css-basics/css-essentials"><span>Chapter 4:</span> CSS essentials</a></h2></div></div><p class="chapter__text">Let's start with the design of the blog pages and at the same time analyze the basic concepts within CSS, including rules, selectors, properties, values, inheritance, and cascading.</p><a class="button" href="/continue/html-css-basics/css-essentials">Start</a></div></div></div></div></div><div class="chapter__wagon chapter__wagon--right"><div class="chapter__content"><div class="chapter__part chapter__part--practice"><div class="chapter__title-wrap"><div class="chapter__title-image"><img src="/assets/courses/16/icon.svg" width="66" height="50" alt=""></div><div><h2 class="chapter__title"><a href="/courses/html-css-basics/css-essentials"><span>Chapter 4:</span> CSS essentials</a></h2></div></div><p class="chapter__text">Let's start with the design of the blog pages and at the same time analyze the basic concepts within CSS, including rules, selectors, properties, values, inheritance, and cascading.</p><a class="button" href="/continue/html-css-basics/css-essentials">Start</a></div></div></div></section><section class="chapter chapter--without-border" id="part17"><div class="chapter__container"><div class="chapter__wagon chapter__wagon--left chapter__display"><div class="chapter__col chapter__col--theory"><div class="chapter__progress chapter__progress--empty"><svg class="chapter__progress-pie" width="60" height="60" 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><span class="chapter__num">
0/19
</span></div><p class="chapter__stats"><span class="chapter__stat">
18 tasks
</span><span class="chapter__stat">1 challenge</span></p></div><div class="chapter__content"><div class="chapter__part chapter__part--theory"><div class="chapter__wrap"><div class="chapter__wrap-left"><div class="chapter__title-wrap"><div class="chapter__title-image"><img src="/assets/courses/17/icon.svg" width="66" height="50" alt=""></div><div><h2 class="chapter__title"><a href="/courses/html-css-basics/typography"><span>Chapter 5:</span> Typography</a></h2></div></div><p class="chapter__text">Finish the design of the blog pages, and learn how to design texts with CSS, including setting fonts, colors, indents, and sizes.</p><a class="button" href="/continue/html-css-basics/typography">Start</a></div></div></div></div></div><div class="chapter__wagon chapter__wagon--right"><div class="chapter__content"><div class="chapter__part chapter__part--practice"><div class="chapter__title-wrap"><div class="chapter__title-image"><img src="/assets/courses/17/icon.svg" width="66" height="50" alt=""></div><div><h2 class="chapter__title"><a href="/courses/html-css-basics/typography"><span>Chapter 5:</span> Typography</a></h2></div></div><p class="chapter__text">Finish the design of the blog pages, and learn how to design texts with CSS, including setting fonts, colors, indents, and sizes.</p><a class="button" href="/continue/html-css-basics/typography">Start</a></div></div></div></section><section class="chapter chapter--final chapter--prefinal"><div class="chapter__container"><div class="chapter__content"><div class="chapter__wrap"><div class="chapter__wrap-left"><h2 class="chapter__title">Final challenges will be available soon!</h2></div></div></div></div></section></section><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%2Fhtml-css-basics" 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%2Fhtml-css-basics" 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%2Fhtml-css-basics" autocomplete="off" method="post" data-submit="o"><input type="hidden" name="csrf_name" value="csrf69aed477aa507"><input type="hidden" name="csrf_value" value="0a7c47c8d02b81f4d95f5b09b059025b"><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%2Fhtml-css-basics" 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%2Fhtml-css-basics" 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%2Fhtml-css-basics" autocomplete="off" method="post"><input type="hidden" name="csrf_name" value="csrf69aed477aa507"><input type="hidden" name="csrf_value" value="0a7c47c8d02b81f4d95f5b09b059025b"><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%2Fhtml-css-basics" 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="csrf69aed477aa507"><input type="hidden" name="csrf_value" value="0a7c47c8d02b81f4d95f5b09b059025b"><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 class="modal__wrapper js-course-preorder hidden"><button class="modal__close icon-close" type="button" title="Close" data-modal="close"></button><h4 class="modal__header">We are sorry</h4><div class="text-center"><p class="modal__description">This course is not available for sale yet.</p><p class="modal__description">You can subscribe to our mailing list and we will let you know when the course is published.</p><button class="button button--green" style="margin-top: 10px" data-modal="close" onclick="amplitude.getInstance().logEvent('exp_course_subscribe_clicked', {'course_id': 3 })">Let me know</button></div></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><script src="https://assets.htmlacademy.org/js/train.v167.js"></script></body></html>