0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p>1</p>
1
<p>1</p>
2
<a>Intro</a><p>The fundamentals of modern layout course covers the nuts and bolts for learning HTML and CSS. In this lesson, we'll look over some of the topics covered in the course and how you can put this new knowledge into practice.</p>
2
<a>Intro</a><p>The fundamentals of modern layout course covers the nuts and bolts for learning HTML and CSS. In this lesson, we'll look over some of the topics covered in the course and how you can put this new knowledge into practice.</p>
3
<p>2</p>
3
<p>2</p>
4
<a>Intro to HTML</a><p>Learn how to design HTML from scratch. We'll talk about the role of attributes and study how to define HTML tags.</p>
4
<a>Intro to HTML</a><p>Learn how to design HTML from scratch. We'll talk about the role of attributes and study how to define HTML tags.</p>
5
<p>3</p>
5
<p>3</p>
6
<a>Box model</a><p>Which elements are responsible for page layouts, and which ones help with styling or adding functional elements to the page? Discover block and inline HTML elements and how you can influence the width of elements.</p>
6
<a>Box model</a><p>Which elements are responsible for page layouts, and which ones help with styling or adding functional elements to the page? Discover block and inline HTML elements and how you can influence the width of elements.</p>
7
<p>4</p>
7
<p>4</p>
8
<a>Semantic HTML</a><p>The main goal of any HTML layout is to convey the context of the blocks on the page. In this lesson, we'll look at the semantic capabilities of the latest HTML5 standard and learn about accessibility on the web.</p>
8
<a>Semantic HTML</a><p>The main goal of any HTML layout is to convey the context of the blocks on the page. In this lesson, we'll look at the semantic capabilities of the latest HTML5 standard and learn about accessibility on the web.</p>
9
<p>5</p>
9
<p>5</p>
10
<a>Basic structure of an HTML document</a><p>Every HTML document has a basic structure made up of tags and special elements. The browser needs them in order to properly display information. In this lesson, we'll look at each part of this structure.</p>
10
<a>Basic structure of an HTML document</a><p>Every HTML document has a basic structure made up of tags and special elements. The browser needs them in order to properly display information. In this lesson, we'll look at each part of this structure.</p>
11
<p>6</p>
11
<p>6</p>
12
<a>CSS fundamentals</a><p>The CSS language was created to manage the visuals of webpages. Explore the basic features of stylesheets and learn to use it alongside HTML. Learn to link CSS files and discover the basic types of selectors.</p>
12
<a>CSS fundamentals</a><p>The CSS language was created to manage the visuals of webpages. Explore the basic features of stylesheets and learn to use it alongside HTML. Learn to link CSS files and discover the basic types of selectors.</p>
13
<p>7</p>
13
<p>7</p>
14
<a>CSS Cascading</a><p>What is cascading, and how does it work in CSS? This lesson focuses on selector precedence, and how to use selectors in your projects.</p>
14
<a>CSS Cascading</a><p>What is cascading, and how does it work in CSS? This lesson focuses on selector precedence, and how to use selectors in your projects.</p>
15
<p>8</p>
15
<p>8</p>
16
<a>Chrome DevTools</a><p>When designing a website, it's important that you find errors quickly and understand how to convert the block you need properly. Previously, most of this was done manually, but modern browsers now have a web inspector function. We'll look at the capabilities of one of them - Chrome DevTools.</p>
16
<a>Chrome DevTools</a><p>When designing a website, it's important that you find errors quickly and understand how to convert the block you need properly. Previously, most of this was done manually, but modern browsers now have a web inspector function. We'll look at the capabilities of one of them - Chrome DevTools.</p>
17
<p>9</p>
17
<p>9</p>
18
<a>Code editors</a><p>If you want to save the results of your work, you'll need a code editor. In this lesson, we'll look at how to install Visual Studio Code. This is a powerful tool that can be used not only for designing layouts, but also for coding in any programming language.</p>
18
<a>Code editors</a><p>If you want to save the results of your work, you'll need a code editor. In this lesson, we'll look at how to install Visual Studio Code. This is a powerful tool that can be used not only for designing layouts, but also for coding in any programming language.</p>
19
<p>10</p>
19
<p>10</p>
20
<a>Emmet</a><p>We'll check out one of the most useful plugins for HTML/CSS developer - Emmet. It can speed up HTML markup and eliminate most of the routine work.</p>
20
<a>Emmet</a><p>We'll check out one of the most useful plugins for HTML/CSS developer - Emmet. It can speed up HTML markup and eliminate most of the routine work.</p>
21
<p>11</p>
21
<p>11</p>
22
<a>Publication on the Internet</a><p>If you want to upload your project to the Internet, you'll need to use a hosting service - a special server that will store files and provide access to them via domain name. In this tutorial, we'll look at GitHub, a free hosting service.</p>
22
<a>Publication on the Internet</a><p>If you want to upload your project to the Internet, you'll need to use a hosting service - a special server that will store files and provide access to them via domain name. In this tutorial, we'll look at GitHub, a free hosting service.</p>
23
<p>12</p>
23
<p>12</p>
24
<a>Graphic editors</a><p>There are several major editors on the market. Some of them are designed for one operating system only, others can be installed on any of them. In this unit, we'll look at the HTML/CSS developer's basic steps when working with Figma, an online graphic editor.</p>
24
<a>Graphic editors</a><p>There are several major editors on the market. Some of them are designed for one operating system only, others can be installed on any of them. In this unit, we'll look at the HTML/CSS developer's basic steps when working with Figma, an online graphic editor.</p>