Używamy cookies, żeby zwiększyć Twoje doświadczenia na stronie
Polityka Prywatności
OK
CodeWorlds

Zadanie Główne: Wirtualna Świątynia Flexbox

Czas na główne zadanie modułu! Jak Mohamed mówi: "Prawdziwy architekt potrafi zbudować pełną świątynię, łącząc wszystkie poznane techniki." W tym zadaniu stworzysz pełną stronę internetową z nagłówkiem, nawigacją, główną sekcją i stopką - wszystko zbudowane za pomocą Flexboxa. Struktura strony będzie responsywna i elastyczna, jak plan idealnej egipskiej świątyni.

Krok 1: Stwórz podstawową strukturę dokumentu HTML

Utwórz nowy plik HTML i dodaj podstawową strukturę dokumentu HTML. Dodaj elementy 

<header>
, 
<nav>
, 
<main>
i 
<footer>
, aby utworzyć sekcje strony.

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Podłącz plik CSS -->
7  <title>Moja Strona WWW</title>
8</head>
9<body>
10  <header class="header">
11    <h1>Moja Strona WWW</h1>
12    <nav class="nav">
13      <ul>
14        <li><a href="#">Strona główna</a></li>
15        <li><a href="#">O nas</a></li>
16        <li><a href="#">Usługi</a></li>
17        <li><a href="#">Kontakt</a></li>
18      </ul>
19    </nav>
20  </header>
21  <main class="main">
22    <section class="content">
23      <h2>Witamy na naszej stronie</h2>
24      <p>To jest przykładowy tekst w głównej sekcji strony. Możesz tu dodać więcej informacji o swojej firmie, produktach lub usługach.</p>
25    </section>
26    <aside class="sidebar">
27      <h2>Aktualności</h2>
28      <p>Najświeższe informacje o naszej firmie i branży.</p>
29    </aside>
30  </main>
31  <footer class="footer">
32    <p>&copy; 2023 Moja Strona WWW. Wszelkie prawa zastrzeżone.</p>
33  </footer>
34</body>
35</html>

Krok 2: Stwórz plik CSS

Otwórz lub utwórz nowy plik CSS i zapisz go jako 

styles.css
.

Krok 3: Stylizacja podstawowa

Dodaj podstawowe style dla elementów 

.header
, 
.nav
, 
.main
, 
.content
, 
.sidebar
i 
.footer
.

1body {
2  font-family: Arial, sans-serif;
3  margin: 0;
4  padding: 0;
5  background-color: #f0f0f0;
6}
7
8.header {
9  background-color: #333;
10  color: #fff;
11  padding: 20px;
12  text-align: center;
13}
14
15.nav ul {
16  list-style-type: none;
17  padding: 0;
18  display: flex;
19  justify-content: center;
20}
21
22.nav li {
23  margin: 0 15px;
24}
25
26.nav a {
27  color: #fff;
28  text-decoration: none;
29  font-weight: bold;
30}
31
32.main {
33  display: flex;
34  flex-wrap: wrap;
35  justify-content: space-between;
36  padding: 20px;
37  background-color: #fff;
38}
39
40.content {
41  flex: 1;
42  min-width: 60%;
43  padding: 20px;
44}
45
46.sidebar {
47  flex: 1;
48  min-width: 30%;
49  padding: 20px;
50  background-color: #f9f9f9;
51}
52
53.footer {
54  background-color: #333;
55  color: #fff;
56  text-align: center;
57  padding: 10px;
58  position: absolute;
59  bottom: 0;
60  width: 100%;
61}

Krok 4: Dodaj Media Queries dla Responsywności

Aby strona była responsywna, dodaj media queries, aby dostosować układ na mniejszych ekranach.

1@media (max-width: 768px) {
2  .main {
3    flex-direction: column;
4  }
5
6  .content, .sidebar {
7    min-width: 100%;
8    margin-bottom: 20px;
9  }
10
11  .footer {
12    position: static;
13  }
14}

Krok 5: Finalizacja

Po wykonaniu wszystkich kroków twój plik HTML i CSS powinny wyglądać następująco:

Plik HTML (index.html)

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Podłącz plik CSS -->
7  <title>Moja Strona WWW</title>
8</head>
9<body>
10  <header class="header">
11    <h1>Moja Strona WWW</h1>
12    <nav class="nav">
13      <ul>
14        <li><a href="#">Strona główna</a></li>
15        <li><a href="#">O nas</a></li>
16        <li><a href="#">Usługi</a></li>
17        <li><a href="#">Kontakt</a></li>
18      </ul>
19    </nav>
20  </header>
21  <main class="main">
22    <section class="content">
23      <h2>Witamy na naszej stronie</h2>
24      <p>To jest przykładowy tekst w głównej sekcji strony. Możesz tu dodać więcej informacji o swojej firmie, produktach lub usługach.</p>
25    </section>
26    <aside class="sidebar">
27      <h2>Aktualności</h2>
28      <p>Najświeższe informacje o naszej firmie i branży.</p>
29    </aside>
30  </main>
31  <footer class="footer">
32    <p>&copy; 2023 Moja Strona WWW. Wszelkie prawa zastrzeżone.</p>
33  </footer>
34</body>
35</html>

Plik CSS (styles.css)

1body {
2  font-family: Arial, sans-serif;
3  margin: 0;
4  padding: 0;
5  background-color: #f0f0f0;
6}
7
8.header {
9  background-color: #333;
10  color: #fff;
11  padding: 20px;
12  text-align: center;
13}
14
15.nav ul {
16  list-style-type: none;
17  padding: 0;
18  display: flex;
19  justify-content: center;
20}
21
22.nav li {
23  margin: 0 15px;
24}
25
26.nav a {
27  color: #fff;
28  text-decoration: none;
29  font-weight: bold;
30}
31
32.main {
33  display: flex;
34  flex-wrap: wrap;
35  justify-content: space-between;
36  padding: 20px;
37  background-color: #fff;
38}
39
40.content {
41  flex: 1;
42  min-width: 60%;
43  padding: 20px;
44}
45
46.sidebar {
47  flex: 1;
48  min-width: 30%;
49  padding: 20px;
50  background-color: #f9f9f9;
51}
52
53.footer {
54  background-color: #333;
55  color: #fff;
56  text-align: center;
57  padding: 10px;
58  position: absolute;
59  bottom: 0;
60  width: 100%;
61}
62
63@media (max-width: 768px) {
64  .main {
65    flex-direction: column;
66  }
67
68  .content, .sidebar {
69    min-width: 100%;
70    margin-bottom: 20px;
71  }
72
73  .footer {
74    position: static;
75  }
76}

Zadanie dodatkowe

  1. Dodaj więcej sekcji do głównej treści, takie jak dodatkowe artykuły lub galerie obrazów.
  2. Przetestuj swoje umiejętności, dodając więcej elementów do nawigacji i dostosowując je do mniejszych ekranów.
  3. Dodaj różne style do swojej strony, np. zmieniając kolory, rozmiary czcionek i inne właściwości elementów, aby lepiej zrozumieć, jak działają różne opcje CSS.
  4. Dodaj animacje do nawigacji i innych elementów strony, aby dodać interaktywność i lepsze doświadczenie użytkownika.

Podsumowanie modułu Flexbox

W tym module poznałeś kompletny zestaw narzędzi Flexbox:

  • display: flex
     - aktywacja Flexboxa na kontenerze
  • flex-direction
     - kierunek osi głównej (row, column, row-reverse, column-reverse)
  • justify-content
     - rozmieszczanie na osi głównej
  • align-items
     - wyrównywanie na osi poprzecznej
  • flex-wrap
     - zawijanie elementów do nowych linii
  • gap
     - odstępy między elementami
  • flex-grow
    , 
    flex-shrink
    , 
    flex-basis
     - kontrola rozmiaru elementów
  • order
     - zmiana kolejności wizualnej
  • align-self
     - indywidualne wyrównanie elementu

Flexbox to potężne narzędzie, które pozwala tworzyć elastyczne layouty bez konieczności używania float, position czy skomplikowanych hacków. Jak mawiają architekci piramid: "Elastyczność w planowaniu to klucz do trwałej konstrukcji!"

Stwórz swoją stronę w edytorze poniżej:

Przejdź do CodeWorlds→