Freshcode-Frontend/index.html at main · seesmof/Freshcode-Frontend · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/styles/styles.css" />
    <link rel="stylesheet" href="/styles/main-styles.css" />
    <link rel="stylesheet" href="/styles/utility-classes.css" />
    <title>Main Page</title>
  </head>
  <body>
    <div class="breadcrumbers">
      <a href="/index.html">Home</a>
    </div>

    <h1>Main Page</h1>
    <p class="paragraph">
      This is an example text to just demonstrate the work of the Paragraph tag
    </p>
    <p>Hello, <strong>world</strong>!</p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis maiores
      quis dicta a doloribus officiis incidunt voluptas iste saepe rerum
      obcaecati eligendi, sint est voluptatibus recusandae dolores maxime
      eveniet at!
    </p>

    <h2>Important Notes</h2>
    <ul>
      <div class="date">
        <p><em class="date">06.04.2023</em></p>
        <p><a href="/day-1/day-1.html">Day One Page</a></p>
      </div>
      <li>
        Elements in a head section are the ones that don't actually appear on
        the page, but they are still important
      </li>
      <li>
        Elements in a body section are the ones that our page will actually
        render
      </li>
      <li>
        Live Server is a useful extension when we have a client-server
        interaction, meaning when we have some JavaScript on our site.
        <em>However</em>, it lags pretty oftenly, so I use this extension,
        called <strong>Live Preview</strong>, much better and opens right in the
        VS Code.
      </li>
      <li>
        In HTML there are also headings, exactly six of them: h1, h2, h3, h4,
        h5, h6
      </li>
      <li>
        Headings are useful not only for the looks, but also for a browser to
        identify the content of our website. That kind of touches on the
        semantic concept that we touched on briefly and will explore in more
        detail later. It all is for the meaning and CSS is for the looks.
      </li>
      <li>
        When we work with an instrument everyday, we unintentionally learn it.
        Exact same thing with any programming language or whatever. We don't
        need to learn each tag there is, we just wanna get familiar with the
        general structure.
      </li>
      <li>
        HTML Periodic Table is a useful table with all the most useful tags and
        their info.
      </li>
      <li>
        A bit more about tags, the most important ones we will memorise pretty
        quickly
      </li>
      <li>
        In tags there are also additional properties. Those are called
        <strong>attributes</strong>. It is a certain information about a
        particular element.
      </li>
      <li title="Attributes are cool!">
        <em>title</em> attribute is a pop-up on hover that outputs some text.
      </li>
      <li>
        Attributes can be global, like <em>title</em>, <em>class</em>, etc.
      </li>
      <li>
        There are also boolean attributes. Those are the ones like
        <em>disabled</em>, they don't need to have a value, so you just add them
        and call it a day.
        <button
          disabled
          style="
            background-color: #212121;
            color: #eee;
            border: 1.5px solid #ccc;
            border-radius: 0.4rem;
            padding: 0.4rem 1rem;
            margin: 1rem 0 0 0;
            text-decoration: line-through;
            display: block;
            font-weight: bold;
          "
        >
          Doesn't work
        </button>
      </li>
      <li>Some of the more popular boolean attributes</li>
      <li>We somehow jumped right onto the forms and input tag, but okay :D</li>
      <li>
        Input tag is a tag that is a prominent part of all forms

        <input
          placeholder="Enter something..."
          type="text"
          style="
            display: block;
            background-color: #212121;
            color: #eee;
            border: 1.5px solid #ccc;
            border-radius: 0.4rem;
            padding: 0.4rem 1rem 0.4rem 0.7rem;
            margin: 1rem 0;
          "
        />
        <div class="test-checkbox-container">
          <input type="checkbox" id="test-checkbox" />
          <label for="test-checkbox">This is a checkbox</label>
        </div>
      </li>
      <li>
        <em>checked</em> attribute works only on checkboxes and radio buttons.
        Means that it is checked by default. Useful for first buttons in a form.
      </li>
      <li>So, gotta look into forms already. Alright!</li>
      <li>
        <em>name</em> attribute for radio buttons associate them with one input
        sort of.
      </li>
      <li>In head element there can be meta tags.</li>
      <li>
        One of the useful and even essential meta tags in a head is charset.
        There we specify our encoding, which is usually UTF-8 or unicode, which
        represents all or almost all the written symbols out there.
      </li>
      <li>HTML tag can and should always take lang attribute.</li>
      <li>Now we're looking at Emmet plugin, pretty cool one.</li>
      <li>Check out aria attributes. Those are for accessibility purposes.</li>

      <h3 class="recap">Recap</h3>
      <li>
        Today we learned things like: DOCTYPE, html in an of itself, tags,
        attributes
      </li>

      <div class="date">
        <p><em class="date">07.04.2023</em></p>
        <p><a href="/day-2/day-2.html">Day Two Page</a></p>
      </div>
      <li>
        Yesterday we looked into what HTML is - a hypertext markup language. We
        will look into what hypertext is in a bit more detail today.
      </li>
      <li>
        We also looked at tags, which are page elements that tell the browser
        what to render.
      </li>
      <li>Tags have different attributes</li>
      <li>Our HTML has a structure which is html > head, body</li>
      <li>
        head is meta info or any additional info for our page that is not shown
        on the page. It is styles, scripts, meta information about translation
        or keywords, author etc.
      </li>
      <li>body is the elements on the page itself</li>
      <li>input teg with type text is a general input field</li>
      <li>img tag is the one that handles images</li>
      <li>
        We can also do it with background image, but that's not preferable
      </li>
      <li>
        We are now looking at accessibility things. Briefly touched on aria, but
        now looking at alt attribute for images.
      </li>
      <li>
        alt attribute is a text that appears when an image cannot load or the
        one that a screenreader will read
      </li>
      <li>
        Now looking at links. We need to add a link to an original article to
        our page.
      </li>
      <li>Link to an article added</li>
      <li>
        a tag stands for anchor, meaning we throw that anchor somewhere and we
        get to that place.
      </li>
      <li>br tag is break line, an empty tag that just makes a new line</li>
      <li>
        Anchor tag will not work without an href attribute. An href attribute
        stands for hypertext reference, it is a destination of our link.
      </li>
      <li>
        Link tags also have one very useful attribute which is called target
      </li>
      <li>
        target attribute is the one that specifies where our link will be
        opened. Its most common values are _blank - opens in new tab, _self -
        replicates the default behavior and opens in the same tab
      </li>
      <li>Oooh, now we'll look into HTML validators, that's exciting</li>
      <li>
        <a href="https://validator.w3.org/nu/#textarea">Here</a>'s a good one, I
        used it and it adviced me to change the lang property to Ukrainian, as
        our page was written in Ukrainian. That's useful!
      </li>
      <li>
        Now looking into hreflang attribute, its used to specify several page
        languages and depending on the system language it will somehow choose
        the right one. I should dive into it a bit deeper.
      </li>
      <li>
        Structure of our website looks good, but now gotta look into a footer
        element
      </li>
      <li>
        A footer element is like a basement of a site with useful resources,
        links, additional info about company/author etc.
      </li>
      <li>
        We already know the div element, it can be a container for our elements.
        It is a universal general element, a box.
      </li>
      <li>
        For our HTML elements we need for them to make sense. That's what the
        semantic HTML and tags are for.
      </li>
      <li>HTML5 brought in the semantics</li>
      <li>
        Semantics is the meaning of the word. Semantic tags are the ones that
        have some sense
      </li>
      <li>
        Browser still considers the semantic tags just like any other ones, they
        won't show up any different
      </li>
      <li>
        But if we want to actually nicely structure our site, we need to explain
        our browser that our blocks have some sense. For example at the top we
        have the essential info for our site visitors.
      </li>
      <li>
        nav is our navigation. It can be anywhere and look whatever, but we need
        to explain the browser or developers that this is a section for
        navigation.
      </li>
      <li>
        Якщо в нас є сайт з продажу кондиціонерів і один з них називається
        папуга. Якшо ми просто натикаємо цю назву будь де, пошуковик буде
        показувати наш сайт людям, які шукали National Geographics
      </li>
      <li>Our page should be structured into certain logical blocks.</li>
      <li>
        header tag is where our site title is located. It can also be used in
        some section to indicate that it is a header of this section.
      </li>
      <li>General structure looks like</li>
      <li>We have a main tag that indicates all the main text is in it</li>
      <li>
        Semantics now make perfect sense. If we have a museum, its address, when
        a person will look for it, will be searched for by a browser in a
        footer, or a header.
      </li>
      <li>
        With CSS we can do <strong>anything</strong> from anything. But we need
        our search engine and browser to explain that this is a header and this
        is a button, not a div with class header and a div with class button
      </li>
      <li>
        Semantic HTML is important, but when we have a framework with dynamic
        rendering it is not as necessary
      </li>

      <h3 class="recap">Recap</h3>
      <li>We recaped our last class a bit</li>
      <li>Looked at different tag elements</li>
      <li>Links in particular</li>
      <li>
        And also touched on semantics, which is a crucial concept in HTML that
        everyone should follow
      </li>
      <li>
        Yeah, I remembered, we were mostly talking about providing semantic
        meaning to our HTML pages and on the next lesson we will be going over
        on how to style those elements.
      </li>

      <div class="date">
        <p><em class="date">10.04.2023</em></p>
        <p><a href="/day-3/day-3.html">Daily Page</a></p>
      </div>
      <li>Today we'll be looking at styles, finally</li>
      <li>Styles are definded with a different language called CSS</li>
      <li>CSS stands for Cascading StyleSheets</li>
      <li>HTML is a skeleton of a parrot, and CSS is its feathers</li>
      <li>
        CSS only regulates how an element looks, it doesn't add any new ones
      </li>
      <li>So, how to link CSS to our documents</li>
      <li>
        Emmet has lorem built-in, you can just type lorem and nubmer of words
        and it'll generate it
      </li>
      <li>CSS is a language for describing how things look</li>
      <li>CSS is used for documents styling</li>
      <li>How can we link our CSS?</li>
      <li>
        We can use external styles, meaning we can link some .css file and it
        will do
      </li>
      <li>Then, we can style our document right in the head element</li>
      <li>
        And also, we can style elements <em>inline</em>, meaning styling exact
        elements on their own
      </li>
      <li>Inline styles are to be avoided at all cost</li>
      <li>
        Styles and HTML documents are linked via a link attribute in the head
        element
      </li>
      <li>
        We have 3 options on how to add our styles. All of those have different
        importance. Inline styles overwrite any other style. In-document styles
        overwrite (probably) the external styles, not sure.
      </li>
      <li>
        Oh, no, they don't. They just relate to only the current page that they
        are written in.
      </li>
      <li>
        So, external styles is a no-brainer pretty much, so don't even worry
        about it.
      </li>
      <li>It is the best one because it is reusable</li>
      <li>Reusability is the key when it comes to an adequate UI</li>
      <li>
        Modern UIs are kind of alike: they don't have much colors, certain
        styles and properties look similar between the pages
      </li>
      <li>
        We have the term called reusability - to write some styles ones and just
        is them wherever we want.
      </li>
      <li>Gotta keep that concept in mind</li>
      <li>
        DRY is another principle, stands for Don't Repeat Yourself. Meaning if
        you write code several times, there's already room for improvement.
      </li>
      <li>Inline styles are useful when using JS</li>
      <li>
        Styles overlap each other due to cascadity, we'll talk about that later
        on.
      </li>
      <li>CSS syntax is based on rules</li>
      <li>Rule identify some properties that apply to the selector</li>
      <li>
        We need to specify the selector and the rules for it in the curly braces
      </li>
      <li>
        After each property we need to place a semicolon, but Prettier handles
        it as well
      </li>
      <li>
        Selector is a certain property that indicates what element we will be
        styling
      </li>
      <li>It means what element we'll apply styles for</li>
      <li>
        Tags can be selectors. In this case if we say that P has a color of
        something, all P elements will have it
      </li>
      <li>To separate some elements, we can use classes or IDs</li>
      <li>
        ID is a unique name for an element, must be unique throughout the page
      </li>
      <li>
        We can use it to select an element with #idName selector in CSS.
        Remember to place # in front of the selector
      </li>
      <li>Comments differ from CSS to HTML</li>
      <li>Like we said, ID is unique for a page</li>
      <li>ID is not used as a selector too often</li>
      <li>Classses are used as selectors in 90% of situations</li>
      <li>Class unifies some elements with common properties</li>
      <li>
        When selector for an ID starts with #, a class selector starts with .
      </li>
      <li>
        Class styles are highly reusable, you can assign classes to whatever
        element you want. You can also assign multiple classes, just separate
        them with a space between
      </li>
      <li>Different selectors have different weight</li>
      <li>Tag selector weighs the least amongst other selectors</li>
      <li>ID selector weighs the most amongst the selectors</li>
      <li>Cascade is like a waterfall</li>
      <li>The thing we'll see on the screen is what is lower</li>
      <li>Cascading is about overwriting existing styles</li>
      <li>CSS color property is for text color</li>
      <li>CSS background-color is for, well, background color</li>
      <li>There are different sizes of fonts</li>
      <li>
        The easiest ones is PX which is pixel, very static and not convenient
      </li>
      <li>Another one is PT or points</li>

      <div class="date">
        <p><em class="date">11.04.2023</em></p>
        <p><a href="/day-4/day-4.html">Daily Page</a></p>
      </div>
      <li>Yesterday we were going over CSS selectors</li>
      <li>Selectors are certain properties that help us</li>
      <li>Today we'll be doing a resume for a cat! SHEEESH</li>
      <li>
        Alright, we've added some stuff, I tried to style it but gotta write
        some stuff down, we're looking at trees data srtucture now somehow :D
      </li>
      <li>
        Yeah, we're actually looking at elements hierarchy of our page. The
        teacher wrote a tree with elements, I'll paste an image not
      </li>
      <li>
        <img
          src="https://photos.app.goo.gl/SZFE8CwG7SZh5a7bA"
          alt="Couldn't open"
        />
      </li>
      <li>
        Parent elements are called parent elements and their inherited elements
        are called sibilings
      </li>
      <li>
        So, the underline here is that all elements inherit properties of their
        parent elements. If we have a body element and say that its color is
        red, then all of elements in body element will have red color
      </li>
      <li>Border is a shortcut for several CSS properties</li>
      <li>Object-fit property is very useful</li>
      <li>The most useful values are contain, fill and cover</li>
      <li>
        We can also fix our position of the cut-down element by using the
        object-position property, very nice
      </li>
      <li>
        Regarding the borders, I kinda got carried away with styling my blocks
        for day 4 page
      </li>
      <li>So, border value structure is as follows: width type color</li>
      <li>
        Width is just a regular numbered value, it can accept any number and any
        type
      </li>
      <li>
        Types can be the following: solid, dashed, dotted, double, groove.
        Groove kinda adds a 3D look to our border, and other ones are
        self-explanatory
      </li>
      <li>
        Now a resting 5 mins and then background and background images, hell
        yeah
      </li>
      <li>Okay, now we wanna have our image to the side of our headings</li>
      <li>
        Elements divide into two types: inline and block elements. I don't think
        that's actually the only 2 types, I heard of something like inline-block
        and something else, but whatever
      </li>
      <li>
        Span element is inline container and div element is block container
      </li>
      <li>
        Inline elements are jewel beads, we can add them back to back. Meaning
        we can integrate inline elements into block elements
      </li>
      <li>Block elements take up full width</li>
      <li>We can change the type of element with display property</li>
      <li>
        Display property allows us to change the way our element works. Block
        elements can easily become inline and vice versa
      </li>
      <li>Image element is inline as well</li>
      <li>
        Hmm... They said that working with floats is not recommended as it's
        kind of a deprecated technology. Well I can see why though, I will
        definitely use flex once I learn it today or tomorrow.
      </li>
      <li>We can specify background color for our page</li>
      <li>
        We can also use gradients as our background color. It is a CSS function.
        We should almost always or always use gradient generators
      </li>
      <li>
        Gradient generators also include fallback properties for situations when
        a browser, for some reason, doesn't support our gradient, it will at
        least show our initial color
      </li>
      <li>
        Oh, and background colors can also be set with only a background
        property
      </li>
      <li>Besides background color we can have a background image</li>
      <li>
        We can insert images with img tags and we can also insert them with
        background image
      </li>
      <li>
        To add a background image we can add a CSS property called
        background-image
      </li>
      <li>
        It takes on an image path as a value, and it takes it using url function
      </li>
      <li>
        URL function in CSS just takes our path for an image or something else
      </li>
      <li>
        Regarding the background instead of background-color. As it turns out it
        is also a shorthand property that includes some more values, we'll find
        out which ones now
      </li>
      <li>
        A shorthand for attachment, clip, color, image, origin, position, repeat
        and size
      </li>
      <li>Background image by defaul shows the top left part of our image</li>
      <li>To change that we haev a background-position property</li>
      <li>
        It takes up same values as object-fit property, left, right, bottom, top
        and something else
      </li>
      <li>
        We can also change the size of our background by using background-size
        property
      </li>
      <li>It takes auto, contain, cover, inherit, initial, revert</li>
      <li>
        Background attachment property is another one that allows us to make
        PARALAX effect wuuut
      </li>
      <li>I didn't imagine we will intorduce this stuff this quickly, wow</li>
      <li>That's actually exciting</li>
      <li>
        We have background-blend. It can help mix up our image and background
        color in different ways
      </li>
      <li>inline-block value is something inbetween</li>

      <div class="date">
        <p><em class="date">12.04.2023</em></p>
        <p><a href="/day-5/day-5.html">Daily Page</a></p>
      </div>
      <li>
        Yesterday we were going over a bit of block and inline level elements
      </li>
      <li>
        TODO: Make a scroll to top button with absolute position at the bottom
        right corner
      </li>
      <li>
        Now we're going over the box model, but I kinda learned it in my course,
        so lets see
      </li>
      <li>So, each block or a box contains of the following stuff</li>
      <li>A content itself</li>
      <li>DIV is a universal block level container</li>
      <li>SPAN is a universal inline level container</li>
      <li>Alright, about the box model</li>
      <li>A box has content, padding, border and margin</li>
      <li>
        Internal indentations are padding, external ones are margin and border
        is inbetween
      </li>
      <li>Paragraphs by default have default paddings</li>
      <li>
        We shouldn't care much about default indentations, as we use CSS resets
        almost always now
      </li>
      <li>When we have two elements one after another, margins can clash</li>
      <li>When margins do clash, the greater one is chosen</li>
      <li>
        Paddings have nothing to do with margin clashing though, so we can
        easily set paddings when we have margings
      </li>
      <li>Not entirely sure how that works, but whatever</li>
      <li>
        Yeah, so when we have clashing margins, the greater one is chosen and it
        is set
      </li>
      <li>Any indentations we can edit in any time</li>
      <li>Both padding and margin have their shorthand properties</li>
      <li>
        So, both margin and padding share their shorthand propery and it is as
        follows: top right bottom left
      </li>
      <li>Meaning it just goes around clockwise</li>
      <li>
        Oh, yeah, for both padding and margin we have three options for
        shorthand
      </li>
      <li>Four values is default: top right bottom left</li>
      <li>Two values is: top-bottom, right-left</li>
      <li>One value: for all</li>
      <li>
        We can change block size by specifying the width and height properties
      </li>
      <li>Width and height both can take in all the units as well</li>
      <li>Also, when we have fixed size, our content can overflow</li>
      <li>
        We can fix it by not explicitly specifying the height of an element
      </li>
      <li>This will help the height adapt for the content</li>
      <li>
        We can also probably use the overflow hide property or whatever its
        called
      </li>
      <li>We can also make an element scrollable</li>
      <li>Oh yeah, and we now look at overflow property</li>
      <li>It is called overflow indeed</li>
      <li>
        Making a scrollbar on an element is actually very easy - we explicitly
        state the size of our box and we just set overflow: scroll property to
        it, very easy, very nice
      </li>
      <li>
        To remove the vertical scrollbar we can state the overflow-x property to
        hidden
      </li>
      <li>Overflow is actually a very useful one, gotta dig into it</li>
      <li>
        Block level elements try to fit the content and when the size is
        explicit, it overflows. Internal indents are padding, extrnals - margin
      </li>
      <li>
        When we apply padding to an inline element, it only applies on X axis
      </li>
      <li>
        This also applies to margin, they both only apply to X axis of our span
        element
      </li>
      <li>Y axis indentations don't work for inline elements</li>
      <li>
        Oooh, so if we want to change that behavior in inline elements I think
        we need to apply this mysterious inline-block property, I think
      </li>
      <li>Maybe not :D</li>
      <li>Maybe just change it to block and call it LUL</li>
      <li>
        Yeah, the inline block is it. It is kind of the best of both worlds
      </li>

      <div class="date">
        <p><em class="date">12.04.2023</em></p>
        <p><a href="/day-6/day-6.html">Daily Page</a></p>
      </div>
      <li>Now we're talking about page flow</li>
      <li>We can change the default flow using a position property</li>
      <li>It takes the following values</li>
      <li>Static - it is the default behavior for our element and it doesnt</li>
      <li>
        Relative - is positioned relative to its normal position. Any other
        elements behave like its left at that place
      </li>
      <li>
        Fixed - Literally fixed somewhere on the page. Top right left bottom are
        relative to the screen. Meaning if we say top 10px it will be 10px from
        the bottom
      </li>
      <li>Absolute - positioned relative to its parrent element</li>
      <li>Sticky - липкий, best used with headers on top or some sidebars</li>

      <div class="date">
        <p><em class="date">18.04.2023</em></p>
        <p><a href="/day-8/day-8.html">Daily Page</a></p>
      </div>
      <li></li>
    </ul>
  </body>
</html>