30 added
34 removed
Original
2026-01-01
Modified
2026-02-21
1
-
<p>1</p>
1
+
<p>Responsive Page Design</p>
2
-
<a>Intro</a><p>Learn about the course topics and goals. Get to know the lesson structure and features</p>
2
+
<p>CSS</p>
3
-
<p>2</p>
3
+
<p>Flexbox</p>
4
-
<a>Box model and CSS</a><p>Recall the box model and the properties that affect the element size. Study the margin, padding, and border properties and learn how to manage a box model using the box-sizing property</p>
4
+
<p>Grid</p>
5
-
<p>3</p>
5
+
<p>Media Queries</p>
6
-
<a>Text styles</a><p>Get acquainted with the main styles used for text design</p>
6
+
<p>Skill in creating responsive interfaces for building convenient, functional solutions across a wide range of devices</p>
7
-
<p>4</p>
7
+
<h2>Learning syllabus</h2>
8
-
<a>Working with fonts</a><p>Learn how to connect and select fonts on the page. Learn how to control the size, formatting and spacing within the text. Examine the generalized font property</p>
8
+
<p>Element Positioning</p>
9
-
<p>5</p>
9
+
<p>Types of element positioning, floating elements, element stacking</p>
10
-
<a>Lists</a><p>Explore the types of lists in HTML and learn how to style them</p>
10
+
<p>Grid and Flex</p>
11
-
<p>6</p>
11
+
<p>Flex container, aligning elements along axes, Flex item properties, placing elements in a grid</p>
12
-
<a>Columns</a><p>Get to know CSS Multi-column Layout and where to use it</p>
12
+
<p>Website Responsiveness</p>
13
-
<p>7</p>
13
+
<p>Checking site responsiveness, viewport, flexible elements, media queries</p>
14
-
<a>Units</a><p>Explore the measurement units available in CSS and their relation to each other</p>
14
+
<h2>Projects</h2>
15
-
<p>8</p>
15
+
<p>"Music Box" website</p>
16
-
<a>Media elements</a><p>Learn how to add media elements to a page. Examine ways to add images, video, and audio</p>
16
+
<p>In the second project, you will create two pages for the "Music Box" website. This project is a continuation of the first one and will involve using OOCSS and Atomic CSS methodologies for layout creation. In addition, you will apply the skills you learned in the Adaptivity and SASS courses. You will need to implement an adaptive layout on your own. The Figma service will allow you to work directly with the layout file in the project.</p>
17
-
<p>9</p>
17
+
<h2>How learning is organised</h2>
18
-
<a>Tables</a><p>Learn table markup and its semantics</p>
18
+
<p>You learn the theory in a convenient text format - easy to read even from your phone. Live examples help you immediately understand how everything works in practice. The material is organised in such a way that you move step by step from simple to complex without missing important details</p>
19
-
<p>10</p>
19
+
<p>Subscription 3,900 ₽/month</p>
20
-
<a>Forms</a><p>Learn to create the cornerstone website element: form. Explore the standard elements of data input and form submission</p>
20
+
<p>The subscription gives access to all courses in the "subscription" catalog. Cancel anytime. Company payments are available.</p>
21
-
<p>11</p>
21
+
<p><a>Subscribe →</a></p>
22
-
<a>Selectors</a><p>Study more complex second- and third-level selectors according to the W3C specification</p>
22
+
<ul><li><p>50+ courses</p>
23
-
<p>12</p>
23
+
</li>
24
-
<a>Pseudo-classes</a><p>Learn about styling element events and styling by element's location. Discover how to use pseudo-classes</p>
24
+
<li><p>Lifetime access to theory</p>
25
-
<p>13</p>
25
+
</li>
26
-
<a>Pseudo-elements</a><p>Get to know pseudo-elements and learn how to generate new content via CSS</p>
26
+
<li><p>Learn in parallel</p>
27
-
<p>14</p>
27
+
</li>
28
-
<a>Overflow</a><p>Explore how the overflow property works and how to hide content inside blocks. Learn about the text-overflow property</p>
28
+
<li><p>Learning with an AI assistant</p>
29
-
<p>15</p>
29
+
</li>
30
-
<a>CSS Variables</a><p>Learn about CSS variables, their application and scope</p>
30
+
</ul>
31
-
<p>16</p>
32
-
<a>Background</a><p>Explore the possibilities for setting and managing the page background using the relevant property. Learn how to position background images and adjust their behavior</p>
33
-
<p>17</p>
34
-
<a>Gradients</a><p>There are other ways besides a monochrome background or image to style a block. To create a background, artists and designers frequently use gradients - smooth transitions from one color to another. In this lesson, we will learn how to make linear and radial gradients. We'll examine how to make clear color transitions using gradients and other techniques. We'll also learn about the color wheel and how to use it to find gradient color schemes.</p>