Projekt: Prosta strona wizytówka (one-page)

Preview Mode

You're viewing this material in preview mode. Sign up to track your progress and access all features.

Sign Up Free Login
Projekt: Prosta strona wizytówka (one-page)
In Progress

Stworzenie prostej strony wizytówki

Teraz pora zastosować zdobyte wiadomości w praktyce — poniżej znajdziesz semantyczny szablon i wskazówki, jak zrealizować jednostronicową stronę typu „wizytówka”. Instrukcja oparta na materiałach kursu .

1. Struktura HTML strony

Wykorzystaj semantyczne elementy, aby kod był czytelny dla ludzi i maszyn. Przykładowa struktura:

<!-- Nagłówek strony -->
<header id="top">
  <div class="brand">
    <img src="logo.png" alt="Moje Logo" height="50">
    <h1>Nazwa Firmy / Osoby</h1>
    <p class="tagline">Krótki slogan lub opis</p>
  </div>
  <nav>
    <ul>
      <li><a href="#about">O mnie</a></li>
      <li><a href="#offer">Oferta</a></li>
      <li><a href="#gallery">Galeria</a></li>
      <li><a href="#contact">Kontakt</a></li>
    </ul>
  </nav>
</header>

<main>
  <!-- Sekcja O mnie -->
  <section id="about">
    <h2>O mnie</h2>
    <div class="about-inner">
      <img src="portrait.jpg" alt="Zdjęcie portretowe" class="portrait">
      <div class="about-text">
        <p>Kilka zdań, kim jesteś, czym się zajmujesz, misja firmy itp.</p>
      </div>
    </div>
  </section>

  <!-- Sekcja Oferta -->
  <section id="offer">
    <h2>Oferta / Umiejętności</h2>
    <ul>
      <li>Usługa lub umiejętność 1</li>
      <li>Usługa lub umiejętność 2</li>
      <li>Usługa lub umiejętność 3</li>
    </ul>
  </section>

  <!-- Sekcja Galeria -->
  <section id="gallery">
    <h2>Galeria</h2>
    <div class="gallery-grid">
      <img src="img1.jpg" alt="Opis zdjęcia 1" class="gallery-item">
      <img src="img2.jpg" alt="Opis zdjęcia 2" class="gallery-item">
      <img src="img3.jpg" alt="Opis zdjęcia 3" class="gallery-item">
      <!-- dodaj więcej zdjęć w razie potrzeby -->
    </div>
  </section>

  <!-- Sekcja Kontakt -->
  <section id="contact">
    <h2>Kontakt</h2>
    <form action="#" method="post">
      <label for="name">Imię / Nazwa</label>
      <input type="text" id="name" name="name" required>

      <label for="email">E-mail</label>
      <input type="email" id="email" name="email" required>

      <label for="message">Wiadomość</label>
      <textarea id="message" name="message" rows="6" required></textarea>

      <button type="submit">Wyślij</button>
    </form>
  </section>
</main>

<!-- Stopka -->
<footer>
  <p>&copy; 2025 Jan Kowalski</p>
  <p>
    <a href="#" aria-label="Facebook">📘 Facebook</a>
    <a href="#" aria-label="LinkedIn">🔗 LinkedIn</a>
  </p>
  <p><a href="#top">Wróć do góry</a></p>
</footer>

Uwagi do kodu

  • Każda sekcja ma unikalne id (np. about, offer, gallery, contact) — ułatwia to nawigację kotwiczną i stylowanie.
  • Dodaj atrybuty alt do wszystkich obrazków — to ważne dla dostępności.
  • Formularz jest front-endowy (action="#") — bez backendu nie będzie wysyłał danych.

2. Stylowanie CSS

Zalecane: zewnętrzny plik style.css podłączony w <head>.

<!-- Przykład wstawienia do sekcji head: -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">

Wskazówki stylów:

  • body: ustaw font-family, zresetuj marginesy (margin:0;padding:0;), ustaw color i background-color.
  • Nagłówek: użyj display:flex do wyrównania logo i nazwy, dodaj padding i kontrastujące tło.
  • Sekcje: każdej sekcji nadaj padding, użyj różnych tła (np. białe / jasnoszare) dla kontrastu; nagłówki sekcji niech mają subtelne border-bottom.
  • Galeria: zastosuj klasę wspólną dla obrazków (np. .gallery-item) z max-width:100% i układem flexbox (.gallery-grid { display:flex; flex-wrap:wrap; gap:16px; }).
  • Formularz: pola width:100% z ograniczeniem max-width:400px, etykiety blokowo nad polami, styl przycisku z efektem :hover i :focus.
  • Responsywność: jedna media query np. @media (max-width:600px) — zmiana kierunku flexa, zmniejszenie paddingów, kolumnowy układ obrazków i sekcji obraz+tekst jeden pod drugim.
/* Przykład prostych reguł */
body {
  font-family: "Segoe UI", Roboto, sans-serif;
  color: #333;
  background: #fff;
  margin: 0;
  line-height: 1.6;
}

header { background: #2b7; color: #fff; padding: 16px; }
.brand { display: flex; align-items: center; gap: 12px; }

.gallery-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.gallery-item { flex: 1 1 calc(33% - 12px); max-width: calc(33% - 12px); height: auto; }

@media (max-width:600px) {
  .gallery-item { flex: 1 1 100%; max-width: 100%; }
  .about-inner { flex-direction: column; }
}

3. Sprawdzenie i dopracowanie

Po napisaniu kodu otwórz stronę w przeglądarce i sprawdź:

  1. Czy wszystkie elementy są czytelne i układ nie „rozjeżdża się”.
  2. Czy obrazy skalują się poprawnie na małym ekranie (max-width:100%).
  3. Czy formularz jest wygodny do wypełnienia na telefonie (pola nie są za małe).
  4. Czy dodałeś meta viewport w sekcji head.
  5. Skorzystaj z walidatora HTML (validator.w3.org) oraz narzędzi deweloperskich przeglądarki (symulacja urządzeń mobilnych).

Efekty dodatkowe (opcjonalne)

  • Hover dla linków i obrazków (:hover, transform: scale(1.05)).
  • Akcentowanie aktywnego elementu menu (klasa .active).
  • Proste animacje wejścia (np. transition dla efektu powiększenia obrazka).

Ten projekt podsumowuje podstawy HTML i CSS: semantyczne znaczniki, listy, obrazy, formularze oraz podstawy responsywności. Powodzenia w kodowaniu wizytówki — kreatywność mile widziana!

Sign up to track your progress