CodeWorlds

Kurs HTML i CSS · Moduł 4: Flexbox

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

4 min czytania ·
W tej lekcji7

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.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css"> <!-- Podłącz plik CSS -->
  <title>Moja Strona WWW</title>
</head>
<body>
  <header class="header">
    <h1>Moja Strona WWW</h1>
    <nav class="nav">
      <ul>
        <li><a href="#">Strona główna</a></li>
        <li><a href="#">O nas</a></li>
        <li><a href="#">Usługi</a></li>
        <li><a href="#">Kontakt</a></li>
      </ul>
    </nav>
  </header>
  <main class="main">
    <section class="content">
      <h2>Witamy na naszej stronie</h2>
      <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>
    </section>
    <aside class="sidebar">
      <h2>Aktualności</h2>
      <p>Najświeższe informacje o naszej firmie i branży.</p>
    </aside>
  </main>
  <footer class="footer">
    <p>&copy; 2023 Moja Strona WWW. Wszelkie prawa zastrzeżone.</p>
  </footer>
</body>
</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.

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f0f0f0;
}

.header {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}

.nav ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

.nav li {
  margin: 0 15px;
}

.nav a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

.main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20px;
  background-color: #fff;
}

.content {
  flex: 1;
  min-width: 60%;
  padding: 20px;
}

.sidebar {
  flex: 1;
  min-width: 30%;
  padding: 20px;
  background-color: #f9f9f9;
}

.footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px;
  position: absolute;
  bottom: 0;
  width: 100%;
}

Krok 4: Dodaj Media Queries dla Responsywności

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

@media (max-width: 768px) {
  .main {
    flex-direction: column;
  }

  .content, .sidebar {
    min-width: 100%;
    margin-bottom: 20px;
  }

  .footer {
    position: static;
  }
}

Krok 5: Finalizacja

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

Plik HTML (index.html)

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css"> <!-- Podłącz plik CSS -->
  <title>Moja Strona WWW</title>
</head>
<body>
  <header class="header">
    <h1>Moja Strona WWW</h1>
    <nav class="nav">
      <ul>
        <li><a href="#">Strona główna</a></li>
        <li><a href="#">O nas</a></li>
        <li><a href="#">Usługi</a></li>
        <li><a href="#">Kontakt</a></li>
      </ul>
    </nav>
  </header>
  <main class="main">
    <section class="content">
      <h2>Witamy na naszej stronie</h2>
      <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>
    </section>
    <aside class="sidebar">
      <h2>Aktualności</h2>
      <p>Najświeższe informacje o naszej firmie i branży.</p>
    </aside>
  </main>
  <footer class="footer">
    <p>&copy; 2023 Moja Strona WWW. Wszelkie prawa zastrzeżone.</p>
  </footer>
</body>
</html>

Plik CSS (styles.css)

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f0f0f0;
}

.header {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}

.nav ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

.nav li {
  margin: 0 15px;
}

.nav a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

.main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20px;
  background-color: #fff;
}

.content {
  flex: 1;
  min-width: 60%;
  padding: 20px;
}

.sidebar {
  flex: 1;
  min-width: 30%;
  padding: 20px;
  background-color: #f9f9f9;
}

.footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px;
  position: absolute;
  bottom: 0;
  width: 100%;
}

@media (max-width: 768px) {
  .main {
    flex-direction: column;
  }

  .content, .sidebar {
    min-width: 100%;
    margin-bottom: 20px;
  }

  .footer {
    position: static;
  }
}

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:

Kod do tej lekcji: index.html
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox - Align Self</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Align Self - Indywidualne wyrównanie</h1>
        <p class="subtitle">Nadpisz align-items dla pojedynczych elementów</p>

        <section class="demo-section">
            <h2>Jeden element wyrównany inaczej</h2>
            <div class="flex-container">
                <div class="flex-item">Normal</div>
                <div class="flex-item self-start">align-self: flex-start</div>
                <div class="flex-item">Normal</div>
            </div>
            <p class="description">Środkowy element wyrównany do góry niezależnie od reszty</p>
        </section>

        <section class="demo-section">
            <h2>Wszystkie właściwości align-self</h2>
            <div class="flex-container tall">
                <div class="flex-item self-auto">auto (dziedziczy)</div>
                <div class="flex-item self-start">flex-start</div>
                <div class="flex-item self-center">center</div>
                <div class="flex-item self-end">flex-end</div>
                <div class="flex-item self-stretch">stretch</div>
                <div class="flex-item self-baseline">baseline</div>
            </div>
            <p class="description">Każdy element z innym wyrównaniem</p>
        </section>

        <section class="demo-section practice">
            <h2>Praktyka: Egipska procesja</h2>
            <p class="practice-description">Faraon i jego poddani w procesji - każdy na swoim poziomie</p>

            <div class="procession">
                <div class="person peasant">
                    <div class="figure">◉</div>
                    <div class="label">Chłop</div>
                </div>

                <div class="person scribe">
                    <div class="figure">◉</div>
                    <div class="label">Skryba</div>
                </div>

                <div class="person pharaoh">
                    <div class="figure">◉</div>
                    <div class="label">Faraon</div>
                </div>

                <div class="person priest">
                    <div class="figure">◉</div>
                    <div class="label">Kapłan</div>
                </div>

                <div class="person warrior">
                    <div class="figure">◉</div>
                    <div class="label">Wojownik</div>
                </div>

                <div class="person servant">
                    <div class="figure">◉</div>
                    <div class="label">Sługa</div>
                </div>
            </div>

            <div class="legend">
                <h3>Hierarchia społeczna:</h3>
                <ul>
                    <li><span class="status pharaoh-status">Faraon</span> - najwyższy (flex-end)</li>
                    <li><span class="status priest-status">Kapłan</span> - wysoki (center-high)</li>
                    <li><span class="status scribe-status">Skryba</span> - średni (center)</li>
                    <li><span class="status warrior-status">Wojownik</span> - średni-niski (center-low)</li>
                    <li><span class="status peasant-status">Chłop</span> - niski (flex-start)</li>
                    <li><span class="status servant-status">Sługa</span> - najniższy (stretch)</li>
                </ul>
            </div>
        </section>
    </div>
</body>
</html>

Hasła z dokumentacji w tej lekcji

Widzisz błąd w tej lekcji?

Przydatne artykuły

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